@import url('/css/kkk-ui.css');

html { color-scheme:light; }
.customer-theme-toggle { position:fixed; z-index:100; right:22px; bottom:22px; display:grid; width:42px; height:42px; padding:0; border:1px solid rgba(36,91,70,.3); border-radius:50%; place-items:center; color:#173228; background:#fffdf8; box-shadow:0 10px 28px rgba(23,50,40,.18); cursor:pointer; transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease; }
.customer-theme-toggle:hover { transform:translateY(-3px) rotate(10deg); }
.customer-theme-toggle:focus-visible { outline:3px solid rgba(200,154,75,.55); outline-offset:3px; }
.customer-theme-toggle-moon { display:none; font-size:1.35rem; line-height:1; }.customer-theme-toggle-sun { color:#a56f14; font-size:1.1rem; line-height:1; }
html[data-customer-theme="dark"] { color-scheme:dark; background:#111a16!important; }
html[data-customer-theme="dark"] body { color:#e5ece7!important; background:#111a16!important; }
html[data-customer-theme="dark"] body.utility-page { background:linear-gradient(135deg,#111a16,#17251e)!important; }
html[data-customer-theme="dark"] :is(.feature-strip,.journey li,.public-form,.progress-search,.public-progress-card,.tracking-card,.deposit-public-status,.public-artwork-action,.public-artwork-previews article,.order-summary,.order-summary-card,fieldset,.success-card,.review-card,.review-section,.artwork-review-card,.artwork-card,.customer-tracking-card) { border-color:#40554a!important; background-color:#1c2923!important; color:#e5ece7!important; }
html[data-customer-theme="dark"] .site-header { background:transparent!important; }
html[data-customer-theme="dark"] .site-footer { width:calc(100% - 48px); padding:42px 0 25px; border-color:#40554a!important; color:#e5ece7!important; background:transparent!important; }
html[data-customer-theme="dark"] .footer-bottom { margin-top:30px; padding-top:18px; border-color:#40554a!important; }
html[data-customer-theme="dark"] :is(h1,h2,h3,h4,strong,legend,.brand,.brand b,.header-link,.nav-progress,.back-home-button,.review-value) { color:#f4f1e9!important; }
html[data-customer-theme="dark"] :is(p,small,dt,.hero-text,.form-intro>p:last-child,.progress-search>p,.privacy-note,.field-hint,.review-label) { color:#b8c9c0!important; }
html[data-customer-theme="dark"] :is(input,select,textarea) { border-color:#50675b!important; color:#eef4ef!important; background:#142019!important; }
html[data-customer-theme="dark"] .choice-card { border-color:#61786c!important; background:#19271f!important; }
html[data-customer-theme="dark"] .choice-card:has(input:checked) { border-color:#78b696!important; background:#285f47!important; box-shadow:0 0 0 2px rgba(120,182,150,.16); }
html[data-customer-theme="dark"] .choice-card:has(input:checked) b { color:#fff!important; }
html[data-customer-theme="dark"] .choice-card:has(input:checked) small { color:#dcebe3!important; }
html[data-customer-theme="dark"] .choice-card input { accent-color:#e4b85e; }
html[data-customer-theme="dark"] :is(.button-secondary,.header-link,.nav-progress,.back-home-button) { border-color:#739181!important; color:#edf5ef!important; background:#1b2b23!important; }
html[data-customer-theme="dark"] .artwork-preview-section { border-color:#40554a!important; background:#16231d!important; }
html[data-customer-theme="dark"] .artwork-preview-item { border-color:#40554a!important; background:#1c2923!important; box-shadow:0 5px 18px rgba(0,0,0,.24)!important; }
html[data-customer-theme="dark"] .artwork-preview-item figcaption { border-color:#40554a!important; }
html[data-customer-theme="dark"] .artwork-preview-item>a { border-color:#50675b!important; background:#0f1814!important; }
html[data-customer-theme="dark"] .artwork-preview-count { color:#d7e6dc!important; background:#284438!important; }
html[data-customer-theme="dark"] :is(.button-light) { color:#143528!important; background:#f8f5ed!important; }
html[data-customer-theme="dark"] .button-primary,
html[data-customer-theme="dark"] .button-primary span { color:#fff!important; }
html[data-customer-theme="dark"] .final-cta .button.button-light,
html[data-customer-theme="dark"] .final-cta .button.button-light span { color:#143528!important; }
html[data-customer-theme="dark"] .social-links a { border-color:#587062!important; color:#edf5ef!important; background:#23352b!important; }
html[data-customer-theme="dark"] .social-links a span { color:#fff!important; background:#286247!important; }
html[data-customer-theme="dark"] .footer-social>p { color:#e4b85e!important; }
html[data-customer-theme="dark"] .hero h1 em { color:#69c297!important; }
html[data-customer-theme="dark"] .eyebrow { color:#e4b85e!important; }
html[data-customer-theme="dark"] .hero-art::before { border-color:rgba(115,208,154,.18)!important; background:radial-gradient(circle at 78% 20%,rgba(105,194,151,.09) 0 8%,transparent 29%),radial-gradient(circle at 17% 82%,rgba(228,184,94,.08),transparent 31%),linear-gradient(145deg,#1d3027,#203b31 58%,#172a22)!important; box-shadow:inset 0 0 0 9px rgba(255,255,255,.025),0 30px 70px rgba(0,0,0,.28)!important; }
html[data-customer-theme="dark"] .hero-art::after { border-color:rgba(184,222,201,.13)!important; background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 42%)!important; }
html[data-customer-theme="dark"] .sample-card { box-shadow:0 25px 55px rgba(0,0,0,.38); }
html[data-customer-theme="dark"] :is(.public-progress-track,.progress-bar-track) { background:#34453c!important; }
html[data-customer-theme="dark"] .balance-payment-notice strong { color:#775817!important; }
html[data-customer-theme="dark"] :is(.status-badge,.public-stages div,.public-stages i) { border-color:#52675c!important; background:#22342a!important; color:#c9dbd0!important; }
html[data-customer-theme="dark"] .public-stages div { border-color:transparent!important; background:transparent!important; }
html[data-customer-theme="dark"] .public-stages .complete { color:#e7f7ed!important; }
html[data-customer-theme="dark"] .public-stages .complete i { border-color:#73d09a!important; background:#2f9b63!important; color:#fff!important; box-shadow:0 0 0 3px rgba(115,208,154,.18); }
html[data-customer-theme="dark"] .balance-payment-card { border-color:#53675c!important; background:#203028!important; color:#e5ece7!important; }
html[data-customer-theme="dark"] .balance-payment-heading small { color:#e4b85e!important; }
html[data-customer-theme="dark"] .balance-payment-heading>strong { color:#dff3e7!important; background:#28543d!important; }
html[data-customer-theme="dark"] .balance-status-message { border-left-color:#d3a84f!important; background:#3a321f!important; }
html[data-customer-theme="dark"] .balance-status-message strong { color:#f4e8c9!important; }
html[data-customer-theme="dark"] .balance-status-message span { color:#d8cba8!important; }
html[data-customer-theme="dark"] .balance-status-message.is-paid { border-left-color:#4ca36c!important; background:#193c2b!important; }
html[data-customer-theme="dark"] .balance-status-message.is-paid strong { color:#dff3e7!important; }
html[data-customer-theme="dark"] .balance-status-message.is-paid span { color:#c9ddd0!important; }
html[data-customer-theme="dark"] .balance-status-message.is-failed { border-left-color:#d86666!important; background:#432626!important; }
html[data-customer-theme="dark"] .balance-status-message.is-failed strong { color:#ffdede!important; }
html[data-customer-theme="dark"] .balance-status-message.is-failed span { color:#e9bcbc!important; }
html[data-customer-theme="dark"] .payment-success-message { border-color:#4c8062!important; color:#dff3e7!important; background:#193c2b!important; }
html[data-customer-theme="dark"] .balance-qr-placeholder { border-color:#50675b!important; color:#e5ece7!important; background:#142019!important; }
html[data-customer-theme="dark"] .balance-receipt-picker button { border-color:#9b5951!important; color:#ffd7d1!important; background:#422824!important; }
html[data-customer-theme="dark"] :is(.live-card-preview,.card-preview) { color:#17251e!important; }

/* The preview is an invitation artwork, so preserve its designed ink colours.
   The general dark-mode typography palette must not wash out its contents. */
html[data-customer-theme="dark"] .wedding-card-front { color:#a62d8b!important; }
html[data-customer-theme="dark"] .wedding-card-front[data-theme="garden"] { color:#477a55!important; }
html[data-customer-theme="dark"] .wedding-card-front[data-theme="minimalist"] { color:#252525!important; }
html[data-customer-theme="dark"] .wedding-card-front[data-theme="rusty"] { color:#a34f35!important; }
html[data-customer-theme="dark"] .wedding-card-front[data-theme="islamic"] { color:#267058!important; }
html[data-customer-theme="dark"] .wedding-card-front[data-theme="nostalgia"] { color:#805f45!important; }
html[data-customer-theme="dark"] .wedding-card-front[data-theme="desa"] { color:#68783f!important; }
html[data-customer-theme="dark"] .wedding-card-back { color:#111827!important; }
html[data-customer-theme="dark"] .wedding-card :is(p, small, strong, b, span, footer) {
  color:inherit !important;
}

html[data-customer-theme="dark"] .wedding-card-front .card-couple-names b {
  color:rgba(166,45,139,.38) !important;
}
/* Customer dashboard, preview, and date-picker surfaces. */
html[data-customer-theme="dark"] :is(.order-summary-grid,.order-status-message,.form-actions,.dashboard-action-card,.live-preview,.live-preview-toggle,.live-preview-body,.date-picker-panel,.hijri-picker-panel,.date-picker-nav,.hijri-picker-clear) { border-color:#40554a!important; background:#1c2923!important; color:#e5ece7!important; }
html[data-customer-theme="dark"] .additional-products { border-color:#6d8979!important; background:linear-gradient(135deg,#254235,#1b3027)!important; box-shadow:0 10px 24px rgba(0,0,0,.28)!important; }
html[data-customer-theme="dark"] .additional-products h3 { color:#f6fbf7!important; }
html[data-customer-theme="dark"] .additional-products .field-help { color:#d0e2d7!important; }
html[data-customer-theme="dark"] :is(.date-picker-trigger,.date-picker-day,.hijri-date-option) { border-color:#50675b!important; color:#e5ece7!important; background:#142019!important; }
html[data-customer-theme="dark"] .date-picker-trigger.has-value { color:#eef4ef!important; }
html[data-customer-theme="dark"] :is(.date-picker-icon,.date-picker-heading strong,.date-picker-weekdays span,.date-picker-note,.date-picker-help,.field-help,.live-preview-toggle small,.live-preview-heading>span,.autosave-status) { color:#b8c9c0!important; }
html[data-customer-theme="dark"] :is(.date-picker-day:hover:not(:disabled),.date-picker-day.is-selected,.hijri-date-option:hover:not(:disabled)) { border-color:#5ba67d!important; color:#fff!important; background:#286247!important; }
html[data-customer-theme="dark"] .date-picker-day:disabled { color:#65796d!important; background:transparent!important; }
html[data-customer-theme="dark"] .hijri-date-option:disabled { color:#83958a!important; background:#26352d!important; }
html[data-customer-theme="dark"] :is(.preview-side-tab,.preview-face-tab) { border-color:#50675b!important; color:#c9dbd0!important; background:#1b2b23!important; }
html[data-customer-theme="dark"] :is(.preview-side-tab.is-active,.preview-face-tab.is-active) { border-color:#c04a97!important; color:#fff!important; background:#9b2c74!important; }
html[data-customer-theme="dark"] .live-preview-toggle:hover { background:#25372d!important; }
html[data-customer-theme="dark"] .live-preview-chevron { border-color:#c9dbd0!important; }
html[data-customer-theme="dark"] :is(.progress-panel,.order-summary-grid,.order-status-message,.package-summary,.review-item) { color:#e5ece7!important; }
html[data-customer-theme="dark"] .progress-panel { border-color:#40554a!important; background:#1c2923!important; }
html[data-customer-theme="dark"] .progress-track { background:#34453c!important; }
html[data-customer-theme="dark"] .progress-stage { color:#aebeb5!important; }
html[data-customer-theme="dark"] .stage-dot { border-color:#71877b!important; background:#142019!important; }
html[data-customer-theme="dark"] .progress-stage.is-complete { color:#e7f7ed!important; }
html[data-customer-theme="dark"] .progress-stage.is-complete .stage-dot { border-color:#73d09a!important; background:#2f9b63!important; box-shadow:0 0 0 3px rgba(115,208,154,.18); }
html[data-customer-theme="dark"] .progress-stage.is-current { color:#f4f1e9!important; }
html[data-customer-theme="dark"] .progress-stage.is-current .stage-dot { border-color:#73d09a!important; background:#142019!important; box-shadow:0 0 0 3px rgba(115,208,154,.18); }
html[data-customer-theme="dark"] .autosave-status[data-state="saved"] { color:#78d5a0!important; }
html[data-customer-theme="dark"] .autosave-status[data-state="saving"] { color:#8fc4e8!important; }
html[data-customer-theme="dark"] .autosave-status[data-state="error"] { color:#ffaaa4!important; }
html[data-customer-theme="dark"] .notice { border-color:#4c8062!important; color:#dff3e7!important; background:#193c2b!important; }
html[data-customer-theme="dark"] .errors { border-color:#b85c5c!important; color:#ffdede!important; background:#432626!important; }
html[data-customer-theme="dark"] .errors :is(strong,li) { color:#ffdede!important; }
html[data-customer-theme="dark"] .upload-status { border:1px solid #4c8062!important; color:#dff3e7!important; background:#193c2b!important; }
html[data-customer-theme="dark"] .upload-status.not-uploaded { border-color:#50675b!important; color:#c3d2ca!important; background:#26322d!important; }
html[data-customer-theme="dark"] :is(.customer-feedback-success,.customer-feedback-error,.autosave-status){border-color:#4c8062!important;color:#dff3e7!important;background:#193c2b!important;}
html[data-customer-theme="dark"] .autosave-status[data-state="pending"]{border-color:#a98a43!important;color:#f4e8c9!important;background:#3a321f!important;}
html[data-customer-theme="dark"] .autosave-status[data-state="error"],html[data-customer-theme="dark"] .customer-feedback-error{border-color:#b85c5c!important;color:#ffdede!important;background:#432626!important;}
html[data-customer-theme="dark"] .customer-empty-state{border-color:#40554a!important;background:#203028!important;}
html[data-customer-theme="dark"] .customer-empty-state strong{color:#e5ece7!important;}
html[data-customer-theme="dark"] .customer-empty-icon{color:#dff3e7!important;background:#28543d!important;}
html[data-customer-theme="dark"] .order-lifecycle { border-color:#40554a!important; }
html[data-customer-theme="dark"] .order-lifecycle-heading h4 { color:#f4f1e9!important; }
html[data-customer-theme="dark"] .order-lifecycle-heading>span,
html[data-customer-theme="dark"] .order-lifecycle-list li { color:#b8c9c0!important; }
html[data-customer-theme="dark"] .order-lifecycle-list li:not(:last-child)::after { background:#40554a!important; }
html[data-customer-theme="dark"] .order-lifecycle-marker { border-color:#50675b!important; color:#c3d2ca!important; background:#142019!important; }
html[data-customer-theme="dark"] .order-lifecycle-list .is-complete { color:#bfe6cc!important; }
html[data-customer-theme="dark"] .order-lifecycle-list .is-complete .order-lifecycle-marker { border-color:#5ba67d!important; color:#fff!important; background:#286247!important; }
html[data-customer-theme="dark"] .order-lifecycle-list .is-complete:not(:last-child)::after { background:#4c8062!important; }
html[data-customer-theme="dark"] .order-lifecycle-list .is-current { color:#f4f1e9!important; }
html[data-customer-theme="dark"] .order-lifecycle-list .is-current .order-lifecycle-marker { border-color:#73d09a!important; color:#fff!important; background:#2f9b63!important; box-shadow:0 0 0 5px rgba(115,208,154,.18)!important; }
/* The deposit row needs a complete outline in dark mode, not only a left accent. */
html[data-customer-theme="dark"] .deposit-public-status { border:1px solid #40554a!important; border-left:4px solid #d3a84f!important; }
html[data-customer-theme="dark"] .deposit-public-status[data-status="paid"] { border-left-color:#4ca36c!important; }
html[data-customer-theme="dark"] .deposit-public-status[data-status="failed"] { border-left-color:#d86666!important; }
/* Final review, payment upload, dialogs, and confirmation pages. */
html[data-customer-theme="dark"] :is(.review-header,.review-card,.order-card,.final-confirmation-dialog,.confirmation-dialog) { border-color:#40554a!important; background:#1c2923!important; color:#e5ece7!important; }
html[data-customer-theme="dark"] :is(.review-item,.package-summary,.qr-panel,.receipt-panel) { border-color:#40554a!important; background:#203028!important; color:#e5ece7!important; }
html[data-customer-theme="dark"] .contact-list li { border:1px solid #40554a!important; color:#e5ece7!important; background:#203028!important; }
html[data-customer-theme="dark"] .contact-list .contact-number { color:#b8c9c0!important; }
html[data-customer-theme="dark"] :is(.order-badge,.side-badge,.artwork-progress-label) { color:#d6e9dd!important; background:#263b30!important; }
html[data-customer-theme="dark"] :is(.deposit-amount,.confirmed-badge) { color:#dff3e7!important; background:#28543d!important; }
html[data-customer-theme="dark"] .deposit-notice { border-left-color:#d3a84f!important; background:#3a321f!important; }
html[data-customer-theme="dark"] .deposit-notice strong { color:#f4e8c9!important; }
html[data-customer-theme="dark"] .deposit-notice p { color:#d8cba8!important; }
html[data-customer-theme="dark"] :is(.confirmation-note,.confirmation-checkbox) { border-color:#50675b!important; color:#d4e2da!important; background:#203028!important; }
html[data-customer-theme="dark"] .confirmation-checkbox:has(input:checked) { border-color:#5ba67d!important; background:#28543d!important; }
html[data-customer-theme="dark"] :is(.final-confirmation-dialog h2,.confirmation-dialog h2) { color:#f4f1e9!important; }
html[data-customer-theme="dark"] :is(.final-confirmation-dialog p,.confirmation-dialog p) { color:#c3d2ca!important; }
html[data-customer-theme="dark"] :is(.final-confirmation-dialog-actions button,.confirmation-dialog-actions .button-secondary) { border-color:#50675b!important; color:#edf5ef!important; background:#1b2b23!important; }
html[data-customer-theme="dark"] :is(.final-confirmation-dialog-actions .is-primary,.confirmation-dialog-actions .button-primary) { border-color:#2c7b55!important; color:#fff!important; background:#286247!important; }
html[data-customer-theme="dark"] :is(.summary-grid,.summary-grid dt,.package-summary dt) { border-color:#40554a!important; }
html[data-customer-theme="dark"] :is(.summary-grid dt,.package-summary dt,.review-label,.success-message) { color:#b8c9c0!important; }
html[data-customer-theme="dark"] :is(.order-card,.thank-you-page) { background:transparent!important; }
html[data-customer-theme="dark"] .order-card { background:#1c2923!important; }
/* Artwork review actions remain legible while the page shell is dark. */
html[data-customer-theme="dark"] :is(.action-panel,.state-panel,.history-panel,.empty-state) { border-color:#40554a!important; color:#e5ece7!important; background:#203028!important; }
html[data-customer-theme="dark"] .history-item { border-color:#50675b!important; color:#e5ece7!important; background:#26382e!important; }
html[data-customer-theme="dark"] .history-item-header time { color:#c3d2ca!important; }
html[data-customer-theme="dark"] :is(.action-panel p,.state-panel p,.empty-state p,.history-item p,.correction-fee-consent) { color:#c3d2ca!important; }
html[data-customer-theme="dark"] .correction-panel .correction-fee-warning { color:#ffd39a!important; }
html[data-customer-theme="dark"] .correction-payment-details { border-color:#50675b!important; color:#d4e2da!important; background:#1b2b23!important; }
html[data-customer-theme="dark"] .button-danger-outline { border-color:#bd6a63!important; color:#ffd7d1!important; background:#422824!important; }
html[data-customer-theme="dark"] .artwork-confirmation-dialog { border-color:#40554a!important; color:#e5ece7!important; background:#1c2923!important; }
html[data-customer-theme="dark"] .artwork-confirmation-dialog h2 { color:#f4f1e9!important; }
html[data-customer-theme="dark"] .artwork-confirmation-dialog p { color:#c3d2ca!important; }
html[data-customer-theme="dark"] .customer-theme-toggle { border-color:#647c6e; color:#f7efcf; background:#25372d; }.customer-theme-toggle-sun { color:#a56f14; }
html[data-customer-theme="dark"] .customer-theme-toggle-sun { display:none; } html[data-customer-theme="dark"] .customer-theme-toggle-moon { display:block; }
html[data-customer-theme="dark"] :is(.faq-grid details,.customer-policies article) { border-color:#40554a!important; color:#e8f1eb!important; background:#1c2923!important; box-shadow:0 10px 28px rgba(0,0,0,.2); }
html[data-customer-theme="dark"] :is(.faq-grid summary,.customer-policies h2) { color:#f4f1e9!important; }
html[data-customer-theme="dark"] .faq-grid details > p,
html[data-customer-theme="dark"] .customer-policies article > p { color:#c3d2ca!important; }
@media (max-width:560px) { .customer-theme-toggle { right:14px; bottom:14px; width:38px; height:38px; } }
@media (max-width:560px) { html[data-customer-theme="dark"] .site-footer { width:calc(100% - 28px); } }
@media (prefers-reduced-motion:reduce) { .customer-theme-toggle { transition:none; }.customer-theme-toggle:hover { transform:none; } }

/* Consistent customer card foundation */
:is(.progress-panel,.public-progress-card,.order-summary,.order-summary-card,.package-summary,.review-card,.review-section,.history-panel,.action-panel,.state-panel,.success-card,.tracking-card,.customer-tracking-card){border-radius:12px!important;box-shadow:0 4px 14px rgba(23,56,43,.07)}

/* Interactive customer card hover */
:is(.action-panel,.dashboard-action-card,.package-summary,.review-card,.tracking-card):is(:hover,:focus-within){transform:translateY(-2px);box-shadow:0 8px 20px rgba(23,56,43,.13)!important;transition:transform .2s ease,box-shadow .2s ease}

/* Mobile card layout */
@media(max-width:700px){.progress-stages,.public-stages{grid-template-columns:repeat(3,1fr);row-gap:14px}.progress-stage{font-size:.7rem}.action-panel,.dashboard-action-card,.package-summary,.review-card,.tracking-card{padding:16px!important}}

/* Keep the artwork previews proportional to the supplied banner and bunting samples. */
.live-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-items: center;
    gap: 20px;
}

.live-product {
    width: 100%;
    min-height: 0;
    padding: clamp(16px, 4%, 32px);
    align-self: start;
    border-radius: 8px;
    text-align: center;
}

.live-product--banner {
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 960px;
    aspect-ratio: 2 / 1;
}

.live-product--banting {
    grid-column: 1;
    grid-row: 2 / span 2;
    max-width: 320px;
    aspect-ratio: 1 / 2;
}

.live-product--arrow {
    grid-row: 2;
    max-width: 320px;
    aspect-ratio: 904 / 1280;
    padding-top: clamp(46px, 18%, 80px);
}

.live-product--arrow-left {
    grid-column: 2;
}

.live-product--arrow-right {
    grid-column: 3;
}

.live-product--sticker {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-self: center;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}

.live-product :is(p, strong, small) {
    width: 100%;
    text-align: center;
}

.live-product strong {
    overflow-wrap: anywhere;
}

.arrow-shape {
    display: block;
    width: 100%;
    height: auto;
    margin: auto auto 10px;
    overflow: visible;
    border-radius: 0;
    background: none;
}

.live-product--arrow-right .arrow-shape {
    transform: scaleX(-1);
}

.card-front-copy {
    position: absolute;
    top: 50%;
    right: 12%;
    left: 12%;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: auto;
    text-align: center;
    transform: translateY(-50%);
}

.card-front-copy .card-title,
.card-front-copy .card-couple-names {
    width: 100%;
    margin-inline: auto;
    text-align: center;
}

.card-front-copy .card-couple-names {
    justify-items: center;
    overflow-wrap: anywhere;
}

/* The preview ink belongs to the artwork and stays identical in both page themes. */
html[data-customer-theme="dark"] .live-product :is(p, strong, small, span, i) {
    color: inherit !important;
}

html[data-customer-theme="dark"] .live-product .live-product-label {
    color: #fff !important;
}

html[data-customer-theme="dark"] .live-product strong i {
    color: #a76991 !important;
}

html[data-customer-theme="dark"] .wedding-card-back .card-social-handle {
    color: #355848 !important;
}

html[data-customer-theme="dark"] .wedding-card-back .card-social-logo {
    color: #fff !important;
}

@media (max-width: 760px) {
    .live-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .live-product--banner {
        grid-column: 1 / -1;
    }

    .live-product--banting {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .live-product--arrow {
        grid-row: auto;
    }

    .live-product--arrow-left {
        grid-column: 1;
    }

    .live-product--arrow-right {
        grid-column: 2;
    }

    .live-product--sticker {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

@media (max-width: 520px) {
    .live-product-grid {
        grid-template-columns: 1fr;
    }

    .live-product--banner,
    .live-product--banting,
    .live-product--arrow,
    .live-product--sticker {
        grid-column: 1;
    }

    .live-product--banner {
        max-width: none;
    }
}

/* Keep the Puteri Manis preview on the 12-column grid used by its item positions. */
.live-product-grid.live-product-grid--puteri-manis {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .live-product-grid.live-product-grid--puteri-manis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .live-product-grid.live-product-grid--puteri-manis {
        grid-template-columns: 1fr;
    }
}


@media (min-width: 761px) {
    .live-product-grid.live-product-grid--puteri-manis > .live-product--sticker {
        grid-row: 2;
        align-self: start;
    }
}