/* ==========================================================================
   Aanchalkari · premium.css  v7
   (open this file at /assets/css/premium.css?v=7 — if the line above does
    not say v7, the upload did not land and nothing below is running)
   --------------------------------------------------------------------------
   Loaded AFTER style.css. Overrides without touching the original.
   Delete this one file and the site returns exactly to how it was.

   THE DIAGNOSIS
   -------------
   The site wasn't lacking resolution. It was lacking restraint.

   Three things were making a Rs.15,000 saree look like a Rs.500 one:
     · every product sat inside a bordered white box with a shadow
     · every card carried a solid maroon ADD TO CART block
     · every card showed five empty stars and "(0)"

   Luxury retail does none of those. Look at how a good boutique presents
   clothing: the garment against a plain wall, a small label, nothing else.
   The photograph is the product; the interface should get out of its way.

   So the boxes are gone, the buttons are quiet, the empty ratings are
   hidden, and the images are larger and taller. Almost everything here is
   subtraction. That is what "premium" mostly is.
   ========================================================================== */

/* ==========================================================================
   1 · OVERFLOW GUARD  (keeps the sideways-scroll fix)
   ========================================================================== */

html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; position: relative; }

.ak-grid > *, .ak-card, .ak-card__body, .ak-shop__layout > *,
.ak-pdp__top > *, .ak-buybox, .ak-orderline__info,
.ak-footer__grid > * { min-width: 0; }

img, video, iframe, table, pre { max-width: 100%; }
img, video { height: auto; }
.ak-card__title, .ak-shop__title, .ak-pdp__title,
h1, h2, h3, p, a { overflow-wrap: break-word; }
.ak-nav__list, .ak-filters { max-width: 100vw; }


/* ==========================================================================
   2 · TOKENS
   --------------------------------------------------------------------------
   The maroon and gold stay — they are the brand and they are in the logo.
   What changes is everything around them: a warmer ground, a quieter ink,
   and shadows soft enough to notice only by their absence.
   ========================================================================== */

:root {
  /* THE DISPLAY FACE — changed from Bodoni Moda.
     Bodoni is a Didone: its hairlines are drawn to be hairlines, and at any
     size a browser will render them under one pixel. That is the "dull, not
     clear" you were seeing — no amount of weight or smoothing fixes a stroke
     thinner than the screen can draw.
     Playfair Display keeps the same high-contrast boutique feel but its thin
     strokes are roughly twice as thick, so they survive. To try another,
     change this one line — 'Fraunces', 'Prata' and 'Marcellus' all work, and
     update the Google Fonts link in header.php to match. */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gold: #B8912F;
  --gold-light: #DCC076;

  --ink: #1C1512;
  --ink-soft: #574B45;
  --ink-muted: #948680;

  --line: #E9DFD2;
  --line-soft: #F1E9DE;

  /* A warmer, lighter ground than plain white. Chikankari is white thread
     on pale cloth — a stark white page flattens the photographs. */
  --ivory: #FBF8F3;
  --cream: #F5EDE2;

  --radius: 0;
  --radius-sm: 2px;
  --radius-lg: 0;

  --shadow-xs: 0 1px 2px rgba(28,21,18,.03);
  --shadow-md: 0 8px 34px rgba(28,21,18,.07);
  --shadow-lg: 0 22px 60px rgba(28,21,18,.12);

  --ease: cubic-bezier(.22,.61,.36,1);
}

body {
  background: var(--ivory);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: .004em;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ==========================================================================
   3 · TYPE
   --------------------------------------------------------------------------
   Bodoni Moda for display. The reason is specific to what you sell: its
   extreme thick-to-hairline contrast is the same contrast the eye reads in
   chikankari — dense satin stitch beside a fine shadow line. Used large
   only; below about 18px those hairlines disappear on a phone.

   Jost for everything else. Poppins, which it replaces, is the most-used
   typeface in Indian web design and made a handcraft label read like a
   food-delivery app.
   ========================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.1;
  color: var(--maroon);
}

/* Section headings, set considerably larger. Scale is the cheapest luxury
   signal there is, and the old 32px headings were merely polite. */
.ak-section__head h2 {
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 400;
  margin: 0;
}

.ak-section__head p {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 14px auto 0;
}

.ak-shop__title { font-size: clamp(28px, 4.4vw, 46px); font-weight: 400; }
.ak-cat-banner h1 { font-size: clamp(30px, 5vw, 54px); font-weight: 400; }

