/* Brand styling for OFFLINE.Mall frontend components.
   Palette: cream #FAF7F2, ink #1F1B16, indigo #1E4B8F, pomegranate #B0442C, gold #C9A227 */

:root {
    --cream: #FAF7F2;
    --ink: #1F1B16;
    --indigo: #1E4B8F;
    --pomegran: #B0442C;
    --gold: #C9A227;
}

/* ---------- Product detail ---------- */
.product-detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(19rem, 0.72fr);
    gap: clamp(2.5rem, 6vw, 7rem);
    align-items: start;
}

.product-gallery-column,
.product-purchase-panel { min-width: 0; }

.product-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.5vw, 1.25rem);
}
.product-gallery__item {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #ede8df;
}
.product-gallery__item--primary { grid-column: 1 / -1; }
.product-gallery__link { display: block; color: inherit; }
.product-gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.product-gallery__item--primary img { aspect-ratio: 4 / 5; }
.product-gallery__link:hover img { transform: scale(1.018); }
.product-gallery--placeholder .product-gallery__item--primary img {
    object-position: 50% 47%;
    filter: saturate(0.96) contrast(1.02);
}
.product-gallery--placeholder .product-gallery__item--study img { object-position: 20% center; }
.product-gallery--placeholder .product-gallery__item--process img { object-position: 70% center; }
.product-gallery__notice {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(31, 27, 22, 0.92);
    color: var(--cream);
    padding: 0.85rem 1rem;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}
