/* ============================================================
   Charsutra — Product details page
   ------------------------------------------------------------
   Loaded after common/css/product-details.css (which keeps its
   gallery, swatch and modal rules). Everything here is scoped to
   .product-details, .breadcumb-wrapper or a cs-pd-* class, so no
   other page is affected.
   ============================================================ */

:root {
    --csd-navy: #0F1E33;
    --csd-gold: #A9825A;
    --csd-gold-light: #C39C72;
    --csd-line: #ECE8E1;
    --csd-ink: #16233A;
    --csd-body: #4A5568;
    --csd-muted: #6B7688;
    --csd-green: #1E8E5A;
    --csd-terracotta: #B5523B;
}

/* Breadcrumb banner styling moved to common/css/sections.css, which loads
   on every page — the shop, wishlist and blog banners had exactly the same
   problem and this file only loads on product details. */

/* ============================================================
   2. Info column
   ============================================================ */
.product-details {
    padding-top: 46px;
}

/* style.css:12343 sets text-transform: capitalize on this, which turned
   "8 fl oz / 236 mL" into "8 Fl Oz / 236 ML". Product names should render
   exactly as they were entered. */
.summary-content .product-title,
.product-about .product-title,
.product-details .product-title {
    text-transform: none !important;
    font-family: var(--title-font, "Playfair Display", serif);
    font-size: clamp(21px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.3px;
    color: var(--csd-ink);
    margin: 0 0 14px !important;
}

.product-details .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--csd-line);
    font-size: 27px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--csd-navy);
    font-variant-numeric: lining-nums tabular-nums;
}

.product-details .price del {
    font-size: 16px;
    font-weight: 400;
    color: var(--csd-muted);
}

/* ============================================================
   3. Quick overview card
   ============================================================ */
.product-details .client-details-inner {
    border: 1px solid var(--csd-line) !important;
    border-radius: 14px !important;
    overflow: hidden;
}

.product-details .client-details-inner .card-header {
    padding: 12px 16px;
    background-color: #FAF7F2;
    border-bottom: 1px solid var(--csd-line);
}

.product-details .client-details-inner .card-header h6 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--body-font, "Nunito Sans", sans-serif);
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--csd-navy);
}

.product-details .client-details-inner .card-header i {
    color: var(--csd-gold);
    font-size: 15px;
}

.product-details .client-details-inner .card-body {
    padding: 14px 16px;
}

.cs-pd-overview {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cs-pd-overview li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--csd-body);
}

.cs-pd-overview li + li {
    border-top: 1px dashed #F0EBE3;
}

.cs-pd-overview li strong {
    flex: 0 0 38%;
    max-width: 38%;
    font-weight: 700;
    color: var(--csd-ink);
}

.cs-pd-overview li span {
    flex: 1 1 auto;
    min-width: 0;
}

/* Rows with no label get a gold bullet instead of a hanging colon */
.cs-pd-overview li.is-plain {
    position: relative;
    padding-left: 18px;
}

.cs-pd-overview li.is-plain::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--csd-gold);
}

/* ============================================================
   4. Variants, quantity, actions
   ============================================================ */
.product-details .product-color,
.product-details .product-size {
    gap: 14px;
}

.product-details .product-color > p,
.product-details .product-size > p {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 58px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--csd-muted);
}

/* Second line of defence for the empty SIZE row.
   The blade now decides this properly, but a stale compiled view would
   still render it. `:has()` is evaluated live, so when the per-colour JS
   injects size chips later the row reappears on its own — this only hides
   a row that genuinely has nothing in it. */
#size-container:not(:has(.size-option)) {
    display: none !important;
}

/* Size chips.
   common/css/product-details.css already styles .size-option with
   !important on nearly every property, including the .active state that
   selectSizeCommon() toggles. Rather than fight it rule for rule, only the
   few properties that need changing are overridden here — the active state
   is left to that file, so selection still looks the way it already did. */
.cs-pd-size {
    height: 38px !important;
    border-radius: 10px !important;
    cursor: pointer;
}

.product-details .product-sizes,
.product-details #size-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-details .product-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.product-details .actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid var(--csd-line);
    border-bottom: 1px solid var(--csd-line);
}

/* `flex: 0 0 auto` is load-bearing here. .actions is a flex row and the
   two buttons carry `flex: 1 1 190px`, so with the default `flex-shrink: 1`
   the stepper — and its children, which also default to shrinkable —
   collapsed below its own min-content width and rendered as a ~46px circle
   with the digit clipped. Pinning both levels stops that. */
.product-details .quantity {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    min-width: 136px;
    height: 48px;
    position: relative;
    background-color: #fff;
    border: 1.5px solid var(--csd-line);
    border-radius: 999px;
    overflow: hidden;
}

/* THE actual cause of the broken stepper, found at style.css:12543:
       .product-about .quantity .qty-btn { position: absolute; right: 21px; }
   The info column carries .product-about, so both buttons were being
   yanked out of flow and stacked on top of each other at the right edge
   (decrement bottom:7px, increment top:12px) — which is why you saw one
   glyph floating in a white pill and the other in a separate dark box.
   My earlier rules set widths but never reset `position`, so the
   absolute positioning survived. Explicitly put them back in flow. */
