/* ===== SHIRLEY PLUS — MAIN STYLES ===== */
/* Navbar, footer styles coming here next */

/* Navbar */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-white);
    border-bottom: 2.5px solid var(--color-secondary);
    padding: 15px 0;
    border-radius: var(--radius-full);
}

.nav-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1.75rem;
}

.nav-logo img {
    height: 45px;
    width: auto;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7ede9;
  color: var(--color-primary, #8B4A3F);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s;
}
.nav-icon-btn:hover {
  background: var(--color-primary, #8B4A3F);
  color: #fff;
}

/* Mobile nav lives in one block near .hamburger below — see "MOBILE NAV". */

.nav-link {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

.nav-link:hover {
    color: var(--color-primary);
}

.nav-cart-btn {
    position: relative;
}

.nav-cart-count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--color-primary-dark);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.nav-cart-count:empty,
.nav-cart-count[data-cart-count="0"] {
    display: none;
}
.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 10px 22px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary:hover {
    background: var(--color-accent);
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: var(--color-text);
    display: block;
    transition: var(--transition);
}

/* The Shop Now CTA that appears inside the open mobile panel. Hidden on
   desktop, where the same action lives in .nav-actions instead. */
.nav-mobile-cta {
    display: none;
}

/* ===== MOBILE NAV =====
   Three files have to agree for this to work: base.html renders .hamburger and
   .nav-links, main.js toggles .nav-open on .nav-links, and the rules below give
   .nav-open a visual meaning. Before Aug 2026 the CSS half was missing entirely
   — the button was display:none at every width and .nav-open matched nothing —
   so mobile navigation was unreachable on every page. If you rename the class,
   rename it in all three places. */
@media (max-width: 900px) {

    /* Reclaim horizontal room: at 375px the old 1.75rem padding + 1.5rem gaps
       + the Shop Now pill pushed the bar to ~460px against a 375px viewport. */
    .nav-container {
        gap: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .nav-logo img {
        height: 36px;
    }

    /* Shop Now moves into the panel (see .nav-mobile-cta) so the bar keeps only
       the logo, the account/cart icons, and the toggle. */
    .nav-actions .btn-primary {
        display: none;
    }

    .nav-actions {
        justify-content: flex-end;
        gap: 0.5rem;
    }

    /* 40px was under the 44px minimum touch target. Raised on mobile only, so
       the desktop bar keeps its existing proportions. */
    .nav-icon-btn {
        width: 44px;
        height: 44px;
    }

    .hamburger {
        display: flex;
        width: 44px;
        height: 44px;
    }

    /* .navbar is position:sticky, which is a positioned ancestor, so top:100%
       resolves to "directly beneath the bar". Going absolute also pulls the list
       out of .nav-container's grid flow — which matters, because that grid
       declares three columns and base.html gives it four children. While the
       hamburger was display:none the fourth child didn't exist for layout
       purposes; making it visible without this would wrap it onto a second row. */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-white);
        border-bottom: 2.5px solid var(--color-secondary);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);

        /* Closed state. visibility (not display) keeps the panel animatable and
           keeps it out of the tab order while closed. */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    }

    .nav-links.nav-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links li {
        border-bottom: 1px solid var(--color-secondary);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links .nav-link {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-xs);
        font-size: var(--font-size-base);
    }

    .nav-mobile-cta {
        display: block;
        margin-top: var(--spacing-sm);
    }

    .nav-mobile-cta .btn-primary {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 22px;
    }

    /* Toggle morphs into an X while the panel is open. */
    .hamburger.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger.is-active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.is-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* Respect users who have asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .nav-links,
    .hamburger span {
        transition: none;
    }
}

/* Footer */
.footer {
    background: var(--color-white);
    border-top: 1px solid var(--color-secondary);
    padding: var(--spacing-xl) 0 var(--spacing-md);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.footer-logo {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--spacing-sm);
}

.footer-brand p {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-links a {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-bottom {
    text-align: center;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-secondary);
    font-size: 13px;
    color: var(--color-accent);
}

/* ===== MOBILE: FOOTER LINKS =====
   Eight links in a wrapping flex row broke into ragged lines of two and three
   with no vertical alignment between them. A two-track grid gives a stable
   pair of columns and a predictable reading order down the page.

   The extra vertical padding is the touch-target fix from the P2 pass: these
   were 14px text with no padding at ~22px tall, eight of them adjacent. */
@media (max-width: 768px) {
    .footer-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sm) var(--spacing-md);
    }

    .footer-links a {
        display: flex;
        align-items: center;
        min-height: 40px;
    }
}

/* =====enquiry message popup===== */
.alert-message {
    max-width: 800px;
    margin: var(--spacing-md) auto 0;
    padding: var(--spacing-md);
    background: var(--color-white);
    color: var(--color-primary-dark);
    border-radius: var(--radius-md);
    text-align: center;
    font-weight: 500;
}

/* ===== HERO SECTION ===== */
.hero {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg);

}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.hero-text {
    flex: 1;
    max-width: 550px;
}

.hero-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

.hero-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-accent);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.btn-outline {
    background: transparent;
    color: var(--color-accent);
    padding: 10px 22px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border: 1.5px solid var(--color-accent);
    cursor: pointer;
    transition: var(--transition);
}

.btn-outline:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

.hero-image {
    flex: 1;
    max-width: 700px;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: cover;
}

/* home.html wraps these images in <picture> to serve WebP with a JPEG
   fallback. <picture> is display:inline by default, which would break the
   two rules that depend on it: .hero-image img sizes to width:100% of its
   parent, and .product-image img uses height:100% inside a fixed 200px box —
   a percentage height against an inline box does not resolve. Making the
   wrapper a block that fills its container keeps <picture> purely structural,
   so both images lay out exactly as they did as bare <img> tags. */
.hero-image picture,
.product-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* ===== MOBILE: HERO GUTTER =====
   .hero-title renders at --font-size-xxl (48px, unclamped). The word
   "Empowering" is unbreakable, so .hero-text cannot get narrower than ~262px
   of min-content. Against 320px minus .hero-container's 2x32px gutter that
   left 256px, and the hero pushed the document 6px wide.

   Trimming the gutter rather than the type keeps the hero's visual weight
   intact at 360-430px — the sizes the device recording covers — and buys the
   36px of headroom that 320px needs. Scoped to 480px so tablet spacing at
   768px is untouched. */
@media (max-width: 480px) {
    .hero-container {
        padding: 0 var(--spacing-md);
    }
}

/* ===== MOBILE: HERO STACK =====
   .hero-container was a flex row at every width. .hero-image is flex:1 around
   an <img width:100%>, whose min-content contribution is 0, while .hero-text
   has a real floor from its 48px title — so the text column won all the space
   and the image collapsed to width 0. The hero *looked* like a tidy text-only
   block on a phone; the product photo simply never rendered.

   Switching to a column makes the image a full-width row of its own instead of
   a starved sibling. max-width has to be cleared on both children: 550px and
   700px were sized for a side-by-side desktop row and would otherwise cap the
   stacked blocks. flex is reset to 0 0 auto so neither child stretches along
   the new vertical main axis.

   DOM order is already text-then-image, so the column needs no reordering. */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-lg);
    }

    .hero-text,
    .hero-image {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
    }

    /* Side-by-side pill buttons leave each one too narrow to read at 320px,
       and a full-width primary action is the mobile convention. */
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-outline {
        width: 100%;
        text-align: center;
        padding: 14px 22px;
    }
}