/* Prices in the SANS face, upright.

   Bodoni's numerals are drawn with the same hairline-to-thick swell as its
   letters, so a price read as decorative rather than factual — and the ₹
   symbol is missing from many Bodoni cuts, so the browser substituted a
   different font for that one character and it sat at the wrong weight
   beside the digits. That mismatch is what looked "curvy".

   Jost's numerals are geometric and upright, it has a proper ₹, and
   tabular-nums keeps every price in a row on the same column. */
.ak-price, .ak-card__price, .ak-price__now,
.ak-buybox .ak-price,
.ak-line__price, .ak-line__price strong, .ak-line__price small,
.ak-summary__rows dd, .ak-summary__rows dt,
.ak-summary__total, .ak-summary__total strong,
.ak-orderline__price, .ak-invoice td, .ak-invoice th {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}


/* ==========================================================================
   4 · PRODUCT CARDS — the box comes off
   --------------------------------------------------------------------------
   This is the single biggest change. A bordered white rectangle with a
   shadow announces "this is a template". Removing it lets the photograph
   sit directly on the page, the way a boutique hangs a garment against a
   plain wall.
   ========================================================================== */

.ak-grid--4, .ak-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 52px 26px;                     /* generous vertical rhythm; space is the point */
}

.ak-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  position: relative;
  transition: none;
}

.ak-card:hover { transform: none; box-shadow: none; border-color: transparent; }

/* Taller frame. Clothing needs height — 4:5 shows a full garment where 3:4
   crops it. Every fashion house that photographs on a model uses this ratio
   or taller. */
.ak-card__media {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background: var(--cream);
  overflow: hidden;
  position: relative;
}

.ak-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity .5s ease;
}

/* Very slow, very small. A fast 1.06 zoom feels like a clearance site;
   1.03 over a full second feels like the photograph is being studied. */
.ak-card:hover .ak-card__media img { transform: scale(1.03); }

/* THE SIGNATURE
   A hairline gold rule draws itself across, under the product name, on
   hover. Chikankari is one fine line on a plain ground — the card borrows
   exactly that, and it is the only decorative move on the whole page. */
.ak-card__body {
  padding: 16px 2px 0;
  background: transparent;
  position: relative;
}

.ak-card__body::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 8px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease);
  opacity: .55;
}

.ak-card:hover .ak-card__body::after,
.ak-card:focus-within .ak-card__body::after { transform: scaleX(1); }

.ak-card__title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink-soft);
  margin: 0 0 7px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.95em;                 /* keeps prices on one line across a row */
}

.ak-card__title a { color: inherit; }
.ak-card:hover .ak-card__title a { color: var(--maroon); }

.ak-card__price { font-size: 20px; color: var(--maroon); margin: 0 0 12px; }

.ak-price--old,
.ak-card__price del {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink-muted);
  margin-left: 9px;
  text-decoration: line-through;
}

/* Empty ratings, hidden.
   Five grey stars and "(0)" on every product tells a customer nobody has
   bought this. On a new shop that is the opposite of what you want to say,
   and no luxury retailer shows ratings in a grid anyway. They return on the
   product page, where a real review has somewhere to live. */
.ak-card__rating { display: none; }

/* Discount tag: small, flat, top-left, no pill. */
.ak-card__tag {
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: var(--maroon);
  top: 0; left: 0;
}

.ak-card__tag--new { background: var(--ink); }

/* Wishlist: barely there until wanted. */
.ak-card__wish {
  background: rgba(255,255,255,.9);
  border: 0;
  box-shadow: none;
  opacity: 0;
  transition: opacity .3s ease, background .25s ease;
}
.ak-card:hover .ak-card__wish,
.ak-card__wish.is-on { opacity: 1; }
.ak-card__wish.is-on { color: var(--maroon); }

/* The solid maroon button, restored.
   I had turned this into a quiet underlined line of text. You were right that
   it lost the button — a full-width block of colour is what tells the eye
   where to press, and on a shop that matters more than restraint does.

   What it keeps from the premium pass: square corners rather than rounded,
   wide letterspacing, and no lift-and-shadow on hover. It darkens instead.
   Same weight of presence as before, drawn to match the rest of the page. */
.ak-card .ak-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}

.ak-card .ak-btn--primary {
  background: var(--maroon);
  border: 1px solid var(--maroon);
  color: #fff;
  box-shadow: none;
}