.product-details .quantity .qty-btn,
.summary-content .quantity .qty-btn,
.product-about .quantity .qty-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 46px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    color: var(--csd-navy) !important;
    font-size: 17px;
    font-weight: 600;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, color .2s ease;
}

.product-details .quantity .qty-btn:hover {
    background-color: var(--csd-navy);
    color: #fff;
}

/* Same file also gives the input width:112px, a border, padding:0 21px and
   text-align:left, to suit that absolute-button layout. All reset here. */
.product-details .quantity .qty-input,
.summary-content .quantity .qty-input,
.product-about .quantity .qty-input {
    flex: 0 0 auto !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 46px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none;
    background-color: transparent !important;
    text-align: center !important;
    font-size: 15px;
    font-weight: 700;
    color: var(--csd-ink) !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.product-details .quantity .qty-input::-webkit-outer-spin-button,
.product-details .quantity .qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-details .actions .add-to-cart-btn,
.product-details .actions .buy-now-btn {
    flex: 1 1 190px;
    width: auto !important;
    min-width: 0;
    height: 48px !important;
    padding: 0 26px;
    border: none;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    transition: background-color .22s ease, color .22s ease, transform .14s ease;
}

.product-details .actions .add-to-cart-btn {
    background-color: var(--csd-navy) !important;
    color: #fff !important;
}

.product-details .actions .add-to-cart-btn:hover {
    background-color: var(--csd-gold) !important;
    color: var(--csd-navy) !important;
}

.product-details .actions .buy-now-btn {
    background-color: var(--csd-gold) !important;
    color: var(--csd-navy) !important;
}

.product-details .actions .buy-now-btn:hover {
    background-color: var(--csd-navy) !important;
    color: #fff !important;
}

.product-details .actions .add-to-cart-btn:active,
.product-details .actions .buy-now-btn:active {
    transform: scale(.98);
}

/* ============================================================
   5. Meta rows + tags
   ============================================================ */
.cs-pd-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 20px !important;
}

.cs-pd-metarow {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #F4F1EC;
    font-size: 13.5px;
}

.cs-pd-metarow:last-child { border-bottom: none; }

.cs-pd-metalabel {
    flex: 0 0 auto;
    min-width: 74px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--csd-muted);
}

.cs-pd-metaval {
    color: var(--csd-ink);
    font-weight: 600;
}

.cs-pd-metaval a {
    color: var(--csd-gold);
    text-decoration: none;
}

.cs-pd-metaval a:hover {
    text-decoration: underline;
}

.cs-pd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.cs-pd-tag {
    display: inline-block;
    padding: 4px 11px;
    border: 1px solid var(--csd-line);
    border-radius: 999px;
    background-color: #FAF7F2;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--csd-body);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.cs-pd-tag {
    cursor: default;
}

a.cs-pd-tag {
    cursor: pointer;
}

a.cs-pd-tag:hover {
    border-color: var(--csd-gold);
    background-color: #fff;
    color: var(--csd-gold);
}

/* --- Share --- */
.product-details .social-links {
    gap: 14px;
    margin-top: 18px !important;
    padding-top: 16px;
    border-top: 1px solid var(--csd-line);
}

.product-details .social-links > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--csd-muted);
}

.product-details .social-links ul {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.product-details .social-links li {
    margin: 0 !important;
}

.product-details .social-links li a {
    width: 36px;
    height: 36px;
    border: 1px solid var(--csd-line);
    border-radius: 50%;
    color: var(--csd-navy);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.product-details .social-links li a:hover {
    background-color: var(--csd-navy);
    border-color: var(--csd-navy);
    color: #fff;
}

/* ============================================================
   6. Tabs + description typography
   ============================================================ */
.product-tab-style1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 46px 0 0 !important;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--csd-line);
    list-style: none;
}

.product-tab-style1 .nav-link {
    height: 42px;
    padding: 0 24px !important;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--csd-line) !important;
    border-radius: 999px !important;
    background-color: #fff !important;
    color: var(--csd-navy) !important;
    font-size: 12.5px !important;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

.product-tab-style1 .nav-link:hover {
    border-color: var(--csd-gold) !important;
    color: var(--csd-gold) !important;
}

.product-tab-style1 .nav-link.active {
    background-color: var(--csd-navy) !important;
    border-color: var(--csd-navy) !important;
    color: #fff !important;
}

#productTabContent {
    padding-top: 30px;
}

/* The description is stored as HTML from the admin editor and carries its
   own inline colours — which is why the whole block rendered gold and was
   hard to read. Forced back to a readable body colour; links stay gold.
   If you want the editor's colours to win, delete this block. */
#description,
#description p,
#description li,
#description span,
#description div,
#description td,
#description strong,
#description b {
    color: var(--csd-body) !important;
}

#description a {
    color: var(--csd-gold) !important;
}

/* Same treatment for the specification tab, which is fed from the same
   editor and had the same problem. */
#specification,
#specification p,
#specification li,
#specification span,
#specification td,
#specification th {
    color: var(--csd-body) !important;
}

