:root {
    --sub-primary: #0891b2;
    --sub-secondary: #7c3aed;
    --sub-dark: #0f172a;
    --sub-content-width: 820px;
}

html { overflow-x: clip; }

body.sub-page {
    background: linear-gradient(160deg, #ecfeff 0%, #f5f3ff 45%, #e0f2fe 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 100%;
    overflow-x: clip;
}

.sub-hero {
    background-color: var(--sub-dark);
    background-image: linear-gradient(rgba(8, 14, 32, 0.78), rgba(8, 14, 32, 0.82)), url('/kingdom.jpg');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 3.5rem 1.25rem 3rem;
    text-align: center;
    border-bottom: 3px solid #06b6d4;
}

.sub-hero h1 {
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    margin-bottom: 0.75rem;
}

.sub-hero .lead {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    opacity: 0.95;
    max-width: 720px;
    margin: 0 auto 1.5rem;
}

.sub-hero-intro {
    margin-bottom: 1.75rem;
}

.sub-hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin: 0 auto;
    width: 100%;
    max-width: var(--sub-content-width);
}

.sub-hero-img-btn,
.sub-showcase-img-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    border-radius: 16px;
    overflow: hidden;
}

.sub-hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.sub-hero-cta {
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.sub-zoom-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.sub-hero-img-btn:hover .sub-zoom-hint,
.sub-showcase-img-btn:hover .sub-zoom-hint {
    opacity: 1;
}

.sub-cta-button {
    display: inline-block;
    background: linear-gradient(135deg, var(--sub-primary), var(--sub-secondary));
    color: #fff !important;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 14px 32px;
    border-radius: 50px;
    border: none;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.sub-cta-button:hover {
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.35);
}

.sub-cta-link {
    color: var(--sub-primary);
    font-weight: 700;
    text-decoration: none;
}

.sub-cta-link:hover { color: var(--sub-secondary); }

.sub-purchase-section {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1);
    padding: 2.5rem 1.5rem;
    margin: -2rem auto 3rem;
    max-width: var(--sub-content-width);
    position: relative;
    z-index: 2;
}

.sub-purchase-section h2 {
    color: var(--sub-dark);
    font-weight: 800;
}

.variation-option {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 10px 0;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.variation-option:hover {
    border-color: var(--sub-primary);
    background: #f0fdfa;
}

.variation-option.selected {
    border-color: var(--sub-primary);
    background: #ecfeff;
    box-shadow: 0 4px 16px rgba(8, 145, 178, 0.15);
}

.price-display {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--sub-primary);
}

.sub-ref-upload {
    background: #f8fafc;
    border: 2px dashed #94a3b8;
    border-radius: 14px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    text-align: center;
}

.sub-ref-upload h5 { font-weight: 800; color: var(--sub-dark); margin-bottom: 0.35rem; }

.sub-ref-code-display {
    display: inline-block;
    font-family: ui-monospace, monospace;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--sub-secondary);
    background: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.sub-ref-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.sub-ref-dropzone:hover, .sub-ref-dropzone.dragover {
    border-color: var(--sub-primary);
    background: #ecfeff;
}

.sub-ref-dropzone.is-full { opacity: 0.65; cursor: not-allowed; }

.sub-ref-dropzone i { font-size: 2rem; color: var(--sub-primary); display: block; margin-bottom: 0.5rem; }

.sub-ref-preview { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1rem; }

.sub-ref-preview-item { position: relative; width: 72px; height: 72px; }

.sub-ref-preview-item img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 8px; border: 2px solid #e2e8f0; cursor: pointer;
}

.sub-ref-preview-remove {
    position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #dc3545; color: #fff; border: none;
    font-size: 14px; line-height: 1; cursor: pointer;
}

.sub-ref-count { margin-top: 0.5rem; font-size: 0.9rem; color: #64748b; }
.sub-ref-upload-status { margin-top: 0.75rem; font-size: 0.9rem; }
.sub-ref-upload-status.success { color: #198754; }
.sub-ref-upload-status.error { color: #dc3545; }

.sub-content-section { padding: 3rem 0; }
.sub-content-section--alt { background: rgba(255,255,255,0.55); }

.sub-content-card {
    background: #fff;
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    border: 1px solid #e2e8f0;
}

.sub-content-card h2, .sub-content-card h3 { color: var(--sub-dark); font-weight: 800; }

.sub-showcase { padding: 2.5rem 0; }

.sub-showcase-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.sub-showcase-row.reverse { flex-direction: row-reverse; }

.sub-showcase-img { flex: 1 1 45%; min-width: 260px; }

.sub-showcase-img-btn img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
    display: block;
}

.sub-image-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.sub-image-modal.is-open {
    display: flex;
}

.sub-image-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 14, 32, 0.92);
    cursor: zoom-out;
}