.ak-card .ak-btn--primary:hover,
.ak-card .ak-btn--primary:focus-visible {
  background: var(--maroon-dark, #4E0A13);
  border-color: var(--maroon-dark, #4E0A13);
  color: #fff;
  transform: none;                    /* no lift; the colour change is enough */
  box-shadow: none;
}

/* Out of stock: outlined and muted, so it reads as unavailable at a glance
   rather than as a second thing to press. */
.ak-card .ak-btn--ghost,
.ak-card .ak-btn.is-disabled {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  box-shadow: none;
}


/* ==========================================================================
   5 · PHONES
   --------------------------------------------------------------------------
   Two per row all the way down. One giant card per row is the common answer
   and it is wrong for shopping: it makes browsing slower, and browsing is
   how people find the thing they buy.
   ========================================================================== */

@media (max-width: 900px) {
  .ak-grid--4, .ak-grid--3 {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 44px 20px;
  }
}

@media (max-width: 640px) {
  .ak-container { padding-inline: 15px; }

  .ak-grid--4, .ak-grid--3, .ak-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 13px;
  }

  .ak-card__body { padding: 13px 0 0; }
  .ak-card__title { font-size: 12.5px; min-height: 2.9em; margin-bottom: 5px; }
  .ak-card__price { font-size: 17px; margin-bottom: 9px; }
  .ak-price--old, .ak-card__price del { display: block; margin: 3px 0 0; font-size: 11.5px; }

  /* Touch has no hover, so the wishlist heart and the gold rule stay put. */
  .ak-card__wish { opacity: 1; background: rgba(255,255,255,.86); }
  .ak-card__body::after { transform: scaleX(1); opacity: .3; }

  /* 44px is the smallest target a thumb reliably hits. Two cards per row
     leaves little width, so the text shrinks but the button does not. */
  .ak-card .ak-btn { font-size: 10px; letter-spacing: .1em; padding: 11px 8px; min-height: 44px; margin-top: 10px; }

  .ak-section { padding: 52px 0; }
  .ak-section__head { margin-bottom: 30px; }
  .ak-section__head p { font-size: 11px; letter-spacing: .13em; margin-top: 10px; }
  .ak-cat-banner { padding: 46px 0; }
}

@media (max-width: 380px) {
  .ak-container { padding-inline: 12px; }
  .ak-grid--4, .ak-grid--3, .ak-grid--2 { gap: 28px 10px; }
  .ak-card__title { font-size: 12px; }
  .ak-card__price { font-size: 16px; }
  .ak-logo img { height: 38px; }
}


/* ==========================================================================
   6 · SPACE
   --------------------------------------------------------------------------
   The most reliable luxury signal, and the one most sites skip because
   whitespace looks like wasted screen. It isn't — it is what tells the eye
   that each item is worth looking at on its own.
   ========================================================================== */

.ak-section { padding: 96px 0; }
.ak-section__head { margin-bottom: 52px; }

/* Header: a hairline, not a shadow. Weight belongs on the product.

   NO backdrop-filter here. This is what broke the mobile menu.

   A backdrop-filter on an element makes it a "containing block" for any
   position:fixed descendant inside it. The drawer is `position:fixed;
   inset:0 auto 0 0` and it lives inside .ak-header — so instead of filling
   the screen, it was being trapped inside the header strip, a few tens of
   pixels tall. The links were all there; there was nowhere to draw them.

   The frosted-glass effect is not worth a broken menu, and on an opaque
   ivory header nobody can see it anyway. */
.ak-header {
  border-bottom: 1px solid var(--line-soft);
  box-shadow: none;
  background: var(--ivory);
}

.ak-nav { border-top: 1px solid var(--line-soft); }

.ak-nav__list > li > a {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Category circles: a gold ring on hover, nothing else. */
.ak-cat__img { border: 1px solid var(--line); box-shadow: none; }
.ak-cat:hover .ak-cat__img { border-color: var(--gold); box-shadow: none; }
.ak-cat span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }


/* ==========================================================================
   7 · BUTTONS AND FORMS  (outside product cards)
   ========================================================================== */

.ak-btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .16em;
  border-radius: 0;
  padding: 15px 34px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}

.ak-btn--primary { background: var(--maroon); border-color: var(--maroon); }
.ak-btn--primary:hover { background: var(--ink); border-color: var(--ink); }