#specification table {
    width: 100%;
    border-collapse: collapse;
}

#specification th,
#specification td {
    padding: 11px 14px;
    border: 1px solid var(--csd-line);
    font-size: 13.5px;
    text-align: left;
}

#specification th {
    background-color: #FAF7F2;
    font-weight: 700;
    color: var(--csd-ink) !important;
}

#description {
    max-width: 74ch;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.85;
}

#description p {
    margin: 0 0 16px;
}

#description p:last-child { margin-bottom: 0; }

#description strong,
#description b {
    font-weight: 700;
}

#description ul,
#description ol {
    margin: 0 0 16px;
    padding-left: 20px;
}

#description li {
    margin-bottom: 7px;
    line-height: 1.7;
}

#description img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 8px 0 18px;
}

/* Ingredient lists and similar long runs read better slightly smaller */
#description p:only-of-type,
#description p:last-of-type {
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .product-tab-style1 {
        margin-top: 30px !important;
        padding-bottom: 16px;
        gap: 7px;
    }

    .product-tab-style1 .nav-link {
        height: 36px;
        padding: 0 16px !important;
        font-size: 11px !important;
        letter-spacing: .5px;
    }

    #productTabContent { padding-top: 20px; }

    #description {
        font-size: 14px;
        line-height: 1.75;
        max-width: none;
    }
}

/* ============================================================
   7. Sticky buy bar (mobile)
   ============================================================ */
.cs-pd-stickybuy {
    display: none;
}

@media (max-width: 991.98px) {
    .cs-pd-stickybuy {
        position: fixed;
        left: 0;
        right: 0;
        /* clears the fixed mobile bottom nav */
        bottom: 58px;
        z-index: 995;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        background-color: #fff;
        border-top: 1px solid var(--csd-line);
        box-shadow: 0 -6px 22px rgba(15, 30, 51, .12);
        transform: translateY(120%);
        transition: transform .3s cubic-bezier(.2, .7, .3, 1);
    }

    .cs-pd-stickybuy.is-visible {
        transform: translateY(0);
    }

    .cs-pd-stickybuy-info {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .cs-pd-stickybuy-name {
        font-size: 12px;
        font-weight: 600;
        color: var(--csd-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cs-pd-stickybuy-price {
        font-size: 15px;
        font-weight: 800;
        color: var(--csd-navy);
    }

    .cs-pd-stickybuy-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 20px;
        border: none;
        border-radius: 999px;
        background-color: var(--csd-navy);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }

    .cs-pd-stickybuy-btn:active {
        transform: scale(.98);
    }
}

/* ============================================================
   8. Layout / gallery fit
   ============================================================ */
@media (min-width: 992px) {
    /* Keeps the gallery from towering over a short info column */
    .product-details__slider {
        position: sticky;
        top: 150px;
    }
}

@media (max-width: 991.98px) {
    .product-details {
        padding-top: 26px;
    }

    .product-details .row.gx-60 > [class*="col-"] + [class*="col-"] {
        margin-top: 26px;
    }

    .cs-pd-overview li strong {
        flex-basis: 44%;
        max-width: 44%;
    }
}

@media (max-width: 575.98px) {
    .product-details .actions {
        gap: 10px;
    }

    .product-details .actions .add-to-cart-btn,
    .product-details .actions .buy-now-btn {
        flex: 1 1 100%;
    }

    .product-details .quantity {
        flex: 1 1 100% !important;
        justify-content: space-between;
        height: 48px;
    }

    /* Full-width stepper: let the number take the middle so the two
       buttons sit at the ends instead of huddling on the left */
    .product-details .quantity .qty-input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* SKU and Category stay label-and-value on ONE line — they are short
       enough, and stacking them wasted two rows of height. Only the tag
       row stacks, because side by side the label left the chips a narrow
       column and every chip wrapped onto its own line. */
    .cs-pd-metarow {
        flex-direction: row;
        align-items: baseline;
        gap: 12px;
        padding: 9px 0;
    }

    .cs-pd-metarow--tags {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 11px 0;
    }

    .cs-pd-metalabel {
        min-width: 66px;
        font-size: 10.5px;
    }

    .cs-pd-metarow--tags .cs-pd-metalabel {
        min-width: 0;
    }

    .cs-pd-tags {
        width: 100%;
        gap: 6px;
    }

    .cs-pd-tag {
        padding: 4px 10px;
        font-size: 11px;
    }

    .cs-pd-overview li { font-size: 13px; }

    /* Overview: label over value too, so long values stop being squeezed
       into a 44% column */
    .cs-pd-overview li {
        flex-direction: column;
        gap: 2px;
    }

    .cs-pd-overview li strong {
        flex-basis: auto !important;
        max-width: none !important;
        font-size: 11px;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--csd-muted);
    }

    .cs-pd-overview li.is-plain {
        flex-direction: row;
    }

    /* Share row sits under its label rather than beside it */
    .product-details .social-links {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ============================================================
   Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .cs-pd-stickybuy,
    .product-tab-style1 .nav-link,
    .cs-pd-tag {
        transition: none;
    }
}