/* ===== VALUES SECTION ===== */
.values {
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--color-bg);
}

.values-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.values-wrapper .section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.values-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
}

.value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.value-icon {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    background: var(--color-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--color-accent);
    transition: var(--transition);
}

.value-item:hover .value-icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-4px);

}

.value-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
    text-align: center;
    white-space: nowrap;
}

/* ===== MOBILE: VALUES ROW =====
   home.html carries an inline <style> block that re-declares .values-grid and
   .value-item with !important. That block sits in {% block extra_css %}, which
   base.html renders *after* this file, so a plain override here loses on source
   order even with !important. These rules are scoped one level deeper
   (.values .values-grid = 0,2,0 vs the inline .values-grid = 0,1,0) so they win
   on specificity regardless of order.

   Why this matters: five .value-item children with flex-wrap:nowrap and
   white-space:nowrap labels needed ~556px of min-content against 222px of
   available width, which made the whole document 636px wide at a 382px
   viewport — this was the single source of the home page's horizontal scroll.

   flex: 1 1 120px lets the row choose its own column count instead of pinning
   one: ~5 across at 768px, 3 at 480px, 2 at 382px, all without a fixed track. */
@media (max-width: 768px) {
    .values {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .values .values-wrapper {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    /* Grid rather than wrapped flex: wrapping gave 2 + 2 + 1 but left the
       fifth item hanging at the start of its row. A two-track grid lets the
       last child span both tracks and centre itself, which is the only way to
       get a deliberate-looking 2/2/1 out of five items.

       display needs !important to beat the inline block's `display: flex
       !important`; the deeper .values selector carries the specificity that
       decides it. The inline flex-direction / justify-content / flex-wrap
       declarations stop applying once this is a grid. */
    .values .values-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-lg) var(--spacing-md);
        justify-items: center;
        /* The flex rule (and the inline block) set align-items:center, which
           carries into grid and centres each item in its row. Where one label
           wraps to two lines and its neighbour does not, that pushes the two
           icons out of line by ~11px. Aligning to the row start keeps every
           icon on the same baseline. */
        align-items: start !important;
    }

    .values .value-item {
        width: 100%;
    }

    .values .value-item:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
    }

    /* The label is the actual overflow culprit — style.css pins it nowrap above
       and the inline block never resets it. */
    .values .value-label {
        white-space: normal;
    }
}

/* ===== STATS SECTION ===== */

.stats {
    background: var(--color-white);
    padding: var(--spacing-xl) var(--spacing-lg);
    margin: var(--spacing-xl) auto;
    max-width: 1200px;
    border-radius: var(--radius-lg);
}

.stats-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.stat-item {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    flex: 1;
    min-width: 160px;
    box-shadow: var(--shadow-md);

}

.stat-icon {
    font-size: 24px;
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--spacing-md);
    text-align: center;
}
.stat-top i {
  color: var(--color-primary, #8B4A3F);
  font-size: 1.2rem;
}

.stat-number {
    font-size: 40px;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: var(--spacing-xs);
    line-height: 1;
    text-align: center;
}

.stat-label {
    font-size: 11px;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin-top: var(--spacing-sm);
    text-align: center;
}

/* ===== MOBILE: STATS 2x2 =====
   .stats-container is a wrapping flex row and .stat-item carries
   min-width:160px, so two items needed 336px against the 318px available at
   382px and the row collapsed to one card per row — four full-width slabs.
   It only reached 2x2 at 430px and up.

   An explicit two-track grid holds 2x2 from 320px, but the min-width floor has
   to go with it or the tracks cannot shrink. .stat-number also needs to come
   down: "20,000+" at 40px is ~150px of unbreakable glyphs against a 120px
   track at 320px, which would push the page wide. */
@media (max-width: 768px) {
    .stats-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-md);
        /* Inherited from the flex rule. Left as center, a card whose label
           wraps to two lines sits taller than its neighbour and the pair
           float at different heights inside the row. Stretch gives the 2x2 a
           flat top and bottom edge. */
        align-items: stretch;
    }

    .stat-item {
        min-width: 0;
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .stat-number {
        font-size: clamp(24px, 7vw, 34px);
    }
}

/* ===== SECTION HEADER (reusable) ===== */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.section-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-accent);

}

/* =====AWARDS SECTION =====*/
.awards {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg);
    margin-top: var(--spacing-xl);
    border-top: 1px solid var(--color-secondary);
    border-radius: var(--radius-lg);
}

.awards-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.award-card {
    background: var(--color-white);

    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    text-align: center;
    transition: var(--transition);

}

.award-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-radius: var(--radius-md);
    border: 1px;
}

.award-icon {
    width: 56px;
    height: 56px;
    background: var(--color-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    font-size: 22px;
    color: var(--color-primary);
}

.award-name {
    text-align: center;
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
    line-height: 1.4;
}

.award-source {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ===== MOBILE: AWARDS GRID =====
   repeat(3, 1fr) applied at every width. Because `1fr` cannot shrink below its
   track's min-content, six award names in three columns held the grid at 291px
   inside a 254px box at 382px, and pushed the document 4px wide at 320px —
   the last remaining overflow after the values row was fixed.

   Names here are long ("Maharashtra Udyog Ratna Award"), so three columns were
   wrapping them to four lines apiece. Two columns below 768px keeps the section
   compact on tablets and large phones; one column below 400px gives the longest
   names a full line to sit on.

   Must stay below .awards-grid above — same 0,1,0 specificity, so source order
   is what makes these win. */
@media (max-width: 768px) {
    .awards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* The 1-column tier below 400px that this replaced was only needed because
       .award-name renders at --font-size-base (16px), where "Maharashtra" is
       ~105px of unbreakable word against a ~120px track at 320px. Bringing the
       name and icon down to the sizes the mobile design calls for keeps all
       six awards in two columns at every phone width instead. */
    .award-name {
        font-size: 13px;
    }

    .award-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
        margin-bottom: var(--spacing-sm);
    }

    .award-source {
        font-size: 10px;
    }
}

/* ===== PRODUCTS PREVIEW ===== */

.products-preview {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-xl);
    border-top: 1px solid var(--color-secondary);
}

.products-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);

}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.product-card {
    background: var(--color-white);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
}

.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.product-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--color-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: var(--transition);
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-info {
    padding: var(--spacing-lg);
}

.product-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.product-desc {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.product-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    transition: var(--transition);
}

.product-link:hover {
    color: var(--color-accent);
    letter-spacing: 0.03em;
}