.ak-btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.ak-btn--ghost:hover { background: var(--ink); color: #fff; }

.ak-btn--lg { height: 56px; border-radius: 0; }

.ak-input, .ak-sort select, .ak-search input,
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=url], input[type=number], select, textarea {
  font-family: var(--font-body);
  border-radius: 0;
  border-color: var(--line);
  background: #fff;
}

:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }


/* ==========================================================================
   8 · PRODUCT PAGE
   ========================================================================== */

.ak-pdp__title { font-size: clamp(26px, 3.6vw, 40px); font-weight: 400; }
.ak-gallery__main { border-radius: 0; background: var(--cream); }
.ak-gallery__thumbs img { border-radius: 0; }
.ak-gallery__video iframe { display: block; border-radius: 0; }

.ak-buybox .ak-price { font-size: clamp(26px, 3.4vw, 34px); }

.ak-opt { border-radius: 0; font-family: var(--font-body); letter-spacing: .06em; font-size: 12.5px; }
.ak-opt--swatch { border-radius: 50%; }

.ak-tabs__nav button { font-family: var(--font-body); letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; }


/* ==========================================================================
   9 · FOOTER
   ========================================================================== */

.ak-footer { border-top: 1px solid var(--line); }
.ak-footer h4 {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .ak-card__media img,
  .ak-card__body::after { transition: none !important; }
}


/* ==========================================================================
   10 · HEADING LEGIBILITY
   --------------------------------------------------------------------------
   You said headings weren't rendering clearly. Two causes, both fixable
   without giving up Bodoni.

   1. `-webkit-font-smoothing: antialiased` thins every stroke by roughly
      half a pixel. On a geometric sans that reads as "crisp"; on a Didone
      like Bodoni, whose hairlines are ALREADY a hairline, it erases them.
      Headings go back to the browser default rendering, which is heavier.

   2. Bodoni Moda is a variable font with an optical-size axis. Without
      `font-optical-sizing`, the browser can serve the 96pt display cut at
      28px, where its hairlines are sub-pixel and simply vanish. Set to auto,
      the font adjusts its own contrast to the size it is drawn at.

   Weight also goes from 400 to 500. On a Didone that is the difference
   between elegant and faint.
   ========================================================================== */

h1, h2, h3, h4, h5,
.ak-section__head h2,
.ak-shop__title, .ak-pdp__title, .ak-cat-banner h1 {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  font-weight: 600;
  letter-spacing: -.005em;
}

/* Below ~26px Bodoni's hairlines stop surviving on any screen, so small
   headings use the sans instead. This is the honest limit of the typeface,
   not a compromise — Didones were drawn for large sizes. */
h4, h5, h6,
.ak-card__title, .ak-tabs__nav button, .ak-footer h4 {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
}

@media (max-width: 640px) {
  /* Phone screens are the hardest case: a 30px Bodoni heading on a 3x
     display still renders its hairlines under one physical pixel. 600
     holds up where 500 breaks. */
  h1, h2, h3,
  .ak-section__head h2, .ak-shop__title,
  .ak-pdp__title, .ak-cat-banner h1 { font-weight: 700; }
}


/* ==========================================================================
   11 · MOBILE DRAWER — belt and braces
   --------------------------------------------------------------------------
   Removing the backdrop-filter above is the actual fix. These rules make the
   drawer robust so a future effect on the header can't trap it again, and
   fix two smaller things you'd have hit next.

   The breakpoint is 992px to match style.css. Using 900 here would leave a
   dead band between 900 and 992 where the drawer is styled but the burger
   isn't shown.
   ========================================================================== */

@media (max-width: 992px) {

  /* The drawer must escape the header's stacking context. z-index 200 in
     style.css sits below nothing important, but the header itself is
     z-index 120 and sticky, so this keeps the drawer clearly above it. */
  .ak-nav__list {
    z-index: 999;
    max-width: none;                 /* section 1's 100vw guard must not apply here */
    height: 100%;
    padding-top: 20px;
    background: var(--ivory);
    border-right: 1px solid var(--line);
  }

  /* The nav strip itself has no business reserving height once its list is
     a fixed drawer — that empty bar was pushing your content down. */
  .ak-nav { border-top: 1px solid var(--line-soft); min-height: 0; }

  /* Every item, spaced for thumbs. 48px is above the 44px minimum. */
  .ak-nav__list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 6px;
    font-size: 13px;
    letter-spacing: .12em;
    border-bottom: 1px solid var(--line-soft);
  }

  /* The chevron turns when Categories is open, so a tap that expands the
     list looks like it did something even before you scroll to see it. */
  .ak-nav__list > li > a .bi-chevron-down {
    transition: transform .3s var(--ease);
  }
  .ak-nav__list > li.is-open > a .bi-chevron-down {
    transform: rotate(180deg);
  }

  /* Submenu items, indented and quieter than their parent. */
  .ak-dropdown {
    background: transparent;
    padding: 2px 0 6px;
  }
  .ak-dropdown a {
    display: block;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--ink-soft);
    text-transform: none;
  }
  .ak-dropdown a:active { background: var(--cream); }


}


