/* ============================================================
   Yashram Trading Company - single site stylesheet
   Built from the former style.css + shop.css + pages.css +
   home.css so every page loads one file. Sections keep their
   original order, which is what the cascade relied on.
   ============================================================ */

/* ############################################################
   1. FONTS
   ############################################################ */
/* Self-hosted Poppins (subset: latin) - replaces Google Fonts CDN dependency */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/poppins-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-latin-700-normal.woff2') format('woff2');
}


/* ############################################################
   2. GLOBAL - layout, header, nav, footer, home-page skeleton
   ############################################################ */
/* ============================================================
   Yashram Trading Company - Home Page
   ============================================================ */

:root {
    /* Navy + silver sampled from images/logo.jpg (bg #02304f, mark #787878-#bebebe) */
    --primary: #063a61;          /* brand navy */
    --primary-dark: #022742;     /* top bar / hover */
    --primary-light: #0d5286;    /* discount badges */
    --mist: #9dc2dd;             /* pale blue for rules, chevrons, nav hover */
    --accent: #ee4d7d;           /* pink accent */
    --amber: #f5a623;            /* stars / offer */
    --text: #1f2937;
    --muted: #6b7280;
    --line: #e7e7e7;
    --tile: #f6f6f6;
    --cream: #f7f3ec;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: "Poppins", "Segoe UI", sans-serif;
    background: #fff;
    color: var(--text);
    line-height: 1.6;
    font-size: 14px;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================ TOP BAR ============================ */
.top-bar {
    background: var(--primary-dark);
    color: #fff;
    font-size: 12px;
    padding: 7px 0;
}

.top-bar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.top-bar a:hover { color: var(--amber); }

/* ---- offer ticker ----
   The track holds the offer list twice over and slides exactly one copy's
   width, so the loop meets itself with no jump. layout.js pads the list out
   until it is wider than the bar and sets the duration from the measured
   width, which keeps the speed constant however many offers are listed. */
.top-ticker {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}

.tt-track {
    display: flex;
    width: max-content;
    animation: tt-scroll 30s linear infinite;
}

.tt-group { display: flex; }

.tt-item {
    color: #ffd166;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 0 26px;
    white-space: nowrap;
}

@keyframes tt-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* let people stop it to read a long offer */
.top-ticker:hover .tt-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .tt-track { animation: none; }
}

.top-social {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

.top-social a { transition: .2s; }
.top-social a:hover { transform: translateY(-2px); }

/* ============================ HEADER ============================ */
.main-header {
    background: #fff;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 12px rgba(6, 58, 97, .05);
    position: sticky;
    top: 0;
    z-index: 90;
}

.header-container {
    display: flex;
    align-items: center;
    gap: 32px;
}

/* --- logo --- */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.logo-mark {
    width: 38px;
    height: 38px;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -.5px;
}

.logo-text sup { font-size: 9px; top: -.9em; } 


.logo img {
    height: 72px;
    width: auto;
    border-radius: 8px;
    display: block;
    /* box-shadow: 0 2px 10px rgba(2, 39, 66, .18); */
}

.footer-brand .logo img { height: 72px; }

/* --- search --- */
.search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f7f9fb;
    border: 1.5px solid #e3e8ee;
    border-radius: 999px;
    padding: 5px 5px 5px 22px;
    max-width: 620px;
    margin: 0 auto;
    position: relative;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.search-bar:focus-within {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(6, 58, 97, .09);
}

.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--text);
    background: transparent;
}

.search-bar input::placeholder { color: #9ca3af; }

.search-bar button {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    transition: .2s;
}

.search-bar button:hover { background: var(--primary-dark); }

/* --- header actions --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid #e3e8ee;
    display: grid;
    place-items: center;
    color: var(--primary);
    font-size: 15px;
    background: #fff;
    transition: .2s;
    position: relative;
}

/* the account control is a <button> (it opens the login popup) rather than a
   link, so clear the button defaults to match the icon links beside it */
button.icon-btn { padding: 0; cursor: pointer; font: inherit; }

.icon-btn:hover {
    border-color: var(--primary);
    background: #f2f7fb;
    transform: translateY(-1px);
}

.icon-btn.cart {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.icon-btn.cart:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.icon-btn .count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    display: grid;
    place-items: center;
}

.btn-quote {
    background: var(--primary);
    color: #fff;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(6, 58, 97, .22);
    transition: .2s;
}

.btn-quote:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(6, 58, 97, .3);
}

/* ============================ NAV ============================ */
.main-nav { background: var(--primary); }

.main-nav .container {
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    /* cancel the first item's padding so it lines up with the container edge */
    margin-left: -14px;
}

.nav-links > li { position: relative; }

.main-nav a {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 13px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: .2s;
}

.main-nav a i { font-size: 10px; opacity: .8; transition: transform .2s; }
.main-nav a:hover { color: var(--mist); }

/* layout.js flags the nav item matching the page's data-page attribute */
.main-nav a.active {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--mist);
}

.nav-toggle { display: none; }

/* ---------------- dropdowns ---------------- */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    padding: 6px 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s, transform .18s, visibility .18s;
}

.nav-links > li.has-drop:hover > .dropdown,
.nav-links > li.has-drop:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Panels near the right edge open leftwards. A hidden dropdown is still laid
   out, so a left-anchored one on the last few tabs pushed the page scrollable
   sideways on mid-width desktops (~1000-1150px). */
@media (min-width: 992px) {
    .nav-links > li:nth-last-child(-n+4) > .dropdown { left: auto; right: 0; }
}

/* keep the parent tab lit while its panel is open */
.nav-links > li.has-drop:hover > a,
.nav-links > li.has-drop:focus-within > a {
    background: var(--primary-dark);
    color: #fff;
}

.nav-links > li.has-drop:hover > a i { transform: rotate(180deg); }

/* Tight rows on purpose: Blank products runs to 14 items, and at the old
   spacing that panel was taller than a laptop viewport and had to scroll. */
.dropdown a {
    display: block;
    width: 100%;
    padding: 5px 20px;
    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 400;
    color: #6b7280;
    white-space: nowrap;
}

.dropdown a:hover {
    background: #f5f5f5;
    color: #111;
    font-weight: 500;
}

/* The rows above are tight enough that even the 14-item panel clears a short
   laptop screen, so this never engages in practice - it is only a floor so a
   very short window can still reach the last item. */
@media (min-width: 992px) {
    .dropdown {
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* The row must stay one line - a wrapped nav would push the dropdowns out of
   line with their parent tab. Compaction below keeps it inside the container. */
@media (min-width: 992px) {
    .nav-links { flex-wrap: nowrap; }
    .nav-links > li > a { white-space: nowrap; }
}

/* ============================ HERO SLIDER ============================ */
/* Full-bleed: the hero breaks out of .container and runs edge to edge,
   sitting flush under the nav bar. */
.hero { padding: 0; }

.hero > .container {
    max-width: none;
    padding: 0;
}

.slider {
    position: relative;
    overflow: hidden;
    /* Banners ship at slightly different ratios; pin the frame to the widest
       one so every slide fills it and no gap opens under the shorter ones. */
    /* 2:1 is the flattest frame these three banners survive: it costs b2 about
       4% off the top and bottom, which still clears its content. Capping the
       height further starts eating headlines and the trusted-by strip, so the
       hero scales with the viewport instead. */
    aspect-ratio: 2 / 1;
    background: #f7f3ec;
}

.slides {
    display: flex;
    height: 100%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

.slides a {
    min-width: 100%;
    width: 100%;
    height: 100%;
    display: block;
}

.slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(6px);
    color: var(--text);
    display: grid;
    place-items: center;
    font-size: 15px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
    opacity: 0;
    transition: .25s;
}

.slider:hover .slider-btn { opacity: 1; }

.slider-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

.slider-btn.prev { left: 28px; }
.slider-btn.next { right: 28px; }

.slider-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    /* tinted pill so the dots read on light and dark banners alike */
    background: rgba(0, 0, 0, .22);
    backdrop-filter: blur(6px);
    padding: 7px 12px;
    border-radius: 999px;
}

.slider-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    transition: .25s;
}

.slider-dots button:hover { background: rgba(255, 255, 255, .85); }

.slider-dots button.active {
    background: #fff;
    width: 26px;
    border-radius: 999px;
}

/* ============================ CATEGORY STRIP ============================ */
.cat-strip { padding: 26px 0 10px; }

.cat-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.cat-card { text-align: center; }

.cat-card .thumb {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: 8px;
    aspect-ratio: 1 / .78;
    overflow: hidden;
    transition: .25s;
}

.cat-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.cat-card:hover .thumb { box-shadow: 0 8px 18px rgba(0, 0, 0, .08); }
.cat-card:hover .thumb img { transform: scale(1.06); }

.cat-card span {
    display: block;
    margin-top: 10px;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .3px;
    color: #4b5563;
    text-transform: uppercase;
    line-height: 1.35;
}

/* ============================ SECTIONS ============================ */
.section { padding: 34px 0; }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 26px;
    gap: 20px;
}

.section-head .heading-block { max-width: 640px; }

.section-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 8px;
}

.section-head .eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.section-head h2 {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--text);
    line-height: 1.2;
}

.section-head .sub {
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.7;
}

.section-head .view-all-link {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary);
    border: 1.5px solid var(--line);
    padding: 10px 18px;
    border-radius: 999px;
    white-space: nowrap;
    transition: .2s;
}
.section-head .view-all-link:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.arrows { display: flex; gap: 10px; }

/* ---------------- Centered section head (homepage sliders) ---------------- */
.section-head.centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 30px;
}
.section-head.centered .heading-block { max-width: 640px; }
.section-head.centered .eyebrow { justify-content: center; }
.section-head.centered .toolbar-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.section-head.centered .view-all-link { padding: 9px 20px; }

.slider-arrow {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: .2s;
    flex-shrink: 0;
}
.slider-arrow:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.slider-arrow:disabled { opacity: .35; cursor: default; }
.slider-arrow:disabled:hover { background: #fff; border-color: var(--line); color: var(--text); }

/* ---------------- Horizontal product slider (one row + scroll) ---------------- */
.slider-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track .pg-card {
    flex: 0 0 calc((100% - 3 * 18px) / 4);
    scroll-snap-align: start;
}

@media (max-width: 1200px) {
    .slider-track .pg-card { flex-basis: calc((100% - 2 * 18px) / 3); }
}
@media (max-width: 900px) {
    .slider-track .pg-card { flex-basis: calc((100% - 18px) / 2.15); }
}
@media (max-width: 560px) {
    .slider-track { gap: 12px; }
    .slider-track .pg-card { flex-basis: 68%; }
}

.arrows button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 15px;
    border-radius: 50%;
    transition: .2s;
}

.arrows button:hover { background: #f1f1f1; color: var(--primary); }

/* ============================ PRODUCT CARDS ============================ */
.rail-wrap { overflow: hidden; }

.product-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    transition: transform .45s ease;
}

.product-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 0 16px;
    overflow: hidden;
    text-align: center;
    transition: .25s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
    transform: translateY(-3px);
}

.discount {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--primary-light);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.product-card .thumb {
    background: var(--tile);
    aspect-ratio: 1 / .84;
    overflow: hidden;
}

.product-card.dark .thumb { background: #141414; }

.product-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s;
}

.product-card:hover .thumb img { transform: scale(1.07); }

.product-card h3 {
    font-size: 12px;
    font-weight: 400;
    color: #374151;
    line-height: 1.45;
    margin: 14px 14px 8px;
    min-height: 34px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.stars {
    color: var(--amber);
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 6px;
    min-height: 15px;
}

.price {
    font-size: 13px;
    margin-top: auto;
    padding: 0 14px;
}

.price del {
    color: #9ca3af;
    font-size: 11.5px;
    margin-right: 6px;
    font-weight: 400;
}

.price strong {
    color: var(--primary);
    font-weight: 600;
}

/* ============================ PROMO BANNERS ============================ */
.promos { padding: 22px 0; }

.promo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.promo-grid a {
    border-radius: 10px;
    overflow: hidden;
    display: block;
    transition: .3s;
}

.promo-grid a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .1);
}

.promo-grid img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ GLOBAL PRESENCE ============================ */
.global { padding: 40px 0 20px; text-align: center; }

.global h2 {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #111;
}

.global p {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

.global-scroll img { width: 100%; }

/* ============================ TESTIMONIALS ============================ */
.testimonials {
    background: var(--cream);
    padding: 46px 0 40px;
    margin-top: 20px;
}

.testimonials h2 {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .8px;
    color: #111;
    margin-bottom: 30px;
}

.testi-viewport { overflow: hidden; }

.testi-track {
    display: flex;
    transition: transform .5s ease;
}

.testi-card {
    flex: 0 0 calc((100% - 44px) / 3);
    margin-right: 22px;
    background: #fff;
    border: 1px solid #ece5da;
    border-radius: 6px;
    padding: 28px 26px;
    text-align: center;
}

.testi-card .stars { font-size: 12px; margin-bottom: 14px; }

.testi-card p {
    font-size: 12.5px;
    color: #4b5563;
    line-height: 1.75;
    margin-bottom: 16px;
}

.testi-card h4 {
    font-size: 12.5px;
    font-weight: 600;
    color: #111;
}

.testi-card h4 span { font-weight: 400; color: var(--muted); }

.dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 26px;
}

.dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d9d2c6;
    transition: .2s;
}

.dots button.active { background: var(--primary); }

/* ============================ USP BAR ============================ */
.usp {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 26px 0;
}