/* ===== MOBILE: HOME PRODUCTS GRID =====
   The other repeat(3, 1fr) with no breakpoint. Three tracks in a phone-width
   container produced 74px cards at 382px and 53px at 320px, each still trying
   to carry a 200px-tall .product-image plus a name, a description and a link —
   the cards were narrower than they were tall by a factor of three.

   Two columns rather than one below 768px: a full-bleed card per row is the
   pattern for a cart line item, not for browsing, and every Indian storefront
   a customer arrives from (Myntra, Amazon, Flipkart) puts two cards per row on
   a phone. Two columns also keeps more of the range above the fold.

   One column only below 360px, where two tracks leave ~120px per card and the
   Add to Cart control alone needs ~100px. That floor is measured, not guessed.

   Must stay below .products-grid above — same specificity, source order wins. */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* These three descriptions are hardcoded literals in home.html, not model
       fields, so |truncatewords cannot reach them. Clamping is the equivalent
       and is already the pattern this codebase uses — products.css does the
       same to .products-card-desc on the product list card. Without it a
       ~13-word description runs to nine lines in a 148px card and the row
       inherits that height. Mobile only; at desktop card widths the text
       already fits inside three lines, so the clamp never engages. */
    .product-desc {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Three cards in a two-track grid leave the third orphaned in its own row
       at half width. Spanning it and turning it on its side uses the space
       instead of padding it: 120px of image on the left, text on the right.
       .product-image is a fixed 200px-tall block by default, so it needs its
       height released and its rounding moved to the left corners to sit
       flush against the card edge. */
    .products-grid .product-card:last-child {
        grid-column: 1 / -1;
        display: flex;
        align-items: stretch;
    }

    .products-grid .product-card:last-child .product-image {
        flex: 0 0 120px;
        width: 120px;
        height: auto;
        border-radius: var(--radius-md) 0 0 var(--radius-md);
    }

    .products-grid .product-card:last-child .product-image img {
        border-radius: var(--radius-md) 0 0 var(--radius-md);
    }

    .products-grid .product-card:last-child .product-info {
        flex: 1;
        min-width: 0;
        padding: var(--spacing-md);
    }
}




/* ===== PAGE HERO ===== */
.page-hero {
    background: var(--color-white);
    padding: var(--spacing-xl) 0;
    text-align: center;
}

.page-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.page-hero-title {
    font-size: var(--font-size-xxl);
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.page-hero-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-accent);
    max-width: 625px;
    margin: 0 auto;
    line-height: 1.5;
}




/* ===== PRODUCTS PAGE ===== */

.products-page {
    padding: var(--spacing-xl) 0;
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
}


.products-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ===== CATEGORY TABS ===== */


.category-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    border-bottom: 2px solid var(--color-secondary);
    padding: var(--spacing-md);
    flex-wrap: wrap;
    background: var(--color-secondary);
    border-radius: var(--radius-full);
}

.tab-btn {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-text);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.tab-btn:hover {
    background: #dcada7;
    color: var(--color-accent);
}

.tab-btn.active {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

/* ===== CATEGORY SECTION ===== */
.category-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-secondary);
}

/* ===== PRODUCT CARDS FULL ===== */
.products-grid-full {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.product-card-full {
    background: var(--color-white);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.product-card-full:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.product-tag {
    position: absolute;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
    background: var(--color-white);
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-secondary);
    z-index: 1;
}

.product-img-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: var(--color-secondary);
}

.product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.product-card-full:hover .product-img-wrap img {
    transform: scale(1.05);
}

.product-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--color-primary);
}

.product-card-info {
    padding: var(--spacing-lg);
}

.product-card-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.product-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-price {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-md);
}

.product-card-btns {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}



/* ===== BREADCRUMB ===== */
.breadcrumb-bar {
    background: var(--color-bg);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-secondary);
}

.breadcrumb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
}

.breadcrumb-container a {
    color: var(--color-accent);
}

.breadcrumb-container a:hover {
    color: var(--color-primary);
}

.breadcrumb-arrow {
    color: var(--color-primary);
}

.breadcrumb-active {
    color: var(--color-primary-dark);
    font-weight: 500;
}

/* ===== DETAIL HERO ===== */
.detail-hero {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
}

.detail-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

/* Left Image Column */
.detail-image-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.detail-main-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-secondary);
    height: clamp(350px, 45vw, 500px);
}

.detail-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    color: var(--color-primary);
}

.detail-badge {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--color-white);
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    z-index: 2;
}

/* Thumbnails */
.detail-thumbnails {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

.thumb {
    width: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--color-secondary);
    cursor: pointer;
    transition: var(--transition);
    border-width: 2px;
}

.thumb.active {
    border-color: var(--color-primary-dark);
}

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

.thumb-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.thumb:hover {
    border-color: rgba(130, 82, 76, 0.4);
    transition: 0.3ms;
}

/* Right Info Column */
.detail-info-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.detail-product-name {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.detail-product-desc {
    font-size: var(--font-size-base);
    color: var(--color-accent);
    line-height: 1.7;
}

/* Bulk Card */
.detail-bulk-card {
    background: #f4e0dd;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid rgba(196, 139, 132, 0.15);
    box-shadow: none;

}

.bulk-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-xs);
}

.bulk-desc {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
}

.bulk-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.bulk-feature {
    font-size: 12px;
    color: var(--color-accent);
    background: var(--color-white);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 1px 4px rgba(130, 82, 76, 0.12);
}

.bulk-feature i {
    color: var(--color-primary-dark);
}

/* Price */
.detail-price {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-accent);

}

/* Enquire Button */
.btn-enquire {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #b98079, #e2b3ad);
    color: var(--color-white);
    padding: 16px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(130, 82, 76, 0.15);
    transition: var(--transition);
}

.btn-enquire:hover {
    background: linear-gradient(135deg, #a46961, #e19990);
    box-shadow: var(--shadow-md);
}

.btn-enquire.pulse-ring {
    box-shadow: 0 0 0 3px rgba(196, 139, 132, 0.25);
}

/* Product CTA pair (Add to Cart + Buy Now).
   .detail-cta-row had no rule at all, so its children stacked: an unstyled
   default button above .btn-enquire's full-width bar. Everything here is scoped
   to the row, because .btn-enquire is a site-wide class — it also styles the
   logout confirm, the profile buttons and this page's own enquiry-form submit. */
.detail-cta-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: stretch;
}

/* Shared geometry so the two halves read as one deliberate control pair.
   The transparent border keeps both boxes exactly the same height — without it
   the outlined button would sit 3px taller than the filled one. */
.detail-cta-row .btn-add-cart,
.detail-cta-row .btn-enquire {
    flex: 1 1 0;
    width: auto;               /* overrides .btn-enquire's width: 100% */
    padding: 16px;             /* matches .btn-enquire's existing padding */
    font-size: var(--font-size-base);
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: 1.5px solid transparent;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

/* Secondary — the lower-commitment "keep browsing" action. */
.detail-cta-row .btn-add-cart {
    background: transparent;
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: none;
}

.detail-cta-row .btn-add-cart:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* Buy Now keeps the filled rose gradient it already inherits from .btn-enquire —
   it stays the primary action, so it needs no repaint here. */

/* products.js sets .disabled on both buttons during the fetch; until now that
   state was visually identical to the idle one. */
.detail-cta-row .btn-add-cart:disabled,
.detail-cta-row .btn-enquire:disabled {
    opacity: 0.65;
    cursor: default;
}

/* The stacking rule for this row used to live here in a `max-width: 480px`
   block of its own. It now sits in the product-detail mobile block near the
   foot of this file, which covers the whole phone band rather than just the
   narrowest phones — 480 was a strict subset of it, so keeping both would have
   been two media queries saying the same thing. */

/* Trust Badges */
.trust-badges {
    display: flex;
    gap: var(--spacing-lg);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.trust-item i {
    font-size: 20px;
    color: var(--color-primary);
}

.trust-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

.trust-sub {
    display: block;
    font-size: 11px;
    color: var(--color-accent);
}

/* ===== TABS SECTION ===== */
.detail-tabs-section {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-secondary);
}

.detail-tabs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.detail-tab-btns {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-secondary);
    margin-bottom: var(--spacing-xl);
}