/* ==========================================================================
   12 · HERO SLIDER
   --------------------------------------------------------------------------
   Three problems in your screenshot, one of them a real bug.

   THE BUG: style.css line 692 sets `.ak-btn--lg { flex: 1; min-width: 190px }`
   for the product page, where the button sits in a ROW and flex:1 makes it
   fill the width. The hero caption is a COLUMN, so on that same class flex:1
   made the button fill the HEIGHT — that is the 200px maroon slab sitting
   over your model. The button was never sized wrong; it was growing.

   THE OVERLAP: captions cross-fade over 450ms while the track slides, so
   mid-transition two headlines are legible on top of each other. The incoming
   caption should not appear until its slide has arrived.

   THE CONTRAST: a pale scrim over a pale photograph leaves cream text on
   cream cloth. A text-shadow does the work the scrim can't.
   ========================================================================== */

/* The button becomes a strip: sized by its own text, nothing more. */
.ak-hero .ak-btn,
.ak-hero__caption .ak-btn,
.ak-hero__caption .ak-btn--lg {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 12px 26px;
  font-size: 11.5px;
  letter-spacing: .15em;
  border-radius: 0;
  box-shadow: none;
}

.ak-hero__caption--center .ak-btn { align-self: center; }
.ak-hero__caption--right  .ak-btn { align-self: flex-end; }

/* NO text-shadow. I misread you last time and added one — you were telling me
   there already was one and it looked like ghosting.

   style.css line 195 has `text-shadow: 0 1px 18px rgba(253,249,243,.7)` on the
   hero headline. An 18px blur under a serif with fine strokes spreads a pale
   halo into the counters of the letters, and at a glance that reads as a
   second, blurred copy of the text sitting behind the first.

   Both are off now. The scrim below does the legibility work instead — a
   solid wash of background colour is cleaner than a glow, and it doesn't
   touch the letterforms at all. */
.ak-hero__caption h1,
.ak-hero__caption p,
.ak-hero__caption .ak-btn {
  text-shadow: none;
}

.ak-hero__caption p { color: var(--ink); }

/* A denser scrim under the text edge. */
.ak-hero__caption {
  background: linear-gradient(90deg,
    rgba(253,249,243,.97) 0%,
    rgba(253,249,243,.93) 42%,
    rgba(253,249,243,.55) 72%,
    rgba(253,249,243,0) 100%);
}

.ak-hero__caption--right {
  background: linear-gradient(270deg,
    rgba(253,249,243,.96) 0%,
    rgba(253,249,243,.86) 38%,
    rgba(253,249,243,.45) 68%,
    rgba(253,249,243,0) 100%);
}

.ak-hero__caption--center {
  background: linear-gradient(180deg,
    rgba(253,249,243,0) 0%,
    rgba(253,249,243,.88) 45%,
    rgba(253,249,243,.88) 60%,
    rgba(253,249,243,0) 100%);
}

/* No cross-fade. The outgoing caption is gone before the incoming one is
   drawn, so two headlines can never be read at once. */
.ak-hero__slide[aria-hidden="true"] .ak-hero__caption {
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.ak-hero__slide:not([aria-hidden="true"]) .ak-hero__caption {
  transition: opacity .35s var(--ease) .12s;
}

@media (max-width: 640px) {
  /* Less text, larger. A phone hero has room for a headline, one line of
     subtitle and a button — anything more is unreadable at speed. */
  .ak-hero__caption { padding: 22px 20px; gap: 11px; }
  .ak-hero__caption h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); line-height: 1.15; }
  .ak-hero__caption p {
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ak-hero .ak-btn,
  .ak-hero__caption .ak-btn { padding: 11px 20px; font-size: 10.5px; min-height: 42px; }
}