.product-gallery__notice strong {
    color: #e8c46c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.product-gallery__study-label {
    position: absolute;
    right: 0;
    bottom: 0;
    background: var(--cream);
    color: rgba(31, 27, 22, 0.72);
    padding: 0.55rem 0.7rem;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.product-purchase-panel {
    position: sticky;
    top: 7rem;
    border-top: 3px solid var(--indigo);
    padding-top: clamp(1.25rem, 2vw, 2rem);
}
.product-purchase-panel__eyebrow {
    margin: 0 0 0.9rem;
    color: var(--pomegran);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.mall-product__name {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2.65rem, 4.5vw, 4.75rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.94;
    margin: 0 0 1rem;
}
.mall-product__description-short {
    max-width: 37rem;
    color: rgba(31, 27, 22, 0.68);
    font-size: 0.96rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0 0 1.5rem;
}
.mall-product__description {
    color: rgba(31, 27, 22, 0.8);
    line-height: 1.78;
}
.mall-product__description > :first-child { margin-top: 0; }
.mall-product__description > :last-child { margin-bottom: 0; }
.mall-product__description p + p { margin-top: 1rem; }
.mall-product__price {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    border-top: 1px solid rgba(31, 27, 22, 0.13);
    padding-top: 1.25rem;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    line-height: 1;
    color: var(--ink);
    margin: 1.5rem 0 0.45rem;
}
.mall-product__old-price { color: rgba(31, 27, 22, 0.45); font-size: 0.75em; text-decoration: line-through; }
.mall-product__tax-info {
    min-height: 1rem;
    margin-bottom: 1.45rem;
    color: rgba(31, 27, 22, 0.52);
    font-size: 0.7rem;
}
.mall-product__size-selector {
    border: 0;
    border-top: 1px solid rgba(31, 27, 22, 0.13);
    padding: 1.25rem 0 0;
    margin: 0 0 1.25rem;
}
.mall-product__size-selector legend {
    color: var(--ink);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}
.mall-product__selected-variant {
    color: rgba(31, 27, 22, 0.68);
    font-size: 0.72rem;
    margin: -0.35rem 0 0.75rem;
}
.mall-product__variants {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0;
}
.mall-product__variant {
    min-width: 48px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(31, 27, 22, 0.2);
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--ink);
}
.mall-product__variant:hover { border-color: var(--ink); }
.mall-product__variant--selected {
    border-color: var(--indigo);
    background: var(--indigo);
    color: #fff;
}
.mall-product__variant--unavailable {
    color: rgba(31, 27, 22, 0.45);
    text-decoration: line-through;
    cursor: not-allowed;
}
.mall-product__add-to-cart-form {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: end;
}
.mall-product__add-to-cart-form .mall-form-control { margin: 0; }
.mall-product__add-to-cart-form label {
    color: rgba(31, 27, 22, 0.64);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mall-product__add-to-cart-form input { min-height: 50px; }
.mall-product__add-to-cart-form button { min-height: 50px; width: 100%; }

.product-assurances {
    display: grid;
    gap: 0;
    margin: 1.5rem 0 0;
    border-top: 1px solid rgba(31, 27, 22, 0.13);
    list-style: none;
    padding: 0;
}
.product-assurances li {
    min-height: 56px;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    border-bottom: 1px solid rgba(31, 27, 22, 0.13);
    color: rgba(31, 27, 22, 0.67);
    font-size: 0.7rem;
}
.product-assurances strong { color: var(--ink); font-weight: 600; }
.product-assurances__mark {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(30, 75, 143, 0.32);
    color: var(--indigo);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.8rem;
}

.product-story {
    display: grid;
    grid-template-columns: minmax(12rem, 0.42fr) minmax(0, 0.78fr);
    gap: clamp(2rem, 8vw, 8rem);
    margin-top: clamp(4rem, 8vw, 7.5rem);
    border-top: 1px solid var(--ink);
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.product-story__index {
    margin: 0 0 1rem;
    color: var(--pomegran);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.product-story h2 {
    max-width: 14rem;
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 0.98;
}
.mall-product__properties { margin-top: 2rem; }
.mall-product__properties-heading {
    border-bottom: 1px solid rgba(31, 27, 22, 0.14);
    padding-bottom: 0.65rem;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.35rem;
    font-weight: 500;
}
.mall-three-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mall-column p { color: rgba(31, 27, 22, 0.68); font-size: 0.76rem; line-height: 1.55; }
.mall-column strong { color: var(--ink); font-weight: 600; }

.product-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: clamp(4rem, 8vw, 7rem) 0 0;
    border-block: 1px solid rgba(31, 27, 22, 0.16);
    list-style: none;
    padding: 0;
}
.product-trust-strip li {
    min-height: 9rem;
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 1rem;
    align-content: center;
    padding: 1.5rem clamp(1rem, 2.5vw, 2rem);
}
.product-trust-strip li + li { border-left: 1px solid rgba(31, 27, 22, 0.16); }
.product-trust-strip__number { color: var(--pomegran); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.05rem; }
.product-trust-strip strong { display: block; margin-bottom: 0.35rem; font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.3rem; font-weight: 600; }
.product-trust-strip li > span:last-child { color: rgba(31, 27, 22, 0.64); font-size: 0.74rem; line-height: 1.55; }

.product-artisan {
    display: grid;
    grid-template-columns: minmax(15rem, 0.42fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
    padding-block: clamp(4rem, 8vw, 7rem);
}
.product-artisan__media { position: relative; min-height: 25rem; overflow: hidden; }
.product-artisan__media img { width: 100%; height: 100%; min-height: 25rem; object-fit: cover; }
.product-artisan__media > span {
    position: absolute;
    right: 0;
    bottom: 0;
    background: var(--cream);
    padding: 0.7rem 0.9rem;
    color: rgba(31, 27, 22, 0.62);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.product-artisan__copy { max-width: 44rem; }
.product-artisan__copy .site-text-link { margin-top: 1.5rem; }
.product-details { margin-bottom: clamp(2rem, 5vw, 4rem); }

/* ---------- Buttons & inputs (shared) ---------- */
.mall-btn,
button[type="submit"],
.mall-product__add-to-cart button,
.mall-cart button,
.mall-checkout button {
    background: var(--ink);
    color: var(--cream);
    border: none;
    padding: 0.85rem 2rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}
.mall-btn:hover,
button[type="submit"]:hover,
.mall-product__add-to-cart button:hover { background: var(--indigo); }

.mall-btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

button:disabled,
.mall-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    border: 1px solid rgba(31, 27, 22, 0.25);
    background: #fff;
    padding: 0.65rem 0.85rem;
    font-size: 0.95rem;
    width: 100%;
    max-width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
}
label { font-size: 0.85rem; display: block; margin-bottom: 0.35rem; }
[data-validate-for].oc-visible {
    color: var(--pomegran);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

/* ---------- Cart ---------- */
.mall-cart table { width: 100%; border-collapse: collapse; }
.mall-cart th, .mall-cart td {
    padding: 1rem 0.5rem;
    border-bottom: 1px solid rgba(31, 27, 22, 0.1);
    text-align: left;
    vertical-align: middle;
}
.mall-cart img { width: 80px; height: 100px; object-fit: cover; }
.mall-cart__total, .mall-cart-total {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
}
.mall-cart__wrapper { overflow-x: auto; }
.mall-cart-actions { margin-top: 1.5rem; display: flex; justify-content: flex-end; }
.mall-cart-actions .mall-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

.ikat-shipping-progress {
    border: 1px solid rgba(30, 75, 143, 0.2);
    background: rgba(255, 255, 255, 0.72);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.ikat-shipping-progress__copy {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.82rem;
}
.ikat-shipping-progress__copy strong { color: var(--indigo); }
.ikat-shipping-progress__earned { color: var(--indigo); font-weight: 600; font-size: 0.9rem; }
.ikat-shipping-progress__track {
    height: 4px;
    margin-top: 0.75rem;
    overflow: hidden;
    background: rgba(30, 75, 143, 0.12);
}
.ikat-shipping-progress__track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--indigo), var(--gold));
    transition: width 280ms ease;
}

/* ---------- Quick checkout ---------- */
.mall-quick-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}
.mall-quick-checkout__content-column,
.mall-quick-checkout__cart-column { min-width: 0; }
.mall-quick-checkout__cart-column {
    position: sticky;
    top: 7rem;
    background: #fff;
    border: 1px solid rgba(31, 27, 22, 0.12);
    padding: clamp(1.25rem, 3vw, 2rem);
}
.mall-quick-checkout__collapsible {
    background: #fff;
    border: 1px solid rgba(31, 27, 22, 0.12);
}
.mall-quick-checkout__collapsible-element + .mall-quick-checkout__collapsible-element {
    border-top: 1px solid rgba(31, 27, 22, 0.12);
}
.mall-quick-checkout__collapsible-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
}
.mall-quick-checkout__heading {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.65rem;
    line-height: 1.15;
}
.mall-quick-checkout__collapsible-summary,
.mall-quick-checkout__section-intro {
    color: rgba(31, 27, 22, 0.62);
    font-size: 0.82rem;
}
.mall-quick-checkout__collapsible-content { display: none; }
.mall-quick-checkout__collapsible-element--open .mall-quick-checkout__collapsible-content { display: block; }
.mall-quick-checkout__collapsible-inner { padding: 0 1.5rem 1.5rem; }
.mall-two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.mall-form-control { margin-top: 1rem; }
.mall-checkbox { display: flex; gap: 0.65rem; align-items: flex-start; cursor: pointer; }
.mall-checkbox input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--indigo); }
.mall-quick-checkout__sign-in-link,
.mall-quick-checkout__guest-option,
.mall-quick-checkout__shipping-address-option { margin-top: 1rem; }
.mall-quick-checkout__toggle-option {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    border: 1px solid rgba(31, 27, 22, 0.16);
    background: #fff;
    color: var(--ink);
    padding: 0.9rem 1rem;
    margin-top: 0.75rem;
    text-align: left;
    cursor: pointer;
}
.mall-quick-checkout__toggle-option--active { border-color: var(--indigo); box-shadow: inset 3px 0 var(--indigo); }
.mall-selection-indicator {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(31, 27, 22, 0.25);
    color: transparent;
}
.mall-selection-indicator--active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.mall-quick-checkout__toggle-option-text { display: flex; flex-direction: column; gap: 0.2rem; }
.mall-quick-checkout__toggle-option-name { font-size: 0.9rem; }
.mall-quick-checkout__toggle-option-meta,
.mall-quick-checkout__toggle-option-price { font-size: 0.78rem; color: rgba(31, 27, 22, 0.62); }
.mall-quick-checkout__actions { margin-top: 1.25rem; }
.mall-btn-checkout { width: 100%; min-height: 50px; }
.mall-checkout-notice { color: var(--pomegran); padding: 1rem 0; }
.mall-checkout-error-summary {
    grid-column: 1 / -1;
    border: 2px solid var(--pomegran);
    background: rgba(176, 68, 44, 0.08);
    color: var(--ink);
    padding: 1rem 1.25rem;
}
.mall-checkout-error-summary[hidden] { display: none; }
.mall-checkout-result {
    max-width: 680px;
    margin: 3rem auto;
    padding: clamp(2rem, 6vw, 4rem);
    background: #fff;
    border-top: 4px solid var(--indigo);
    text-align: center;
}
.mall-checkout-result--failed { border-color: var(--pomegran); }
.mall-checkout-result--cancelled { border-color: var(--gold); }
.mall-checkout-result__eyebrow { color: var(--pomegran); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; }
.mall-checkout-result__heading { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2rem, 5vw, 3rem); margin: 0.75rem 0; }
.mall-checkout-result__actions { margin-top: 1.5rem; }