.sub-image-modal__dialog {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1200px);
    max-height: 96vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.sub-image-modal__close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #0f172a;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

.sub-image-modal__close:hover {
    background: #f1f5f9;
}

.sub-image-modal__title {
    margin: 0;
    color: #e2e8f0;
    font-size: 0.9rem;
    text-align: center;
    max-width: 100%;
}

.sub-image-modal__img {
    max-width: min(96vw, 1200px);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* Animated SALE border around variation pricing (matches lighter wraps) */
.sale-size-frame {
    position: relative;
    max-width: 640px;
    margin: 10px auto 1.5rem;
    padding: 28px;
}

.sale-size-frame__content {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.97);
    border: 3px solid #dc3545;
    border-radius: 10px;
    padding: 1rem 0.75rem;
    box-shadow: 0 0 0 2px #fff, 0 0 20px rgba(220, 53, 69, 0.35);
}

.sale-size-frame__rail {
    position: absolute;
    background: #dc3545;
    color: #fff;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.sale-size-frame__rail span {
    display: inline-block;
    white-space: nowrap;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: sale-border-marquee 12s linear infinite;
}

@keyframes sale-border-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.sale-size-frame__rail--top,
.sale-size-frame__rail--bottom {
    left: 0;
    right: 0;
    height: 28px;
    line-height: 28px;
}

.sale-size-frame__rail--top {
    top: 0;
    border-radius: 10px 10px 0 0;
}

.sale-size-frame__rail--bottom {
    bottom: 0;
    border-radius: 0 0 10px 10px;
}

.sale-size-frame__rail--bottom span {
    animation-direction: reverse;
}

.sale-size-frame__rail--left,
.sale-size-frame__rail--right {
    top: 28px;
    bottom: 28px;
    width: 28px;
}

.sale-size-frame__rail--left {
    left: 0;
}

.sale-size-frame__rail--right {
    right: 0;
}

.sale-size-frame__rail--left span,
.sale-size-frame__rail--right span {
    position: absolute;
    left: 50%;
    top: 0;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: translateX(-50%);
    animation: sale-border-marquee-vertical 12s linear infinite;
}

.sale-size-frame__rail--right span {
    animation-direction: reverse;
}

@keyframes sale-border-marquee-vertical {
    0% { transform: translateX(-50%) translateY(0); }
    100% { transform: translateX(-50%) translateY(-50%); }
}

.sale-size-frame .variation-option {
    max-width: 100%;
}

.sub-showcase-text { flex: 1 1 40%; min-width: 260px; }

.sub-showcase-text h3 { font-weight: 800; color: var(--sub-dark); margin-bottom: 1rem; }

.sub-check-list { list-style: none; padding: 0; margin: 0; }

.sub-check-list li {
    padding: 0.35rem 0 0.35rem 1.75rem;
    position: relative;
}

.sub-check-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: #059669;
    font-weight: bold;
}

.sub-x-list { list-style: none; padding: 0; }

.sub-x-list li {
    padding: 0.25rem 0 0.25rem 1.75rem;
    position: relative;
}

.sub-x-list li::before {
    content: '✘';
    position: absolute;
    left: 0;
    color: #dc2626;
}

.sub-two-col-list {
    columns: 2;
    column-gap: 1.5rem;
    padding-left: 1.1rem;
}

.sub-accordion .accordion-button:not(.collapsed) {
    background: #ecfeff;
    color: var(--sub-dark);
}

.sub-heat-dl dt { font-weight: 700; color: #475569; margin-top: 0.35rem; }
.sub-heat-dl dd { margin-bottom: 0; }

.sub-tags { color: #475569; line-height: 1.8; }

@media (max-width: 768px) {
    .sub-showcase-row, .sub-showcase-row.reverse { flex-direction: column; }
    .sub-two-col-list { columns: 1; }
    .sub-purchase-section { margin-top: -1rem; padding: 1.5rem 1rem; }
}