.detail-tab-btn {
    background: transparent;
    border: none;
    padding: 12px var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-accent);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--transition);
}

.detail-tab-btn.active {
    color: var(--color-primary-dark);
    border-bottom-color: var(--color-primary-dark);
}

.detail-tab-btn:hover {
    color: var(--color-text);
}

/* Tab Panels */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Specs */
.specs-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.specs-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    margin-bottom: var(--spacing-lg);
}

.specs-list {
    width: 100%;
    border-collapse: collapse;
}

.specs-list tr {
    border-bottom: 1px solid var(--color-secondary);
}

.spec-key {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    width: 40%;
}

.spec-val {
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary-dark);
}

.specs-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-secondary);
    height: 250px;
}

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

.specs-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    color: var(--color-primary);
    font-size: 40px;
}

/* Impact Tab */
.impact-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.impact-content p {
    color: var(--color-accent);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
}

.impact-stats {
    display: flex;
    gap: var(--spacing-xl);
}

.impact-stat {
    text-align: center;
}

.impact-num {
    display: block;
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-primary);
}

.impact-label {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Usage Tab */
.usage-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

.usage-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.usage-step {
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
}

.step-num {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-secondary);
    min-width: 50px;
}

.usage-step h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

.usage-step p {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
}

/* ===== FEATURES STRIP ===== */
.detail-features {
    padding: var(--spacing-xl) 0;
    background: var(--color-bg);
    text-align: center;
}

.detail-features-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.features-heading {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.features-underline {
    width: 60px;
    height: 2px;
    background: var(--color-accent);
    margin: 0 auto var(--spacing-xl);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    transition: transform 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-8px);
}

.feature-icon {
    width: 64px;
    height: 64px;
    background: #F6B7B0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
    transition: transform 0.3s ease;
}

.feature-item:hover .feature-icon {
    transform: scale(1.1);
}

.feature-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

.feature-desc {
    font-size: 12px;
    color: var(--color-accent);
    line-height: 1.5;
    text-align: center;
}

/* ===== RELATED PRODUCTS ===== */
.related-products {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-secondary);
}

.related-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}

.related-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

.related-view-all {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    font-weight: 500;
    text-decoration: underline;
}

.related-view-all:hover {
    color: var(--color-primary);
}

.related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.related-card {
    display: flex;
    background: var(--color-white);
    border: 1px solid rgba(196, 139, 132, 0.15);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.related-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.related-img {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-secondary);
}

.related-img img {
    width: 100%;
    height: 90%;
    object-fit: cover;
    object-position: center;
}

.related-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--color-primary);
}

.related-info {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.related-category {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.related-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
}

.related-desc {
    font-size: 12px;
    color: var(--color-accent);
    line-height: 1.5;
    flex: 1;
}

.related-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary-dark);
}

/* ===== ENQUIRY FORM ===== */
.enquiry-section {
    padding: var(--spacing-xl) 0;
    background: var(--color-secondary);
}

.enquiry-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.enquiry-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.enquiry-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.enquiry-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-accent);
}

.enquiry-form {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text);
}

.form-group input,
.form-group textarea {
    padding: 12px var(--spacing-md);
    border: 1.5px solid var(--color-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    font-family: var(--font-main);
    background: var(--color-bg);
    transition: var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-primary);
    background: var(--color-white);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ===== NEWSLETTER ===== */
.newsletter {
    padding: var(--spacing-xl) 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-secondary);
    text-align: center;
}

.newsletter-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.newsletter-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.newsletter-sub {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    margin-bottom: var(--spacing-lg);
}

.newsletter-form {
    display: flex;
    gap: var(--spacing-sm);
    max-width: 400px;
    margin: 0 auto;
}

.newsletter-form input {
    flex: 1;
    padding: 12px var(--spacing-md);
    border: 1.5px solid var(--color-secondary);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    outline: none;
    font-family: var(--font-main);
    background: var(--color-bg);
}

.newsletter-form input:focus {
    border-color: var(--color-primary);
}


/* Enquiry form with error red  */