/* ---------- Stock / flash ---------- */
.mall-product__property-stock--checking { color: rgba(31, 27, 22, 0.5); font-size: 0.85rem; }
.mall-out-of-stock, .oc-flash-message.error { color: var(--pomegran); }

/* ---------- Pagination ---------- */
.mall-pagination a,
.mall-pagination span {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(31, 27, 22, 0.15);
    text-decoration: none;
    color: var(--ink);
    font-size: 0.85rem;
}
.mall-pagination a:hover { border-color: var(--ink); }

@media (max-width: 1023px) {
    .product-detail-shell { grid-template-columns: 1fr; gap: 2.5rem; }
    .product-purchase-panel { position: static; }
    .product-gallery__item--primary img { aspect-ratio: 5 / 6; }
    .product-story { grid-template-columns: minmax(11rem, 0.35fr) minmax(0, 1fr); }
}

@media (max-width: 767px) {
    .product-detail-shell { gap: 2rem; }
    .product-gallery { gap: 0.45rem; }
    .product-gallery__item--primary img { aspect-ratio: 4 / 5; }
    .product-gallery__notice {
        position: static;
        flex-direction: column;
        gap: 0.2rem;
        line-height: 1.45;
    }
    .product-purchase-panel { border-top-width: 2px; padding-top: 1.25rem; }
    .mall-product__name { font-size: clamp(2.6rem, 14vw, 4rem); }
    .mall-product__add-to-cart-form { grid-template-columns: 5rem minmax(0, 1fr); }
    .product-story { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 4rem; }
    .product-story h2 { max-width: 18rem; }
    .mall-three-columns { grid-template-columns: 1fr 1fr; }
    .product-trust-strip { grid-template-columns: 1fr; margin-top: 4rem; }
    .product-trust-strip li { min-height: 7.5rem; }
    .product-trust-strip li + li { border-top: 1px solid rgba(31, 27, 22, 0.16); border-left: 0; }
    .product-artisan { grid-template-columns: 1fr; gap: 2rem; padding-block: 4rem; }
    .product-artisan__media, .product-artisan__media img { min-height: 20rem; }
    .product-mobile-cta { position: fixed; left: 0; right: 0; }
    .mall-quick-checkout { grid-template-columns: 1fr; }
    .mall-quick-checkout__cart-column { position: static; order: -1; }
    .mall-two-fields { grid-template-columns: 1fr; gap: 0; }
    .mall-quick-checkout__collapsible-header,
    .mall-quick-checkout__collapsible-inner { padding-left: 1rem; padding-right: 1rem; }
    .mall-quick-checkout__toggle-option { grid-template-columns: auto minmax(0, 1fr); }
    .mall-quick-checkout__toggle-option-price { grid-column: 2; }
    .mall-cart th, .mall-cart td { min-width: 6.5rem; }
    .mall-cart th:first-child, .mall-cart td:first-child { min-width: 13rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    .product-gallery__item img { transform: none !important; }
}