/* ==========================================================================
   13 · FOOTER
   --------------------------------------------------------------------------
   The one-letter-per-line column.

   `.ak-footer__grid > * { min-width: 0 }` from section 1 removes the floor
   that normally stops a grid track shrinking below its content. That guard is
   needed to prevent sideways scroll — but in the footer, the contact column
   holds an unbreakable email address, so it demanded width, and with the
   floor removed the first column was squeezed to a single character.

   Fixing the email is half of it. The other half is giving every column a
   real minimum width, so no arrangement of content can crush one again.
   ========================================================================== */

/* NO media query. This is why the last attempt didn't take.

   My footer rules lived in `@media (max-width: 640px)`. If a phone browser is
   set to "Desktop site" it reports a viewport around 980px, so that block
   never ran and style.css's five-column layout stayed in force — which is
   exactly the layout in your screenshot: four columns across, the fifth
   wrapped, and column one crushed.

   `auto-fit` with a 180px floor needs no breakpoint. It fits as many columns
   as will actually hold their content and drops to one when they won't, at
   every width, in every browser mode. */
.ak-footer__grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  padding: 44px 0 32px;
}

/* Section 1 sets `min-width: 0` on every grid child to stop sideways scroll.
   In the footer that is what let a column shrink to one letter per line, so
   here the floor comes back. 180px is narrower than any phone, so it can
   never cause overflow. */
.ak-footer__grid > * { min-width: 180px; }

/* Long unbreakable strings — the email especially — may break anywhere
   rather than forcing the whole grid wider than the screen. */
.ak-footer__contact a,
.ak-footer__contact span,
.ak-footer p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ak-footer__contact li { align-items: flex-start; }


/* ==========================================================================
   14 · PRICES IN CART, CHECKOUT AND INVOICE
   --------------------------------------------------------------------------
   Same fix as the product cards, applied where money is actually confirmed.
   The ₹ was falling back to a substitute font beside Bodoni digits; in the
   sans it is one glyph from one family, upright, at the right weight.

   Contrast also goes up. A summary row is where a customer decides whether
   to trust the number, and --ink-muted was too light for that job.
   ========================================================================== */