.usp .container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.usp-item {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.usp-item i { font-size: 26px; color: #4b5563; }

.usp-item h4 {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.usp-item p { font-size: 11px; color: var(--muted); }

/* ============================ FOOTER ============================ */
.main-footer {
    /* soft vertical fade plus a warm off-centre glow gives the slab depth */
    background:
        radial-gradient(1100px 380px at 18% 0%, rgba(157, 194, 221, .14), transparent 70%),
        linear-gradient(180deg, #063a61 0%, #022742 100%);
    color: rgba(255, 255, 255, .78);
    padding: 56px 0 42px;
    position: relative;
}

.footer-grid {
    display: grid;
    /* brand | 3 link columns | contact (far right) */
    grid-template-columns: 1.55fr .92fr .92fr .92fr 1.35fr;
    gap: 26px 34px;
}

.footer-brand .logo-text { color: #fff; font-size: 26px; }
.footer-brand .logo-mark { background: #fff; color: var(--primary); }

.footer-brand > p {
    font-size: 12px;
    line-height: 1.85;
    margin: 18px 0 22px;
    max-width: 340px;
}

.follow-label {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 12px;
    margin-bottom: 14px;
    line-height: 1.6;
}

.footer-contact i {
    flex: 0 0 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--mist);
    font-size: 11px;
    display: grid;
    place-items: center;
    transition: .22s;
}

.footer-contact li:hover i {
    background: rgba(157, 194, 221, .22);
    border-color: rgba(157, 194, 221, .45);
    color: #c3ddef;
}

.footer-contact a:hover { color: #fff; text-decoration: underline; }

.footer-social {
    display: flex;
    gap: 9px;
}

.footer-social a {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    transition: .2s;
}

.footer-social a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .28);
}
.fb { background: #1877f2; }
.ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.yt { background: #ff0000; }
.pin { background: #e60023; }
.li { background: #0a66c2; }

.footer-col h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    position: relative;
}

/* short accent rule under each column heading */
.footer-col h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--mist), rgba(157, 194, 221, 0));
}

.footer-col li { margin-bottom: 11px; }

.footer-col a {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: color .22s, transform .22s;
}

/* chevron marker in front of every footer link */
.footer-col a i {
    font-size: 10px;
    color: var(--mist);
    transition: color .22s, transform .22s;
}

.footer-col a:hover {
    color: #fff;
    transform: translateX(5px);
}

.footer-col a:hover i {
    color: #fff;
    transform: translateX(2px);
}

/* ---- footer bottom ---- */
.footer-bottom {
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 14px 0;
}

.footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-bottom p { font-size: 11.5px; color: #6b7280; }
.footer-bottom p strong { color: var(--primary); }
.footer-bottom img { height: 20px; width: auto; }

.footer-bottom .credit a {
    color: var(--primary);
    font-weight: 600;
    transition: .2s;
}

.footer-bottom .credit a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* ============================ FLOATING WHATSAPP ============================ */
.wa-float {
    position: fixed;
    right: 20px;
    bottom: 22px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 26px;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .45);
    z-index: 120;
    transition: .25s;
}

.wa-float:hover { transform: scale(1.08); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1400px) {
    /* brand drops to its own full row so the four list columns stay readable */
    .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 34px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand > p { max-width: 560px; }
}

@media (max-width: 1200px) {
    .cat-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }

    /* ten top-level menus - tighten them so the row still fits before the
       drawer takes over at 991px */
    .main-nav a { font-size: 12px; padding: 13px 7px; }
    .nav-links { margin-left: -7px; gap: 2px; }
}

@media (max-width: 1080px) and (min-width: 992px) {
    .main-nav a { font-size: 11.5px; padding: 13px 5px; }
    .nav-links { margin-left: -5px; gap: 0; }
}

@media (max-width: 991px) {
    .header-container { flex-wrap: wrap; gap: 14px; }
    .search-bar { order: 3; flex-basis: 100%; max-width: none; }
    .header-actions { margin-left: auto; }
    .btn-quote { display: none; }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: none;
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        padding: 12px 0;
    }

    .main-nav .container { flex-wrap: wrap; gap: 0; }

    .nav-links {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding-bottom: 10px;
    }

    .nav-links.open { display: flex; }
    .nav-links { margin-left: 0; }
    .nav-links > li { width: 100%; }
    .nav-links > li > a { padding: 10px 0; }

    /* dropdowns collapse into tap-to-open accordions */
    .dropdown {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        background: rgba(0, 0, 0, .14);
        box-shadow: none;
        padding: 4px 0 8px;
        margin-bottom: 4px;
    }

    .nav-links > li.open > .dropdown { display: block; }
    .nav-links > li.open > a i { transform: rotate(180deg); }

    /* hover states are meaningless on touch - keep the tab flat */
    .nav-links > li.has-drop:hover > a,
    .nav-links > li.has-drop:focus-within > a { background: transparent; }
    .nav-links > li.has-drop:hover > .dropdown,
    .nav-links > li.has-drop:focus-within > .dropdown { display: none; }
    .nav-links > li.has-drop.open:hover > .dropdown,
    .nav-links > li.has-drop.open:focus-within > .dropdown { display: block; }

    .dropdown a {
        padding: 8px 0 8px 18px;
        font-size: 12.5px;
        color: rgba(255, 255, 255, .82);
        white-space: normal;
    }

    .dropdown a:hover { background: transparent; color: #fff; font-weight: 400; }

    .product-rail { grid-template-columns: repeat(2, 1fr); }
    .promo-grid { grid-template-columns: 1fr; }
    .testi-card { flex: 0 0 100%; margin-right: 0; }
    .usp .container { grid-template-columns: repeat(2, 1fr); }
    .global-scroll { overflow-x: auto; }
    .global-scroll img { min-width: 760px; }
}

@media (max-width: 640px) {
    .top-bar .container { flex-wrap: wrap; justify-content: center; text-align: center; gap: 6px 14px; }
    .top-ticker { order: -1; flex-basis: 100%; }
    .cat-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .footer-bottom .container { flex-direction: column; text-align: center; }
    .slider-dots { bottom: 8px; }
    .global h2 { font-size: 20px; }
    .logo-text { font-size: 20px; }
    .logo img { height: 48px; }
    .footer-brand .logo img { height: 56px; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .section-head h2 { font-size: 22px; }
    .section { padding: 26px 0; }
}


/* ############################################################
   3. SHOP - product grid, detail, quickview, cart, mobile UI
   ############################################################ */
/* ============================================================
   Yashram Trading Company - Shop additions
   Category listing, product detail, quickview, cart, mobile app UI
   ============================================================ */

/* ---------------- Breadcrumb ---------------- */
.breadcrumb {
    font-size: 12px;
    color: var(--muted);
    padding: 14px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: #c9ccd1; }
.breadcrumb .current { color: var(--text); font-weight: 500; }

/* ---------------- Page header banner ---------------- */
.shop-hero {
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    padding: 26px 0;
    margin-bottom: 22px;
}
.shop-hero .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shop-hero h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.shop-hero p { font-size: 12.5px; color: rgba(255,255,255,.85); max-width: 640px; }
.shop-hero .count-pill {
    background: rgba(255,255,255,.18);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------------- Category chip strip ---------------- */
.chip-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 18px;
    scrollbar-width: none;
}
.chip-strip::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    background: #fff;
    white-space: nowrap;
    transition: .2s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------------- Toolbar: search / sort / count ---------------- */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 20px;
}
.shop-toolbar .result-count { font-size: 12.5px; color: var(--muted); }
.toolbar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.select-wrap { position: relative; }
.select-wrap select {
    appearance: none;
    font-family: inherit;
    font-size: 12.5px;
    padding: 9px 32px 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    cursor: pointer;
}
.select-wrap i {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--muted);
    pointer-events: none;
}
.mini-search { position: relative; }
.mini-search input {
    width: 220px;
    max-width: 60vw;
    padding: 9px 14px 9px 34px;
    border-radius: 8px;
    border: 1px solid var(--line);
    font-size: 12.5px;
    font-family: inherit;
}
.mini-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 12px;
}

/* ---------------- Product grid ---------------- */
.shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.shop-sidebar {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px;
    position: sticky;
    top: 90px;
}
.shop-sidebar h4 { font-size: 13px; margin-bottom: 12px; }
.shop-sidebar ul li { margin-bottom: 2px; }
.shop-sidebar ul li a {
    display: flex;
    justify-content: space-between;
    padding: 8px 6px;
    font-size: 12.5px;
    border-radius: 6px;
    color: var(--text);
}
.shop-sidebar ul li a:hover { background: var(--tile); color: var(--primary); }
.shop-sidebar ul li a.active { background: var(--primary); color: #fff; font-weight: 600; }
.shop-sidebar ul li a span.n { color: inherit; opacity: .65; font-size: 11px; }

/* ---- sidebar accordion: one row per menu, categories nested under it ---- */
.shop-sidebar .side-all { margin-bottom: 8px; }

.shop-sidebar .side-group-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 6px;
    background: none;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.shop-sidebar .side-group-head .sg-label { flex: 1; }
.shop-sidebar .side-group-head .n { color: var(--muted); font-size: 11px; font-weight: 500; }
.shop-sidebar .side-group-head i { font-size: 10px; color: var(--muted); transition: transform .2s; }
.shop-sidebar .side-group-head:hover { background: var(--tile); color: var(--primary); }
.shop-sidebar .side-group.open > .side-group-head i { transform: rotate(180deg); }
.shop-sidebar .side-group.current > .side-group-head { color: var(--primary); background: var(--tile); }

.shop-sidebar .side-sub {
    display: none;
    margin: 0 0 6px 12px;
    padding-left: 8px;
    border-left: 1px solid var(--line);
}

.shop-sidebar .side-group.open > .side-sub { display: block; }

/* categories still waiting on products stay reachable but read as quieter */
.shop-sidebar .side-sub a.empty { color: var(--muted); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.pg-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    transition: .25s;
    display: flex;
    flex-direction: column;
}
.pg-card:hover { box-shadow: 0 12px 28px rgba(0,0,0,.09); transform: translateY(-3px); border-color: transparent; }
.pg-card .badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.pg-card .badges span {
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    padding: 3px 9px; border-radius: 999px; color: #fff;
}
.badge-new { background: #16a34a; }
.badge-sale { background: var(--accent); }
.badge-hot { background: #ef4444; }
.badge-clearance { background: #7c3aed; }
.badge-pct { background: var(--primary-light); }

.pg-card .thumb-link { display: block; background: var(--tile); aspect-ratio: 1/1; overflow: hidden; position: relative; }
.pg-card .thumb-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.pg-card:hover .thumb-link img { transform: scale(1.08); }

.pg-quickview {
    position: absolute;
    right: 10px; top: 10px;
    z-index: 3;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    opacity: 0;
    transform: translateY(-6px);
    transition: .2s;
    cursor: pointer;
}
.pg-card:hover .pg-quickview { opacity: 1; transform: translateY(0); }

.pg-card h3 { font-size: 12.5px; font-weight: 500; color: #374151; line-height: 1.4; margin: 12px 12px 6px; min-height: 34px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
.pg-card .cat-tag { font-size: 10px; color: var(--muted); margin: 0 12px; text-align: left; text-transform: uppercase; letter-spacing: .4px; }
.pg-card .stars { text-align: left; margin: 6px 12px 0; }
.pg-card .price-row { display: flex; align-items: baseline; gap: 8px; margin: 8px 12px 12px; text-align: left; }
.pg-card .price-row strong { font-size: 14px; color: var(--primary-dark); }
.pg-card .price-row del { font-size: 11.5px; color: #9ca3af; }
.pg-card .price-row .off { font-size: 10.5px; color: #16a34a; font-weight: 600; }

.pg-actions { margin-top: auto; display: flex; gap: 8px; padding: 0 12px 14px; }
.btn-add-cart {
    flex: 1;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 9px 8px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: .2s;
}
.btn-add-cart:hover { background: var(--primary-dark); }
.btn-add-cart.added { background: #16a34a; }
.btn-view-detail {
    width: 38px; flex: 0 0 38px;
    border: 1px solid var(--line);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
    background: #fff;
}
.btn-view-detail:hover { border-color: var(--primary); color: var(--primary); }

.load-more-wrap { text-align: center; margin: 30px 0 10px; }
.btn-load-more {
    padding: 12px 30px;
    border-radius: 999px;
    border: 1.5px solid var(--primary);
    background: #fff;
    color: var(--primary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: .2s;
}
.btn-load-more:hover { background: var(--primary); color: #fff; }

.no-results { text-align: center; padding: 60px 20px; color: var(--muted); }
.no-results i { font-size: 40px; color: #d1d5db; margin-bottom: 14px; }

/* ---------------- Search autocomplete ---------------- */
.search-suggest {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0,0,0,.14);
    overflow: hidden;
    z-index: 200;
    display: none;
    max-height: 420px;
    overflow-y: auto;
}
.search-suggest.open { display: block; }
.ss-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    text-align: left;
}
.ss-item:hover, .ss-item.active { background: var(--tile); }
.ss-item .ss-thumb { width: 42px; height: 42px; border-radius: 7px; overflow: hidden; background: var(--tile); flex-shrink: 0; }
.ss-item .ss-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-item .ss-info { flex: 1; min-width: 0; }
.ss-item .ss-info h5 { font-size: 12.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item .ss-info h5 mark { background: none; color: var(--primary); font-weight: 700; }
.ss-item .ss-info span { font-size: 10.5px; color: var(--muted); }
.ss-item .ss-price { font-size: 12px; font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.ss-cat-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 12px; color: var(--muted); cursor: pointer; }
.ss-cat-item i { color: var(--primary); width: 14px; }
.ss-cat-item:hover, .ss-cat-item.active { background: var(--tile); color: var(--primary); }
.ss-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 10px 16px 4px; }
.ss-viewall { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; font-size: 12px; font-weight: 700; color: var(--primary); background: var(--tile); cursor: pointer; }
.ss-viewall:hover, .ss-viewall.active { background: var(--primary); color: #fff; }
.ss-empty { padding: 22px 16px; text-align: center; font-size: 12px; color: var(--muted); }

/* ---------------- Category cards (index) ---------------- */
.cat-card .thumb img { object-fit: cover; width: 100%; height: 100%; }

/* ---------------- Product detail page ---------------- */
/* minmax(0,1fr) rather than 1fr: a grid item is min-width:auto by default, so
   the nowrap thumbnail strip below the image would otherwise force this track
   to its full ~940px and push the page wider than the screen. */
.pd-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    padding: 10px 0 40px;
    align-items: start;
}

.pd-gallery, .pd-info { min-width: 0; }
/* The featured image is capped at half the screen, so it stays a product
   photo rather than a billboard - and once the layout stacks below 1200px it
   no longer runs the full width of the page. Phones keep it full width. */
.pd-gallery { position: sticky; top: 90px; }

@media (min-width: 768px) {
    .pd-gallery { max-width: 50vw; }
}
.pd-main-img {
    background: var(--tile);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-in;
}
.pd-main-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs-wrap { position: relative; margin-top: 12px; }

/* one row that scrolls sideways - never a wrapped block */
.pd-thumbs {
    display: flex;
    gap: 10px;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pd-thumbs::-webkit-scrollbar { display: none; }

.pd-thumbs button {
    flex: 0 0 auto;
    width: 68px; height: 68px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--line);
    background: var(--tile);
    padding: 0;
    cursor: pointer;
}
.pd-thumbs button.active { border-color: var(--primary); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* paging arrows - only rendered visible when the row overflows, and faded out
   at whichever end you have already reached */
.pd-thumb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: #111;
    font-size: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
    z-index: 2;
    transition: opacity .18s;
}

.pd-thumbs-wrap.has-overflow .pd-thumb-nav { display: flex; }
.pd-thumb-nav.prev { left: -8px; }
.pd-thumb-nav.next { right: -8px; }
.pd-thumb-nav:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pd-thumb-nav:disabled { opacity: 0; pointer-events: none; }

.pd-info .cat-tag { font-size: 11px; color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.pd-info h1 { font-size: 22px; margin: 8px 0 10px; line-height: 1.35; }
.pd-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 16px; flex-wrap: wrap; }
.pd-meta .stars { color: var(--amber); }
.pd-price-row { display: flex; align-items: baseline; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.pd-price-row .now { font-size: 26px; font-weight: 700; color: var(--primary-dark); }
.pd-price-row del { font-size: 15px; color: #9ca3af; }
.pd-price-row .save { font-size: 12px; font-weight: 700; color: #fff; background: #16a34a; padding: 3px 10px; border-radius: 999px; }
.pd-desc { font-size: 13px; color: #4b5563; line-height: 1.85; margin-bottom: 16px; }
.pd-features { margin-bottom: 22px; }
.pd-features li { display: flex; gap: 10px; font-size: 12.5px; color: #374151; padding: 6px 0; align-items: flex-start; }
.pd-features li i { color: #16a34a; margin-top: 2px; }

.pd-buybox { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
/* width: max-content keeps the control the size of its three buttons. As a
   block-level flex box it otherwise stretched to the full column, so on the
   cart row the border ran the whole width and the + looked oversized. */
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: max-content; }
.qty-stepper button { width: 36px; height: 40px; border: none; background: #fff; font-size: 15px; cursor: pointer; }
.qty-stepper button:hover { background: var(--tile); }
.qty-stepper input { width: 42px; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); height: 40px; font-size: 13px; font-family: inherit; }
.pd-buybox .btn-add-cart { flex: 1; min-width: 160px; height: 44px; font-size: 13px; border-radius: 8px; }
.btn-enquire {
    height: 44px; padding: 0 22px; border-radius: 8px; background: var(--amber); color: #1f2937; font-weight: 700; font-size: 13px; border: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
}
.btn-enquire:hover { filter: brightness(.95); }

.pd-trust { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 18px; border-top: 1px dashed var(--line); }
.pd-trust div { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.pd-trust i { color: var(--primary); font-size: 15px; }

/* ---------------- share row (product detail + blog article) ---------------- */
.share-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}

.share-row .pds-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--muted);
}

.share-row .pds-label i { color: var(--primary); font-size: 14px; }

.pds-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Neutral by default, brand colour on hover - a row of eight saturated
   chips would shout louder than the Add to Cart button right above it. */
.pds-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: #55637a;
    display: grid;
    place-items: center;
    font-size: 13px;
    padding: 0;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

.pds-btn:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(6, 58, 97, .18);
}

.pds-btn.native:hover { background: var(--primary); }
.pds-btn.wa:hover     { background: #25d366; }
.pds-btn.fb:hover     { background: #1877f2; }
.pds-btn.x:hover      { background: #000; }
.pds-btn.li:hover     { background: #0a66c2; }
.pds-btn.tg:hover     { background: #2aabee; }
.pds-btn.pin:hover    { background: #e60023; }
.pds-btn.mail:hover   { background: #6b7280; }
.pds-btn.copy:hover   { background: var(--primary); }

.pds-btn[hidden] { display: none; }

@media (max-width: 640px) {
    .share-row { gap: 8px 12px; }
    .pds-btn { width: 38px; height: 38px; font-size: 14px; }
}

.pd-tabs { margin: 34px 0 16px; border-bottom: 1px solid var(--line); display: flex; gap: 26px; }
.pd-tabs button { background: none; border: none; padding: 10px 0; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; }
.pd-tabs button.active { color: var(--primary); border-color: var(--primary); }
.pd-tab-panel { display: none; font-size: 13px; color: #4b5563; line-height: 1.85; padding-bottom: 20px; }
.pd-tab-panel.active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.spec-table tr td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
.spec-table tr td:first-child { color: var(--muted); width: 40%; }

.related-rail { margin-top: 10px; }

/* ---------------- Quickview modal ---------------- */
.qv-overlay {
    position: fixed; inset: 0; background: rgba(15,23,32,.6);
    z-index: 300; display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; pointer-events: none; transition: .25s;
}
.qv-overlay.open { opacity: 1; pointer-events: auto; }
.qv-modal {
    background: #fff; border-radius: 14px; max-width: 780px; width: 100%;
    max-height: 88vh; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr;
    position: relative; transform: translateY(14px); transition: .25s;
}
.qv-overlay.open .qv-modal { transform: translateY(0); }
.qv-close {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.qv-close:hover { background: rgba(0,0,0,.12); }
.qv-img { background: var(--tile); aspect-ratio: 1/1; }
.qv-img img { width: 100%; height: 100%; object-fit: cover; }
.qv-body { padding: 26px 26px 26px 8px; display: flex; flex-direction: column; }
.qv-body .cat-tag { font-size: 10.5px; color: var(--primary); font-weight: 700; text-transform: uppercase; }
.qv-body h3 { font-size: 17px; margin: 6px 0 10px; line-height: 1.35; }
.qv-body .pd-price-row { padding: 10px 0; margin-bottom: 12px; }
.qv-body .pd-price-row .now { font-size: 20px; }
.qv-body p.qv-desc { font-size: 12.5px; color: #4b5563; line-height: 1.7; margin-bottom: 16px; }
.qv-body .qty-stepper { height: 40px; }
.qv-foot-link { margin-top: 14px; font-size: 12px; text-align: center; }
.qv-foot-link a { color: var(--primary); font-weight: 600; }

/* ---------------- Toast ---------------- */
.toast {
    position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1f2937; color: #fff; padding: 12px 22px; border-radius: 999px;
    font-size: 12.5px; z-index: 400; display: flex; align-items: center; gap: 10px;
    opacity: 0; pointer-events: none; transition: .25s; box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast i { color: #4ade80; }

/* ---------------- Cart page ---------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 30px; align-items: start; padding-bottom: 50px; }
.cart-items { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cart-row { display: flex; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line); align-items: center; }
.cart-row:last-child { border-bottom: none; }
.cart-row .thumb { width: 76px; height: 76px; border-radius: 8px; overflow: hidden; background: var(--tile); flex-shrink: 0; }
.cart-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-row .info { flex: 1; min-width: 0; }
.cart-row .info h4 { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.cart-row .info .cat { font-size: 11px; color: var(--muted); }
.cart-row .price { font-size: 13px; font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.cart-row .remove { background: none; border: none; color: #ef4444; font-size: 15px; cursor: pointer; padding: 6px; }
.cart-empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.cart-empty i { font-size: 46px; color: #d1d5db; margin-bottom: 16px; }
.cart-empty a { display: inline-block; margin-top: 16px; background: var(--primary); color: #fff; padding: 11px 26px; border-radius: 8px; font-size: 13px; font-weight: 600; }

.cart-summary { border: 1px solid var(--line); border-radius: 12px; padding: 22px; position: sticky; top: 90px; }
.cart-summary h3 { font-size: 15px; margin-bottom: 16px; }
.cart-summary .row { display: flex; justify-content: space-between; font-size: 12.5px; color: #4b5563; padding: 6px 0; }
.cart-summary .row.total { font-size: 15px; font-weight: 700; color: var(--text); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.cart-summary .note { font-size: 11.5px; color: var(--muted); margin: 14px 0 18px; line-height: 1.6; background: var(--tile); padding: 10px 12px; border-radius: 8px; }

.enquiry-form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.enquiry-form input, .enquiry-form textarea {
    width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px;
    font-family: inherit; font-size: 12.5px;
}
.enquiry-form textarea { resize: vertical; min-height: 70px; }
.enquiry-form label { font-size: 11.5px; color: var(--muted); margin-bottom: -6px; }
.btn-submit-enquiry {
    width: 100%; padding: 13px; border-radius: 8px; border: none; background: var(--primary);
    color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-submit-enquiry:hover { background: var(--primary-dark); }
.btn-whatsapp-enquiry {
    width: 100%; padding: 13px; border-radius: 8px; border: none; background: #25d366;
    color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
}
.btn-whatsapp-enquiry:hover { filter: brightness(.95); }

/* ---------------- Catalogue page ---------------- */
.catalogue-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 40px; }
.cat-book { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: center; background: #fff; transition: .25s; }
.cat-book:hover { box-shadow: 0 12px 26px rgba(0,0,0,.09); transform: translateY(-3px); }
.cat-book .cover { aspect-ratio: 3/4; background: var(--tile); overflow: hidden; }
.cat-book .cover img { width: 100%; height: 100%; object-fit: cover; }
.cat-book h4 { font-size: 12.5px; margin: 12px 10px 4px; font-weight: 600; }
.cat-book .actions { display: flex; gap: 8px; padding: 10px; }
.cat-book .actions a, .cat-book .actions button {
    flex: 1; font-size: 11px; padding: 8px 4px; border-radius: 6px; font-weight: 600; cursor: pointer; border: none;
}
.cat-book .view-btn { background: var(--tile); color: var(--text); border: 1px solid var(--line) !important; }
.cat-book .wa-btn { background: #25d366; color: #fff; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 350; display: flex; align-items: center; justify-content: center; padding: 30px; opacity: 0; pointer-events: none; transition: .25s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
/* max-height: 100% resolved against a figure of auto height, which computes to
   none - a tall photo then ran off the screen and took the caption and the
   close button with it. The cap is measured off the viewport instead, with
   dvh where supported so mobile browser chrome is accounted for. */
.lightbox img {
    max-width: 100%;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    object-fit: contain;
    border-radius: 6px;
}
.lightbox-close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 26px; background: none; border: none; cursor: pointer; }

/* ---------------- Empty state ---------------- */
.empty-state { text-align: center; padding: 60px 16px; color: var(--muted); }

/* ---------------- Mobile bottom nav (app-like) ---------------- */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 250;
    background: #fff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(0,0,0,.06);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    justify-content: space-between;
}
.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px;
    color: #7c8592;
    font-size: 10px;
    font-weight: 600;
    position: relative;
}
.bottom-nav a i { font-size: 18px; }
.bottom-nav a.active { color: var(--primary); }
.bottom-nav a .bn-badge {
    position: absolute; top: 0; right: 18%;
    background: var(--accent); color: #fff; font-size: 9px; font-weight: 700;
    min-width: 15px; height: 15px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1200px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .pd-wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    /* Once stacked, the image is centred and never wider than half the
       screen - 460px is just the ceiling on the widest of these screens.
       (The thumb strip lives inside .pd-gallery, so it inherits the cap.) */
    .pd-gallery { position: static; max-width: min(460px, 50vw); margin: 0 auto; }
    .catalogue-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
    .shop-layout { grid-template-columns: 1fr; }
    .shop-sidebar { position: static; display: flex; overflow-x: auto; gap: 8px; padding: 12px; }
    .shop-sidebar h4 { display: none; }
    .shop-sidebar ul { display: flex; gap: 8px; }
    .shop-sidebar ul li a { white-space: nowrap; border: 1px solid var(--line); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }
    .catalogue-grid { grid-template-columns: repeat(2, 1fr); }

    body { padding-bottom: 62px; }
    .bottom-nav { display: flex; }
    .wa-float { bottom: 74px; }
    .qv-modal { grid-template-columns: 1fr; max-height: 92vh; }
    .qv-img { aspect-ratio: 1.3/1; }
}

@media (max-width: 640px) {
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pg-card h3 { font-size: 11.5px; }
    .shop-hero { padding: 18px 0; }
    .shop-hero h1 { font-size: 18px; }
    .catalogue-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pd-price-row .now { font-size: 22px; }
    .pd-buybox { flex-direction: column; align-items: stretch; }
    .pd-buybox .qty-stepper { align-self: flex-start; }

    /* Phones are the deliberate exception to the 50% rule: at 360px a half
       width image is too small to judge a garment by, so it goes full width. */
    .pd-gallery { max-width: 100%; }
    .pd-info h1 { font-size: 19px; }
    .pd-thumbs button { width: 56px; height: 56px; }
    .pd-thumb-nav { width: 26px; height: 26px; font-size: 11px; }
    .pd-thumb-nav.prev { left: -4px; }
    .pd-thumb-nav.next { right: -4px; }

    /* variant pickers: more per row on a narrow screen */
    .pv-swatch { width: 34px; height: 34px; }
    .pv-size { min-width: 42px; height: 34px; padding: 0 10px; }
    .pv-options { gap: 8px; }

    .pd-trust { gap: 12px 18px; }
    .pd-tabs { gap: 18px; overflow-x: auto; scrollbar-width: none; }
    .pd-tabs::-webkit-scrollbar { display: none; }
    .pd-tabs button { white-space: nowrap; }
    .spec-table { font-size: 12px; }
    .spec-table tr td { padding: 8px 10px; }
}


/* ############################################################
   4. CONTENT PAGES - blog, gallery, faq, policies, about
   ############################################################ */
/* ============================================================
   Yashram Trading Company - Content pages CSS
   Blog, gallery, FAQ, legal pages, bulk order
   ============================================================ */

/* ---------------- Blog ---------------- */
.blog-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 22px; scrollbar-width: none; }
.blog-chips::-webkit-scrollbar { display: none; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 40px; }
.blog-card { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; transition: .25s; }
.blog-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,.09); transform: translateY(-3px); }
.blog-thumb { position: relative; aspect-ratio: 16/10; background: var(--tile); overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.blog-card:hover .blog-thumb img { transform: scale(1.06); }
.blog-cat { position: absolute; top: 12px; left: 12px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.blog-body { padding: 18px; }
.blog-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.blog-meta .dot { opacity: .6; }
.blog-body h3 { font-size: 15px; line-height: 1.4; margin-bottom: 8px; color: var(--text); }
.blog-body p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-readmore { font-size: 12px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }

.blog-detail-wrap { max-width: 100%; padding: 10px 0 20px; }
.blog-cover { border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: var(--tile); margin-bottom: 26px; }
.blog-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.blog-content p { font-size: 14px; line-height: 1.95; color: #374151; margin-bottom: 20px; }
/* the article page renders the shared .share-row component - see 'share row' below */
.blog-related-wrap { max-width: 1040px; margin: 10px auto 0; }

.blog-tag-notice {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--tile); border-radius: 10px; padding: 12px 18px; margin-bottom: 20px; font-size: 12.5px; color: var(--text);
}
.blog-tag-notice a { color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* ---------------- Blog detail layout with sidebar ---------------- */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.blog-sidebar { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 90px; }
.sb-widget { border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.sb-widget h4 { font-size: 13.5px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

.sb-recent-list { display: flex; flex-direction: column; gap: 14px; }
.sb-recent-item { display: flex; gap: 12px; align-items: flex-start; }
.sb-recent-thumb { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: var(--tile); flex-shrink: 0; }
.sb-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-recent-item h5 { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--text); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-recent-item span { font-size: 10.5px; color: var(--muted); }
.sb-recent-item:hover h5 { color: var(--primary); }

.sb-cat-list { display: flex; flex-direction: column; gap: 2px; }
.sb-cat-item { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; color: var(--text); }
.sb-cat-item:hover { background: var(--tile); color: var(--primary); }
.sb-cat-item.active { background: var(--primary); color: #fff; font-weight: 600; }
.sb-cat-item .n { color: inherit; opacity: .65; }

.sb-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-tag { font-size: 11px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); }
.sb-tag:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.sb-cta { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border: none; color: #fff; text-align: center; }
.sb-cta i { font-size: 26px; margin-bottom: 8px; }
.sb-cta h4 { color: #fff; border: none; padding: 0; margin-bottom: 6px; }
.sb-cta p { font-size: 11.5px; color: rgba(255,255,255,.85); margin-bottom: 14px; }
.sb-cta a { display: inline-block; background: #25d366; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 12px; font-weight: 700; }

/* ---------------- Photo Gallery ---------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-bottom: 10px; }
.gallery-item { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: none; padding: 0; cursor: zoom-in; background: var(--tile); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.gallery-item:hover img { transform: scale(1.08); }
.gi-overlay { position: absolute; inset: 0; background: rgba(6,58,97,0); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: .25s; font-size: 18px; }
.gallery-item:hover .gi-overlay { opacity: 1; background: rgba(6,58,97,.35); }
.lightbox figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
}

/* leaves room for the caption line under the photo */
.lightbox figure img {
    min-height: 0;
    max-height: calc(100vh - 116px);
    max-height: calc(100dvh - 116px);
}

.lightbox figcaption {
    color: #fff;
    font-size: 12.5px;
    margin-top: 12px;
    opacity: .85;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .lightbox { padding: 16px; }
    .lightbox img { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }
    .lightbox figure img { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); }
    .lightbox-close { top: calc(10px + env(safe-area-inset-top)); right: 12px; }
}

/* ---------------- Video Gallery ---------------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-bottom: 40px; }
.video-card { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; transition: .25s; }
.video-card:hover { box-shadow: 0 14px 30px rgba(0,0,0,.09); transform: translateY(-3px); }
.video-thumb { position: relative; aspect-ratio: 16/9; background: #111; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.play-btn { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 18px; }
.video-body { padding: 14px 16px; }
.video-cat { font-size: 10.5px; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.video-body h4 { font-size: 13.5px; margin-top: 6px; line-height: 1.4; color: var(--text); }
.video-note { background: var(--tile); border-radius: 10px; padding: 14px 18px; font-size: 12.5px; color: var(--muted); margin-bottom: 24px; display: flex; gap: 10px; align-items: flex-start; }
.video-note i { color: var(--primary); margin-top: 2px; }

/* ---------------- FAQ ---------------- */
.faq-search { position: relative; max-width: 480px; margin: 0 auto 34px; }
.faq-search input { width: 100%; padding: 13px 18px 13px 42px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; font-family: inherit; }
.faq-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.faq-wrap { max-width: 780px; margin: 0 auto 50px; }
.faq-group { margin-bottom: 30px; }
.faq-group h3 { font-size: 15px; color: var(--primary); margin-bottom: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: #fff; border: none; padding: 15px 18px; font-size: 13px; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 12px; }
.faq-q i { color: var(--muted); transition: transform .25s; flex-shrink: 0; }
.faq-q.open i { transform: rotate(180deg); color: var(--primary); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 18px 16px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }

/* ---------------- Testimonials page ---------------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 40px; }
.testi-tile { border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: #fff; }
.testi-tile .stars { color: var(--amber); font-size: 12px; margin-bottom: 12px; }
.testi-tile p { font-size: 13px; color: #4b5563; line-height: 1.8; margin-bottom: 16px; }
.testi-tile h4 { font-size: 13px; font-weight: 600; }
.testi-tile h4 span { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.testi-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; padding: 30px 0 40px; }
.testi-stats div strong { display: block; font-size: 26px; color: var(--primary); }
.testi-stats div span { font-size: 12px; color: var(--muted); }

/* ---------------- Legal / static text pages ---------------- */
.legal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; padding: 10px 0 60px; }
.legal-wrap { max-width: 100%; margin: 0; padding: 0; font-size: 13px; color: #4b5563; line-height: 1.9; }
.legal-wrap h2 { font-size: 16px; color: var(--text); margin: 28px 0 10px; scroll-margin-top: 100px; }
.legal-wrap h2:first-child { margin-top: 0; }
.legal-wrap p { margin-bottom: 12px; }
.legal-wrap ul { margin: 0 0 14px 20px; list-style: disc; }
.legal-wrap li { margin-bottom: 6px; }
.legal-updated { font-size: 11.5px; color: var(--muted); margin-bottom: 26px; display: inline-block; background: var(--tile); padding: 6px 14px; border-radius: 999px; }
.legal-toc { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; position: sticky; top: 90px; }
.legal-toc h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 10px; }
.legal-toc a { display: block; font-size: 12.5px; color: var(--text); padding: 6px 0; border-left: 2px solid transparent; padding-left: 10px; margin-left: -11px; }
.legal-toc a:hover { color: var(--primary); }
.legal-toc a.active { color: var(--primary); border-left-color: var(--primary); font-weight: 600; }

/* ============================================================
   About Page
   ============================================================ */

.about-hero {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    padding: 56px 0;
    overflow: hidden;
    position: relative;
}
.about-hero::before {
    content: "";
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}
.about-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; position: relative; z-index: 1; }
.about-hero-copy .eyebrow { color: var(--amber); display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px; }
.about-hero-copy .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--amber); border-radius: 2px; }
.about-hero-copy h1 { font-size: 38px; font-weight: 700; line-height: 1.25; color: #fff; margin-bottom: 16px; letter-spacing: -.4px; }
.about-hero-copy p { font-size: 14.5px; color: rgba(255,255,255,.82); line-height: 1.8; max-width: 480px; margin-bottom: 28px; }
.about-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-primary-lg { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--primary); padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 13.5px; transition: .2s; }
.btn-primary-lg:hover { background: var(--amber); color: #1f2937; }
.btn-whatsapp-lg { display: inline-flex; align-items: center; gap: 10px; background: #25d366; color: #fff; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 13.5px; transition: .2s; }
.btn-whatsapp-lg:hover { filter: brightness(.95); }
.btn-outline-lg { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid rgba(255,255,255,.5); color: #fff; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 13.5px; transition: .2s; }
.btn-outline-lg:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.about-hero-media { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3.2; box-shadow: 0 30px 60px rgba(0,0,0,.3); border: 6px solid rgba(255,255,255,.15); }
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* stats strip */
.about-stats { background: var(--tile); padding: 30px 0; border-bottom: 1px solid var(--line); }
.about-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.about-stats-grid div { border-right: 1px solid var(--line); }
.about-stats-grid div:last-child { border-right: none; }
.about-stats-grid strong { display: block; font-size: 30px; font-weight: 700; color: var(--primary); }
.about-stats-grid span { font-size: 12px; color: var(--muted); }

/* story split */
.about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-bottom: 30px; }
.about-story-media { position: relative; margin-bottom: 20px; }
.about-story-media > img:first-child { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; border-radius: 16px; }
.about-story-media-float {
    position: absolute; bottom: -24px; right: -24px;
    width: 44%; aspect-ratio: 1/1; object-fit: cover;
    border-radius: 14px; border: 6px solid #fff; box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
.about-story-copy .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.about-story-copy .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; }
.about-story-copy h2 { font-size: 28px; font-weight: 700; line-height: 1.3; margin-bottom: 16px; letter-spacing: -.3px; }
.about-story-copy p { font-size: 13.5px; color: #4b5563; line-height: 1.85; margin-bottom: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--primary); margin-top: 8px; }
.text-link:hover { gap: 12px; }

/* why choose us */
.about-why { background: var(--tile); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why-card { background: #fff; border-radius: 14px; padding: 28px 24px; text-align: left; transition: .25s; border: 1px solid var(--line); }
.why-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,.08); }
.why-card i { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }
.why-card h4 { font-size: 15px; margin-bottom: 8px; }
.why-card p { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* CTA banner */
.about-cta { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); padding: 60px 0; text-align: center; margin-top: 10px; }
.about-cta-inner { max-width: 680px; margin: 0 auto; }
.about-cta i.fa-quote-left { color: var(--amber); font-size: 26px; margin-bottom: 18px; }
.about-cta p { font-size: 20px; color: #fff; line-height: 1.55; font-weight: 500; margin-bottom: 14px; }
.about-cta > .about-cta-inner > span { display: block; font-size: 12.5px; color: rgba(255,255,255,.7); margin-bottom: 28px; }
.about-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 991px) {
    .about-hero-grid { grid-template-columns: 1fr; }
    .about-hero-media { order: -1; aspect-ratio: 16/9; }
    .about-story-grid { grid-template-columns: 1fr; }
    .about-story-media { margin-bottom: 40px; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .about-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
    .about-stats-grid div { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
}
@media (max-width: 640px) {
    .about-hero-copy h1 { font-size: 26px; }
    .about-story-copy h2 { font-size: 22px; }
    .why-grid { grid-template-columns: 1fr; }
    .about-cta p { font-size: 16px; }
    .about-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .about-stats-grid strong { font-size: 24px; }
}
.bulk-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding-bottom: 50px; align-items: start; }
.bulk-perks { display: flex; flex-direction: column; gap: 16px; margin: 22px 0 30px; }
/* direct children only: the inner wrapper holds the heading above its text,
   and matching it here turned every perk into two side-by-side columns */
.bulk-perks > div { display: flex; gap: 14px; align-items: flex-start; }
.bulk-perks i { width: 40px; height: 40px; border-radius: 10px; background: var(--tile); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.bulk-perks h4 { font-size: 13.5px; margin-bottom: 3px; }
.bulk-perks p { font-size: 12px; color: var(--muted); line-height: 1.7; }

.bulk-form-card { border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.bulk-form-card h3 { font-size: 16px; margin-bottom: 6px; }
.bulk-form-card .sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bulk-form-card select { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 12.5px; background: #fff; }
.form-mode { display: flex; gap: 22px; font-size: 12.5px; color: var(--text); margin: 4px 0 6px; flex-wrap: wrap; }
.form-mode label { display: flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; }
.form-msg { font-size: 12.5px; padding: 10px 14px; border-radius: 8px; margin-top: -4px; }
.form-msg.success { background: #dcfce7; color: #166534; }
.form-msg.error { background: #fee2e2; color: #991b1b; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1200px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .video-grid { grid-template-columns: repeat(2, 1fr); }
    .testi-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
    .blog-sidebar .sb-widget { flex: 1 1 260px; }
}
@media (max-width: 991px) {
    .bulk-layout { grid-template-columns: 1fr; }
    .testi-stats { grid-template-columns: repeat(2, 1fr); }
    .legal-layout { grid-template-columns: 1fr; }
    .legal-toc { position: static; display: flex; flex-wrap: wrap; gap: 4px 18px; }
    .legal-toc h4 { width: 100%; }
    .legal-toc a { padding: 4px 0; border-left: none; margin-left: 0; }
}
@media (max-width: 640px) {
    .blog-grid, .video-grid, .testi-grid { grid-template-columns: 1fr; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid-2 { grid-template-columns: 1fr; }
    .blog-detail-wrap h1 { font-size: 21px; }
    .blog-sidebar { flex-direction: column; }
}


/* ############################################################
   5. HOME PAGE - scoped to body[data-page="home"] so these
      overrides stay on the home page, as they did when this
      layer was a separate file only index.html loaded.
   ############################################################ */
/* ============================================================
   Yashram Trading Company - Home page visual layer
   Every selector below carries the body[data-page="home"] scope,
   which is what keeps these overrides off the other pages now
   that all pages load this one stylesheet.
   ============================================================ */

:root {
    --grad-brand: linear-gradient(135deg, #063a61 0%, #0d5286 55%, #1a6ea8 100%);
    --grad-accent: linear-gradient(135deg, #ee4d7d 0%, #f5a623 100%);
    --shadow-soft: 0 2px 6px rgba(6, 58, 97, .05);
    --shadow-lift: 0 18px 38px rgba(6, 58, 97, .14);
}

/* ============================ REVEAL ON SCROLL ============================
   The attribute is applied by js/home.js, never in the markup, so a browser
   without JS still renders every section visible. */
body[data-page="home"] [data-reveal]{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                transform .7s cubic-bezier(.22, .61, .36, 1);
}

body[data-page="home"] [data-reveal].revealed{ opacity: 1; transform: none; }

/* ============================ HERO ============================ */
body[data-page="home"] .slider{ background: #eef3f8; }

/* Slow drift on the banner art so a parked hero still feels alive. The zoom
   lives on the img, leaving the track transform free for sliding. */
body[data-page="home"] .slides img{
    animation: heroDrift 14s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes heroDrift {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* Bottom scrim keeps the dots legible over pale banner art. */
body[data-page="home"] .slider::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    background: linear-gradient(to top, rgba(2, 25, 42, .34), rgba(2, 25, 42, 0));
    pointer-events: none;
}

body[data-page="home"] .slider-btn{
    opacity: .55;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, .72);
    color: var(--primary);
    box-shadow: 0 8px 24px rgba(2, 39, 66, .22);
}

body[data-page="home"] .slider:hover .slider-btn{ opacity: 1; }

body[data-page="home"] .slider-dots{
    bottom: 26px;
    background: rgba(2, 25, 42, .3);
    padding: 8px 14px;
}

body[data-page="home"] .slider-dots button.active{ background: #fff; width: 30px; }

/* ============================ TICKER RIBBON ============================ */
body[data-page="home"] .ticker{
    background: var(--grad-brand);
    color: #fff;
    overflow: hidden;
    position: relative;
}

body[data-page="home"] .ticker::before,
body[data-page="home"] .ticker::after{
    content: "";
    position: absolute;
    top: 0;
    width: 90px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

body[data-page="home"] .ticker::before{ left: 0;  background: linear-gradient(to right, #063a61, rgba(6, 58, 97, 0)); }
body[data-page="home"] .ticker::after{ right: 0; background: linear-gradient(to left,  #1a6ea8, rgba(26, 110, 168, 0)); }

body[data-page="home"] .ticker-track{
    display: flex;
    width: max-content;
    animation: tickerRun 34s linear infinite;
}

body[data-page="home"] .ticker:hover .ticker-track{ animation-play-state: paused; }

body[data-page="home"] .ticker-group{
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 11px 40px 11px 0;
    /* A group must never be narrower than the strip, or a wide (zoomed-out)
       viewport outruns the two groups and bare gradient shows on the right.
       The loop stays seamless because space-around leaves a half-space at each
       end, and the trailing padding matches the gap: the junction between the
       two groups measures the same as the spacing inside one. js/home.js then
       repeats the items so wide screens get density rather than bare spacing. */
    min-width: 100vw;
    justify-content: space-around;
}

body[data-page="home"] .ticker-group span{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    white-space: nowrap;
}

body[data-page="home"] .ticker-group span i{ color: #ffd166; font-size: 13px; }

@keyframes tickerRun {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============================ CATEGORY STRIP ============================ */
body[data-page="home"] .cat-strip{ padding: 46px 0 16px; }

/* The strip is data-driven (one tile per category plus the catalogue), so the
   track count follows the content instead of the fixed 7 columns: auto-fit
   collapses the spare tracks and the tiles stretch to fill the row. */
body[data-page="home"] .cat-grid{
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

body[data-page="home"] .cat-card .thumb{
    position: relative;
    border-radius: 16px;
    border-color: #e8edf3;
    background: linear-gradient(180deg, #fafcfe 0%, #eef3f8 100%);
    aspect-ratio: 1 / .82;
    box-shadow: var(--shadow-soft);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}

/* Arrow chip that rises out of the corner under the cursor. */
body[data-page="home"] .cat-card .thumb::after{
    content: "\f061";
    font-family: "Font Awesome 7 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(6px);
    transition: .28s;
}

body[data-page="home"] .cat-card:hover .thumb{
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--shadow-lift);
}

body[data-page="home"] .cat-card:hover .thumb::after{ opacity: 1; transform: translateY(0); }

body[data-page="home"] .cat-card span{
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-dark);
    transition: color .2s;
}

body[data-page="home"] .cat-card:hover span{ color: var(--accent); }

/* ============================ SECTION HEADINGS ============================ */
body[data-page="home"] .section{ padding: 52px 0; }

/* ---------------------------------------------------------------
   ALTERNATING SECTION BANDS
   The home page reads as a stack of full-bleed bands: plain white,
   a cool blue mist, and a warm sand. Neighbouring bands never repeat
   a tone, so every block gets its own footing and the page keeps a
   rhythm as you scroll. `.tint` is kept as an alias for the cool
   band so older markup still lands somewhere sensible.
   --------------------------------------------------------------- */
body[data-page="home"] .band{ position: relative; }

/* Content sits above the decorative texture layers below. */
body[data-page="home"] .band > .container{ position: relative; z-index: 1; }

/* A hairline on both edges makes the change of colour read as a
   deliberate seam rather than a banding artefact. */
body[data-page="home"] .band-cool,
body[data-page="home"] .band-warm,
body[data-page="home"] .band-mist,
body[data-page="home"] .section.tint{
    border-top: 1px solid;
    border-bottom: 1px solid;
}

/* Cool band - brand blue washed almost to white, with an off-centre
   glow top-left and a whisper of accent pink bottom-right. */
body[data-page="home"] .band-cool,
body[data-page="home"] .section.tint{
    background:
        radial-gradient(780px 320px at 10% 0%, rgba(26, 110, 168, .09), transparent 68%),
        radial-gradient(620px 280px at 92% 100%, rgba(238, 77, 125, .05), transparent 70%),
        linear-gradient(180deg, #f7fbfe 0%, #edf4fa 100%);
    border-color: #e3edf6;
}

/* Warm band - sand tone lifted with amber, the counterweight to the
   cool bands and a match for the testimonial slab further down. */
body[data-page="home"] .band-warm{
    background:
        radial-gradient(720px 320px at 88% 0%, rgba(245, 166, 35, .10), transparent 70%),
        radial-gradient(580px 260px at 6% 100%, rgba(238, 77, 125, .05), transparent 72%),
        linear-gradient(180deg, #fdfaf4 0%, #f8f1e5 100%);
    border-color: #f0e7d8;
}

/* Mist band - the deepest of the three, carrying the stats block. */
body[data-page="home"] .band-mist{
    background:
        radial-gradient(980px 380px at 50% 0%, rgba(6, 58, 97, .09), transparent 72%),
        linear-gradient(180deg, #edf3f9 0%, #f7fafd 100%);
    border-color: #e1eaf3;
}

/* Faint dot grid, faded out at the edges, so the stats read as though
   they are pinned to a surface instead of floating on flat colour. */
body[data-page="home"] .band-mist::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(6, 58, 97, .08) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 38%, #000, transparent 76%);
    mask-image: radial-gradient(72% 62% at 50% 38%, #000, transparent 76%);
    pointer-events: none;
}

/* The banded category strip needs real breathing room at the foot now
   that it owns a background instead of bleeding into the next block. */
body[data-page="home"] .cat-strip.band{ padding: 48px 0 46px; }

/* Tiles and thumbnails go white on tinted ground, otherwise their own
   pale gradients sink into the band and the cards lose their edge. */
body[data-page="home"] .band-cool .cat-card .thumb,
body[data-page="home"] .band-warm .cat-card .thumb{
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

body[data-page="home"] .band-cool .slider-track .pg-card .thumb-link,
body[data-page="home"] .band-warm .slider-track .pg-card .thumb-link{
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
}

body[data-page="home"] .band-warm .slider-track .pg-card{ border-color: #f1e9dc; }
body[data-page="home"] .band-warm .section-head .view-all-link{ border-color: #eee2d0; }
body[data-page="home"] .band-warm .slider-arrow{ border-color: #eee2d0; }

body[data-page="home"] .band-mist .global-scroll{
    background: #fff;
    border-color: #e4edf5;
}

body[data-page="home"] .section-head{ margin-bottom: 34px; }

body[data-page="home"] .section-head .eyebrow{
    background: rgba(238, 77, 125, .09);
    padding: 6px 15px 6px 13px;
    border-radius: 999px;
    letter-spacing: 1.4px;
    font-size: 10.5px;
    margin-bottom: 14px;
}

body[data-page="home"] .section-head .eyebrow::before{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

body[data-page="home"] .section-head h2{
    font-size: 34px;
    letter-spacing: -.6px;
    color: #10233a;
}

body[data-page="home"] .section-head.centered h2::after{
    content: "";
    display: block;
    width: 62px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: var(--grad-accent);
}

body[data-page="home"] .section-head .sub{ font-size: 13.5px; margin-top: 12px; }

body[data-page="home"] .section-head.centered .toolbar-row{ gap: 14px; }

body[data-page="home"] .slider-arrow{
    width: 42px;
    height: 42px;
    border-color: #e2eaf1;
    color: var(--primary);
    box-shadow: var(--shadow-soft);
}

body[data-page="home"] .slider-arrow:hover{
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 8px 18px rgba(6, 58, 97, .28);
}

body[data-page="home"] .section-head .view-all-link{
    border-color: #dce5ee;
    background: #fff;
    box-shadow: var(--shadow-soft);
    letter-spacing: .3px;
}

body[data-page="home"] .section-head .view-all-link:hover{ box-shadow: 0 8px 18px rgba(6, 58, 97, .28); }

/* ============================ PRODUCT CARDS ============================ */
body[data-page="home"] .slider-track{ gap: 20px; padding: 10px 2px 22px; }

body[data-page="home"] .slider-track .pg-card{
    flex-basis: calc((100% - 3 * 20px) / 4);
    border-radius: 16px;
    border-color: #ebf1f6;
    box-shadow: var(--shadow-soft);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}

body[data-page="home"] .slider-track .pg-card:hover{
    transform: translateY(-7px);
    box-shadow: var(--shadow-lift);
}

body[data-page="home"] .slider-track .pg-card .thumb-link{
    background: linear-gradient(180deg, #fbfcfd 0%, #eff3f7 100%);
}

body[data-page="home"] .slider-track .pg-card h3{ font-weight: 600; color: #24344a; }
body[data-page="home"] .slider-track .pg-card .price-row strong{ font-size: 15px; }

@media (max-width: 1200px) { body[data-page="home"] .slider-track .pg-card{ flex-basis: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 900px)  { body[data-page="home"] .slider-track .pg-card{ flex-basis: calc((100% - 20px) / 2.15); } }
@media (max-width: 560px)  { body[data-page="home"] .slider-track{ gap: 12px; } body[data-page="home"] .slider-track .pg-card{ flex-basis: 68%; } }

/* ============================ PROMO BANNERS ============================ */
body[data-page="home"] .promos{ padding: 40px 0; }

body[data-page="home"] .promo-grid{ gap: 22px; }

body[data-page="home"] .promo-grid a{
    position: relative;
    border-radius: 18px;
    box-shadow: var(--shadow-soft);
}

/* Light sweep that crosses the tile on hover. */
body[data-page="home"] .promo-grid a::after{
    content: "";
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
    transform: skewX(-18deg);
    transition: left .75s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}

body[data-page="home"] .promo-grid a:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); }
body[data-page="home"] .promo-grid a:hover::after{ left: 125%; }

/* ============================ GLOBAL PRESENCE + STATS ============================ */
body[data-page="home"] .global{ padding: 62px 0 44px; }

body[data-page="home"] .global .heading-block{ margin-bottom: 4px; }

body[data-page="home"] .global .eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(238, 77, 125, .09);
    padding: 6px 15px 6px 13px;
    border-radius: 999px;
    margin-bottom: 14px;
}

body[data-page="home"] .global .eyebrow::before{
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

body[data-page="home"] .global h2{
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.6px;
    color: #10233a;
}

body[data-page="home"] .global h2::after{
    content: "";
    display: block;
    width: 62px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 999px;
    background: var(--grad-accent);
}

body[data-page="home"] .global .sub{
    font-size: 13.5px;
    color: var(--muted);
    max-width: 620px;
    margin: 14px auto 0;
    line-height: 1.7;
}

body[data-page="home"] .stats-row{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}

body[data-page="home"] .stat-card{
    background: #fff;
    border: 1px solid #e9eff5;
    border-radius: 18px;
    padding: 26px 18px 22px;
    box-shadow: var(--shadow-soft);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}

body[data-page="home"] .stat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); }

body[data-page="home"] .stat-card i{
    font-size: 19px;
    color: var(--primary);
    background: rgba(6, 58, 97, .07);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
}

body[data-page="home"] .stat-card .num{
    display: block;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body[data-page="home"] .stat-card .label{
    display: block;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--muted);
}

body[data-page="home"] .global-scroll{
    margin-top: 42px;
    border-radius: 20px;
    /* stays auto, not hidden: below 991px style.css gives the map a 760px
       min-width and this box is what lets it scroll instead of widening the page */
    overflow-x: auto;
    background: linear-gradient(180deg, #fbfdff 0%, #f1f6fa 100%);
    border: 1px solid #e9eff5;
    padding: 10px;
}

/* ============================ TESTIMONIALS ============================ */
body[data-page="home"] .testimonials{
    background: linear-gradient(180deg, #f9f5ee 0%, #fdfbf7 100%);
    padding: 66px 0 58px;
    margin-top: 0;
    border-top: 1px solid #f0e8db;
}

body[data-page="home"] .testimonials h2{
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: #10233a;
    margin-bottom: 0;
}

body[data-page="home"] .testimonials h2::after{
    content: "";
    display: block;
    width: 62px;
    height: 3px;
    margin: 16px auto 34px;
    border-radius: 999px;
    background: var(--grad-accent);
}

body[data-page="home"] .testi-viewport{ padding: 10px 2px 22px; }

body[data-page="home"] .testi-card{
    position: relative;
    border-radius: 18px;
    border-color: #f0e8db;
    padding: 40px 28px 30px;
    box-shadow: 0 4px 18px rgba(6, 58, 97, .05);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}

body[data-page="home"] .testi-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(6, 58, 97, .10);
}

body[data-page="home"] .testi-card::before{
    content: "\201C";
    position: absolute;
    top: 8px;
    left: 24px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 74px;
    line-height: 1;
    color: rgba(6, 58, 97, .09);
}

body[data-page="home"] .testi-card .stars{ color: var(--amber); font-size: 13px; letter-spacing: 2px; }

body[data-page="home"] .testi-card p{
    font-size: 13px;
    color: #46536a;
    line-height: 1.85;
    margin-bottom: 22px;
}

/* Initial badge injected by js/home.js, sitting above the attribution. */
body[data-page="home"] .testi-avatar{
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--grad-brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 6px 14px rgba(6, 58, 97, .22);
}

body[data-page="home"] .testi-card h4{ font-size: 13px; color: #10233a; }
body[data-page="home"] .testi-card h4 span{ display: block; font-size: 11.5px; margin-top: 2px; }

body[data-page="home"] .dots{ margin-top: 12px; }
body[data-page="home"] .dots button{ background: #ded4c4; }
body[data-page="home"] .dots button.active{ background: var(--primary); width: 24px; border-radius: 999px; }

/* ============================ USP BAR ============================ */
body[data-page="home"] .usp{
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    border-top: 1px solid #eaf0f6;
    border-bottom: none;
    padding: 40px 0 46px;
}

body[data-page="home"] .usp .container{ gap: 18px; }

body[data-page="home"] .usp-item{
    justify-content: flex-start;
    background: #fff;
    border: 1px solid #e9eff5;
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow-soft);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s;
}

body[data-page="home"] .usp-item:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lift); }

body[data-page="home"] .usp-item i{
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: var(--primary);
    background: rgba(6, 58, 97, .07);
}

body[data-page="home"] .usp-item .fa-whatsapp{ color: #1eae54; background: rgba(30, 174, 84, .1); }

body[data-page="home"] .usp-item h4{ font-size: 12px; color: #10233a; }
body[data-page="home"] .usp-item p{ font-size: 11.5px; margin-top: 1px; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 991px) {
    body[data-page="home"] .slider-btn{ opacity: 1; width: 42px; height: 42px; }
    body[data-page="home"] .slider-btn.prev{ left: 12px; }
    body[data-page="home"] .slider-btn.next{ right: 12px; }
    body[data-page="home"] .cat-grid{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    body[data-page="home"] .stats-row{ grid-template-columns: repeat(2, 1fr); }
    body[data-page="home"] .section{ padding: 42px 0; }
}

@media (max-width: 640px) {
    body[data-page="home"] .section{ padding: 34px 0; }
    body[data-page="home"] .section-head h2, body[data-page="home"] .global h2{ font-size: 24px; }
    body[data-page="home"] .testimonials h2{ font-size: 24px; }
    body[data-page="home"] .cat-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
    body[data-page="home"] .stat-card .num{ font-size: 28px; }
    body[data-page="home"] .cat-strip{ padding: 32px 0 8px; }
    body[data-page="home"] .cat-strip.band{ padding: 34px 0 32px; }
    body[data-page="home"] .promos{ padding: 26px 0; }
    body[data-page="home"] .global{ padding: 40px 0 30px; }
    body[data-page="home"] .ticker-group{ gap: 26px; padding-right: 26px; }
    body[data-page="home"] .ticker-group span{ font-size: 11px; }
    body[data-page="home"] .testi-card{ padding: 34px 22px 26px; }
}

/* Motion-sensitive visitors get the layout without the movement. */
@media (prefers-reduced-motion: reduce) {
    body[data-page="home"] .slides img,
    body[data-page="home"] .ticker-track{ animation: none; }
    body[data-page="home"] [data-reveal]{ opacity: 1; transform: none; transition: none; }
    body[data-page="home"] .cat-card:hover .thumb,
    body[data-page="home"] .promo-grid a:hover,
    body[data-page="home"] .usp-item:hover,
    body[data-page="home"] .stat-card:hover,
    body[data-page="home"] .testi-card:hover,
    body[data-page="home"] .slider-track .pg-card:hover{ transform: none; }
}


/* ############################################################
   6. CART DRAWER - slides in from the right on add-to-cart
   ############################################################ */

.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 360;                 /* over the bottom nav (250) and quickview (300), under the toast (400) */
    pointer-events: none;
    visibility: hidden;
    /* hold visibility until the slide-out finishes, then drop out of the tab order */
    transition: visibility 0s linear .42s;
}

.cart-drawer.open {
    pointer-events: auto;
    visibility: visible;
    transition-delay: 0s;
}

.cd-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 25, 42, .45);
    opacity: 0;
    transition: opacity .38s ease;
}

.cart-drawer.open .cd-backdrop { opacity: 1; }

.cd-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -18px 0 46px rgba(2, 39, 66, .22);
    transform: translateX(100%);
    transition: transform .42s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

.cart-drawer.open .cd-panel { transform: translateX(0); }

.cd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--grad-brand, linear-gradient(135deg, #063a61, #1a6ea8));
    color: #fff;
}

.cd-head h3 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.cd-head .cd-count {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11.5px;
    font-weight: 600;
}

.cd-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 15px;
    display: grid;
    place-items: center;
    transition: .2s;
}

.cd-close:hover { background: rgba(255, 255, 255, .3); }

.cd-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 20px;
    -webkit-overflow-scrolling: touch;
}

.cd-line {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    gap: 13px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.cd-line:last-child { border-bottom: none; }

.cd-line .thumb {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--tile);
    border: 1px solid var(--line);
}

.cd-line .thumb img { width: 100%; height: 100%; object-fit: cover; }

.cd-line h4 {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cd-line .cat {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
    margin-top: 3px;
}

.cd-line .qty-stepper { height: 30px; margin-top: 9px; width: max-content; }
.cd-line .qty-stepper button { width: 28px; height: 30px; font-size: 13px; }
.cd-line .qty-stepper input { width: 34px; height: 30px; font-size: 12px; }

.cd-line .cd-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.cd-line .price { font-size: 13.5px; font-weight: 700; color: var(--primary-dark); white-space: nowrap; }

.cd-line .cd-remove {
    border: none;
    background: none;
    color: #9ca3af;
    font-size: 13px;
    padding: 2px 4px;
    transition: .2s;
}

.cd-line .cd-remove:hover { color: var(--accent); }

.cd-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
}

.cd-empty i { font-size: 38px; color: #d6dee6; margin-bottom: 14px; }
.cd-empty p { font-size: 13px; margin-bottom: 18px; }

.cd-empty a {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 999px;
}

.cd-foot {
    border-top: 1px solid var(--line);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    background: #fbfcfd;
}

.cd-foot .cd-sub {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}

.cd-foot .cd-sub span { font-size: 12.5px; color: var(--muted); }
.cd-foot .cd-sub strong { font-size: 18px; color: var(--primary-dark); }

.cd-foot .cd-note {
    font-size: 10.5px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 14px;
}

.cd-foot .cd-view,
.cd-foot .cd-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 10px;
    padding: 13px 16px;
    transition: .2s;
}

.cd-foot .cd-view {
    background: var(--primary);
    color: #fff;
    border: 1.5px solid var(--primary);
}

.cd-foot .cd-view:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

.cd-foot .cd-continue {
    margin-top: 9px;
    background: #fff;
    color: var(--primary);
    border: 1.5px solid var(--line);
}

.cd-foot .cd-continue:hover { border-color: var(--primary); }

/* the page behind the drawer must not scroll while it is open */
body.cd-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .cd-panel { transition: none; }
    .cd-backdrop { transition: none; }
    .cart-drawer { transition: none; }
}

/* ############################################################
   7. MOBILE APP SHELL
      Below 992px the site drops its web chrome and behaves like a
      native app: a compact app bar, an off-canvas drawer instead of
      the blue nav bar, and the fixed bottom tab bar that was already
      here. Desktop is untouched.
   ############################################################ */

/* The app-shell chrome exists in the markup on every page; desktop keeps it
   out of the layout entirely and the media query below switches it on. */
.app-menu-btn,
.nav-backdrop,
.nav-drawer-head,
.nav-drawer-foot { display: none; }

@media (max-width: 991px) {

    /* ---------------- app bar ---------------- */
    .top-bar { display: none; }            /* phone/offer/social is desktop chrome */

    .main-header {
        padding: 8px 0 10px;
        padding-top: calc(8px + env(safe-area-inset-top));
        border-bottom: none;
        box-shadow: 0 2px 14px rgba(6, 58, 97, .07);
    }

    .header-container { gap: 10px; row-gap: 10px; }

    .app-menu-btn {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        border: none;
        border-radius: 12px;
        background: #f1f5f9;
        color: var(--primary);
        font-size: 16px;
    }

    .logo img { height: 42px; }

    .header-actions { gap: 8px; }

    .icon-btn {
        width: 38px;
        height: 38px;
        border: none;
        background: #f1f5f9;
        font-size: 14px;
    }

    .icon-btn.cart { background: var(--primary); color: #fff; }

    .search-bar {
        padding: 3px 3px 3px 16px;
        background: #f1f5f9;
        border-color: transparent;
    }

    .search-bar input { font-size: 12.5px; }
    .search-bar button { width: 34px; height: 34px; font-size: 12px; }

    /* ---------------- nav drawer ---------------- */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        z-index: 310;
        background: rgba(2, 25, 42, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s linear .3s;
    }

    body.nav-open .nav-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
    body.nav-open { overflow: hidden; }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(310px, 84vw);
        z-index: 320;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-top: env(safe-area-inset-top);
        transform: translateX(-100%);
        transition: transform .34s cubic-bezier(.22, .61, .36, 1);
        box-shadow: 8px 0 32px rgba(2, 39, 66, .28);
    }

    .main-nav.open { transform: translateX(0); }

    /* .container carries margin: 0 auto, and an auto margin beats flex
       stretch - without resetting it the panel contents shrink-wrap and
       centre. Making it the column flex parent also lets the contact
       footer sit at the bottom of the drawer. */
    .main-nav .container {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }

    .nav-drawer-head .logo img { height: 44px; }

    .nav-drawer-close {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font-size: 15px;
        display: grid;
        place-items: center;
    }

    /* the list must stay laid out while the panel slides back out */
    .nav-links,
    .nav-links.open {
        display: flex;
        padding: 8px 0 4px;
        flex: 0 0 auto;
    }

    .nav-links > li > a {
        padding: 13px 16px;
        font-size: 13.5px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .nav-links > li > a.active { background: rgba(255, 255, 255, .1); }
    .nav-links > li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
    .nav-links > li.has-drop > a i { transition: transform .25s; }

    .dropdown { background: rgba(0, 0, 0, .16); padding: 2px 0 6px; margin: 0; }
    .dropdown a { padding: 10px 16px 10px 30px; font-size: 12.5px; }

    .nav-drawer-foot {
        margin-top: auto;
        display: grid;
        gap: 8px;
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .nav-drawer-foot a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px;
        border-radius: 10px;
        font-size: 12.5px;
        font-weight: 600;
        color: #fff;
        background: rgba(255, 255, 255, .12);
    }

    .nav-drawer-foot .ndf-wa { background: #25d366; }

    /* Plain text links, not buttons - these are the fine print, and giving
       them the same filled treatment as Call / Chat would outrank them. */
    .nav-drawer-foot .ndf-legal {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 16px;
        margin-top: 6px;
    }

    .nav-drawer-foot .ndf-legal a {
        display: inline;
        padding: 4px 0;
        border-radius: 0;
        background: none;
        font-size: 11.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, .74);
    }

    .nav-drawer-foot .ndf-copy {
        text-align: center;
        font-size: 10.5px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .48);
    }

    /* ---------------- bottom tab bar ---------------- */
    /* clears the tab bar, plus a margin of air where the footer used to sit */
    body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

    .bottom-nav {
        background: rgba(255, 255, 255, .94);
        backdrop-filter: blur(14px);
        border-top: none;
        box-shadow: 0 -6px 22px rgba(6, 58, 97, .10);
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    }

    .bottom-nav a {
        position: relative;
        gap: 4px;
        padding: 9px 2px 7px;
        font-size: 9.5px;
        font-weight: 600;
        letter-spacing: .2px;
        color: #7c8899;
        border-radius: 12px;
    }

    .bottom-nav a i { font-size: 17px; }

    /* small cap over the live tab, the way a native tab bar marks position */
    .bottom-nav a.active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--grad-brand, var(--primary));
    }

    /* WhatsApp is the main way people reach the shop, so the float stays on
       screen next to the call button even though the tab bar also links it */
    .wa-float { bottom: auto; }

    /* ---------------- footer ---------------- */
    /* An app has no marketing footer: the tab bar is the navigation and the
       drawer carries the rest, so the two footer slabs are lifted out of the
       mobile layout. They stay in the markup rather than being dropped, so the
       links are still there to crawl and desktop is untouched. The drawer foot
       picks up Terms / Privacy / Refunds, which lived nowhere else. */
    .main-footer,
    .footer-bottom { display: none; }

    /* the chip strip above the grid already lists every category; the sidebar
       laid on its side underneath just repeats it */
    .shop-sidebar { display: none; }
}

/* ---------------- native-feeling touch behaviour ---------------- */
@media (max-width: 991px) {
    * { -webkit-tap-highlight-color: transparent; }
    a, button, .pg-card, .cat-card { touch-action: manipulation; }

    /* momentum scrolling that stops at the rail instead of chaining to the page */
    .slider-track,
    .shop-sidebar,
    .blog-chips,
    .cd-body { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

    .container { padding: 0 14px; }
}

/* On a touch screen there is no cursor to leave, so a :hover transform sticks
   after the tap. Press states replace it. */
@media (hover: none) {
    .pg-card:hover,
    .cat-card:hover .thumb,
    .promo-grid a:hover,
    .blog-card:hover,
    .video-card:hover,
    .usp-item:hover,
    .stat-card:hover,
    .testi-card:hover,
    .slider-track .pg-card:hover { transform: none; box-shadow: var(--shadow-soft, 0 2px 6px rgba(6, 58, 97, .05)); }

    .pg-card:active,
    .cat-card:active,
    .promo-grid a:active,
    .blog-card:active,
    .stat-card:active { transform: scale(.985); transition: transform .12s ease; }

    .bottom-nav a:active,
    .btn-add-cart:active,
    .app-menu-btn:active,
    .icon-btn:active { transform: scale(.94); transition: transform .12s ease; }

    /* quickview needs a cursor to reveal itself; on touch it just blocks the image */
    .pg-quickview { display: none; }
}

/* ---------------- home page, app layout ---------------- */
@media (max-width: 991px) {
    /* four across with round tiles is the shape people expect at the top of a
       shopping app, and it fits the whole range on one screen */
    body[data-page="home"] .cat-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 14px 8px;
    }

    body[data-page="home"] .cat-card .thumb {
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        box-shadow: none;
    }

    body[data-page="home"] .cat-card .thumb::after { display: none; }
    body[data-page="home"] .cat-card:hover .thumb { transform: none; box-shadow: none; }

    body[data-page="home"] .cat-card span {
        margin-top: 8px;
        font-size: 9.5px;
        letter-spacing: .1px;
        text-transform: none;
        font-weight: 600;
        /* two lines every time, so a long name cannot shunt the row below it
           out of line with its neighbours */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 26px;
    }

    /* section headings become a compact row: title left, "View all" right */
    body[data-page="home"] .section { padding: 22px 0; }
    body[data-page="home"] .cat-strip { padding: 20px 0 4px; }

    body[data-page="home"] .section-head.centered {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        gap: 12px;
        margin-bottom: 14px;
    }

    body[data-page="home"] .section-head.centered .heading-block { flex: 1; }
    body[data-page="home"] .section-head .eyebrow { display: none; }
    body[data-page="home"] .section-head .sub { display: none; }

    body[data-page="home"] .section-head h2 { font-size: 17px; letter-spacing: -.2px; }
    body[data-page="home"] .section-head.centered h2::after { display: none; }

    /* the rail is swiped, so the arrows are dead weight */
    body[data-page="home"] .section-head .slider-arrow { display: none; }

    body[data-page="home"] .section-head.centered .view-all-link {
        padding: 0;
        border: none;
        background: none;
        box-shadow: none;
        font-size: 11.5px;
        color: var(--accent);
    }

    body[data-page="home"] .promos { padding: 16px 0; }
    body[data-page="home"] .promo-grid { gap: 12px; }
    body[data-page="home"] .promo-grid a { border-radius: 14px; }

    body[data-page="home"] .global { padding: 26px 0 20px; }
    body[data-page="home"] .global .sub { display: none; }
    body[data-page="home"] .stats-row { gap: 10px; margin-top: 20px; }
    body[data-page="home"] .stat-card { padding: 16px 10px 14px; border-radius: 14px; }
    body[data-page="home"] .stat-card i { width: 36px; height: 36px; font-size: 15px; margin-bottom: 9px; }

    body[data-page="home"] .testimonials { padding: 30px 0 26px; }
    body[data-page="home"] .usp { padding: 22px 0 26px; }
    body[data-page="home"] .usp .container { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    body[data-page="home"] .usp-item { flex-direction: column; align-items: flex-start; gap: 9px; padding: 14px 12px; }
    body[data-page="home"] .usp-item h4 { font-size: 10.5px; }
    body[data-page="home"] .usp-item p { font-size: 10px; }

    /* the marquee is the app-style promo strip, so give it room to breathe */
    body[data-page="home"] .ticker-group { padding: 9px 26px 9px 0; }
}

@media (max-width: 640px) {
    body[data-page="home"] .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
    body[data-page="home"] .slider-track .pg-card { flex-basis: 46%; }
    body[data-page="home"] .stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ############################################################
   8. SHOP LAYOUT SWITCH - grid / list
      The card markup is identical in both; only the box changes.
   ############################################################ */

.view-toggle {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #f7f9fb;
}

.view-toggle button {
    width: 34px;
    height: 32px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    display: grid;
    place-items: center;
    transition: background .18s, color .18s;
}

.view-toggle button:hover { color: var(--primary); }

.view-toggle button[aria-pressed="true"] {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(6, 58, 97, .28);
}

/* the blurb is list-view only; in grid view there is no room for it */
.pg-desc { display: none; }

/* ---------------- list view ----------------
   The thumb is taken out of the flow and pinned down the left edge, with the
   card padded to clear it. Laying it out as a grid row instead makes the
   text column stretch to the image height and spreads the lines apart. */
.product-grid.view-list {
    grid-template-columns: 1fr;
    gap: 14px;
}

.product-grid.view-list .pg-card {
    display: block;
    position: relative;
    padding-left: 190px;
    min-height: 190px;
    text-align: left;
}

.product-grid.view-list .pg-card .thumb-link {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 190px;
    aspect-ratio: auto;
}

.product-grid.view-list .pg-card .cat-tag { margin-top: 18px; }

.product-grid.view-list .pg-card h3 {
    font-size: 14.5px;
    font-weight: 600;
    min-height: 0;
    margin: 6px 14px 8px;
    -webkit-line-clamp: 2;
}

.product-grid.view-list .pg-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 14px 10px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--muted);
}

.product-grid.view-list .pg-card .stars { margin: 0 14px; }
.product-grid.view-list .pg-card .price-row { margin: 8px 14px 0; }
.product-grid.view-list .pg-card .price-row strong { font-size: 17px; }

.product-grid.view-list .pg-actions {
    margin: 14px 14px 16px;
    padding: 0;
    max-width: 340px;
}

.product-grid.view-list .pg-card .badges { top: 12px; left: 12px; }

@media (max-width: 991px) {
    /* the toggle sits next to sort, so keep it compact */
    .view-toggle button { width: 32px; height: 30px; }

    .product-grid.view-list .pg-card { padding-left: 128px; min-height: 128px; }
    .product-grid.view-list .pg-card .thumb-link { width: 128px; }
    .product-grid.view-list .pg-card .cat-tag { margin-top: 12px; font-size: 9px; }
    .product-grid.view-list .pg-card h3 { font-size: 12.5px; margin: 4px 12px 6px; }
    .product-grid.view-list .pg-desc { display: none; }
    .product-grid.view-list .pg-card .stars { margin: 0 12px; }
    .product-grid.view-list .pg-card .price-row { margin: 6px 12px 0; }
    .product-grid.view-list .pg-card .price-row strong { font-size: 15px; }
    .product-grid.view-list .pg-actions { margin: 10px 12px 12px; }
    .product-grid.view-list .pg-actions .btn-add-cart { font-size: 11.5px; padding: 9px 10px; }
}

/* ############################################################
   9. GALLERY VIEWER - prev/next lightbox for photos and videos
   ############################################################ */

body.lb-open { overflow: hidden; }

.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 17px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s, transform .2s;
    z-index: 2;
}

.lb-nav:hover { background: rgba(255, 255, 255, .3); }
.lb-nav:active { transform: translateY(-50%) scale(.92); }
.lb-prev { left: 22px; }
.lb-next { right: 22px; }

/* a single item has nowhere to go */
.lightbox.lb-single .lb-nav,
.lightbox.lb-single .lb-counter { display: none; }

/* top-left, not bottom-centre: the caption and the request button live at the
   bottom and a tall image pushes them straight through a centred counter */
.lb-counter {
    position: absolute;
    left: 22px;
    top: 24px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    padding: 5px 14px;
    border-radius: 999px;
}

.lb-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 0;
}

.lb-video {
    width: min(1100px, 86vw);
    aspect-ratio: 16 / 9;
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.lb-video iframe,
.lb-video video { width: 100%; height: 100%; border: 0; display: block; }

/* a self-hosted clip may be portrait (phone footage); letterbox it inside the
   16/9 stage rather than stretching it */
.lb-video video { object-fit: contain; background: #000; }

.lb-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #25d366;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 999px;
    flex-shrink: 0;
}

.lb-cta:hover { background: #1eae54; }

/* the request button and caption sit under the cover, so the cover gets less */
.lightbox.lb-has-cta figure img {
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 210px);
}

/* the video card is a button now that it opens the viewer */
button.video-card {
    width: 100%;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

@media (max-width: 640px) {
    .lb-nav { width: 40px; height: 40px; font-size: 15px; }
    .lb-prev { left: 8px; }
    .lb-next { right: 8px; }
    .lb-counter { left: 12px; top: calc(14px + env(safe-area-inset-top)); font-size: 11px; }
    /* arrows sit over the image edges, so keep the photo clear of them */
    .lightbox figure { max-width: calc(100% - 96px); }
    .lb-cta { font-size: 11.5px; padding: 10px 18px; }
    .lb-video { width: 100%; }
}

/* ############################################################
   10. CONTACT PAGE
   ############################################################ */

.contact-hero { padding: 34px 0 38px; }

.contact-hero .ch-eyebrow {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .16);
    padding: 5px 13px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.contact-hero h1 { font-size: 32px; letter-spacing: -.5px; }
.contact-hero p { font-size: 13.5px; opacity: .9; margin-top: 8px; max-width: 560px; }

/* ---------------- quick actions ---------------- */
.contact-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: -34px 0 34px;      /* lifts the row so it straddles the hero edge */
    position: relative;
    z-index: 2;
}

.ca-card {
    display: flex;
    align-items: center;
    gap: 13px;
    background: #fff;
    border: 1px solid #e9eff5;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 6px 20px rgba(6, 58, 97, .08);
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s;
}

.ca-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(6, 58, 97, .14); }

.ca-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 17px;
    color: var(--primary);
    background: rgba(6, 58, 97, .08);
}

.ca-wa .ca-icon { color: #1eae54; background: rgba(30, 174, 84, .12); }

.ca-text { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); min-width: 0; }

.ca-text strong {
    font-size: 12.5px;
    color: var(--text);
    margin-bottom: 2px;
}

.ca-card .ca-text { overflow: hidden; }
.ca-card .ca-text strong,
.ca-card .ca-text { overflow-wrap: anywhere; }

/* ---------------- form + details ---------------- */
.contact-wrap { padding-bottom: 60px; }

.contact-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 24px;
    align-items: start;
}

.contact-card {
    background: #fff;
    border: 1px solid #e9eff5;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(6, 58, 97, .05);
}

.contact-card h2 {
    font-size: 18px;
    font-weight: 700;
    color: #10233a;
    letter-spacing: -.2px;
}

.contact-card .cc-sub {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.7;
    margin: 8px 0 20px;
}

.contact-info-card h2 { margin-bottom: 20px; }

/* form */
.contact-form { gap: 16px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cf-field { display: flex; flex-direction: column; }

.contact-form label {
    font-size: 11.5px;
    font-weight: 600;
    color: #46536a;
    margin: 0 0 6px;
    letter-spacing: .2px;
}

.contact-form input,
.contact-form textarea {
    padding: 12px 14px;
    border: 1.5px solid #e3e9ef;
    border-radius: 10px;
    background: #fbfcfd;
    font-size: 13px;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(6, 58, 97, .09);
}

.contact-form textarea { min-height: 130px; }

.cf-captcha-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; margin-bottom: 6px; }
.cf-captcha-row input { flex: 1; min-width: 0; margin: 0; }
.cf-captcha-row .cf-captcha-img,
.cf-captcha-row .cf-captcha-refresh { flex-shrink: 0; }
@media (max-width: 420px) {
    /* on a narrow phone the code image needs the full width to stay legible,
       so the input wraps beneath it - and then needs its own gap */
    .cf-captcha-row { flex-wrap: wrap; row-gap: 10px; }
    .cf-captcha-row input { flex-basis: 100%; order: 2; }
}
.cf-captcha-img { border-radius: 8px; border: 1px solid var(--border, #e3e8ee); display: block; }
.cf-captcha-refresh {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
    border: 1px solid var(--border, #e3e8ee); background: #f3f5f8; color: #6b7c8d;
}
.cf-captcha-refresh:hover { background: #fff; color: var(--primary); }

/* a class with display:flex beats the hidden attribute, so restore it */
.cf-error[hidden] { display: none; }

.cf-error {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 13px;
    margin: 0;
}

.cf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cf-actions .btn-submit-enquiry,
.cf-actions .btn-whatsapp-enquiry { margin: 0; }

.cf-note {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--muted);
    margin: 0;
}

.cf-note i { font-size: 10px; }

/* details list */
.contact-list { display: flex; flex-direction: column; gap: 18px; }

.contact-list li { display: flex; gap: 13px; align-items: flex-start; }

.ci-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--primary);
    background: rgba(6, 58, 97, .07);
}

.ci-body {
    font-size: 12.5px;
    color: #46536a;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.ci-body strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #10233a;
    margin-bottom: 3px;
}

.ci-body a:hover { color: var(--primary); text-decoration: underline; }
.ci-muted { color: #9ca3af; }

.ci-social { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }

.ci-social-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #10233a;
    margin-bottom: 12px;
}

.ci-social-links { display: flex; gap: 9px; flex-wrap: wrap; }

.ci-social-links a {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
    transition: transform .2s, box-shadow .2s;
}

.ci-social-links a:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0, 0, 0, .18); }

/* map */
.contact-map {
    margin-top: 24px;
    border: 1px solid #e9eff5;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(6, 58, 97, .05);
    line-height: 0;
}

.contact-map iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ---------------- responsive ---------------- */
@media (max-width: 991px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-actions { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: -26px 0 26px; }
    .contact-hero h1 { font-size: 26px; }
    .contact-card { padding: 22px; border-radius: 16px; }
    .contact-map iframe { height: 300px; }
}

@media (max-width: 640px) {
    .contact-hero { padding: 24px 0 30px; }
    .contact-hero h1 { font-size: 22px; }
    .contact-hero p { font-size: 12.5px; }
    .contact-actions { grid-template-columns: 1fr; gap: 10px; margin: -20px 0 22px; }
    .ca-card { padding: 13px 14px; border-radius: 12px; }
    .ca-icon { width: 40px; height: 40px; font-size: 15px; }
    /* stacking the two fields beats squeezing them side by side */
    .cf-row { grid-template-columns: 1fr; gap: 16px; }
    .cf-actions { grid-template-columns: 1fr; }
    .contact-card { padding: 18px; }
    .contact-form textarea { min-height: 110px; }
    .contact-map iframe { height: 240px; }
    .contact-wrap { padding-bottom: 34px; }
}

/* ---------------- bulk order page ----------------
   Shares the contact page card and form system; only the pieces unique to
   this page are defined here. */

.contact-form select {
    padding: 12px 14px;
    border: 1.5px solid #e3e9ef;
    border-radius: 10px;
    background: #fbfcfd;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    width: 100%;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.contact-form select:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(6, 58, 97, .09);
}

.bulk-grid { grid-template-columns: 1.3fr 1fr; }
.bulk-side { display: flex; flex-direction: column; gap: 20px; }

.bulk-side .bulk-perks { margin: 18px 0 0; gap: 15px; }
.bulk-side .bulk-perks i { border-radius: 12px; background: rgba(6, 58, 97, .07); }
.bulk-side .bulk-perks h4 { font-size: 12.5px; color: #10233a; }

/* how the enquiry is delivered - a real choice, so it reads as a fieldset */
.form-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: none;
    padding: 0;
    margin: 0;
}

.form-mode legend {
    font-size: 11.5px;
    font-weight: 600;
    color: #46536a;
    letter-spacing: .2px;
    margin-bottom: 8px;
    padding: 0;
}

.form-mode label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #46536a;
    background: #fbfcfd;
    border: 1.5px solid #e3e9ef;
    border-radius: 999px;
    padding: 9px 16px;
    cursor: pointer;
    margin: 0;
    transition: border-color .2s, background .2s, color .2s;
}

.form-mode label:has(input:checked) {
    border-color: var(--primary);
    background: rgba(6, 58, 97, .06);
    color: var(--primary);
}

.form-mode label .fa-whatsapp { color: #1eae54; }
.form-mode input { accent-color: var(--primary); }

.form-msg {
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    padding: 11px 14px;
    margin: 0;
}

.form-msg.error { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.form-msg.success { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }

.bulk-quote-card .stars { color: var(--amber); font-size: 13px; letter-spacing: 2px; margin-bottom: 12px; }
.bulk-quote-card p { font-size: 13px; color: #46536a; line-height: 1.85; margin-bottom: 14px; }
.bulk-quote-card h4 { font-size: 12.5px; color: #10233a; }
.bulk-quote-card h4 span { color: var(--muted); font-weight: 400; }

.bulk-quote-card a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
}

.bulk-quote-card a:hover { gap: 11px; }

@media (max-width: 991px) {
    .bulk-grid { grid-template-columns: 1fr; }
}

/* ############################################################
   11. FLOATING ACTIONS - WhatsApp + call
   ############################################################ */

.float-actions {
    position: fixed;
    right: 20px;
    bottom: 22px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* the buttons position themselves through the stack now, not individually */
.float-actions .wa-float {
    position: static;
    right: auto;
    bottom: auto;
}

.call-float {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 22px;
    box-shadow: 0 6px 18px rgba(6, 58, 97, .45);
    transition: transform .25s, background .25s;
}

.call-float:hover { transform: scale(1.08); background: var(--primary-dark); }

@media (max-width: 991px) {
    /* clear the bottom tab bar */
    .float-actions { bottom: calc(72px + env(safe-area-inset-bottom)); right: 14px; }

    .call-float,
    .float-actions .wa-float { width: 48px; height: 48px; font-size: 19px; }
}

/* ---------------- form validation states ---------------- */
.contact-form input.is-invalid,
.contact-form select.is-invalid,
.contact-form textarea.is-invalid {
    border-color: #ef4444;
    background: #fef4f4;
}

.contact-form input.is-invalid:focus,
.contact-form select.is-invalid:focus,
.contact-form textarea.is-invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .13);
}

/* the message carries an icon, so lay it out like the contact page error */
.form-msg {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.5;
}

.form-msg i { flex-shrink: 0; font-size: 13px; }

/* ############################################################
   12. PRODUCT VARIANTS - colour swatches and size chips
   ############################################################ */

.pd-variant {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.pv-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #10233a;
}

.pv-label b { font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; }

.pv-options { display: flex; flex-wrap: wrap; gap: 10px; }

.pv-swatch {
    width: 38px;
    height: 38px;
    padding: 3px;
    border: 2px solid #e3e9ef;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}

.pv-swatch span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* a ring keeps white and other pale blanks visible on a white card */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

.pv-swatch:hover { transform: scale(1.06); }
.pv-swatch.selected { border-color: var(--primary); }

.pv-size {
    min-width: 46px;
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid #e3e9ef;
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: #46536a;
    cursor: pointer;
    transition: .2s;
}

.pv-size:hover { border-color: var(--primary); color: var(--primary); }

.pv-size.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* the axis that still needs an answer */
.pd-variant.missing .pv-label { color: #b91c1c; }
.pd-variant.missing .pv-swatch,
.pd-variant.missing .pv-size { border-color: #fca5a5; }

.pv-error {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 10px 13px;
    margin: -6px 0 16px;
}

.pv-error[hidden] { display: none; }

/* the chosen variant, wherever the line is listed */
.line-variant {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: rgba(6, 58, 97, .07);
    border-radius: 999px;
    padding: 3px 10px;
    display: inline-block;
    margin-top: 6px;
}

@media (max-width: 640px) {
    .pv-swatch { width: 34px; height: 34px; }
    .pv-size { min-width: 42px; height: 34px; font-size: 12px; }
}


/* ============================ ACCOUNT POPUPS ============================
   Login and forgot-password share one overlay and swap panels; the register
   form reuses the same field and button styling on register.html. */
.auth-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 32, .6);
    z-index: 400; display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; pointer-events: none; transition: .25s;
}

.auth-overlay.open { opacity: 1; pointer-events: auto; }
body.auth-open { overflow: hidden; }

.auth-modal {
    background: #fff; border-radius: 14px;
    width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto;
    padding: 30px 28px 22px;
    position: relative; transform: translateY(14px); transition: .25s;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.auth-overlay.open .auth-modal { transform: translateY(0); }

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.auth-head { margin-bottom: 18px; }
.auth-head h3 { font-size: 20px; margin-bottom: 6px; }
.auth-head p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.auth-back {
    background: none; border: 0; padding: 0 0 10px; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--primary);
    display: inline-flex; align-items: center; gap: 6px;
}
.auth-back i { font-size: 10px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }

/* the eye button sits inside the password field */
.auth-pw { position: relative; }
.auth-pw input { padding-right: 40px; }
.auth-pw-toggle {
    position: absolute; right: 8px; bottom: 8px;
    width: 28px; height: 28px; border: 0; border-radius: 6px;
    background: none; color: var(--muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.auth-pw-toggle:hover { color: var(--primary); background: var(--tile); }

.auth-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-top: -2px;
}

.auth-check {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--muted); cursor: pointer;
}
.auth-check input { width: 14px; height: 14px; accent-color: var(--primary); }

.auth-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--primary);
}
.auth-link:hover { text-decoration: underline; }

.auth-submit { width: 100%; margin: 0; justify-content: center; }

.auth-msg[hidden] { display: none; }
.auth-msg { margin: 0; }
.auth-msg.is-ok {
    background: #ecfdf5; border-color: #a7f3d0; color: #065f46;
}

.auth-foot {
    margin-top: 16px; text-align: center;
    font-size: 12.5px; color: var(--muted);
}
.auth-foot a, .auth-foot .auth-link { color: var(--primary); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }

.auth-help {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.6;
}
.auth-help a { color: var(--primary); font-weight: 600; }

/* ---------------- register page ---------------- */
.auth-page { padding-top: 34px; padding-bottom: 56px; }

.auth-card {
    display: grid; grid-template-columns: 1fr 340px; gap: 40px;
    align-items: start;
    border: 1px solid var(--line); border-radius: 14px; padding: 32px;
}

.auth-terms { align-items: flex-start; gap: 9px; line-height: 1.55; }
.auth-terms input { margin-top: 3px; flex: 0 0 auto; }
.auth-terms a { color: var(--primary); font-weight: 600; }

.auth-aside {
    background: var(--tile); border-radius: 12px; padding: 24px;
}
.auth-aside h3 { font-size: 15px; margin-bottom: 14px; }

.auth-perks { display: flex; flex-direction: column; gap: 11px; }
.auth-perks li {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.auth-perks i { color: var(--primary); font-size: 12px; margin-top: 3px; }

.auth-aside-help { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.auth-aside-help p { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }

@media (max-width: 860px) {
    .auth-card { grid-template-columns: 1fr; gap: 28px; padding: 22px; }
}

@media (max-width: 560px) {
    .auth-modal { padding: 26px 20px 18px; }
    .auth-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ============================ ORDER HISTORY ============================ */
.orders-page { padding-top: 28px; padding-bottom: 56px; }

/* ---------------- summary strip ---------------- */
.od-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.od-stat {
    display: flex; align-items: center; gap: 13px;
    border: 1px solid var(--line); border-radius: 12px;
    padding: 16px 18px; background: #fff;
}

.od-stat-icon {
    width: 42px; height: 42px; flex: 0 0 auto;
    border-radius: 11px; display: grid; place-items: center;
    background: rgba(6, 58, 97, .08); color: var(--primary); font-size: 16px;
}
.od-stat-icon.is-blue  { background: #e0f2fe; color: #0369a1; }
.od-stat-icon.is-green { background: #dcfce7; color: #15803d; }
.od-stat-icon.is-amber { background: #fef3c7; color: #b45309; }

.od-stat strong { display: block; font-size: 19px; line-height: 1.2; }
.od-stat span   { font-size: 11.5px; color: var(--muted); }

/* ---------------- filter bar ---------------- */
.oh-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}

.oh-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

.oh-tab {
    padding: 9px 15px; border-radius: 999px;
    border: 1px solid var(--line); background: #fff;
    font-size: 12.5px; font-weight: 600; color: var(--muted);
    transition: .2s; white-space: nowrap;
}
.oh-tab:hover  { border-color: var(--primary); color: var(--primary); }
.oh-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.oh-tab span   { opacity: .7; margin-left: 4px; font-weight: 500; }

.oh-search { position: relative; flex: 1; min-width: 220px; max-width: 320px; }
.oh-search i {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 12px;
}
.oh-search input {
    width: 100%; padding: 10px 14px 10px 34px;
    border: 1px solid var(--line); border-radius: 999px;
    font: inherit; font-size: 12.5px; background: #fff;
}
.oh-search input:focus { outline: none; border-color: var(--primary); }

/* ---------------- order card ---------------- */
/* Orders sit in a responsive card grid - two up where there is room, one up
   once a card would be squeezed. auto-fill rather than a fixed count so it
   also works inside the narrower account column. */
.oh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 18px;
    margin-bottom: 26px;
}

.oh-card {
    border: 1px solid var(--line); border-radius: 14px;
    background: #fff; overflow: hidden;
    /* a column so the footer can sit flush with the bottom of every card in
       a row, whatever length the summary above it runs to */
    display: flex; flex-direction: column;
    transition: box-shadow .22s, transform .22s;
}
.oh-card:hover { transform: translateY(-2px); }
.oh-card:hover { box-shadow: 0 10px 30px rgba(6, 58, 97, .09); }
.oh-card.is-muted { opacity: .82; }

.oh-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 15px 20px; background: var(--tile);
    border-bottom: 1px solid var(--line);
}

.oh-head-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.oh-ref {
    font-size: 14px; font-weight: 700; letter-spacing: .3px; color: var(--primary);
}
.oh-ref:hover { text-decoration: underline; }

.oh-date { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }

/* ---------------- status pills ---------------- */
.oh-status {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700;
    border-radius: 999px; padding: 6px 13px; white-space: nowrap;
}
.oh-status.is-shipped    { background: #e0f2fe; color: #0369a1; }
.oh-status.is-processing { background: #fef3c7; color: #b45309; }
.oh-status.is-delivered  { background: #dcfce7; color: #15803d; }
.oh-status.is-cancelled  { background: #fee2e2; color: #b91c1c; }

/* ---------------- card body ----------------
   The list page is a summary only: order ref, status, what it contained and
   what it cost. The products themselves are on the order details page. */
.oh-body { display: block; }

.oh-items { padding: 6px 20px; }

.oh-item {
    display: grid; grid-template-columns: 62px 1fr auto;
    gap: 15px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--line);
}
.oh-item:last-child { border-bottom: 0; }

.oh-thumb {
    width: 62px; height: 62px; border-radius: 9px; overflow: hidden;
    background: var(--tile); display: block; border: 1px solid var(--line);
}
.oh-thumb img { width: 100%; height: 100%; object-fit: cover; }

.oh-item-body h4 { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.oh-item-body a:hover h4 { color: var(--primary); }
.oh-variant, .oh-qty {
    display: inline-block; font-size: 11.5px; color: var(--muted); margin: 4px 12px 0 0;
}
.oh-item-price { font-size: 14px; font-weight: 700; white-space: nowrap; }

.oh-body { flex: 1; }

.oh-side {
    background: #fcfdfe;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 20px;
    align-items: start;
}
.oh-side-row span   { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.oh-side-row strong { font-size: 12.5px; font-weight: 600; }
.oh-side-row .is-highlight { color: var(--primary); }
.oh-side-total strong { font-size: 17px; }

/* ---------------- card footer ---------------- */
.oh-foot {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 12px;
    padding: 14px 20px; border-top: 1px solid var(--line);
}

.oh-track {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12.5px; color: var(--muted);
}
.oh-track i { color: var(--primary); }
.oh-track.is-done i { color: #15803d; }

.oh-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.oh-actions .oh-btn { flex: 1 1 auto; }
.oh-actions .oh-btn.is-primary { flex-basis: 100%; }

.oh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 15px; border-radius: 8px;
    border: 1px solid var(--line); background: #fff;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--text);
    cursor: pointer; transition: .2s; white-space: nowrap;
}
.oh-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--tile); }
.oh-btn.is-primary {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.oh-btn.is-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.oh-btn.is-wa { background: #25d366; border-color: #25d366; color: #fff; }
.oh-btn.is-wa:hover { background: #1eb455; border-color: #1eb455; color: #fff; }

/* ---------------- pagination ---------------- */
.oh-pager { display: flex; gap: 7px; justify-content: center; margin: 28px 0 34px; }

.oh-page {
    min-width: 36px; height: 36px; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 600; color: var(--text); transition: .2s;
}
.oh-page:hover  { border-color: var(--primary); color: var(--primary); }
.oh-page.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.oh-page.is-disabled { opacity: .4; pointer-events: none; }

/* ---------------- help strip ---------------- */
.oh-help {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    border: 1px solid var(--line); border-radius: 14px;
    padding: 22px 24px; background: var(--tile);
}
.oh-help h3 { font-size: 16px; margin-bottom: 5px; }
.oh-help p  { font-size: 12.5px; color: var(--muted); }
.oh-help-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============================ ORDER DETAILS ============================ */
.od-page { padding-top: 6px; padding-bottom: 56px; }

.od-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 22px; flex-wrap: wrap; margin-bottom: 22px;
}

.od-back {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--primary); margin-bottom: 10px;
}
.od-back:hover { text-decoration: underline; }

.od-header h1 { font-size: 23px; line-height: 1.3; }
.od-header-meta { font-size: 12.5px; color: var(--muted); margin-top: 7px; }
.od-header-meta strong { color: var(--text); font-weight: 600; }

.od-dot {
    display: inline-block; width: 3px; height: 3px; border-radius: 50%;
    background: var(--muted); margin: 0 9px; vertical-align: middle;
}

.od-header-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.od-header-actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------------- panels ---------------- */
.od-panel {
    border: 1px solid var(--line); border-radius: 14px;
    background: #fff; padding: 20px 22px; margin-bottom: 18px;
}

.od-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.od-panel-head h2 {
    font-size: 15px; display: inline-flex; align-items: center; gap: 9px;
}
.od-panel-head h2 i { color: var(--primary); font-size: 14px; }
.od-muted, .od-eta { font-size: 12px; color: var(--muted); }
.od-eta strong { color: var(--primary); }

/* ---------------- tracking steps ---------------- */
.od-steps {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 0; margin: 6px 0 20px;
}

.od-steps li { position: relative; padding: 0 8px; text-align: center; }

/* the connecting rail */
.od-steps li::before {
    content: ""; position: absolute; top: 15px; left: -50%;
    width: 100%; height: 2px; background: var(--line); z-index: 0;
}
.od-steps li:first-child::before { display: none; }
.od-steps li.is-done::before,
.od-steps li.is-current::before { background: var(--primary); }

.od-step-dot {
    position: relative; z-index: 1;
    width: 32px; height: 32px; margin: 0 auto 10px;
    border-radius: 50%; display: grid; place-items: center;
    background: #fff; border: 2px solid var(--line);
    color: var(--muted); font-size: 11px;
}
.od-steps li.is-done .od-step-dot {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.od-steps li.is-current .od-step-dot {
    background: #fff; border-color: var(--primary); color: var(--primary);
    box-shadow: 0 0 0 4px rgba(6, 58, 97, .12);
}

.od-steps h4 { font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.od-steps span { font-size: 11px; color: var(--muted); line-height: 1.45; display: block; }
.od-steps li:not(.is-done):not(.is-current) h4 { color: var(--muted); font-weight: 500; }

.od-courier {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    border-top: 1px solid var(--line); padding-top: 16px;
}
.od-courier > div span   { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.od-courier > div strong { font-size: 13px; }
.od-courier .oh-btn { margin-left: auto; }

/* ---------------- main grid ---------------- */
.od-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px; align-items: start;
}

/* ---------------- items ---------------- */
.od-item {
    display: grid; grid-template-columns: 84px 1fr auto;
    gap: 18px; align-items: flex-start;
    padding: 18px 0; border-bottom: 1px solid var(--line);
}
.od-item:first-child { padding-top: 0; }
.od-item:last-child  { border-bottom: 0; padding-bottom: 0; }

.od-item-thumb {
    width: 84px; height: 84px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--line); background: var(--tile); display: block;
}
.od-item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.od-item-body h3 { font-size: 14px; line-height: 1.4; font-weight: 600; }
.od-item-body a:hover h3 { color: var(--primary); }

.od-item-meta { margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.od-item-meta span:not(:last-child)::after { content: "·"; margin: 0 8px; }

.od-item-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 9px; }
.od-item-links a { font-size: 12px; font-weight: 600; color: var(--primary); }
.od-item-links a:hover { text-decoration: underline; }

.od-item-numbers { text-align: right; white-space: nowrap; }
.od-unit  { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.od-item-numbers strong { font-size: 15px; }

/* ---------------- addresses ---------------- */
.od-address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.od-address-grid .od-panel { margin-bottom: 0; }

.od-address { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.75; }
.od-address strong { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 5px; }
.od-address-phone {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 11px; padding-top: 11px;
    border-top: 1px solid var(--line); width: 100%;
    font-size: 12.5px; color: var(--text); font-weight: 600;
}
.od-address-phone i { color: var(--primary); font-size: 11px; }

/* ---------------- summary ---------------- */
.od-aside .od-panel { position: sticky; top: 90px; }

.od-lines { font-size: 12.5px; }
.od-lines > div {
    display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
}
.od-lines dt { color: var(--muted); }
.od-lines dd { font-weight: 600; }
.od-lines dd.is-green { color: #15803d; }

.od-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 10px; padding-top: 14px; border-top: 1px dashed var(--line);
    font-size: 13px; color: var(--muted);
}
.od-total strong { font-size: 20px; color: var(--text); }

.od-tax-note { font-size: 11px; color: var(--muted); text-align: right; margin-top: 6px; }

.od-paid {
    display: flex; align-items: center; gap: 12px;
    margin-top: 16px; padding: 13px 15px;
    background: var(--tile); border-radius: 10px;
}
.od-paid i { color: var(--primary); font-size: 17px; }
.od-paid strong { display: block; font-size: 12.5px; }
.od-paid span   { font-size: 11px; color: var(--muted); }

.od-invoice-btn { width: 100%; margin-top: 16px; }

/* ---------------- support ---------------- */
.od-support h3 { font-size: 14px; margin-bottom: 13px; }
.od-support ul { display: flex; flex-direction: column; }
.od-support li + li { border-top: 1px solid var(--line); }
.od-support a {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0; font-size: 12.5px; color: var(--text);
}
.od-support a:hover { color: var(--primary); }
.od-support a i { color: var(--muted); font-size: 12px; width: 16px; text-align: center; }
.od-support a:hover i { color: var(--primary); }

.od-support-call { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.od-support-call p { font-size: 11.5px; color: var(--muted); margin-bottom: 9px; }
.od-support-call .oh-btn { width: 100%; }

/* ============================ ORDERS RESPONSIVE ============================ */
@media (max-width: 1100px) {
    .od-grid { grid-template-columns: 1fr; }
    .od-aside .od-panel { position: static; }
}

@media (max-width: 900px) {
    .od-stats { grid-template-columns: repeat(2, 1fr); }
    .oh-grid { grid-template-columns: 1fr; }

    /* the tracker turns into a vertical timeline - six columns never fit */
    .od-steps { grid-auto-flow: row; gap: 0; }
    .od-steps li { display: flex; gap: 14px; text-align: left; padding: 0 0 20px; }
    .od-steps li::before {
        top: 32px; left: 15px; width: 2px; height: 100%;
    }
    .od-steps li:last-child::before { display: none; }
    .od-steps li:first-child::before { display: block; }
    .od-step-dot { margin: 0; flex: 0 0 auto; }
    .od-courier .oh-btn { margin-left: 0; width: 100%; }
}

@media (max-width: 700px) {
    .od-address-grid { grid-template-columns: 1fr; }
    .od-header-side { align-items: flex-start; width: 100%; }
    .od-item { grid-template-columns: 64px 1fr; row-gap: 10px; }
    .od-item-thumb { width: 64px; height: 64px; }
    .od-item-numbers { grid-column: 2; text-align: left; }
}

@media (max-width: 560px) {
    .od-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .od-stat { padding: 13px; gap: 10px; }
    .od-stat-icon { width: 36px; height: 36px; font-size: 14px; }
    .od-stat strong { font-size: 16px; }

    .oh-search { max-width: none; }
    .oh-head, .oh-foot, .oh-items, .oh-side { padding-left: 15px; padding-right: 15px; }
    .oh-item { grid-template-columns: 52px 1fr; row-gap: 6px; }
    .oh-thumb { width: 52px; height: 52px; }
    .oh-item-price { grid-column: 2; text-align: left; }
    .oh-actions { width: 100%; }
    .oh-actions .oh-btn { flex: 1; }
    .oh-help-actions { width: 100%; }
    .oh-help-actions .oh-btn { flex: 1; }
    .od-panel { padding: 17px 15px; }
    .od-header h1 { font-size: 19px; }
}


/* ============================ MY ACCOUNT ============================ */
/* vertical only - the shorthand would wipe .container padding and push the
   page flush to the window edges */
.account-page { padding-top: 28px; padding-bottom: 56px; }

.account-layout {
    display: grid;
    grid-template-columns: 262px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* ---------------- left nav ---------------- */
.account-nav {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.an-user {
    display: flex; align-items: center; gap: 13px;
    padding: 20px 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
}

.an-avatar {
    width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .35);
    display: grid; place-items: center;
    font-size: 15px; font-weight: 700; letter-spacing: .5px;
}

.an-user-text { min-width: 0; }
.an-user-text strong { display: block; font-size: 14px; line-height: 1.35; }
.an-user-text span {
    display: block; font-size: 11.5px; opacity: .82;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.an-links { display: flex; flex-direction: column; padding: 10px 0; }

.an-links a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    font-size: 13px; font-weight: 500; color: var(--text);
    border-left: 3px solid transparent;
    transition: .18s;
}
.an-links a i { width: 17px; text-align: center; font-size: 13px; color: var(--muted); }
.an-links a span { flex: 1; }
.an-links a em {
    font-style: normal; font-size: 11px; font-weight: 700;
    background: var(--tile); color: var(--muted);
    border-radius: 999px; padding: 2px 8px;
}

.an-links a:hover { background: var(--tile); color: var(--primary); }
.an-links a:hover i { color: var(--primary); }

.an-links a.active {
    background: var(--tile);
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.an-links a.active i { color: var(--primary); }
.an-links a.active em { background: var(--primary); color: #fff; }

.an-foot { padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.an-signout {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 600; color: #b91c1c;
}
.an-signout:hover { text-decoration: underline; }
/* sign-out posts a form, so the control is a <button> - strip the native chrome */
button.an-signout { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; }

/* ---------------- panels ---------------- */
.ac-panel {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    padding: 22px 24px;
    margin-bottom: 18px;
}

.ac-panel-head { margin-bottom: 18px; }
.ac-panel-head h2 {
    font-size: 15px; display: inline-flex; align-items: center; gap: 9px;
}
.ac-panel-head h2 i { color: var(--primary); font-size: 14px; }
.ac-panel-head p { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* ---------------- identity card ---------------- */
.ac-identity {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}

.ac-avatar-wrap { display: flex; align-items: center; gap: 18px; }

.ac-avatar {
    width: 76px; height: 76px; flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; display: grid; place-items: center;
    font-size: 24px; font-weight: 700; letter-spacing: 1px;
}

.ac-identity h2 { font-size: 18px; }
.ac-identity p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.ac-avatar-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }

.ac-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: #dcfce7; color: #15803d;
    font-size: 11.5px; font-weight: 700;
    border-radius: 999px; padding: 7px 14px;
}

/* ---------------- forms ---------------- */
.ac-form .cf-row { margin-bottom: 16px; }
.ac-form .cf-field { margin-bottom: 16px; }
.ac-form .cf-row .cf-field { margin-bottom: 0; }
.ac-panel > .ac-form > *:last-child { margin-bottom: 0; }
.cf-row-3 { grid-template-columns: repeat(3, 1fr); }

.ac-hint {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--muted); margin-top: 6px;
}
.ac-hint.is-ok { color: #15803d; }
.ac-hint a { color: var(--primary); font-weight: 600; }
.ac-hint a:hover { text-decoration: underline; }

/* the eye button clears the hint line under password fields */
.ac-pw-form .auth-pw .auth-pw-toggle { bottom: auto; top: 30px; }

.ac-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    padding-top: 4px;
}

/* ---------------- toggles ---------------- */
.ac-toggle {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 0; cursor: pointer;
    border-bottom: 1px solid var(--line);
}
.ac-toggle:last-of-type { border-bottom: 0; padding-bottom: 0; }
.ac-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.ac-toggle-ui {
    width: 40px; height: 22px; flex: 0 0 auto; margin-top: 2px;
    border-radius: 999px; background: #d5dbe3;
    position: relative; transition: background .2s;
}
.ac-toggle-ui::after {
    content: ""; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.ac-toggle input:checked + .ac-toggle-ui { background: var(--primary); }
.ac-toggle input:checked + .ac-toggle-ui::after { transform: translateX(18px); }
.ac-toggle input:focus-visible + .ac-toggle-ui { box-shadow: 0 0 0 3px rgba(6, 58, 97, .2); }

.ac-toggle-text { font-size: 12px; color: var(--muted); line-height: 1.55; }
.ac-toggle-text strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 2px; }

/* ---------------- password page ---------------- */
.ac-split {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px;
    align-items: start;
}

.ac-strength { margin: -6px 0 16px; }
.ac-strength-bar {
    height: 5px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.ac-strength-bar span {
    display: block; height: 100%; width: 68%; border-radius: 999px;
    background: linear-gradient(90deg, #f59e0b, #16a34a);
}
.ac-strength-label { display: block; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.ac-strength-label strong { color: #15803d; }

.ac-rules {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--tile); border-radius: 10px; padding: 15px 17px; margin-bottom: 18px;
}
.ac-rules li {
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; color: var(--muted);
}
.ac-rules li i { font-size: 12px; color: #c7d2de; }
.ac-rules li.is-met { color: var(--text); }
.ac-rules li.is-met i { color: #16a34a; }

.ac-tips h3, .ac-sessions h3 {
    font-size: 14px; display: flex; align-items: center; gap: 9px; margin-bottom: 13px;
}
.ac-tips h3 i, .ac-sessions h3 i { color: var(--primary); font-size: 13px; }

.ac-tips ul { display: flex; flex-direction: column; gap: 10px; }
.ac-tips li {
    font-size: 12px; color: var(--muted); line-height: 1.6;
    padding-left: 16px; position: relative;
}
.ac-tips li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}

.ac-session {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--line);
}
.ac-session:last-child { border-bottom: 0; padding-bottom: 0; }
.ac-session > i { font-size: 16px; color: var(--muted); width: 20px; text-align: center; }
.ac-session div { flex: 1; min-width: 0; }
.ac-session strong { display: block; font-size: 12.5px; }
.ac-session span { font-size: 11px; color: var(--muted); }

.ac-session-tag {
    font-size: 10.5px; font-weight: 700; color: #15803d;
    background: #dcfce7; border-radius: 999px; padding: 4px 9px;
}
.ac-session-out {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 11.5px; font-weight: 600; color: #b91c1c;
}
.ac-session-out:hover { text-decoration: underline; }

/* ============================ ACCOUNT RESPONSIVE ============================ */
@media (max-width: 1100px) {
    .ac-split { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    /* the left rail becomes a scrolling tab strip above the content */
    .account-layout { grid-template-columns: 1fr; gap: 18px; }
    .account-nav { position: static; }

    .an-user { padding: 15px 16px; }

    .an-links {
        flex-direction: row;
        overflow-x: auto;
        padding: 0;
        scrollbar-width: none;
    }
    .an-links::-webkit-scrollbar { display: none; }

    .an-links a {
        border-left: 0;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
        padding: 14px 16px;
    }
    .an-links a span { flex: 0 0 auto; }
    .an-links a.active { border-left: 0; border-bottom-color: var(--primary); }

    .an-foot { padding: 12px 16px; }
}

@media (max-width: 640px) {
    .ac-panel { padding: 18px 16px; }
    .cf-row-3 { grid-template-columns: 1fr; gap: 16px; }
    .ac-identity { align-items: flex-start; }
    .ac-avatar-wrap { gap: 14px; }
    .ac-avatar { width: 60px; height: 60px; font-size: 19px; }
    .ac-actions .oh-btn { flex: 1; }
}


@media (max-width: 420px) {
    .oh-side { grid-template-columns: 1fr; gap: 12px; }
    .oh-actions .oh-btn { flex-basis: 100%; }
}

/* ============================================================
   Error pages (404 / 500 / 403)
   ============================================================ */
.error-page {
    background: linear-gradient(180deg, #f3f7fb 0%, #ffffff 60%);
    padding: 70px 0 90px;
    min-height: 55vh;
}
.error-page-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.error-code {
    display: inline-block; font-size: 90px; font-weight: 800; line-height: 1;
    color: var(--primary); opacity: .12; letter-spacing: -2px;
}
.error-page h1 { margin: 4px 0 12px; font-size: 26px; color: var(--primary); }
.error-page p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.error-actions .btn-primary-lg,
.error-actions .btn-outline-lg {
    background: var(--primary); color: #fff; border: none;
}
.error-actions .btn-primary-lg:hover { background: #0d5a94; color: #fff; }
.error-actions .btn-outline-lg { background: #fff; color: var(--primary); border: 1.5px solid var(--border); }
.error-actions .btn-outline-lg:hover { background: #f3f7fb; }
.error-search { max-width: 380px; margin: 0 auto 30px; }
.error-search form {
    display: flex; align-items: center; gap: 8px; background: #fff;
    border: 1px solid var(--border); border-radius: 999px; padding: 6px 6px 6px 18px;
}
.error-search i { color: var(--muted); font-size: 13px; }
.error-search input { flex: 1; border: none; outline: none; font-size: 13px; padding: 8px 0; }
.error-search button {
    background: var(--primary); color: #fff; border: none; border-radius: 999px;
    padding: 9px 20px; font-size: 12.5px; font-weight: 700;
}
.error-help p { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }

/* ---------------- Cart enquiry confirmation ---------------- */
.enquiry-done { text-align: center; padding: 26px 20px 10px; }
.enquiry-done .ed-icon { font-size: 46px; color: #1fa971; line-height: 1; margin-bottom: 14px; }
.enquiry-done h3 { font-size: 19px; margin-bottom: 8px; color: var(--primary-dark, #063a61); }
.enquiry-done p { font-size: 13px; color: var(--muted, #6b7c8d); line-height: 1.65; margin-bottom: 6px; }
.enquiry-done .ed-ref {
    display: inline-block; background: var(--tile, #f3f5f8); border-radius: 999px;
    padding: 5px 14px; font-size: 12.5px; margin-bottom: 12px;
}
.enquiry-done .ed-ref strong { color: var(--primary, #0d5a94); }
.enquiry-done .btn-whatsapp-enquiry { width: 100%; margin-top: 16px; }
.enquiry-done .ed-hint { font-size: 11.5px; margin-top: 8px; }
.enquiry-done .ed-continue {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
    font-size: 12.5px; font-weight: 600; color: var(--primary, #0d5a94);
}
.enquiry-done .ed-continue:hover { text-decoration: underline; }

/* the chosen colour/size, under the product name in the cart */
.cart-variant { font-size: 11.5px; color: var(--muted, #6b7c8d); margin-top: 3px; }

/* ============================================================
   Payment page
   ============================================================ */
.pay-note {
    display: flex; gap: 12px; align-items: flex-start;
    background: #eef6fc; border: 1px solid #cfe3f3; border-radius: 10px;
    padding: 14px 18px; margin-bottom: 26px; font-size: 12.5px; line-height: 1.7;
    color: var(--primary-dark, #063a61);
}
.pay-note i { color: var(--primary, #0d5a94); margin-top: 3px; font-size: 15px; }

.pay-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 26px; align-items: start; margin-bottom: 60px; }
@media (max-width: 900px) { .pay-layout { grid-template-columns: 1fr; } }

.pay-h2 { font-size: 17px; margin-bottom: 6px; color: var(--primary-dark, #063a61); }
.pay-sub { font-size: 12.5px; color: var(--muted, #6b7c8d); line-height: 1.7; margin-bottom: 18px; }

.pay-methods { display: flex; flex-direction: column; gap: 14px; }
.pay-methods .pay-h2 { margin-bottom: 8px; }

.pay-card { border: 1px solid var(--line, #e3e8ee); border-radius: 12px; padding: 18px; background: #fff; }
.pay-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pay-card-head h3 { font-size: 14px; margin: 0; color: var(--text, #1e2a37); }
.pay-card-head h3 i { color: var(--primary, #0d5a94); margin-right: 5px; }
.pay-badge {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    background: var(--primary, #0d5a94); color: #fff;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.pay-card-empty { display: flex; gap: 12px; align-items: flex-start; }
.pay-card-empty i { color: var(--muted, #6b7c8d); font-size: 18px; }
.pay-card-empty p { font-size: 12.5px; color: var(--muted, #6b7c8d); line-height: 1.7; }

.pay-qr { text-align: center; padding: 10px; background: var(--tile, #f3f5f8); border-radius: 10px; }
.pay-qr img { max-width: 220px; width: 100%; height: auto; border-radius: 8px; background: #fff; }

.pay-copy-row { display: flex; align-items: stretch; gap: 8px; }
.pay-copy-row code {
    flex: 1; min-width: 0; padding: 11px 14px; border-radius: 8px;
    background: var(--tile, #f3f5f8); border: 1px solid var(--line, #e3e8ee);
    font-size: 13.5px; font-weight: 600; color: var(--primary-dark, #063a61);
    overflow-wrap: anywhere;
}
.pay-copy {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 0 14px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--primary, #0d5a94); background: #fff;
    color: var(--primary, #0d5a94); font-size: 12px; font-weight: 700;
}
.pay-copy:hover { background: var(--primary, #0d5a94); color: #fff; }
.pay-copy.copied { background: #1fa971; border-color: #1fa971; color: #fff; }
.pay-copy.sm { padding: 2px 7px; margin-left: 6px; font-size: 10.5px; }

.pay-bank { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; margin: 0; }
.pay-bank dt { color: var(--muted, #6b7c8d); font-size: 12px; white-space: nowrap; }
.pay-bank dd { margin: 0; font-weight: 600; color: var(--text, #1e2a37); overflow-wrap: anywhere; }

.pay-address { font-size: 13px; line-height: 1.7; color: var(--text, #1e2a37); white-space: pre-line; }
.pay-hint { font-size: 11.5px; color: var(--muted, #6b7c8d); margin-top: 10px; line-height: 1.6; }

.pay-form-wrap { border: 1px solid var(--line, #e3e8ee); border-radius: 12px; padding: 24px; background: #fff; }

/* how they paid */
.pay-method-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pmp {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 15px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--line, #e3e8ee); background: #fff;
    font-size: 12.5px; font-weight: 600; color: var(--text, #1e2a37);
}
.pmp:hover { border-color: var(--primary, #0d5a94); }
.pmp.selected { border-color: var(--primary, #0d5a94); background: var(--primary, #0d5a94); color: #fff; }

/* screenshot */
.pay-shot { position: relative; margin-top: 4px; }
.pay-shot.busy { opacity: .6; pointer-events: none; }
.pay-shot-drop {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 22px 16px; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--line, #e3e8ee); border-radius: 10px; background: var(--tile, #f3f5f8);
}
.pay-shot-drop:hover, .pay-shot.dragover .pay-shot-drop { border-color: var(--primary, #0d5a94); background: #eef6fc; }
.pay-shot-drop i { font-size: 22px; color: var(--muted, #6b7c8d); }
.pay-shot-drop strong { font-size: 12.5px; color: var(--text, #1e2a37); }
.pay-shot-drop span { font-size: 11px; color: var(--muted, #6b7c8d); }

.pay-shot-file { display: none; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line, #e3e8ee); border-radius: 10px; }
.pay-shot.has-file .pay-shot-drop { display: none; }
.pay-shot.has-file .pay-shot-file { display: flex; }
.pay-shot-file img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line, #e3e8ee); }
.pay-shot-file strong { display: block; font-size: 12.5px; overflow-wrap: anywhere; }
.pay-shot-clear {
    margin-top: 6px; padding: 4px 10px; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--line, #e3e8ee); background: #fff;
    font-size: 11px; font-weight: 600; color: var(--muted, #6b7c8d);
}
.pay-shot-clear:hover { border-color: #f3c7c3; color: #e0483e; background: #fdecea; }

/* secondary action on the enquiry confirmation */
.enquiry-done .ed-pay {
    display: block; margin-top: 10px; padding: 11px 16px; border-radius: 9px;
    border: 1px solid var(--line, #e3e8ee); background: #fff;
    font-size: 12.5px; font-weight: 600; color: var(--primary, #0d5a94);
}
.enquiry-done .ed-pay:hover { border-color: var(--primary, #0d5a94); background: var(--tile, #f3f5f8); }

/* payment method tabs */
.pay-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line, #e3e8ee); margin-bottom: 18px; }
.pay-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 16px; cursor: pointer; white-space: nowrap;
    border: none; border-bottom: 2px solid transparent; background: none;
    font-size: 12.5px; font-weight: 600; color: var(--muted, #6b7c8d);
}
.pay-tab:hover { color: var(--primary, #0d5a94); }
.pay-tab.active { color: var(--primary, #0d5a94); border-bottom-color: var(--primary, #0d5a94); }

.pay-panel { display: none; }
.pay-panel.active { display: block; }
.pay-label {
    display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 8px;
    text-transform: uppercase; letter-spacing: .4px; color: var(--muted, #6b7c8d);
}

@media (max-width: 420px) {
    /* four tabs will not fit a narrow phone - let them scroll sideways */
    .pay-tabs { overflow-x: auto; }
    .pay-tab { padding: 10px 12px; }
}

/* product with no photo on file - reads as intentional, not broken */
.pg-card .thumb-link .no-image {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; width: 100%; height: 100%;
    background: var(--tile, #f3f5f8); color: var(--muted, #6b7c8d);
}
.pg-card .thumb-link .no-image i { font-size: 26px; opacity: .5; }
.pg-card .thumb-link .no-image span { font-size: 11px; }

/* ============================ CART: ACCOUNT PROMPTS ============================
   A signed-out enquiry is filed under nobody, and the customer only finds out
   later when My Orders is empty. These two say so before that happens. */
.cart-signin {
    display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
    margin: 0 0 16px; padding: 13px 15px;
    border: 1px solid var(--line); border-radius: 11px; background: var(--tile);
    font-size: 12.5px; line-height: 1.55;
}
.cart-signin > i { color: var(--primary); font-size: 15px; flex-shrink: 0; }
.cart-signin > div { flex: 1; min-width: 160px; }
.cart-signin strong { display: block; font-size: 13px; }
.cart-signin span   { color: var(--muted); }

.cart-signin.is-in { color: var(--muted); }
.cart-signin.is-in i { color: #15803d; }
.cart-signin.is-in strong { display: inline; color: var(--text); }
.cart-signin.is-in a { color: var(--primary); font-weight: 600; }
.cart-signin.is-in a:hover { text-decoration: underline; }

.cart-signin-btn {
    flex-shrink: 0; padding: 9px 17px; border-radius: 8px;
    border: 1px solid var(--primary); background: var(--primary); color: #fff;
    font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s;
}
.cart-signin-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* the one-time "you have an account" choice, injected above the form */
.cart-account-prompt {
    margin-bottom: 16px; padding: 14px 16px;
    border: 1px solid #f3e0b5; border-radius: 11px; background: #fff8e8;
}
.cart-account-prompt p {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 12.5px; line-height: 1.6; color: #8a5d00; margin-bottom: 12px;
}
.cart-account-prompt p i { margin-top: 2px; flex-shrink: 0; }

.cap-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.cap-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    flex: 1 1 auto; padding: 9px 15px; border-radius: 8px;
    border: 1px solid var(--line); background: #fff;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--text);
    cursor: pointer; transition: .2s;
}
.cap-btn:hover { border-color: var(--primary); color: var(--primary); }
.cap-btn.is-primary {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.cap-btn.is-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }