/* ==========================================================================
   Yuvraj Jewellers — visual redesign layer
   Reference: editorial luxury-jewellery aesthetic (cream backgrounds, near-
   black serif headings, thin uppercase sans nav, monochrome buttons, line
   icons, dark footer). Loaded after custom.css/ecommerce.css so its rules
   take precedence without having to rewrite the legacy stylesheet in place.
   ========================================================================== */

/* Design tokens (palette, type, spacing, z-index) now live in css/tokens.css,
   which loads before this file. Do not redeclare them here — this sheet loads
   later, so a :root block here would silently win over the token layer. */

body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--cream);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Typography helpers ---------- */
.theme-eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--gold-deep);
    text-align: center;
    margin-bottom: var(--sp-2);
}
.theme-heading {
    font-family: var(--font-serif);
    font-size: var(--fs-h2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-heading);
    line-height: var(--lh-heading);
    text-align: center;
    color: var(--ink);
    margin-bottom: var(--sp-3);
}
/* Hairline gold rule under section headings — the one recurring brand motif. */
.theme-heading::after {
    content: "";
    display: block;
    width: 54px;
    height: 1px;
    margin: var(--sp-4) auto 0;
    background: var(--gold);
}
.theme-subheading {
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    max-width: 62ch;
    margin: 0 auto var(--sp-7);
}
.theme-section {
    padding: var(--section-y) var(--gutter);
    max-width: var(--content-max);
    margin: 0 auto;
}
.theme-section-alt { background: var(--cream-alt); }

/* ---------- Buttons ---------- */
.btn-theme-solid, .btn-theme-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
    border: 1px solid var(--ink);
}
.btn-theme-solid {
    background: var(--ink);
    color: var(--white) !important;
}
.btn-theme-solid:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--white) !important; }
.btn-theme-outline {
    background: transparent;
    color: var(--ink) !important;
}
.btn-theme-outline:hover { background: var(--ink); color: var(--white) !important; }
.btn-theme-outline.is-on-dark { border-color: var(--white); color: var(--white) !important; }
.btn-theme-outline.is-on-dark:hover { background: var(--white); color: var(--ink) !important; }

/* Keyboard focus — none of the legacy sheets provided a visible focus ring. */
.btn-theme-solid:focus-visible,
.btn-theme-outline:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 2px;
}

/* ==========================================================================
   Header
   ========================================================================== */
/* Header is fixed to the viewport so it stays visible while scrolling.
   `position: sticky` was tried first, but this codebase's `body {
   overflow-x: hidden }` (custom.css) makes `overflow-y` auto-compute to
   `auto` per the CSS overflow spec (an explicit x/visible-y asymmetry always
   resolves the visible side to auto) — which unreliably breaks sticky
   descendants across browsers. `position: fixed` sidesteps that entirely
   (its containing block is the viewport, not affected by overflow), and
   because it also overrides the legacy `.headerbarscroll` class from
   includes/plug_links_foot.php (same fixed value, no behavior change on
   scroll, and this rule's white background already wins over that class's
   leftover orange gradient via cascade order). Removing it from flow means
   the page needs top padding to compensate — see the header-height script
   at the bottom of this file, which sets `--header-height` and is consumed
   by `body { padding-top: var(--header-height) }` below. */
.headerbar {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
}
body { padding-top: var(--header-height, 127px); }
.hdr_marquee { display: none; }
.hdr_top_desc { display: none; }

.headerinner { padding: 0; }
.headerinner .row { align-items: center; padding: 22px 24px 10px; margin: 0; }
.hdr_logo { text-align: center; }
.hdr_logo .hdrlogoimg { display: none; }
.hdr_logo::after {
    content: "YUVRAJ JEWELLERS";
    font-family: var(--font-serif);
    font-size: 26px;
    letter-spacing: 4px;
    color: var(--ink);
    white-space: nowrap;
}
.hdr_nav_section .navbar {
    background: none !important;
    box-shadow: none !important;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}
.hdr_nav_section .nav-link {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink) !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid transparent;
}
.hdr_nav_section .nav-link:hover { border-bottom-color: var(--ink); }

.hdr_action_bar {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px;
    max-width: 1320px;
    margin: 0 auto;
}
.hdr_search_input { font-family: var(--font-sans); font-size: 13px; border: 1px solid var(--line); background: var(--cream-alt); }
.hdr_search_btn { background: var(--ink); border-color: var(--ink); }
.hdr_action_icon { color: var(--ink); }
.hdr_action_icon:hover { color: var(--gold-deep); }
/* Gold, not --danger: these are tallies, not errors. */
.hdr_action_badge { background: var(--gold-deep); color: var(--white); }

.mob_menu_dropdown { background: var(--white); }
.mob_menu_link { font-family: var(--font-sans); letter-spacing: 1px; text-transform: uppercase; font-size: 13px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer_section { background: var(--footer-bg); color: var(--footer-text); padding: 60px 0 20px; }
.footer_section h5 { font-family: var(--font-sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--white); }
.footer_section h5 u { text-decoration: none; }
.footer_section a { color: var(--footer-text); text-decoration: none; font-size: 13px; line-height: 2.1; }
.footer_section a:hover { color: var(--white); }
.footer_logo { max-width: 160px; filter: brightness(0) invert(1); opacity: .9; }
.ftr_address { color: var(--footer-text); font-size: 13px; margin-top: 14px; line-height: 1.8; }
.footer_navigation ul, .footer_social ul { list-style: none; padding: 0; margin-top: 10px; }
.footer_social .icon { color: var(--footer-text); font-size: 16px; }
.footer_social li:hover .icon { color: var(--white); }
.ftr_newsletter_row { display: flex; border: 1px solid var(--footer-line); }
.ftr_newsletter_row input { flex: 1; background: none; border: none; color: var(--white); padding: 10px 12px; font-family: var(--font-sans); font-size: 13px; }
.ftr_newsletter_row input::placeholder { color: var(--footer-text); }
.ftr_newsletter_row button { background: none; border: none; color: var(--white); padding: 0 14px; cursor: pointer; }
/* BUG FIX [2026-09-17]: legacy custom.css sets ".footer_section form input, .footer_section form button { width:100% }"
   at higher specificity than the classes above, which inflates the button's flex-basis and starves the input.
   ID selectors here beat that legacy rule regardless of viewport, without touching custom.css/media-query.css. */
#subscribe_email { flex: 1 1 auto; min-width: 0; width: auto; }
#subscribe_submit { flex: 0 0 auto; width: auto; }

/* ==========================================================================
   Fixed bottom-right floating buttons (scroll-to-top + WhatsApp).
   Redesign [2026-09-17]: legacy custom.css independently fixed-positions
   .topbtn/.whatsapp with hand-tuned "bottom" offsets to avoid overlap;
   here both are nested in .theme_fab_stack (a single flex column) instead,
   so sizing/spacing stays consistent without per-element offset math.
   The .topbtn/.topbtnshow classes and #topbutton/.whatsapp click targets
   are unchanged so includes/plug_links_foot.php's JS keeps working as-is.
   ========================================================================== */
.theme_fab_stack {
    position: fixed; right: 20px; bottom: 20px; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.theme_fab_stack .topbtn,
.theme_fab_stack .whatsapp {
    position: static; right: auto; bottom: auto; width: 48px; height: 48px;
    display: none; align-items: center; justify-content: center;
    border-radius: 50%; box-shadow: 0 4px 14px rgba(28,26,23,.22);
    transition: transform .2s ease, box-shadow .2s ease;
    -webkit-animation: none; animation: none;
}
.theme_fab_stack .topbtn.topbtnshow { display: flex; }
.theme_fab_stack .topbtn {
    background: var(--ink); color: var(--white); font-size: 18px;
}
.theme_fab_stack .topbtn:hover { color: var(--white); background: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(28,26,23,.28); }
.theme_fab_stack .whatsapp { display: flex; width: 50px; height: 50px; background: #25D366; }
.theme_fab_stack .whatsapp img { width: 26px; height: 26px; }
.theme_fab_stack .whatsapp:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(28,26,23,.28); }
@media (max-width: 576px) {
    .theme_fab_stack { right: 14px; bottom: 14px; }
}

/* ==========================================================================
   Homepage
   ========================================================================== */
/* Hero.
   Previously the image had a fixed pixel height and the caption was absolutely
   positioned on top of it at every width. On a phone the image was clamped
   shorter than the caption, and because the wrapper's height was driven only by
   the image, the caption spilled out and rendered over the section below.
   The mobile layout is now in flow — image, then caption on an ink panel — so
   the overlap is structurally impossible rather than tuned away. The overlay
   treatment returns at >=992px, where there is room for it. */
.theme_hero_wrap {
    position: relative;
    overflow: hidden;
    background: var(--ink);
}
.theme_hero_wrap .carousel-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    /* Banner photography puts the subject above centre; a centred crop cuts the
       lit upper third and leaves mostly dark foreground. */
    object-position: center 38%;
}
.theme_hero_caption {
    position: static;
    padding: var(--sp-6) var(--gutter) var(--sp-7);
    background: var(--ink);
    color: var(--white);
    text-align: center;
}
.theme_hero_caption h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    color: var(--white);
    margin-bottom: var(--sp-3);
}
.theme_hero_caption p {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .8);
    margin-bottom: var(--sp-5);
}
.theme_hero_caption .btn-theme-solid,
.theme_hero_caption .btn-theme-outline { margin: 0 var(--sp-2) var(--sp-2) 0; }
/* On dark, the solid button needs to read as the primary action. */
.theme_hero_caption .btn-theme-solid {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink) !important;
}
.theme_hero_caption .btn-theme-solid:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--ink) !important;
}

@media (min-width: 992px) {
    .theme_hero_wrap .carousel-item img {
        aspect-ratio: auto;
        height: min(72vh, 620px);
    }
    /* Scrim behind the overlay caption — the banner photography is busy and
       light-toned on the left, so white text alone was not legible. */
    .theme_hero_wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(90deg,
            rgba(20, 19, 18, .52) 0%,
            rgba(20, 19, 18, .18) 40%,
            rgba(20, 19, 18, 0) 72%);
    }
    .theme_hero_caption {
        position: absolute;
        left: var(--sp-8);
        top: 50%;
        transform: translateY(-50%);
        max-width: 520px;
        padding: 0;
        background: none;
        text-align: left;
        z-index: var(--z-sticky);
        /* Scrim so the headline stays legible over a busy photograph. */
        text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
    }
    .theme_hero_caption h1 { font-size: var(--fs-display); }
}

.theme_cat_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.theme_cat_card { display: block; text-decoration: none; border: 1px solid var(--line); background: var(--white); }
.theme_cat_card_img { aspect-ratio: 1 / 1; background-size: cover; background-position: center; }
.theme_cat_card_label {
    text-align: center;
    padding: 16px 8px;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    border-top: 1px solid var(--line);
}

.theme_product_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.theme_product_card { position: relative; }
.theme_product_card_img_wrap { position: relative; background: var(--cream-alt); margin-bottom: 14px; }
.theme_product_card_img_wrap img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.theme_product_wish_btn {
    position: absolute; top: 12px; right: 12px;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--white); border: none; color: var(--ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.theme_product_wish_btn.is-active { color: var(--danger); }
.theme_product_name { font-family: var(--font-serif); font-size: 16px; margin-bottom: 4px; }
.theme_product_price { font-size: 14px; color: var(--ink-soft); margin-bottom: 12px; }
.theme_product_card .btn-theme-outline { display: block; width: 100%; text-align: center; padding: 12px; font-size: 11px; }

.theme_collection_banner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.theme_collection_text { background: var(--cream-alt); display: flex; flex-direction: column; justify-content: center; padding: 70px; }
.theme_collection_text h2 { font-family: var(--font-serif); font-size: 34px; text-transform: uppercase; margin-bottom: 20px; }
.theme_collection_text p { color: var(--ink-soft); margin-bottom: 26px; line-height: 1.8; }
.theme_collection_img { min-height: 420px; background-size: cover; background-position: center; }

.theme_trust_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.theme_trust_item i { font-size: 32px; color: var(--ink); margin-bottom: 16px; }
.theme_trust_item h6 { font-family: var(--font-sans); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.theme_trust_item p { color: var(--ink-soft); font-size: 13px; }

.theme_promo_banner { position: relative; min-height: 380px; background-size: cover; background-position: center; display: flex; align-items: center; }
.theme_promo_banner::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.theme_promo_banner_inner { position: relative; z-index: 2; color: var(--white); max-width: 500px; margin-left: 80px; }
.theme_promo_banner_inner h2 { font-family: var(--font-serif); font-size: 36px; text-transform: uppercase; margin-bottom: 20px; }

.theme_gallery_grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.theme_gallery_grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }

.theme_newsletter { text-align: center; background: var(--cream-alt); padding: 70px 24px; }
.theme_newsletter_form { display: flex; max-width: 420px; margin: 0 auto; border: 1px solid var(--ink); }
.theme_newsletter_form input { flex: 1; border: none; background: none; padding: 14px 16px; font-family: var(--font-sans); font-size: 13px; }
.theme_newsletter_form button { background: var(--ink); color: var(--white); border: none; padding: 0 22px; }

/* ==========================================================================
   Product listing (products.php) — restyles the existing markup/classes
   rather than replacing them, to keep the working filter/AJAX JS intact.
   BUG FIX [2026-09-17]: filter moved from a full-width top bar into a left
   sidebar (.products_layout / .product_filter_sidebar / .product_results_col);
   category buttons became a vertical list. Field IDs, .product_filter_bar,
   #productResults and .product_filter_cat_btn/.product_page_link/
   .product_filter_reset are unchanged so the existing AJAX JS keeps working. */
.products_section { max-width: 1320px; margin: 0 auto; padding: 50px 24px 80px; }
.products_layout { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.product_filter_sidebar { flex: 0 0 260px; }
.product_results_col { flex: 1 1 600px; min-width: 0; }
@media (max-width: 992px) {
    .product_filter_sidebar { flex: 1 1 100%; }
}
.product_filter_bar { background: var(--cream-alt); border: 1px solid var(--line); padding: 24px; }
.product_filter_bar .row > div { margin-bottom: 22px; }
.product_filter_bar .row > div:last-child { margin-bottom: 0; }
.product_filter_bar label { font-family: var(--font-sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 8px; }
.product_filter_categories { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0 0 8px; }
/* [2026-09-22] .product_filter_cat_btn is now a <label> (paired with a real,
   visually-hidden checkbox) instead of a <button>, so several categories can
   be checked at once instead of one exclusive pill. The row/pill LOOK is
   unchanged: same box, same "solid ink" active state — just driven by
   :checked instead of a JS-toggled .is-active class. <label> is inline by
   default (unlike <button>), so display:block is added to keep width:100%
   working. */
.product_filter_cat_btn {
    display: block;
    background: var(--white); border: 1px solid var(--line); color: var(--ink);
    font-family: var(--font-sans); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    padding: 10px 14px; cursor: pointer; width: 100%; text-align: left;
}
/* Visually hidden, not display:none — stays focusable/tabbable and its
   paired <label for="..."> still toggles it on click or Space. */
.product_filter_cat_all, .product_filter_cat_checkbox {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; opacity: 0;
}
.product_filter_cat_all:checked + .product_filter_cat_btn,
.product_filter_cat_checkbox:checked + .product_filter_cat_btn,
.product_filter_cat_btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* The real input is invisible, so its focus ring has to be drawn on the label. */
.product_filter_cat_all:focus-visible + .product_filter_cat_btn,
.product_filter_cat_checkbox:focus-visible + .product_filter_cat_btn { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.product_filter_input { font-family: var(--font-sans); font-size: 13px; border: 1px solid var(--line); background: var(--white); padding: 10px 12px; width: 100%; }
.product_filter_actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.product_filter_actions .btn-danger {
    background: var(--ink) !important; border-color: var(--ink) !important;
    font-family: var(--font-sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 2px;
}
.product_filter_reset { font-family: var(--font-sans); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); display: inline-block; margin: 0; }
.product_results_summary { font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); margin-bottom: 24px; letter-spacing: .5px; }

.product_box {
    background: var(--white); border: none; padding: 0; text-align: left;
    display: flex; flex-direction: column;
}
.product_box img { width: 100%; aspect-ratio: 1/1; object-fit: cover; margin-bottom: 14px; background: var(--cream-alt); }
.product_box h5 { font-family: var(--font-serif); font-size: 17px; margin-bottom: 4px; }
.product_box p { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.product_box .btn-danger.pdp_view_link {
    background: transparent !important; border: 1px solid var(--ink) !important; color: var(--ink) !important;
    font-family: var(--font-sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
    border-radius: 2px; text-align: center; padding: 12px; align-self: stretch;
}
.product_box .btn-danger.pdp_view_link:hover { background: var(--ink) !important; color: var(--white) !important; }

.product_pagination { display: flex; justify-content: center; gap: 6px; margin-top: 50px; flex-wrap: wrap; }
.product_page_link {
    font-family: var(--font-sans); font-size: 12px; border: 1px solid var(--line); background: var(--white);
    color: var(--ink); padding: 8px 14px; cursor: pointer;
}
.product_page_link.is-active, .product_page_link:hover:not(:disabled) { background: var(--ink); color: var(--white); border-color: var(--ink); }
.product_page_link:disabled { opacity: .4; cursor: not-allowed; }

/* ==========================================================================
   Product detail page (product-detail.php)
   ========================================================================== */
.pdp_wrap { max-width: 1320px; margin: 0 auto; padding: 50px 24px 90px; }
.pdp_breadcrumb { font-family: var(--font-sans); letter-spacing: .5px; }
.pdp_main_image_wrap { border: 1px solid var(--line); border-radius: 0; background: var(--cream-alt); position: relative; cursor: zoom-in; overflow: visible; }
.pdp_main_image_wrap img { border-radius: 0; }

/* Hover magnifier: a lens tracks the cursor over the image, and a zoomed
   panel appears beside it (desktop/mouse only — see the JS guard). */
.pdp_zoom_lens {
    display: none;
    position: absolute;
    width: 150px; height: 150px;
    border: 1px solid var(--ink);
    background: rgba(255, 255, 255, .35);
    pointer-events: none;
    z-index: 5;
}
.pdp_zoom_pane {
    display: none;
    position: absolute;
    top: 0;
    left: calc(100% + 24px);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-color: var(--white);
    border: 1px solid var(--line);
    box-shadow: 0 8px 28px rgba(0,0,0,.15);
    z-index: 30;
    pointer-events: none;
}
@media (max-width: 992px) {
    .pdp_zoom_lens, .pdp_zoom_pane { display: none !important; }
    .pdp_main_image_wrap { cursor: default; }
}
.pdp_thumb.is-active { border-color: var(--ink); }
.pdp_product_name { font-family: var(--font-serif); font-size: 30px; text-transform: uppercase; letter-spacing: 1px; }
.pdp_sku { font-family: var(--font-sans); }
.pdp_price_sale { font-family: var(--font-sans); font-weight: 500; color: var(--ink); }
.pdp_price_breakdown { font-family: var(--font-sans); font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.6; }
.badge_in_stock { color: #3f7a3f; }
.badge_low_stock { color: #b07a2a; }
.badge_out_of_stock { color: var(--danger); }
.pdp_variation_select_wrap select, .pdp_qty_row input {
    font-family: var(--font-sans); border: 1px solid var(--line); border-radius: 0;
}
.pdp_action_row .btn-outline-dark.pdp_add_cart_btn,
.pdp_action_row .btn-outline-dark.pdp_enquire_btn {
    border: 1px solid var(--ink); color: var(--ink); background: transparent;
    font-family: var(--font-sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 2px; padding: 14px 26px;
}
.pdp_action_row .btn-outline-dark.pdp_add_cart_btn:hover,
.pdp_action_row .btn-outline-dark.pdp_enquire_btn:hover { background: var(--ink); color: var(--white); }
.pdp_enquire_modal .modal-title { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: 1px; font-size: 18px; }
.pdp_enquire_modal .modal-content { border-radius: 0; }
.pdp_enquire_product_name { font-family: var(--font-sans); font-weight: 600; color: var(--ink-soft); margin-bottom: 16px; }
.pdp_enquire_modal .form-label { font-family: var(--font-sans); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.pdp_enquire_modal .form-control { border-radius: 0; border: 1px solid var(--line); }
.pdp_enquire_hint { display: block; font-family: var(--font-sans); font-size: 11px; color: var(--ink-soft); margin-top: 6px; }
.pdp_enquire_modal .btn-danger {
    background: var(--ink) !important; border-color: var(--ink) !important;
    font-family: var(--font-sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 2px; padding: 12px;
}
.pdp_action_row .btn-danger.pdp_buy_now_btn,
.pdp_action_row .btn-danger.pdp_enquire_btn {
    background: var(--ink) !important; border-color: var(--ink) !important;
    font-family: var(--font-sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 2px; padding: 14px 26px;
}
.pdp_enquiry_only_note { font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); margin: 4px 0 16px; }
.pdp_wishlist_btn { border-radius: 0; }
.pdp_tabs_section h4, .pdp_related_section h4, .pdp_recently_viewed_section h4 {
    font-family: var(--font-serif); text-transform: uppercase; letter-spacing: 1px; font-size: 22px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 20px;
}
.pdp_related_card img { border: 1px solid var(--line); background: var(--cream-alt); }
.pdp_related_name { font-family: var(--font-serif); }
.pdp_review_form_box .btn-danger {
    background: var(--ink) !important; border-color: var(--ink) !important;
    font-family: var(--font-sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 2px;
}

/* ==========================================================================
   Cart / Checkout / Account / Order-success — consistent visual language
   (headings, buttons, borders) layered over the existing functional markup.
   ========================================================================== */
.cart_page_wrap, .checkout_page_wrap, .account_page_wrap, .order_success_wrap, .auth_page_wrap { max-width: 1320px; margin: 0 auto; padding: 50px 24px 90px; }
.cart_page_title, .checkout_page_wrap h2, .account_content h2, .order_success_wrap h2, .auth_form_box h2 {
    font-family: var(--font-serif); text-transform: uppercase; letter-spacing: 1px;
}
.cart_table th { font-family: var(--font-sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--ink); }
.cart_totals_box, .checkout_summary_box, .account_card, .auth_form_box, .checkout_section { background: var(--white); border: 1px solid var(--line); border-radius: 0; }
.cart_checkout_btn, .checkout_place_order_btn, .btn-danger { border-radius: 2px; }
.cart_checkout_btn.btn.btn-danger, .checkout_place_order_btn.btn.btn-danger, .auth_submit_btn.btn.btn-danger {
    background: var(--ink) !important; border-color: var(--ink) !important;
    font-family: var(--font-sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
}
.cart_checkout_btn.btn.btn-danger:hover, .checkout_place_order_btn.btn.btn-danger:hover, .auth_submit_btn.btn.btn-danger:hover { opacity: .85; }
.account_sidebar li.is-active a, .account_sidebar li a:hover { background: var(--ink); }
.orders_table th { font-family: var(--font-sans); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); }
.order_success_icon { color: var(--ink); }
.order_success_actions .btn-danger { background: var(--ink) !important; border-color: var(--ink) !important; }

/* ---------- Checkout fulfillment method (Delivery / Pickup from Store) ---------- */
.fulfillment_method_options { display: flex; gap: 14px; flex-wrap: wrap; }
.fulfillment_method_card { flex: 1 1 220px; margin: 0; cursor: pointer; }
.fulfillment_method_card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.fulfillment_method_card_body {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    border: 1px solid var(--line); border-radius: 0; padding: 16px 18px; background: var(--cream-alt);
    transition: border-color .15s ease, background .15s ease;
}
.fulfillment_method_card_body i { font-size: 18px; color: var(--ink-soft); margin-bottom: 4px; }
.fulfillment_method_card_body strong { font-family: var(--font-sans); font-size: 13px; letter-spacing: .5px; text-transform: uppercase; }
.fulfillment_method_card_body small { color: var(--ink-soft); font-size: 12px; }
.fulfillment_method_card input[type="radio"]:checked + .fulfillment_method_card_body {
    border-color: var(--ink); background: var(--white);
}
.fulfillment_method_card input[type="radio"]:checked + .fulfillment_method_card_body i { color: var(--ink); }
.pickup_location_info { margin-top: 14px; padding: 14px 16px; background: var(--cream-alt); border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.pickup_location_info p { margin: 0; }

/* ---------- Static content pages (FAQ, policies) ---------- */
.theme_static_page { max-width: 900px; margin: 0 auto; padding: 60px 24px 90px; }
.theme_static_page h1 { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: 1px; font-size: 32px; margin-bottom: 30px; text-align: center; }
.theme_static_page h2 { font-family: var(--font-serif); font-size: 20px; margin: 30px 0 12px; }
.theme_static_page p, .theme_static_page li { color: var(--ink-soft); line-height: 1.8; }
.theme_static_page .updated_note { text-align: center; color: var(--ink-soft); font-size: 13px; margin-bottom: 40px; }
.theme_faq_item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.theme_faq_question { font-family: var(--font-sans); font-weight: 500; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.theme_faq_answer { color: var(--ink-soft); margin-top: 12px; line-height: 1.7; display: none; }
.theme_faq_item.is-open .theme_faq_answer { display: block; }
.theme_faq_item.is-open .theme_faq_icon { transform: rotate(45deg); }
.theme_faq_icon { transition: transform .2s ease; font-size: 18px; }

/* ---------- About & Contact pages ---------- */
.theme_jewellery_types_grid { grid-template-columns: repeat(3, 1fr); }
.theme_contact_info_row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 32px; margin-top: 18px; font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); }
.theme_contact_info_row a { color: var(--ink-soft); text-decoration: none; }
.theme_contact_info_row a:hover { color: var(--ink); }
.theme_contact_info_row i { margin-right: 6px; color: var(--ink); }
.theme_contact_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
.theme_contact_form_pane { background: var(--white); border: 1px solid var(--line); padding: 44px; }
.theme_contact_input { width: 100%; font-family: var(--font-sans); font-size: 14px; border: 1px solid var(--line); border-radius: 0; background: var(--cream-alt); padding: 13px 16px; margin-bottom: 18px; color: var(--ink); }
.theme_contact_input:focus { outline: none; border-color: var(--ink); background: var(--white); }
textarea.theme_contact_input { resize: vertical; }
.theme_contact_map_pane { border: 1px solid var(--line); min-height: 480px; overflow: hidden; }
.theme_contact_map_pane iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }

/* NOTE: the hero's responsive rules deliberately live with the hero itself
   (mobile-first, min-width) rather than here. The old max-width:992px block
   used to re-apply `height:440px` and re-absolutely-position the caption on
   phones, which is what made the caption spill over the following section. */
@media (max-width: 992px) {
    .theme_cat_grid, .theme_product_grid, .theme_trust_grid, .theme_jewellery_types_grid { grid-template-columns: repeat(2, 1fr); }
    .theme_collection_banner, .theme_contact_grid { grid-template-columns: 1fr; }
    .theme_gallery_grid { grid-template-columns: repeat(3, 1fr); }
    .theme_collection_text { padding: var(--sp-7) var(--gutter); }
    .theme_collection_img { min-height: 260px; }
    .theme_promo_banner { min-height: 300px; }
    .theme_promo_banner_inner { margin-left: 0; padding: var(--sp-6) var(--gutter); max-width: none; }
    .hdr_logo::after { font-size: 20px; }
    .hdr_nav_section .navbar { gap: 16px; }
}
@media (max-width: 576px) {
    .theme_cat_grid, .theme_product_grid, .theme_trust_grid, .theme_jewellery_types_grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
    .theme_gallery_grid { grid-template-columns: repeat(2, 1fr); }
    .theme-heading { font-size: var(--fs-h3); }
    .theme_collection_text h2, .theme_promo_banner_inner h2 { font-size: var(--fs-h3); }
}


/* ==========================================================================
   HOME PRODUCT CAROUSELS  (index.php — New & Featured / Best Sellers)

   OwlCarousel 2.3.4, already loaded site-wide by includes/plug_links.php and
   includes/plug_links_foot.php. owl.theme.default.css is not loaded anywhere
   in this project, so the arrows and dots below are written from scratch
   against the design tokens rather than overriding a vendor theme.

   Everything here is scoped to .home_carousel_wrap / .home_product_carousel so
   the Bootstrap hero carousel (#carouselExampleFade on index / about / contact
   / products) and the admin panel are untouched.
   ========================================================================== */

/* Pre-init, and permanent fallback if the plugin never arrives.
   owl.carousel.min.css ships `.owl-carousel { display: none }` and only reveals
   the track once Owl's JavaScript adds `.owl-loaded`. Both the CSS and the JS
   are served by the third-party COMMON_PLUGINS host, which has already 404'd an
   entire library once (see the BUG FIX [2026-09-15] note in plug_links.php), so
   without this rule a single failed request would leave the homepage showing no
   products at all. This sheet loads after Owl's CSS and the selector is more
   specific, so the cards fall back to exactly the grid these sections used
   before the carousel. */
.home_product_carousel:not(.owl-loaded) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.home_carousel_wrap { position: relative; }

/* ---------- Arrows ---------- */
.home_carousel_wrap .owl-nav { margin: 0; }

.home_carousel_wrap .owl-nav button.owl-prev,
.home_carousel_wrap .owl-nav button.owl-next {
    position: absolute;
    /* Centred on the square product image rather than the whole card, whose
       height includes the name, price and CTA. */
    top: 38%;
    transform: translateY(-50%);
    width: var(--tap-min);
    height: var(--tap-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--ink);
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 2px 10px rgba(26, 26, 26, .08);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
    z-index: 2;
}

/* Pulled into .theme-section's own side padding (--gutter, 32px from 768px up)
   rather than sitting on the first and last card. The arrows only ever render
   at >=992px, so that 32px is always there and -22px keeps 10px of clearance to
   the section edge — nothing can be clipped by the page's overflow-x: clip.
   At 1024px this cuts the overlap of a 218px card image from 52px to 22px. */
.home_carousel_wrap .owl-nav button.owl-prev { left: -22px; }
.home_carousel_wrap .owl-nav button.owl-next { right: -22px; }

.home_carousel_wrap .owl-nav button.owl-prev:hover,
.home_carousel_wrap .owl-nav button.owl-next:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
}

.home_carousel_wrap .owl-nav button.owl-prev:focus-visible,
.home_carousel_wrap .owl-nav button.owl-next:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Owl adds .disabled when every item already fits — e.g. Best Sellers' three
   products in four desktop slots. */
.home_carousel_wrap .owl-nav.disabled,
.home_carousel_wrap .owl-dots.disabled { display: none; }

/* ---------- Dots ---------- */
/* Equal-height slides. Owl floats its items, so each slide is only as tall as
   its own content and a two-line product name drops that card's CTA below the
   others in the row. A flex stage equalises them.
   flex: 0 0 auto is essential — Owl writes each item's width inline, and
   without it flex would shrink them and the track would misalign. */
.home_carousel_wrap .owl-stage { display: flex; }
/* Owl's clearfix pseudo-element would otherwise become a stray flex item. */
.home_carousel_wrap .owl-stage::after { display: none; }
.home_carousel_wrap .owl-item { flex: 0 0 auto; display: flex; }
.home_carousel_wrap .owl-item .theme_product_card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
/* Pushes the CTA to the bottom of whatever height the row settles on. Covers
   every variant, since Add to Bag / Enquire Now / View Product / the Out of
   Stock span all carry .btn-theme-outline. */
.home_carousel_wrap .owl-item .theme_product_card .btn-theme-outline { margin-top: auto; }

.home_carousel_wrap .owl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: var(--sp-5);
}

/* Sized, not padded: owl.carousel.min.css ships
   `.owl-carousel button.owl-dot { padding: 0 !important }`, so a
   padding-based tap target silently does nothing. The button is the hit area,
   the nested <span> is the visible dot. */
.home_carousel_wrap .owl-dots button.owl-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    background: none;
    border: 0;
    line-height: 0;
}

.home_carousel_wrap .owl-dots button.owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--line-strong);
    transition: background-color .2s ease, width .2s ease;
}

.home_carousel_wrap .owl-dots button.owl-dot:hover span { background: var(--gold-deep); }

.home_carousel_wrap .owl-dots button.owl-dot.active span {
    width: 22px;
    background: var(--gold);
}

@media (max-width: 992px) {
    .home_product_carousel:not(.owl-loaded) { grid-template-columns: repeat(2, 1fr); }
    /* Dots carry navigation on touch devices; arrows this size would sit on top
       of the cards. */
    .home_carousel_wrap .owl-nav { display: none; }
    /* Full tap target where the dots are the only control. */
    .home_carousel_wrap .owl-dots button.owl-dot { height: var(--tap-min); }
}

@media (max-width: 576px) {
    .home_product_carousel:not(.owl-loaded) { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
    .home_carousel_wrap .owl-nav button.owl-prev,
    .home_carousel_wrap .owl-nav button.owl-next,
    .home_carousel_wrap .owl-dots button.owl-dot span { transition: none; }
}