.ak-line__price,
.ak-summary__rows dt,
.ak-summary__rows dd,
.ak-summary__total,
.ak-summary__total strong {
  font-family: var(--font-body);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.ak-line__price strong { font-size: 16px; font-weight: 600; color: var(--ink); }
.ak-line__price small { font-size: 12px; color: var(--ink-soft); }

.ak-summary__rows dt { color: var(--ink-soft); font-size: 14px; }
.ak-summary__rows dd { color: var(--ink); font-size: 14px; font-weight: 500; }

.ak-summary__total,
.ak-summary__total strong {
  font-size: 20px;
  font-weight: 600;
  color: var(--maroon);
}

.ak-price--old, .ak-card__price del {
  font-variant-numeric: lining-nums tabular-nums;
}


/* ==========================================================================
   15 · MENU LINK COLOUR — no media query, no inheritance
   --------------------------------------------------------------------------
   The category names were still invisible after v5, and the reason is the
   same one that broke the footer: my rule was inside
   `@media (max-width: 992px)`. If your phone browser is in "Desktop site"
   mode it reports roughly 980px — close enough that the drawer appears, but
   any rule I scoped more tightly than 992 can silently not run.

   So these rules carry no breakpoint at all. They are correct in both places:
   on a laptop the dropdown is a white panel and dark text is right there too.

   The underlying cause is `a { color: inherit }` on line 50 of style.css.
   Every link in the site takes its colour from whatever contains it, so a
   single wrong colour anywhere up the tree turns a whole menu invisible.
   Nothing in the nav inherits any more — each level states its own.
   ========================================================================== */

.ak-header .ak-nav .ak-nav__list,
.ak-header .ak-nav .ak-nav__list li {
  color: var(--ink);
}

.ak-header .ak-nav .ak-nav__list > li > a {
  color: var(--ink);
}

.ak-header .ak-nav .ak-nav__list > li > a:hover,
.ak-header .ak-nav .ak-nav__list > li.is-active > a {
  color: var(--maroon);
}

/* The category list itself. Opaque background AND an explicit colour, so
   there is no combination of inherited values that can leave these unreadable
   against what is behind them. */
.ak-header .ak-nav .ak-nav__list .ak-dropdown {
  background: #FFFFFF;
  color: var(--ink);
}

.ak-header .ak-nav .ak-nav__list .ak-dropdown li,
.ak-header .ak-nav .ak-nav__list .ak-dropdown li a,
.ak-header .ak-nav .ak-nav__list .ak-dropdown a:link,
.ak-header .ak-nav .ak-nav__list .ak-dropdown a:visited {
  color: #1C1512;
  background: transparent;
  opacity: 1;
}

.ak-header .ak-nav .ak-nav__list .ak-dropdown a:hover,
.ak-header .ak-nav .ak-nav__list .ak-dropdown a:active,
.ak-header .ak-nav .ak-nav__list .ak-dropdown a:focus {
  color: var(--maroon);
  background: var(--cream);
}

/* Inside the drawer the list is flat against the drawer, not a floating
   panel, so it loses the white card and keeps only the indent rule. */
@media (max-width: 1100px) {
  .ak-header .ak-nav .ak-nav__list .ak-dropdown {
    background: transparent;
    border-left: 2px solid var(--line);
    margin: 4px 0 6px 12px;
    padding: 2px 0 4px;
  }
  .ak-header .ak-nav .ak-nav__list .ak-dropdown a {
    display: block;
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13.5px;
    letter-spacing: .03em;
    text-transform: none;
    color: #1C1512;
  }
}


/* ==========================================================================
   16 · CATEGORY LIST IN THE DRAWER — stop depending on anything
   --------------------------------------------------------------------------
   Three rounds on this, so this version removes every dependency rather than
   correcting one more of them.

   In style.css the submenu is `display: none` and only appears when JavaScript
   adds `.is-open` to its parent on tap. That means the list was relying on a
   JS click handler firing, on a class landing on the right element, AND on an
   inherited colour being readable. Any one of those failing looks identical
   from the outside: you tap Categories and nothing you can read appears.

   So inside the drawer the categories are simply always open. No tap, no
   class, no JS. A drawer is a vertical list with room to spare — there is
   nothing to collapse for.
   ========================================================================== */

@media (max-width: 1100px) {

  /* Always rendered, regardless of .is-open */
  .ak-header .ak-nav .ak-nav__list > li > .ak-dropdown,
  .ak-header .ak-nav .ak-nav__list > li.is-open > .ak-dropdown {
    display: block;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 2px 0 8px 10px;
    padding: 2px 0 4px;
    background: transparent;
    min-width: 0;
  }

  /* Literal colour values, not variables — nothing to inherit, nothing to
     override, and no way for this to come out white. */
  .ak-header .ak-nav .ak-nav__list > li > .ak-dropdown > li > a {
    display: block;
    color: #1C1512;
    background: transparent;
    opacity: 1;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
    min-height: 42px;
    padding: 10px 12px;
    border: 0;
  }

  .ak-header .ak-nav .ak-nav__list > li > .ak-dropdown > li > a:hover,
  .ak-header .ak-nav .ak-nav__list > li > .ak-dropdown > li > a:active {
    color: #6B0F1A;
    background: #F5EDE2;
  }

  /* The chevron on Categories no longer means anything, so it goes. */
  .ak-header .ak-nav .ak-nav__list > li > a .bi-chevron-down { display: none; }
}


/* ==========================================================================
   17 · FOOTER LOGO
   --------------------------------------------------------------------------
   style.css line 308:  filter: brightness(0) invert(1)

   That filter crushes every pixel to black and then inverts it to white. It
   is the standard trick for putting a dark, TRANSPARENT logo onto a dark
   background — and it works only if the file is transparent.

   Your logo is a .jpg. A JPEG cannot be transparent; it carries its own white
   rectangle. So brightness(0) turned the whole rectangle black, invert(1)
   turned the whole rectangle white, and what you got was a solid white block
   with the artwork erased inside it. Same filter, same result, in the admin
   sidebar.

   The filter is gone. The logo now sits on a white plate — which is what a
   logo drawn for a white page needs on a maroon footer. Upload a logo made
   for dark backgrounds in Settings > General and the plate disappears
   automatically.
   ========================================================================== */

.ak-footer__logo img {
  filter: none;
  opacity: 1;
  height: 46px;
  width: auto;
  display: block;
  margin-bottom: 0;
}

.ak-footer__logo {
  margin-bottom: 16px;
}

.ak-footer__logo.is-plate {
  display: inline-block;
  background: #FFFFFF;
  padding: 9px 14px;
  border-radius: 3px;
}

.ak-footer__logo.is-plate img { mix-blend-mode: multiply; }