.field-error {
    color: #C0392B;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.form-group input.errorlist,
.form-group input:invalid:not(:placeholder-shown) {
    border-color: #c23626;
}

.phone-input-group {
    display: flex;
    gap: var(--spacing-sm);
}

.phone-input-group select {
    flex: 0 0 110px;
}

.phone-input-group input {
    flex: 1;
}

/* ===== MOBILE: PRODUCT DETAIL =====
   product_detail.html loads no stylesheet of its own, so every rule governing
   it lives in this file and, until now, none of it was responsive. Four grids
   were hard-pinned to two columns at every width:

     .detail-hero-container   image + buy panel
     .specs-layout            specification tables
     .related-grid            related products
     .form-row                bulk-enquiry fields

   `1fr` is shorthand for `minmax(auto, 1fr)`, so a track can never shrink below
   its own min-content. On the hero that meant the info column's longest
   unbreakable run claimed 248px of a 382px viewport and left the image column
   40px — the product photo was effectively invisible on a phone, on the one
   page where seeing the product decides the sale.

   This block must stay *below* all four definitions above: the overrides carry
   the same 0,1,0 specificity, so they win on source order alone. Moving it
   earlier in the file silently disables it. */
@media (max-width: 768px) {
    .detail-hero-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .specs-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    /* Three tabs at ~118px each overran a 382px viewport by 24px. Wrapping
       keeps every label reachable; a scroll strip would hide the last one. */
    .detail-tab-btns {
        flex-wrap: wrap;
    }
}

.form-group select {
    padding: 12px var(--spacing-md);
    border: 1.5px solid var(--color-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    font-family: var(--font-main);
    outline: none;
}

.form-group select:focus {
    border-color: var(--color-primary);
}

/* ===== MOBILE: PRODUCT DETAIL, MOCKUP PASS =====
   The block higher up this file un-pinned the four two-column grids so the page
   would fit a phone at all. This one is the second half of that job: it makes
   each section match the approved mobile mockup instead of merely fitting.

   WHY 767.98 AND NOT 768
   `max-width: 768px` is inclusive, so writing 768 here would restyle the 768px
   checkpoint — and 768 is one of the three widths this pass has to leave
   byte-identical. Stopping at 767.98 keeps 768 on its old rendering. The older
   block above already claims 768 itself; that is pre-existing and untouched.

   WHY THIS BLOCK IS DOWN HERE
   Every rule below overrides a base rule with identical specificity, so it wins
   on source order alone — it has to stay beneath the last of them
   (`.form-group select`, just above). Moving it up the file disables it
   silently, with no error and no visible change until someone opens a phone.

   WHY THE FORM RULES ARE SCOPED TO .enquiry-form
   `.form-group` is shared with signup.html and profile.html. Scoping keeps this
   pass off those pages, and it also outranks the second `.form-group input`
   block further down (the auth one, ~line 2210) which would otherwise win on
   source order. */
@media (max-width: 767.98px) {

    /* --- 1. IMAGE GALLERY --- */

    /* clamp(350px, 45vw, 500px) never resolves below its 350px floor on a
       phone, so the image ate half the first screen and pushed the product
       name under the fold. */
    .detail-main-image {
        height: 220px;
    }

    /* Four equal fr tracks stretched each thumb to ~74px at 382px, which read
       as a second row of hero images rather than a picker. Capping the track
       holds them at the mockup's 52px and lets the row end short. */
    .detail-thumbnails {
        grid-template-columns: repeat(4, minmax(0, 52px));
    }

    /* --- 2. PRODUCT INFO --- */

    /* var(--font-size-xl) is 32px, which is the page's h1 size. Three separate
       headings were sharing it, so "Institutional Bulk Rates" and "Enquire
       About This Product" both wrapped to two lines and competed with the
       product name for attention. The mockup gives the card title 15px and the
       enquiry heading 18px against a 22px product name; these are the nearest
       scale steps, which keeps the ramp on the design system's own values
       rather than introducing two more one-off sizes.

       .detail-product-name deliberately keeps its 32px — it is the h1 and was
       not part of this change. */
    .bulk-title {
        font-size: var(--font-size-base);
    }

    .enquiry-title {
        font-size: var(--font-size-lg);
    }

    /* Two 260px buttons cannot sit side by side on a 320px phone. `flex: 1 1 0`
       from the base rule would resolve against height once the axis turns
       vertical, so the basis is reset to the buttons' own content height. */
    .detail-cta-row {
        flex-direction: column;
    }

    .detail-cta-row .btn-add-cart,
    .detail-cta-row .btn-enquire {
        flex: 0 0 auto;
    }

    /* --- 3. TABS + SPECS --- */

    /* Wrapping put all three tabs on three separate rows at 320px, which reads
       as a stacked menu and loses the tab metaphor entirely. A scroll strip
       keeps one row; the second tab stays half-visible at the right edge, which
       is what tells the user there is more to swipe to. */
    .detail-tab-btns {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .detail-tab-btns::-webkit-scrollbar {
        display: none;
    }

    .detail-tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 12px var(--spacing-md);
    }

    /* .specs-layout is already single-column from the block above, but source
       order puts the table first. The mockup leads with the product image. */
    .specs-image {
        order: -1;
    }

    /* The 40% key column forced "Core Material" to wrap and dragged every row
       to 100px tall. Letting the key hug its label and right-aligning the value
       gives the mockup's one-line rows; the value keeps `text-align: right` so
       a long value wraps inside its own column instead of widening the row. */
    .spec-key {
        width: auto;
        white-space: nowrap;
        padding-right: var(--spacing-sm);
    }

    .spec-val {
        text-align: right;
        padding-left: var(--spacing-sm);
        padding-right: 0;
    }

    /* The Social Impact panel. .impact-stats is a nowrap flex row with a 64px
       gap, and .impact-num renders at var(--font-size-xxl) — 48px. "50,000+"
       alone is 205px of unbreakable glyphs. The row needs 602px; it had 285px
       at a 349px viewport, so it ran 285px past the panel and took the whole
       document with it (doc.scrollWidth 634 against a 349px viewport).

       Nothing was masking this. Every ancestor is overflow-x: visible and the
       page genuinely scrolled sideways. It survived the sweep because the
       inactive panels are display: none, so they generate no boxes and
       contribute nothing to scrollWidth — the probe only ever measured the
       specs tab. Fixed in the harness too, which now cycles all three panels.

       Same 2-up-plus-spanner shape as the home page values grid, and the same
       clamp as .stat-number: at 320px the two tracks are 120px each, where
       "50,000+" at 48px cannot fit however the row is arranged. */
    .impact-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-lg) var(--spacing-md);
        align-items: start;
    }

    .impact-stat:last-child {
        grid-column: 1 / -1;
    }

    .impact-num {
        font-size: clamp(24px, 7vw, 34px);
    }

    /* --- 4. FEATURES --- */

    /* auto-fit could not fit two 200px minimums into a 256px container, so it
       collapsed to one column and the two cards stacked. An explicit pair with
       a 0 minimum holds the mockup's 2-up grid. */
    .features-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    /* --- 5. ENQUIRY FORM --- */

    /* var(--spacing-xl) is 64px per side. Inside a 256px card that left 128px
       of usable width, so every input, the select pair and the submit button
       were rendering at half the card. This is what "submit button full-width"
       was actually blocked on. */
    .enquiry-form {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    /* At 320px the organization and enquiry-type selects render 238px wide in
       a 224px row and hang 14px past their own grid cell. Same failure class as
       the hero bug this file already documents: the block above sets
       `grid-template-columns: 1fr`, which is `minmax(auto, 1fr)`, and a track
       can never shrink below its item's min-content. A <select>'s min-content
       is its widest <option> — "Select organization type" at 183px — plus 32px
       of padding, 3px of border and the ~20px Chrome reserves for the dropdown
       arrow, which lands at exactly 238.

       Three parts, all needed: a 0 floor on the track, `min-width: 0` to clear
       the automatic minimum size on the flex/grid children between the row and
       the control, and `width: 100%` so the select takes the track's width
       instead of sizing to its own content.

       Scoped to a direct child so the country-code select is untouched — it
       sits inside .phone-input-group and is deliberately held at 90px.

       This never reached the page edge: .enquiry-form's own padding absorbed
       the 14px, so document.scrollWidth stayed clean and the earlier sweep
       passed it. The per-element check is what surfaced it. */
    .form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .enquiry-form .form-group,
    .enquiry-form .phone-input-group {
        min-width: 0;
    }

    .enquiry-form .form-group > select {
        width: 100%;
        min-width: 0;
    }

    /* iOS Safari auto-zooms into any focused control below 16px and does not
       zoom back out, which shifts the viewport mid-form and strands the rest of
       the fields off-screen. All seven controls were at 14px. */
    .enquiry-form .form-group input,
    .enquiry-form .form-group select,
    .enquiry-form .form-group textarea {
        font-size: var(--font-size-base);
    }

    /* 110px of a 216px content box left the phone number itself in half the
       space it needed. The trimmed side padding is what keeps the flag glyph
       and dial code legible once the text steps up to 16px. */
    .phone-input-group select {
        flex: 0 0 90px;
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
}

/* Authentication */
.auth-split {
    display: flex; 
    min-height: 100vh; 
}
.auth-left {
    flex: 1; 
    padding: 4rem; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    background: var(--color-bg-soft, #f7ede9); 
}
.auth-right {
    flex: 1; display: 
    flex; align-items: 
    center; justify-content: 
    center; padding: 2rem; 
}
.auth-card {
    max-width: 460px; 
    width: 100%; 
}

.brand-icon img {
    width: 48px; 
    margin-bottom: 2rem; 
}
.brand-headline {
    font-size: 3rem; 
    line-height: 1.1; 
    color: var(--color-primary, #8B4A3F); 
    margin-bottom: 1.5rem; 
}
.brand-title-lg {
    font-size: 2.5rem; 
    color: var(--color-primary, #8B4A3F); 
    margin-bottom: 1rem; 
}
.brand-sub {
    color: #555;
    margin-bottom: 2rem; 
    max-width: 420px; 
}
.brand-badges {
    display: flex; 
    gap: 0.75rem; 
    flex-wrap: wrap; 
}
.badge {
    background: #fff; 
    padding: 0.5rem 1rem; 
    border-radius: 20px; 
    font-size: 0.85rem; 
}
.auth-hero-img {
    border-radius: 12px; 
    max-width: 100%; 
    margin-top: 1.5rem; 
}

.auth-topbar {
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 2rem; 
    font-size: 0.9rem; 
}
.auth-title {
    font-size: 1.75rem; 
    margin-bottom: 0.25rem; 
}
.auth-subtitle {
    color: #666; 
    margin-bottom: 1.5rem; 
}

.form-group {
    margin-bottom: 1.25rem; 
}
.form-group label {
    display: block; 
    font-size: 0.75rem; 
    letter-spacing: 0.05em; 
    color: #888;
    margin-bottom: 0.4rem; 
}
.form-group input {
    width: 100%; 
    border: none; 
    border-bottom: 1px solid #ddd; 
    padding: 0.5rem 0; 
    background: transparent; 
}
.form-group input:focus {
    outline: none; 
    border-bottom-color: var(--color-primary, #8B4A3F); 
}

.auth-row {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin: 1rem 0; 
    font-size: 0.85rem; 
}
.forgot-link {
    color: var(--color-primary, #8B4A3F); 
}

.btn-full {
    width: 100%; 
}
.auth-divider {
    display: flex; 
    align-items: center; 
    margin: 1.25rem 0; 
    color: #999; 
    font-size: 0.85rem; 
}
.auth-divider::before, .auth-divider::after {
    content: ''; 
    flex: 1; 
    border-bottom: 1px solid #eee; 
}
.auth-divider span {
    padding: 0 0.75rem; 
}

.btn-google {
    display: flex; 
    align-items:center; 
    justify-content: center; 
    gap: 0.5rem; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    padding: 0.75rem; 
    text-decoration: none; 
    color: #333; 
    font-weight: 500; 
}
.google-icon {
    width: 20px; 
}

.auth-footer {
    text-align: center; 
    margin-top: 1.25rem; 
    font-size: 0.9rem; 
}

@media (max-width: 768px) {
  .auth-split {
    flex-direction: column; 
}
  .auth-left {
    padding: 2rem; 
}
}

.nav-auth {
    display: flex; 
    align-items: center; 
    gap: 1rem; 
}
.nav-login {
    color: var(--color-primary, #8B4A3F); 
    font-weight: 500; 
}

.field-success {
    color: var(--color-success, #2e7d32); 
    font-size: 0.85rem; 
    margin-bottom: 1rem; 
}














/*=========Profile page — REVISED TO MATCH STITCH=======*/
body { background: var(--color-bg); }

.dash-wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding: 4rem clamp(1.5rem, 5vw, 3rem);
  box-sizing: border-box;
}

/* Glassmorphism base, used across dash cards */
.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(130, 82, 76, 0.1);
  box-shadow: 0 12px 32px rgba(138, 100, 95, 0.08);
}

/* ===== Header ===== */
.dash-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(196,139,132,0.2);
}

.dash-avatar-wrap {
  position: relative;
  width: 128px;
  flex-shrink: 0;
}

.dash-avatar-icon {
  width: 128px;
  height: 128px;
  border-radius: 24px;
  background: var(--color-primary, #8B4A3F);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.75rem;
  box-shadow: 0 12px 32px rgba(138, 100, 95, 0.15);
}

.dash-badge {
  position: absolute;
  bottom: -8px;
  right: -8px;
  left: auto;
  transform: none;
  background: var(--color-primary, #a4665a);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.dash-header-info { flex: 1; min-width: 200px; }
.dash-header-info h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin: 0 0 0.35rem;
  text-transform: capitalize;
  line-height: 1.1;
}
.dash-location { display: flex; align-items: center; gap: 0.4rem; color: #777; font-size: 0.95rem; margin: 0; }
.dash-location i { color: var(--color-primary, #8B4A3F); }

.dash-header-actions { display: flex; gap: 0.75rem; flex-shrink: 0; }
.dash-header-actions a { white-space: nowrap; padding: 0.7rem 1.5rem; width: auto; border-radius: 16px; }

/* ===== Stats (bento) ===== */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.stat-card { border-radius: 24px; padding: 1.5rem; }
.stat-highlight { background: rgba(196, 139, 132, 0.12); }
.stat-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #888; margin-bottom: 0.75rem; }
.stat-top i { color: var(--color-primary, #8B4A3F); font-size: 1.4rem; }
.stat-tag { background: rgba(255,255,255,0.7); padding: 3px 10px; border-radius: 10px; font-size: 0.65rem; font-weight: 700; color: var(--color-primary, #8B4A3F); }
.stat-card h2 { font-size: 2.25rem; font-weight: 700; margin: 0 0 0.25rem; }
.stat-card p { margin: 0; color: #666; }

/* ===== Journey + Sessions grid ===== */
.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; margin-bottom: 2rem; }
.dash-card { border-radius: 24px; padding: 1.75rem; }
.dash-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.dash-card-head a { color: var(--color-primary, #8B4A3F); font-size: 0.85rem; font-weight: 600; }
.dash-card h3 { margin: 0 0 1.25rem; font-size: 1.35rem; font-weight: 700; }

.journey-item {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.75rem;
  position: relative;
}
.journey-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 26px;
  width: 2px;
  height: calc(100% - 10px);
  background: rgba(196,139,132,0.2);
}
.journey-item:last-child { padding-bottom: 0; }

.journey-item .dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
}
.journey-item.done .dot { background: var(--color-primary, #8B4A3F); color: #fff; }
.journey-item.active .dot { background: #f0d8d0; color: var(--color-primary, #8B4A3F); }
.journey-item.upcoming .dot { background: #eee; }

.journey-item small { color: #999; font-size: 0.7rem; letter-spacing: 0.05em; font-weight: 600; }
.journey-title { font-weight: 700; margin: 0.15rem 0; font-size: 1.05rem; }
.journey-desc { color: #888; font-size: 0.85rem; margin: 0; }
.progress-bar { background: #eee; height: 6px; border-radius: 3px; margin: 0.5rem 0; overflow: hidden; }
.progress-fill { background: var(--color-primary, #8B4A3F); height: 100%; }

/* ===== Sessions — bordered cards, per Stitch ===== */
.session-item {
  padding: 1rem;
  margin-bottom: 0.75rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(196,139,132,0.2);
  transition: border-color 0.2s ease;
}
.session-item:hover { border-color: var(--color-primary, #8B4A3F); }
.session-item:last-child { margin-bottom: 0; }
.session-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.session-type {
  color: var(--color-primary, #8B4A3F);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.session-top .tag {
  background: var(--color-secondary, #f5e2dd);
  color: var(--color-primary, #8B4A3F);
  padding: 3px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.65rem;
  white-space: nowrap;
}
.session-title { font-weight: 700; margin: 0 0 0.4rem; font-size: 1.05rem; }
.session-meta { font-size: 0.85rem; color: #888; margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.session-meta i { color: var(--color-primary, #8B4A3F); font-size: 0.8rem; }

/* ===== Tabs — dot indicator, per Stitch ===== */
.dash-tabs {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid rgba(196,139,132,0.2);
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  color: #888;
}
.dash-tabs .tab { padding-bottom: 1rem; cursor: pointer; position: relative; font-weight: 600; }
.dash-tabs .tab.active {
  color: var(--color-primary, #8B4A3F);
}
.dash-tabs .tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-primary, #8B4A3F);
}

.dash-grid-bottom { grid-template-columns: 1.4fr 1fr; }

/* ===== Purchases table — thumbnails, spacious padding ===== */
.purchase-table { width: 100%; border-collapse: collapse; }
.purchase-table th {
  text-align: left;
  font-size: 0.7rem;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0 1rem;
  border-bottom: 1px solid rgba(196,139,132,0.15);
}
.purchase-table td {
  padding: 1.25rem 0.5rem 1.25rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  font-size: 0.9rem;
}
.purchase-table tr:hover { background: rgba(196,139,132,0.04); }
.purchase-table tr:last-child td { border-bottom: none; }
.purchase-table small { color: #999; }

.purchase-product { display: flex; align-items: center; gap: 1rem; }
.purchase-thumb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--color-secondary, #f1dee0), var(--color-primary, #8B4A3F));
}

.status-pill { background: #e3f5e8; color: #2e7d32; padding: 4px 12px; border-radius: 10px; font-size: 0.75rem; font-weight: 700; }

/* ===== Account Settings — boxed rows ===== */
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  border-radius: 16px;
  border: 1px solid rgba(196,139,132,0.2);
  background: rgba(255,255,255,0.5);
  text-decoration: none;
  color: #333;
  font-size: 0.92rem;
  transition: border-color 0.2s ease;
}
.setting-row:hover { border-color: var(--color-primary, #8B4A3F); }
.setting-row i { color: var(--color-primary, #8B4A3F); margin-right: 0.6rem; }
.setting-row .chev { color: #aaa; }

.switch { position: relative; width: 36px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #ddd; border-radius: 20px; transition: 0.2s; }
.slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: 0.2s; }
input:checked + .slider { background: var(--color-primary, #8B4A3F); }
input:checked + .slider::before { transform: translateX(16px); }

.concierge-box {
  background: rgba(196,139,132,0.08);
  border: 1px solid rgba(196,139,132,0.2);
  border-radius: 16px;
  padding: 1.25rem;
  margin-top: 1rem;
}
.concierge-title { font-weight: 700; margin: 0 0 0.5rem; }
.concierge-desc { font-size: 0.85rem; color: #666; margin: 0 0 1rem; line-height: 1.5; }

@media (max-width: 768px) {
  .dash-grid, .dash-grid-bottom, .dash-stats { grid-template-columns: 1fr; }
  .dash-header { flex-direction: column; text-align: center; }
  .dash-avatar-wrap { margin: 0 auto; }
  .dash-tabs { overflow-x: auto; }
}

/* ===== Edit Profile Modal ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  align-items: center;
  justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-box {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.modal-close { cursor: pointer; font-size: 1.5rem; color: #999; }

/* ===== MOBILE: PROFILE TOUCH TARGETS =====
   .dash-tabs .tab declares padding-bottom only, so the tab strip was ~33px
   tall with no horizontal padding between adjacent labels. .modal-close is a
   bare 1.5rem <span>, roughly 24x24, and it is the only way out of the Edit
   Profile dialog on a phone.

   Both get the 44px minimum. The tab's active underline is an ::after pinned
   to bottom:-1px, so adding padding moves the underline with the text and the
   indicator still lines up. */
@media (max-width: 768px) {
    .dash-tabs .tab {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .modal-close {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: calc(var(--spacing-sm) * -1);
    }
}
.modal-close:hover { color: var(--color-primary, #8B4A3F); }

.empty-state { color: #999; font-size: 0.9rem; padding: 1.5rem 0; text-align: center; }















/*Message after authentication
*/
.message-box {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  transition: opacity 0.5s ease;
}

.message-item {
  background: #fff;
  border-left: 4px solid var(--color-primary, #8B4A3F);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.message-item.success { border-left-color: #2e7d32; }
.message-item.error { border-left-color: #d32f2f; }






/*Appending singup page css */
/* ===== AUTH — MATCHED TO STITCH EXPORT ===== */

.auth-split { display: flex; min-height: 100vh; background: var(--color-white); }

.auth-left {
    flex: 0 0 41.66%;
    position: relative;
    overflow: hidden;
    background:#edecec8b;
    border-right: 1px solid var(--color-secondary);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-xl);
}

.auth-waves-icon {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    font-size: 100px !important;
    color: var(--color-primary);
    opacity: 0.2;
    pointer-events: none;
}

.auth-float-blur {
    position: absolute;
    bottom: -80px;
    right: -80px;
    width: 280px;
    height: 280px;
    background: rgba(196, 139, 132, 0.2);
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.auth-icon-box {
    width: 72px;
    height: 72px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 2;
}
.auth-icon-box .material-symbols-outlined {
    font-size: 36px;
    color: var(--color-primary);
    font-variation-settings: 'wght' 200;
}

.auth-headline {
    font-family: var(--font-main);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #82524c;
    margin-bottom: var(--spacing-md);
}

.auth-brand-sub {
    font-size: var(--font-size-base);
    color: var(--color-accent);
    line-height: 1.6;
    max-width: 420px;
    margin-bottom: var(--spacing-lg);
}

.auth-badges { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 18px;
    background: var(--color-white);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    width: fit-content;
}
.auth-badge .material-symbols-outlined { font-size: 16px; color: var(--color-primary); }

.auth-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    position: relative;
}

.auth-card { width: 100%; max-width: 440px; }

.auth-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
}
.auth-logo { font-weight: 600; font-size: 22px; color: #82524c; }
.auth-switch { font-size: var(--font-size-sm); color: var(--color-accent); }
.auth-switch a { color: var(--color-primary); font-weight: 700; }

.auth-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-text); margin-bottom: 4px; }
.auth-subtitle { font-size: var(--font-size-base); color: var(--color-accent); margin-bottom: var(--spacing-lg); }

.auth-form .form-group { margin-bottom: var(--spacing-lg); position: relative; }

.auth-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--spacing-sm);
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-secondary);
    padding: 12px 0;
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    color: var(--color-text);
}
.auth-form input:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
}

/* ===== MOBILE: AUTH FORM 16px FLOOR (PREVENTIVE) =====
   This is a guard, not a fix. The signup and profile forms were reported as
   carrying the same iOS auto-zoom bug as the product enquiry form; measuring
   them says otherwise — every control on both pages already renders at 16px,
   because `.auth-form input[type=...]` above sets var(--font-size-base). The
   only sub-16px controls on those pages are checkboxes at 13.3px, and iOS does
   not zoom for a checkbox: it only zooms when focusing a control you can type
   into.

   What is genuinely fragile is the selector's shape. It enumerates three types
   — text, email, password. Anything else falls through to `.form-group input`
   near the top of this file, which is 14px, and that is a real zoom. The
   profile modal renders `{% for field in form %}`, so its field list is
   whatever the form class happens to declare; the day someone adds a phone or
   a date of birth, the bug appears with no CSS change to blame.

   So this block restates the floor type-agnostically for the whole phone band.
   It changes nothing measurable today — it is here so that adding a field
   cannot silently reintroduce the problem.

   It sits below the enumerated rules on purpose: `.auth-form input[type="text"]`
   carries an attribute selector and outranks a bare `.auth-form input`, so
   matching that specificity is what lets source order decide. */
@media (max-width: 767.98px) {
    .auth-form input[type="text"],
    .auth-form input[type="email"],
    .auth-form input[type="password"],
    .auth-form input[type="tel"],
    .auth-form input[type="number"],
    .auth-form input[type="url"],
    .auth-form input[type="search"],
    .auth-form input[type="date"],
    .auth-form input:not([type]),
    .auth-form select,
    .auth-form textarea,
    .login-form input[type="text"],
    .login-form input[type="email"],
    .login-form input[type="password"],
    .login-form input:not([type]),
    .login-form select,
    .login-form textarea {
        font-size: var(--font-size-base);
    }
}

.password-field-wrap { position: relative; }
.password-toggle-btn {
    position: absolute;
    right: 0;
    bottom: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-accent);
}
.password-toggle-btn:hover { color: var(--color-primary); }
.password-toggle-btn .material-symbols-outlined { font-size: 22px; }

.terms-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    font-size: 13px;
    color: var(--color-accent);
    line-height: 1.5;
}
.terms-row input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}
.terms-row a { color: var(--color-primary); text-decoration: underline; }

.btn-signup {
    width: 100%;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 16px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.btn-signup:hover { opacity: 0.9; }

.auth-divider {
    display: flex;
    align-items: center;
    margin: var(--spacing-lg) 0;
    color: var(--color-accent);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-secondary);
}
.auth-divider span { padding: 0 var(--spacing-md); }

.btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: var(--color-white);
    border: 1px solid var(--color-secondary);
    padding: 16px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition);
}
.btn-google:hover { background: var(--color-bg); }

.auth-legal-footer {
    position: absolute;
    bottom: var(--spacing-lg);
    right: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-md);
    font-size: 12px;
}
.auth-legal-footer a { color: var(--color-secondary); }
.auth-legal-footer a:hover { color: var(--color-primary); }

@media (max-width: 900px) {
    .auth-split { flex-direction: column; }
    .auth-left { flex: none; border-right: none; }
    .auth-legal-footer { display: none; }
}






/* ===== MOBILE: SIGNUP / AUTH SPLIT =====
   Desktop is a two-column split: a decorative brand panel on the left and the
   real form on the right. On a phone the panel is dropped entirely rather than
   stacked, because stacked it was 656px of decoration at a 375px viewport —
   the form began below the fold, on the page whose entire job is the form.

   It goes out with `display: none`, not out of the template. The headline and
   description are real content that belongs in the markup for crawlers, and a
   screen-reader user on a phone should not silently lose it either.

   POSITION IN THIS FILE
   This block must stay last. Nearly every selector below is declared twice in
   this stylesheet — .auth-split, .auth-left, .auth-right, .auth-card,
   .auth-topbar, .auth-title, .auth-divider and .btn-google all appear once
   around line 2353 and again around 2918 — and .auth-legal-footer is switched
   off by the `max-width: 900px` block immediately above. Equal specificity
   throughout, so source order is the only thing deciding any of it.

   BAND
   767.98, not 768: the 768px checkpoint has to keep measuring what it measured
   before. The consequence is that between 769px and 900px the panel still
   stacks, which is the pre-existing behaviour and is inconsistent with
   login.css hiding its own panel at 900. Worth revisiting as a tablet pass. */
@media (max-width: 767.98px) {

    /* --- layout --- */
    .auth-left {
        display: none;
    }

    /* var(--spacing-xl) is 64px a side, which left the card 247px wide inside
       a 375px viewport and 192px inside a 320px one — the form was rendering
       at roughly half the screen it had. */
    .auth-right {
        padding: var(--spacing-lg) var(--spacing-md);
        justify-content: flex-start;
    }

    /* 440px was sized to sit beside a sibling column that no longer exists. */
    .auth-card {
        max-width: none;
    }

    /* --- header --- */
    /* space-between put the wordmark and "Already a member?" on one row; at
       320px that was 82px + 110px inside 192px and the switch wrapped to two
       lines. Stacking them gives each its own line, wordmark left and the
       switch right, which is the arrangement in the mockup. */
    .auth-topbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-lg);
    }

    .auth-switch {
        text-align: right;
    }

    /* --- type --- */
    /* var(--font-size-xl) is 32px, the h1 size, which ran to four lines and
       154px at both 320 and 375. */
    .auth-title {
        font-size: 24px;
        line-height: 1.25;
    }

    .auth-subtitle {
        font-size: var(--font-size-sm);
    }

    /* --- controls --- */
    /* 12px padding on a 16px line gave 43px — one pixel under the target, which
       is the kind of miss that only shows up when it is measured. min-height
       rather than more padding keeps the underline where the design puts it. */
    .auth-form input[type="text"],
    .auth-form input[type="email"],
    .auth-form input[type="password"] {
        min-height: 44px;
    }

    /* A bare 22px icon in the corner of the password field, absolutely
       positioned against it. The box grows to 44px but stays anchored at
       right: 0 and aligns its icon to the flex end, so the target extends
       inward across the field rather than outward past it.

       A first attempt pulled the button out by half the gain to keep the icon
       optically centred, and the per-element check caught it hanging 8px
       outside .password-field-wrap — a 44px touch target that had created its
       own overflow. Growing inward costs nothing: the area it covers is the
       tail of the input, which has no other tap behaviour.

       bottom: 0 rather than the desktop 10px keeps the icon's centre where it
       already sat — the old 25px box at 10px and a 44px box at 0 put their
       midpoints within half a pixel of each other. */
    .password-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 44px;
        min-height: 44px;
        right: 0;
        bottom: 0;
    }

    .terms-row {
        gap: var(--spacing-md);
        line-height: 1.6;
    }

    /* --- actions --- */
    /* Both buttons to one height. .btn-google was the tallest control on the
       page at 60px against .btn-signup's 50px — and 85px at 320px, where its
       label wrapped — so the secondary action was reading as the primary one.
       Fixed height plus centred flex holds the pair level and stops the wrap
       changing the geometry. */
    .btn-signup,
    .btn-google {
        width: 100%;
        height: 48px;
        min-height: 48px;
        padding: 0 var(--spacing-md);
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* --- footer --- */
    /* Un-hidden from the 900px block above and taken out of the absolute
       corner it occupied on desktop, where it would have overlapped the form.
       Wrapping is allowed but should not trigger: three short links plus two
       16px gaps measure well inside 288px at the 320px width. */
    .auth-legal-footer {
        display: flex;
        position: static;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-md);
        margin-top: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
        right: auto;
        bottom: auto;
    }

    .auth-legal-footer a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
}