/* Rajpal, Narayangaon — brand-level overrides that sit on top of the theme stylesheet. */

/* The theme spins the logo on hover and on scroll-up. That reads as a flourish on a
   symmetrical lotus glyph; on a wordmark lockup it just turns the name on its side. */
.header-logo__image,
.header-logo:hover .header-logo__image {
  transform: none !important;
}

/* The header row was sized around a 36px glyph; the lockup needs the room. */
.header-logo__image-container { max-height: none; }

/* On mobile the row collapses to exactly the logo height, leaving it flush against the
   top edge — the lockup needs a little air. */
@media screen and (max-width: 749px) {
  .header-logo { padding-block: 8px; }
}

/* ── white behind every logo ──────────────────────────────────────────────────
   The lockup is a solid red plate, and the footer band is now that same red, so without
   a white ground behind it the footer logo simply disappears. Wherever the lockup appears
   the white runs edge to edge as a band, never a panel with visible corners sitting on
   top of the section colour.

   The band is drawn by a pseudo-element rather than by widening the logo block itself:
   it is out of flow, so nothing around it shifts. `left: 50%` + `translateX(-50%)` on a
   100vw box centres it on the viewport no matter how much padding the ancestors add. */
/* The bands must never create a horizontal scrollbar. `body` alone is not enough here: the
   footer band's 100vw box escapes it at 390 and leaves 2px of scroll, so `html` clips too. */
html, body { overflow-x: clip; }

.shopify-block.icon-block:has(img[src*="Secondary_Logo"]) {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.shopify-block.icon-block:has(img[src*="Secondary_Logo"])::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: #fff;
  z-index: 0;
}

.shopify-block.icon-block:has(img[src*="Secondary_Logo"]) > * {
  position: relative;
  z-index: 1;
}

.shopify-block.icon-block:has(img[src*="Secondary_Logo"]) { padding-block: 30px; }

/* The footer section's red `.section-background` starts at the top of `.footer-content`,
   but the logo block — and with it the white band its ::before draws — starts one
   `--padding-block-start` (32.4px at 1440, 20px at 390) lower down. That left a detached
   red stripe between the white page and the white logo band. The logo block is the first
   child of `.footer-content` and carries 30px of its own padding-block, so zeroing the
   footer's leading pad closes the stripe without crowding the lockup. The red below the
   logo band is the real footer and is untouched. `!important` because the theme writes
   `--padding-block-start` into the element's inline `style` attribute. */
.footer-content { --padding-block-start: 0px !important; }

/* The ornament between the intro and Shop by Counter is dropped — the header and footer
   already carry the logo, and it left a white gap mid-page. */
.lcs__logo-wrap { display: none; }

@media screen and (max-width: 749px) {
  .shopify-block.icon-block:has(img[src*="Secondary_Logo"]) { padding-block: 22px; }
}

/* `.footer-content` carries `content-visibility: auto`, which implies paint containment
   and clips the band back to the page-width gutter. */
.footer-content { content-visibility: visible !important; contain: none !important; }

/* Tagline under the header lockup. The logo artwork carries the name; this carries the line. */
.header-logo { flex-direction: column; gap: 4px; }
.header-logo__caption {
  display: block;
  font-family: var(--font-body--family, system-ui, sans-serif);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a8151b;
  white-space: nowrap;
  line-height: 1;
}
@media screen and (max-width: 749px) {
  /* This caption is four words long, so at 390 it, not the logo, sets the width of the
     header's centre column — and two pixels of overrun is a horizontal scrollbar. */
  .header-logo__caption { font-size: 6.5px; letter-spacing: .02em; }
}

/* The weave cards and the footer weave row carry a single anchor in their caption; this
   stretches its hit area over the whole card so the image is clickable too. */
.focus-carousel__card-media { position: relative; }
.focus-carousel__card-title a,
[class*="ai-city-grid__name"] a { color: inherit; text-decoration: none; }
.focus-carousel__card-title a::after { content: ""; position: absolute; inset: 0; }
.focus-carousel__card-title a:hover,
[class*="ai-city-grid__name"] a:hover { color: #e31e25; }


/* ── WhatsApp affordance: removed ─────────────────────────────────────────────
   This client has no WhatsApp channel. The theme still ships the Superlemon widget —
   a fixed green bubble bottom-right on all 57 pages — plus an injected transparent
   anchor sitting immediately before it as a sibling, which is the actual click target
   (`<a href="contact.html" aria-label="Chat on WhatsApp" style="position:fixed;...">`).
   Both belong to the same affordance and both go; at 390 they were also covering a
   product card and the "Other branches" tile. Exactly one of each per page, so the
   aria-label is a safe handle. */
#wa-chat-btn-root,
a[aria-label="Chat on WhatsApp"] { display: none !important; }

/* ── footer legal text: WCAG AA ───────────────────────────────────────────────
   "© 2026 Rajpal" and "Terms and Policies" were rgba(255,255,255,.6) on #e31e25 —
   2.41:1. Pure white on this red is only 4.69:1, so AA (4.5:1) leaves almost no room
   to dim: .98 alpha measures 4.55:1 and is the lowest that clears the bar with margin.
   The line still reads as secondary through its 12px size against the 16px body text. */
.footer-utilities__group-copyright,
.footer-utilities__group-copyright .footer-utilities__text,
.footer-utilities__group-copyright a,
.policy-list-trigger { color: rgb(255 255 255 / .98); }

/* ── cart machinery: removed ──────────────────────────────────────────────────
   Nothing on this site is purchasable — no prices are published and every CTA is
   "visit or call the store". `cart-drawer-component` wraps both the header cart
   trigger and the "Your cart is empty" drawer, so one rule takes both; the carousel
   cards' bag button lives in `quick-add-component`, with `quick-add-dialog` as its
   modal. Search and account are untouched. */
cart-drawer-component,
quick-add-component,
quick-add-dialog { display: none !important; }

/* ── the branch row sets the footer's width at 390 ────────────────────────────
   "NARAYANGAON SANGAMNER AHILYANAGAR" has a min-content width of 334.6px inside a
   330px .footer-content, so the grid track overflows, the logo block's centre is
   pushed 2.3px right, and the 100vw white band lands 2px off — a red sliver down
   its left edge. Shrinking the row at 390 is the fix; widening the band is not,
   because a 200vw box balloons the document's content box. */
@media screen and (max-width: 480px) {
  /* the theme sets these from a generated <style> block, so !important is what wins */
  [class*="ai-city-grid__name"] {
    font-size: 10px !important;
    letter-spacing: .01em !important;
    white-space: nowrap;
  }
  [class*="ai-city-grid__container"] { column-gap: 6px !important; }
  [class*="ai-city-grid__item"] { padding-inline: 0 !important; }
}

/* ── scrim on the two photographic section grounds ───────────────────────────
   These headings are white over the shop-floor photograph, which is bright and
   busy across its whole width, so the theme's own gradient is not enough to keep
   the text legible. */
.product-carousel-video-hero,
.product-carousel-video-media { position: relative; }
.product-carousel-video-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .38) 42%, rgb(0 0 0 / .10) 72%, transparent 100%);
  pointer-events: none;
}