/*
Theme Name: Ryolite
Theme URI: https://ryolite.in
Author: Ryolite Industries
Description: Custom mobile-first WooCommerce theme for Ryolite. High-density Indian D2C layout, Ryolite branding. Built for speed: no page builder, no jQuery UI plugins, single stylesheet.
Version: 0.1.0-phase1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: ryolite
*/

/* ================= 1. RESET ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

/* ================= 2. DESIGN TOKENS ================= */
:root{
  /* brand — measured from logo, 2026-08-04 */
  --ry-black: #000000;
  --ry-red: #DF222A;
  --ry-red-dark: #B81920;
  /* Cart action pair. Yellow always carries --ry-ink text: white on #F5C518 is
     1.8:1, dark ink is 10.7:1. */
  --ry-green: #1E7A5A;
  --ry-green-dark: #165C44;
  --ry-yellow: #F5C518;
  --ry-yellow-dark: #DDB113;
  --ry-white: #FFFFFF;

  /* neutrals */
  --ry-ink: #1A1A1A;
  --ry-gray-900: #222222;
  --ry-gray-700: #4B4B4B;
  --ry-gray-500: #6B6B6B; /* darkened from #7A7A7A to clear WCAG AA (4.5:1) on white */
  /* Struck MRP on the card panel. The audit's #B2B9BF measures 2.2:1 on #FAFAFA
     and cannot ship; this is the lightest grey that still clears 4.5:1 there. */
  --ry-gray-400: #737373;
  --ry-gray-300: #D9D9D9;
  --ry-gray-100: #F4F4F4;
  --ry-beam: #F5C518;   /* torch-beam yellow, used by the deal strip */
  --ry-success: #1E7A5A; /* darkened so discount text clears WCAG AA on white */

  /* type */
  --ry-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ry-font-display: ui-rounded, 'SF Pro Rounded', 'Segoe UI Rounded', 'Nunito', var(--ry-font);

  /* ---- SPACING SCALE — every padding/margin/gap comes from here.
         4px base; nothing off-grid anywhere in this file. ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;

  /* ---- ICON SCALE — four sizes only ---- */
  --icon-xs: 12px;  /* chevrons */
  --icon-sm: 16px;  /* inline / search */
  --icon-md: 20px;  /* header actions */
  --icon-lg: 24px;  /* feature + trust icons */

  /* ---- RADIUS ---- */
  --ry-radius-sm: 4px;
  --ry-radius-btn: 10px;   /* house rectangular button radius */
  --ry-radius: 12px;
  --ry-radius-lg: 20px;
  --ry-radius-pill: 999px;
  /* Mobile hero only. Both values are measured off the reference site (audit G6), which is
     why they sit off the 4px grid — matching the reference beats the grid here. */
  --ry-radius-hero: 16px;
  --hero-inset: 10px;

  /* ---- PRODUCT CARD ----
     Measured off the reference site (audit G1, G4, M4, M5). The strip height, the swatch
     overlap and the panel radius are reference values, which is why three of
     them sit off the 4px grid — matching the card beats the grid here. */
  --ry-card-base: #E3E3E3;        /* shows as the hairline seam around the panel */
  --ry-card-panel: #FAFAFA;
  --ry-card-panel-line: #ECF0F4;
  --ry-card-panel-h: 100px;
  --ry-card-strip: #FCC50B;
  --ry-card-strip-h: 21px;
  --ry-card-swatch-line: #D0D9DE;
  --ry-card-sw: 12px;
  --ry-card-sw-lap: -6px;         /* circles overlap by exactly half */
  --ry-ribbon-bg: #1A2024;
  --ry-ink-price: #1A2024;
  --ry-radius-card: 10px;

  /* ---- FILTER PILLS (audit M1) ----
     30px pill at radius 17px on #ECF0F4 — reference values, so two of the
     three sit off the 4px grid. */
  --ry-pill-h: 30px;
  --ry-pill-r: 17px;
  --ry-pill-bg: #ECF0F4;

  /* ---- MOBILE BOTTOM NAV (audit M2) ---- */
  --ry-bnav-h: 60px;
  --ry-bnav-icon: 28px;
  /* Measured height of the PDP sticky buy card (price row + 44px action pair).
     The page has to reserve this on top of the nav or the footer's last rows
     end up under it at maximum scroll. */
  --ry-sticky-h: 80px;

  /* ---- PDP ACTION PAIR (audit G16/G34, M6) ----
     One height for every pressable control on the product page. the reference site's pair is
     40px; 44px is this repo's tap-target floor, so 44 wins and the 46/48px
     one-offs are gone. Everything else (radius, type, equal halves) is the reference site's. */
  --ry-h-action: 44px;
  /* Buy Now green, measured off the reference (#12B985) with BLACK label text —
     white on it is 2.0:1, black is 10.4:1. */
  --ry-buy: #12B985;
  --ry-buy-dark: #0FA274;
  /* Floating sticky-buy card border, measured off the reference. */
  --ry-sticky-line: #D6E4FA;

  /* ---- OFFER CAPSULES (audit G17) ----
     35px radius and 29px height are reference values, hence off the 4px grid.
     Label uses --ry-red-dark: --ry-red on this tint is 4.37:1, just under AA. */
  --ry-offer-bg: #FCF3F3;
  --ry-cap-h: 29px;
  --ry-cap-r: 35px;

  /* ---- PDP GALLERY RAIL (audit G31) ---- */
  --ry-rail-w: 68px;

  /* ---- BANNER / MEDIA ASPECT RATIOS ---- */
  --ar-tile: 1 / 1;        /* product cards, category tiles, gallery */
  --ar-hero-mobile: 8 / 5;
  --ar-hero-desktop: 12 / 5;  /* matches the reference site's live desktop hero: 1275x533px measured 2026-08-06 */
  --ar-wide: 16 / 9;       /* promo + lifestyle blocks */
  /* Explore promo banner. Desktop is the measured artwork (3200x324 = 9.877:1,
     audit M7). Mobile is that section's measured 142px height minus the 40.8px
     heading row and its 12px margin = 89px over the 343px container inner. */
  --ar-promo: 3200 / 324;
  --ar-promo-mobile: 343 / 89;
  --ry-radius-promo: 10px;

  /* ---- SECTION RHYTHM ---- */
  --section-y: var(--sp-8);
  --card-gap: var(--sp-3);
  /* Exactly 3 full cards fit the carousel viewport (no partial 4th peeking); rest still reachable by scroll. */
  --card-w: calc((100vw - (var(--ry-gap) * 2) - (var(--card-gap) * 2)) / 3);

  /* layout */
  --ry-container: 1280px;
  --ry-btn-full-max: 380px;  /* ceiling for any opt-in full-width CTA */
  --ry-header-h: 48px; /* 15% shorter than the original 56px; logo/text sizes untouched */
  /* header's colour before scroll — the same dark navy as the battery banner's
     own backdrop (gen-banners.php: ry_banner_palette('battery')['top'], rgb(14,26,46));
     keep the two in sync if that palette ever changes. Scrolled (white) state is unaffected. */
  --ry-header-rest-bg: #0E1A2E;
  --ry-announce-h: 32px;
  --ry-gap: var(--sp-4);

  /* motion */
  --ry-ease: cubic-bezier(.4,0,.2,1);
  --ry-fast: 160ms;
}

/* ================= 3. FONT (self-hosted, 1 file) ================= */
@font-face{
  font-family: 'Inter';
  src: url('assets/fonts/inter-variable.woff2') format('woff2-variations'),
       url('assets/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ================= 4. BASE ================= */
html, body { background: var(--ry-white); }
/*
 * Three layers, each covering a hole the previous one measurably left open —
 * all verified on a real iPhone (440px viewport, Safari; Chrome-on-iOS is the
 * same WebKit engine) after body itself measured a clean 440/440:
 *
 * 1. html overflow-x:hidden — propagates to the viewport, so engines that
 *    honour it stop sideways panning. clip alone did NOT: iOS never applied it
 *    to the viewport and the document still panned 417px, with the extra width
 *    coming from the snap carousels' content, which WebKit wrongly counts into
 *    the root's scrollable area even though every carousel clips fine.
 * 2. body overflow-x:clip — catches stray wide normal-flow content. clip, not
 *    hidden: hidden would make body a scroll container and break the
 *    position:sticky PDP gallery and filter rail.
 * 3. touch-action pan-y pinch-zoom — the iOS-proof layer: the horizontal pan
 *    gesture is refused at the document level, so there is nothing left to
 *    chain to the buggy root scroller. Inner carousels keep swiping because a
 *    gesture's touch-action chain stops at the nearest scroll container that
 *    can handle it (the carousel itself), never reaching html.
 *
 * None of this contains the off-canvas drawers — a fixed element's containing
 * block is the viewport, so root overflow cannot clip it; the cart drawer
 * handles itself with display:none.
 */
html{ overflow-x: hidden; overscroll-behavior-x: none; }
body{ overflow-x: clip; }
html, body{ touch-action: pan-y pinch-zoom; }

/*
 * Layer 4, again from the phone: touch-action cannot help when the swipe
 * STARTS on a horizontal carousel — the gesture legitimately belongs to it.
 * But once the carousel hit its edge, iOS handed the remainder to the root
 * scroller and the whole page walked sideways. contain ends the gesture at
 * the carousel's own edge instead of chaining it upward.
 */
.ry-hero-track, .ry-cats, .ry-carousel, .ry-pills,
.ry-gallery-main, .ry-gallery-thumbs{
  overscroll-behavior-x: contain;
  /* Layer 5 (2026-08-10, phone diagnostic "html=840 body=440, culprit main#ry-main"):
     WebKit counts snap-carousel clipped content into the ROOT's scrollable width
     even through body's overflow-x:clip. paint containment clips it at the
     carousel itself, so the root never becomes horizontally scrollable. */
  contain: paint;
}
/* Same belt at the page wrapper — clip (not hidden) keeps the sticky PDP rail working. */
#ry-main{ overflow-x: clip; }

body{
  font-family: var(--ry-font);
  color: var(--ry-ink);
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  padding-top: calc(var(--ry-announce-h) + var(--ry-header-h));
}
body.ry-scroll-lock { overflow: hidden; }
/* No announcement bar → header sits flush at the top. */
body.ry-no-announce{ padding-top: var(--ry-header-h); }
body.ry-no-announce .ry-header{ top:0; }
body.ry-no-announce .ry-mega{ top: var(--ry-header-h); }
body.ry-no-announce .ry-shop-toolbar,
body.ry-no-announce .ry-filters,
body.ry-no-announce .ry-gallery{ top: calc(var(--ry-header-h) + var(--sp-4)); }
h1,h2,h3,h4{ font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
h2{ font-size: 14px; }
.ry-container{ max-width: var(--ry-container); margin-inline: auto; padding-inline: var(--ry-gap); }
.ry-skip-link{ position:absolute; left:-9999px; top:0; background:var(--ry-black); color:var(--ry-white); padding: var(--sp-3) var(--sp-4); z-index:999; }
.ry-skip-link:focus{ left:8px; top:8px; }
/* Visually hidden. .screen-reader-text is WordPress/WooCommerce's own class —
   it must be defined here because we dequeue WooCommerce's stylesheets. */
.ry-sr-only,
.screen-reader-text,
.woocommerce-form__label-for-checkbox .screen-reader-text{
  position:absolute; width:1px; height:1px; padding: 0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.ry-sr-only:focus, .screen-reader-text:focus{
  position:static; width:auto; height:auto; margin: 0; clip:auto; white-space:normal;
}
.ry-price, .ry-card-price, .woocommerce-Price-amount{ font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; letter-spacing:-0.01em; }
img[loading="lazy"]{ background: var(--ry-gray-100); }

/* section rhythm */
.ry-section{ padding-block: var(--section-y); }
.ry-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-3); margin-bottom: 0; }
/* One rule for every heading built by ry_brand_heading(): 24px/28.8px at BOTH
   breakpoints, sentence case, w500 lead-in + w700 last word. */
.ry-section-head h2,
.ry-pdp-section > h2,
.ry-newsletter h2{
  font-family:var(--ry-font-display); font-size:24px; line-height:28.8px;
  font-weight:500; text-transform:none; letter-spacing:0;
  margin: 0 0 var(--sp-3);
}
/* 14px/w700 at both breakpoints, 3px from its circled arrow — reference values
   (audit G26/G27), which is why the gap is off the 4px grid. */
.ry-view-all{
  position:relative; display:inline-flex; align-items:center; gap:3px;
  font-size:14px; font-weight:700; color: var(--ry-red); white-space:nowrap;
}
.ry-view-all svg{ flex:0 0 14px; width:14px; height:14px; }
/* The link is 21px tall by design; the tap target is grown around it instead of
   padding the box, which would push the heading row out of alignment. */
.ry-view-all::before{ content:""; position:absolute; inset:calc(var(--sp-3) * -1) 0; }
.ry-view-all:focus-visible{ outline:2px solid var(--ry-red); outline-offset:3px; }

/* ================= 5. ANNOUNCEMENT BAR ================= */
.ry-announce{
  position: fixed; top:0; left:0; right:0; z-index: 60;
  height: var(--ry-announce-h);
  background: #F1F3F6; color: var(--ry-ink);
  display:flex; align-items:center; overflow:hidden;
  font-size: 11px; font-weight: 400; letter-spacing:0;
}
.ry-announce ul{ position:relative; width:100%; height:100%; }
.ry-announce li{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap: var(--sp-2); text-align:center; padding-inline: var(--sp-3);
}
.ry-announce li strong{ font-weight:800; color: var(--ry-ink); }
.ry-announce li a{ text-decoration:underline; text-underline-offset:2px; }

/* One message: no rotation, always visible. */
.ry-announce--1 li{ opacity:1; }

/* Two messages: 5s each. */
.ry-announce--2 li{ opacity:0; animation: ry-announce-2 10s infinite; }
.ry-announce--2 li:nth-child(2){ animation-delay: 5s; }
@keyframes ry-announce-2{
  0%{ opacity:0; transform:translateY(6px); }
  3%, 47%{ opacity:1; transform:translateY(0); }
  50%, 100%{ opacity:0; transform:translateY(-6px); }
}

/* Three messages: 5s each. */
.ry-announce--3 li{ opacity:0; animation: ry-announce-3 15s infinite; }
.ry-announce--3 li:nth-child(2){ animation-delay: 5s; }
.ry-announce--3 li:nth-child(3){ animation-delay: 10s; }
@keyframes ry-announce-3{
  0%{ opacity:0; transform:translateY(6px); }
  2%, 31%{ opacity:1; transform:translateY(0); }
  33%, 100%{ opacity:0; transform:translateY(-6px); }
}

/* Respect reduced-motion: show only the first message, no animation. */
@media (prefers-reduced-motion: reduce){
  .ry-announce li{ animation:none !important; opacity:0; }
  .ry-announce li:first-child{ opacity:1; }
}

/* ================= 6. HEADER ================= */
.ry-header{
  position: fixed; top: var(--ry-announce-h); left:0; right:0; z-index:55;
  height: var(--ry-header-h);
  background: var(--ry-header-rest-bg); color: var(--ry-white);
  display:flex; align-items:center;
  transition: background var(--ry-fast) var(--ry-ease), box-shadow var(--ry-fast) var(--ry-ease);
}
/* Header is coloured at rest and flips to white once you scroll — the white
   (scrolled) state stays untouched, only the resting background changes. */
.ry-header.is-scrolled{
  background: var(--ry-white); color: var(--ry-ink);
  box-shadow:0 1px 0 var(--ry-gray-300), 0 4px 12px rgba(0,0,0,.06);
}

/* Both logos ship in the markup; CSS shows whichever suits the current state,
   so the swap costs no JS and never flashes the wrong one. */
.ry-logo img{ height:100%; width:auto; }
.ry-logo .ry-logo--onDark{ display:block; }
.ry-logo .ry-logo--onLight{
  display:none; height:100%; aspect-ratio:480/181;
  background-image:var(--logo-light); background-size:contain;
  background-repeat:no-repeat; background-position:left center;
}
.ry-header.is-scrolled .ry-logo--onDark{ display:none; }
.ry-header.is-scrolled .ry-logo--onLight{ display:block; }
.ry-header-inner{ display:flex; align-items:center; gap: var(--sp-3); width:100%; }
.ry-logo{ display:flex; align-items:center; height:35px; flex-shrink:0; }
.ry-logo img{ height:100%; width:auto; }
.ry-header-spacer{ flex:1; }
.ry-icon-btn{ position:relative; width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:50%; }
.ry-icon-btn svg{ width:var(--icon-md); height:var(--icon-md); }
.ry-badge{
  position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding: 0 var(--sp-1);
  background: var(--ry-red); color:var(--ry-white); border-radius:var(--ry-radius-pill);
  font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
/* hamburger sits tight to the edge; half the usual button padding */
.ry-hamburger{ display:flex; width:28px; margin-left:calc(var(--sp-1) * -1); }
.ry-search-wrap{ display:none; }
.ry-search-desktop{ display:none; }
.ry-search-toggle{ display:flex; }

/* ---- search suggestions (shared by desktop dropdown + mobile sheet) ---- */
.ry-suggest{
  background:var(--ry-white); border:1px solid var(--ry-gray-300);
  border-radius:var(--ry-radius); overflow:hidden;
}
.ry-suggest a{ display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-bottom:1px solid var(--ry-gray-100); }
.ry-suggest a:last-child{ border-bottom:none; }
.ry-suggest a:hover, .ry-suggest a:focus-visible{ background:var(--ry-gray-100); }
.ry-suggest img{ width:44px; height:44px; object-fit:cover; border-radius:var(--ry-radius-sm); background:var(--ry-gray-100); flex:0 0 44px; }
.ry-suggest-title{ font-size:12.5px; font-weight:600; line-height:1.3; }
.ry-suggest-price{ font-size:11.5px; color:var(--ry-gray-500); }
.ry-suggest-more{ display:block; text-align:center; padding: var(--sp-3); font-size:12px; font-weight:800; text-transform:uppercase; color:var(--ry-red); }
.ry-suggest-empty{ padding: var(--sp-4) var(--sp-3); font-size:12.5px; color:var(--ry-gray-500); text-align:center; }

/* ---- mobile full-screen search ---- */
.ry-search-sheet{
  position:fixed; inset:0; z-index:85; background:var(--ry-white);
  padding:var(--sp-3) var(--ry-gap); display:flex; flex-direction:column; gap: var(--sp-3);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--ry-fast) var(--ry-ease), transform var(--ry-fast) var(--ry-ease), visibility var(--ry-fast);
}
.ry-search-sheet.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.ry-search-sheet-head{ display:flex; align-items:center; gap: var(--sp-3); }
.ry-search-mobile{
  flex:1; display:flex; align-items:center; gap: var(--sp-2); height:42px;
  border:1.5px solid var(--ry-gray-300); border-radius:var(--ry-radius-pill); padding-inline: var(--sp-4);
}
.ry-search-mobile svg{ width:var(--icon-sm); height:var(--icon-sm); flex:0 0 16px; color:var(--ry-gray-500); }
.ry-search-mobile input{ flex:1; border:none; outline:none; background:transparent; font-size:14px; min-width:0; }
.ry-search-cancel{ font-size:13px; font-weight:700; color:var(--ry-red); flex:0 0 auto; }
.ry-search-sheet .ry-suggest{ border:none; overflow-y:auto; }

/* desktop primary nav — hidden on mobile */
.ry-nav-desktop{ display:none; }

/* ================= 7. CATEGORY CIRCLES (mobile-prominent) ================= */
/* Sits below the fixed header in normal flow — scrolls away like the reference site's. */
.ry-cats{
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  display:flex; gap: var(--sp-5); padding: var(--sp-4) var(--ry-gap) var(--sp-3);
}
.ry-cats::-webkit-scrollbar{ display:none; }
.ry-cat-item{ flex:0 0 auto; width:64px; display:flex; flex-direction:column; align-items:center; gap: var(--sp-2); text-align:center; }
/* Standalone so it also applies inside the desktop mega-menu, not just here. */
.ry-cat-circle{
  width:60px; height:60px; flex:0 0 60px; border-radius:50%; overflow:hidden;
  background:var(--ry-gray-100); border:1px solid var(--ry-gray-300);
  display:flex; align-items:center; justify-content:center;
}
.ry-cat-circle img{ width:100%; height:100%; object-fit:cover; }
.ry-cat-item span{ font-size:10.5px; font-weight:600; line-height:1.2; }

/* ================= 8. MOBILE MENU DRAWER ================= */
.ry-drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:70;
  opacity:0; pointer-events:none; transition: opacity var(--ry-fast) var(--ry-ease);
}
.ry-drawer-overlay.is-open{ opacity:1; pointer-events:auto; }

.ry-mobile-nav{
  position:fixed; top:0; bottom:0; left:0; width:82%; max-width:340px; z-index:80;
  background:var(--ry-white); transform: translateX(-100%);
  transition: transform var(--ry-fast) var(--ry-ease);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.ry-mobile-nav.is-open{ transform: translateX(0); }
.ry-mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; padding: var(--sp-4); border-bottom:1px solid var(--ry-gray-300); }
.ry-mobile-nav-head img{ height:24px; width:auto; }
.ry-mnav-group{ border-bottom:1px solid var(--ry-gray-100); }
.ry-mnav-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; padding: var(--sp-4); font-weight:700; font-size:13px; text-transform:uppercase; }
.ry-mnav-toggle svg{ width:var(--icon-xs); height:var(--icon-xs); transition:transform var(--ry-fast) var(--ry-ease); }
.ry-mnav-group.is-open .ry-mnav-toggle svg{ transform:rotate(180deg); }
.ry-mnav-sub{ max-height:0; overflow:hidden; transition:max-height var(--ry-fast) var(--ry-ease); background:var(--ry-gray-100); }
.ry-mnav-group.is-open .ry-mnav-sub{ max-height:1000px; }
.ry-mnav-sub li a{ display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-8); font-size:12.5px; }
.ry-mnav-sub li img{ width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--ry-white); }
.ry-mnav-flat a{ display:block; padding: var(--sp-4); font-weight:700; font-size:13px; text-transform:uppercase; }

/* ================= 9. MINI CART DRAWER ================= */
/*
 * Closed, this panel must not exist in layout at all — display:none is the only
 * state that achieves it.
 *
 * Measured on a real Android Chrome (440px viewport, dpr 3): parked off-canvas
 * right at 440→820, it pushed html.scrollWidth to 840 while body.scrollWidth
 * stayed a clean 440, and the whole homepage panned 284px sideways. Neither
 * transform alone, nor visibility:hidden, nor overflow-x:clip on html/body
 * removed it — a fixed element's containing block is the viewport, so ancestor
 * overflow cannot clip it, and Chrome still counts a visibility:hidden fixed box
 * in the document's scrollable width.
 *
 * allow-discrete + @starting-style keep the slide where the browser supports
 * them; elsewhere the drawer simply appears, which is the right trade against a
 * homepage that scrolls sideways.
 */
.ry-cart-drawer{
  position:fixed; top:0; bottom:0; right:0; width:88%; max-width:380px; z-index:80;
  background:var(--ry-white); transform: translateX(100%);
  display:none; flex-direction:column;
  transition: transform var(--ry-fast) var(--ry-ease), display var(--ry-fast) allow-discrete;
}
/* No @starting-style here: clean-css cannot parse it, drops the block AND
   corrupts the rule that follows. The drawer therefore appears rather than
   slides in — the slide is not worth a broken stylesheet. */
.ry-cart-drawer.is-open{ display:flex; transform:translateX(0); }
.ry-cart-head{ display:flex; align-items:center; justify-content:space-between; padding: var(--sp-4); border-bottom:1px solid var(--ry-gray-300); font-weight:800; text-transform:uppercase; font-size:13px; }
.ry-cart-body{ flex:1; overflow-y:auto; padding: var(--sp-4); }
.ry-cart-foot{ padding: var(--sp-4); border-top:1px solid var(--ry-gray-300); }
.ry-cart-empty{ text-align:center; padding: var(--sp-10) var(--sp-4); color:var(--ry-gray-500); font-size:13px; }
.ry-btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2);
  height:44px; width:auto; padding-inline: var(--sp-5);
  border-radius:var(--ry-radius-btn); font-weight:600; font-size:16px;
  text-transform:capitalize; letter-spacing:-0.64px;
  transition: transform var(--ry-fast) var(--ry-ease), background var(--ry-fast) var(--ry-ease);
}
.ry-btn:active{ transform: scale(.97); }
/* Full width is opt-in, never the default (a stretched CTA read 1232px wide on
   desktop). Woo-rendered CTAs that want it join this rule by selector. */
.ry-btn--full,
.ry-wc-wrap .wc-proceed-to-checkout .checkout-button,
.ry-wc-wrap #place_order{
  display:flex; width:100%; max-width:var(--ry-btn-full-max); margin-inline:auto;
}
/* Two fills only: red = the commit action on a page, outline = everything else. */
.ry-btn-primary{ background:var(--ry-red); color:var(--ry-white); }
.ry-btn-primary:hover{ background:var(--ry-red-dark); }
.ry-btn-secondary,
.ry-btn-outline{ background:transparent; border:1.5px solid var(--ry-ink); color:var(--ry-ink); }
.ry-btn-secondary:hover,
.ry-btn-outline:hover{ background:var(--ry-gray-100); }

/* WooCommerce mini-cart widget markup (rendered by woocommerce_mini_cart) */
/* WooCommerce mini-cart markup is: remove-link, product-link (img + name), quantity.
   Lay it out as image | name, with the quantity on its own line under the name. */
.widget_shopping_cart_content .cart_list{ display:flex; flex-direction:column; gap: var(--sp-4); }
.widget_shopping_cart_content .cart_list li{
  display:flex; flex-wrap:wrap; gap: var(--sp-1) var(--sp-3); position:relative; padding-right: var(--sp-6);
}
.widget_shopping_cart_content .cart_list li > a:not(.remove){
  display:flex; align-items:center; gap: var(--sp-3); flex:1 1 100%;
  font-size:12.5px; font-weight:600; line-height:1.35;
}
.widget_shopping_cart_content .cart_list img{
  width:56px; height:56px; flex:0 0 56px; object-fit:cover;
  border-radius:var(--ry-radius-sm); background:var(--ry-gray-100); border:1px solid var(--ry-gray-300);
}
.widget_shopping_cart_content .cart_list .quantity{
  flex:0 0 100%; padding-left: 66px; font-size:12px; color:var(--ry-gray-500);
}
.widget_shopping_cart_content .cart_list .remove{
  position:absolute; top:0; right:0; width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ry-red); font-size:16px; line-height:1;
}
.widget_shopping_cart_content .woocommerce-mini-cart__empty-message{ text-align:center; padding: var(--sp-10) var(--sp-4); color:var(--ry-gray-500); font-size:13px; }
.widget_shopping_cart_content .total{ display:flex; justify-content:space-between; font-weight:800; margin-bottom: var(--sp-3); font-size:13px; }
.widget_shopping_cart_content .buttons{ display:flex; flex-direction:column; gap: var(--sp-2); }
/* Drawer footer is one of the places full width is wanted (see .ry-btn--full). */
.widget_shopping_cart_content .buttons a{ display:flex; align-items:center; justify-content:center; height:44px; border-radius:var(--ry-radius-btn); font-weight:600; font-size:16px; text-transform:capitalize; letter-spacing:-0.64px; }
.widget_shopping_cart_content a.wc-forward:first-child{ background:transparent; border:1.5px solid var(--ry-ink); color:var(--ry-ink); }
.widget_shopping_cart_content a.checkout{ background:var(--ry-red); color:var(--ry-white); }

/* ================= 10. HERO SLIDER ================= */
/* No padding and no background of its own: the wash belongs to each slide now
   (G7), so it can differ per banner and still reach both screen edges. The
   section keeps the --hero-bg-* vars as the fallback any slide without its own
   colours inherits. */
.ry-hero{
  position:relative; z-index:1;
  padding: 0;
}
/*
 * The track no longer carries the curve. Rounding each *slide* was what once
 * let the next slide's square corner peek past the current one's curve
 * mid-swipe; rounding the image inside a 10px inset cannot, because each
 * image's corners are surrounded by their own slide's wash.
 */
.ry-hero-track{
  display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.ry-hero-track::-webkit-scrollbar{ display:none; }
/* snap-stop keeps a fast flick to ONE slide — without it a swipe sails past
   slide 2 and lands on 3. Do NOT add scroll-behavior:smooth here: on a
   mandatory-snap track it makes programmatic scrollLeft a no-op (measured). */
.ry-hero-slide{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; }
/* G7 — the per-slide wash. It is painted here, on the padded link, so it fills
   the 10px gap around the image; the 25% stop holds pure white across the top
   quarter, so the banner meets the page with no seam or tint line. */
.ry-hero-slide a{
  display:block; padding: var(--hero-inset);
  background-image: linear-gradient(var(--hero-bg-top, #FFFFFF) 25%, var(--hero-bg-bottom, #FFFFFF) 103.7%);
}
.ry-hero-slide picture, .ry-hero-slide img{ width:100%; aspect-ratio:var(--ar-hero-mobile); object-fit:cover; }
.ry-hero-slide img{ border-radius: var(--ry-radius-hero); }
/* Shown only until the admin uploads real hero banners. */
.ry-hero-empty{
  border-radius:var(--ry-radius-lg);
  background:linear-gradient(135deg, var(--ry-black), #2a2a2a);
  aspect-ratio:var(--ar-hero-mobile); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--sp-4); color:var(--ry-white); text-align:center; padding: var(--sp-6);
}
.ry-hero-empty img{ width:200px; height:auto; }
.ry-hero-empty p{ font-size:13px; color:#B7B7B7; max-width:260px; }

.ry-hero-dots{
  position:absolute; left:0; right:0; bottom: var(--hero-inset); z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
}
/* 44px tap target with the pill parked at the bottom of it, so making the dots
   touchable does not drag them up off the banner. */
.ry-hero-dots button{
  position:relative; flex:0 0 auto; width:44px; height:44px; padding-bottom: var(--sp-3);
  display:flex; align-items:flex-end; justify-content:center;
}
.ry-hero-dots button::before{
  content:''; width:20px; height:4px; border-radius:var(--ry-radius-pill);
  background:rgba(255,255,255,.55); transition: width var(--ry-fast) var(--ry-ease);
}
.ry-hero-dots button.is-active::before{ width:32px; }
/* Autoplay progress. main.js adds .is-filling only while the 5s interval is
   really ticking and .is-paused whenever it stops, so the bar can never promise
   a slide change that is not coming. */
.ry-hero-dots button::after{
  content:''; position:absolute; bottom: var(--sp-3); left:50%; margin-left:-16px;
  width:32px; height:4px; border-radius:var(--ry-radius-pill);
  background:var(--ry-white); transform:scaleX(0); transform-origin:left center;
}
.ry-hero-dots button.is-filling::after{ animation: ry-dot-fill 5000ms linear forwards; }
.ry-hero-dots.is-paused button.is-filling::after{ animation-play-state:paused; }
@keyframes ry-dot-fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
/* Ring the pill, not the 44px hit box — centred on the box the ring would
   float above the pill. The dark shadow behind it keeps the white ring visible
   when a banner is light under the dots. */
.ry-hero-dots button:focus-visible{ outline:none; }
.ry-hero-dots button:focus-visible::before{
  outline:2px solid var(--ry-white); outline-offset:3px; box-shadow:0 0 0 7px rgba(0,0,0,.55);
}
/* Autoplay is off under reduced motion, so nothing may look like it is counting. */
@media (prefers-reduced-motion: reduce){
  .ry-hero-dots button::after{ animation:none; }
}

/* ================= 11. TIMER STRIP ================= */
.ry-timer{
  background:var(--ry-beam); color:var(--ry-black);
  /* No margin: the slide's wash runs to the bottom of the hero, so the strip's
     colour has to start right where that tint ends — a margin here would
     reopen a plain-white sliver between the two. */
}
/* 20px tall, down from 26.7px (owner: 25% shorter). The strip's height comes
   from the pill stack, not this padding, so both had to come down together —
   digit and label font-sizes are untouched, only their leading. */
.ry-timer .ry-container{ display:flex; align-items:center; justify-content:center; gap: var(--sp-2); padding-block: 2px; flex-wrap:nowrap; }
.ry-timer-label{ font-weight:800; font-size:10px; text-transform:uppercase; white-space:nowrap; }
.ry-timer-label span{ color:var(--ry-red); }
.ry-timer-clock div{ box-shadow:0 1px 0 rgba(0,0,0,.12); }
.ry-timer-clock{ display:flex; gap: var(--sp-2); }
.ry-timer-clock div{ background:var(--ry-white); color:var(--ry-black); border-radius:var(--ry-radius-sm); min-width:24px; text-align:center; padding:0 var(--sp-1); font-weight:800; font-size:10px; line-height:1; }
.ry-timer-clock small{ display:block; font-size:7px; line-height:6px; font-weight:700; color:var(--ry-gray-700); text-transform:uppercase; }

/* ================= 12. CATEGORY GRID (2x2) ================= */
.ry-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--card-gap); }
.ry-cat-grid a{ position:relative; display:block; border-radius:var(--ry-radius); overflow:hidden; aspect-ratio:var(--ar-tile); background:var(--ry-gray-100); }
.ry-cat-grid img{ width:100%; height:100%; object-fit:cover; }
.ry-cat-grid .ry-cat-grid-label{ position:absolute; left:0; right:0; bottom:0; padding: var(--sp-2); background:linear-gradient(transparent, rgba(0,0,0,.72)); color:var(--ry-white); font-weight:800; font-size:10px; line-height:1.2; text-transform:uppercase; }

/* ================= 13. PRODUCT CARD + CAROUSEL ================= */
.ry-carousel{ display:flex; gap: var(--card-gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom: var(--sp-1); }
.ry-carousel::-webkit-scrollbar{ display:none; }
/* Three layers: square image (ribbon + feature strip overlaid) on a #E3E3E3
   base, then the info panel. Image and panel are both fixed-height, so a card
   occupies the same box before and after its image decodes. */
.ry-card{ flex:0 0 var(--card-w); scroll-snap-align:start; display:flex; flex-direction:column; background:var(--ry-card-base); border-radius:var(--ry-radius-card); overflow:hidden; }
.ry-card:focus-visible{ outline:2px solid var(--ry-red); outline-offset:3px; }
.ry-card-media{ position:relative; flex:0 0 auto; }
.ry-card-img{ position:relative; aspect-ratio:var(--ar-tile); border-radius:var(--ry-radius-card) var(--ry-radius-card) 0 0; overflow:hidden; background:var(--ry-gray-100); }
.ry-card-img img{ width:100%; height:100%; object-fit:cover; }
.ry-card-badge{ position:absolute; top:var(--sp-1); right:var(--sp-1); background:var(--ry-red); color:var(--ry-white); font-size:8.5px; font-weight:800; padding: var(--sp-1) var(--sp-2); border-radius:var(--ry-radius-sm); text-transform:uppercase; }
.ry-card-ribbon{
  position:absolute; top:var(--sp-1); left:var(--sp-1); z-index:2;
  max-width:calc(100% - var(--sp-2)); background:var(--ry-ribbon-bg); color:var(--ry-white);
  font-size:8px; font-weight:700; line-height:1; letter-spacing:-0.01em;
  padding: var(--sp-1) var(--sp-2); border-radius:var(--ry-radius-pill);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ry-card-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:2; height:var(--ry-card-strip-h);
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-1);
  padding-inline: var(--sp-2); background:var(--ry-card-strip);
}
.ry-card-feature{ font-size:8px; font-weight:700; line-height:1; color:var(--ry-black); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Renders only when the product has at least one real review — see ry_product_card(). */
.ry-card-rating{ flex:0 0 auto; display:flex; align-items:center; gap:var(--sp-1); height:16px; padding-inline: var(--sp-1); border-radius:var(--ry-radius-pill); background:var(--ry-white); color:var(--ry-ink-price); font-size:9px; font-weight:700; line-height:1; }
.ry-card-rating svg{ width:8px; height:8px; }

.ry-card-info{
  flex:1 1 auto; display:flex; flex-direction:column; height:var(--ry-card-panel-h);
  background:var(--ry-card-panel); border:1px solid var(--ry-card-panel-line);
  border-radius:0 0 var(--ry-radius-card) var(--ry-radius-card); padding: var(--sp-1);
}
/* -webkit-box is what makes -webkit-line-clamp work at all; the explicit height
   is two lines exactly, so a long name can never push the price row down. */
.ry-card-title{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  height:25px; margin-top: var(--sp-1);
  font-size:12px; font-weight:700; line-height:12.5px; letter-spacing:-0.56px; color:var(--ry-black);
}
.ry-card-rule{ display:block; border-top:1px dashed var(--ry-gray-300); margin-block: var(--sp-1); }
.ry-card-price{ display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-1) var(--sp-2); margin-top:auto; }
.ry-card-nums{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--sp-1); min-width:0; }
/* A 106px card cannot hold offer + MRP + discount on one line, so the offer
   takes the first line and the other two the second. One row again on desktop. */
.ry-card-nums .now{ flex:0 0 100%; }
.ry-card-price .now{ font-size:14px; font-weight:700; line-height:17px; letter-spacing:-0.64px; color:var(--ry-ink-price); }
.ry-card-price .was{ font-size:10px; font-weight:500; line-height:17px; letter-spacing:-0.48px; color:var(--ry-gray-400); text-decoration:line-through; }
/* 4px flex gap + this margin = the 8px the discount sits after the MRP. */
.ry-card-price .off{ margin-left: var(--sp-1); font-size:10px; font-weight:700; line-height:17px; color:var(--ry-success); }
/* The swatches close the price row on its own right-aligned line. Sharing the
   line with the numbers only fits cards with two colours, and a group that
   sometimes wraps leaves the price rows across a grid row at different heights. */
.ry-card-swatches{ flex:0 0 100%; display:flex; align-items:center; justify-content:flex-end; }
.ry-card-sw{ width:var(--ry-card-sw); height:var(--ry-card-sw); border-radius:50%; border:1px solid var(--ry-card-swatch-line); background:var(--sw); }
.ry-card-sw + .ry-card-sw{ margin-left:var(--ry-card-sw-lap); }
.ry-card-swmore{ margin-left: var(--sp-1); font-size:10px; font-weight:500; line-height:1; color:var(--ry-gray-400); }

/* ================= 14. TRUST STRIP ================= */
.ry-trust{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-3); text-align:center; }
.ry-trust-item{ display:flex; flex-direction:column; align-items:center; gap: var(--sp-2); }
.ry-trust-item svg{ width:var(--icon-lg); height:var(--icon-lg); color:var(--ry-red); }
.ry-trust-item span{ font-size:10.5px; font-weight:700; line-height:1.25; }

/* ================= 15. NEWSLETTER ================= */
.ry-newsletter{ background:var(--ry-gray-100); text-align:center; }
.ry-newsletter h2{ display:inline-block; }
.ry-newsletter p{ font-size:12.5px; color:var(--ry-gray-700); margin-bottom: var(--sp-4); }
.ry-newsletter-form{ display:flex; gap: var(--sp-2); max-width:400px; margin-inline:auto; }
.ry-newsletter-form input{ flex:1; height:44px; padding-inline: var(--sp-3); border:1.5px solid var(--ry-gray-300); border-radius:var(--ry-radius-sm); background:var(--ry-white); font-size:13px; }
.ry-newsletter-form input:focus{ outline:2px solid var(--ry-black); outline-offset:1px; }
.ry-newsletter-form button{ flex:0 0 auto; width:auto; padding-inline: var(--sp-5); }
.ry-newsletter-msg{ font-size:12px; font-weight:700; margin-top: var(--sp-3); }

/* ================= 16. FOOTER ================= */
.ry-footer{ background:var(--ry-white); color:var(--ry-ink); border-top:1px solid var(--ry-gray-300); padding-top: var(--sp-8); }
/* Mobile: one column, except Help + Company which share a row. */
.ry-footer-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--sp-6); }
.ry-footer-col{ grid-column:1 / -1; }
.ry-footer-col--half{ grid-column:auto; min-width:0; }
.ry-footer-col h2{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--ry-ink); margin-bottom: var(--sp-3); font-weight:800; }
.ry-footer-about{ font-size:12px; color:var(--ry-gray-700); margin-top: var(--sp-3); line-height:1.6; }
.ry-footer-col ul{ display:flex; flex-direction:column; gap: var(--sp-2); }
.ry-footer-col a{ font-size:12.5px; color:var(--ry-gray-700); }
.ry-footer-social{ display:flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.ry-footer-social a{ width:32px; height:32px; border:1px solid var(--ry-gray-300); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ry-footer-social svg{ width:var(--icon-sm); height:var(--icon-sm); }
.ry-footer-pay{ display:flex; gap: var(--sp-2); flex-wrap:wrap; margin-top: var(--sp-4); }
.ry-footer-pay span{ font-size:9.5px; font-weight:700; border:1px solid var(--ry-gray-300); border-radius:var(--ry-radius-sm); padding: var(--sp-1) var(--sp-2); color:var(--ry-gray-700); }
.ry-footer-bottom{ border-top:1px solid var(--ry-gray-300); margin-top: var(--sp-6); padding-block: var(--sp-4); text-align:center; font-size:11px; color:var(--ry-gray-500); }
.ry-footer .ry-logo img{ height:26px; width:auto; }

/* ================= 16b. WOOCOMMERCE BASELINE =================
   Phase 1 scope: keep every WooCommerce page on-brand and readable.
   The pixel-matched category page and PDP land in Phase 2. */
.ry-wc-wrap .woocommerce-breadcrumb{ font-size:11.5px; color:var(--ry-gray-500); margin-bottom: var(--sp-4); }
.ry-wc-wrap h1.product_title, .ry-wc-wrap .woocommerce-products-header__title{ font-size:22px; margin-bottom: var(--sp-2); }
.ry-wc-wrap .woocommerce-result-count{ font-size:12px; color:var(--ry-gray-500); }
.ry-wc-wrap .woocommerce-ordering select{ height:38px; border:1.5px solid var(--ry-gray-300); border-radius:var(--ry-radius-sm); padding-inline: var(--sp-3); background:var(--ry-white); }

/* product grid */
.ry-wc-wrap ul.products{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.ry-wc-wrap ul.products li.product{ flex:none; }
.ry-wc-wrap ul.products li.product .ry-card-img{ margin-bottom: 0; }

/* single product */
.ry-wc-wrap div.product{ display:grid; gap: var(--sp-5); }
.ry-wc-wrap .woocommerce-product-gallery img{ border-radius:var(--ry-radius); border:1px solid var(--ry-gray-300); }
.ry-wc-wrap .woocommerce-product-gallery__trigger{ display:none; }
.ry-wc-wrap p.price, .ry-wc-wrap span.price{ display:flex; align-items:baseline; gap: var(--sp-2); font-size:20px; font-weight:800; margin: var(--sp-2) 0 var(--sp-3); }
.ry-wc-wrap p.price del, .ry-wc-wrap span.price del{ font-size:14px; font-weight:600; color:var(--ry-gray-500); }
.ry-wc-wrap p.price ins, .ry-wc-wrap span.price ins{ text-decoration:none; }
.ry-wc-wrap .stock.in-stock{ font-size:12px; font-weight:700; color:var(--ry-success); }
.ry-wc-wrap .stock.out-of-stock{ font-size:12px; font-weight:700; color:var(--ry-red); }
.ry-wc-wrap .quantity input[type="number"]{ width:64px; height:44px; text-align:center; border:1.5px solid var(--ry-gray-300); border-radius:var(--ry-radius-sm); }
.ry-wc-wrap form.cart{ display:flex; gap: var(--sp-3); align-items:center; flex-wrap:wrap; margin: var(--sp-4) 0; }
.ry-wc-wrap .posted_in, .ry-wc-wrap .sku_wrapper{ font-size:12px; color:var(--ry-gray-500); display:block; }
.ry-wc-wrap .woocommerce-tabs ul.tabs{ display:flex; gap: var(--sp-5); border-bottom:1px solid var(--ry-gray-300); margin: var(--sp-6) 0 var(--sp-4); }
.ry-wc-wrap .woocommerce-tabs ul.tabs li a{ display:block; padding: var(--sp-3) 0; font-size:12.5px; font-weight:700; text-transform:uppercase; }
.ry-wc-wrap .woocommerce-tabs ul.tabs li.active a{ box-shadow:inset 0 -2px 0 var(--ry-red); }
.ry-wc-wrap .onsale{
  display:inline-block; background:var(--ry-red); color:var(--ry-white);
  font-size:10px; font-weight:800; padding: var(--sp-1) var(--sp-2); border-radius:var(--ry-radius-sm); text-transform:uppercase; margin-bottom: var(--sp-2);
}

/* all WooCommerce buttons adopt the brand button — secondary by default, since
   most Woo-rendered buttons ("Return to shop", "Save address") are not the
   commit action; .alt / checkout / add-to-cart opt up to the primary fill. */
.ry-wc-wrap .button, .ry-wc-wrap button.button, .ry-wc-wrap input.button, .ry-wc-wrap a.button,
.ry-wc-wrap .wp-element-button{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding-inline: var(--sp-5); border-radius:var(--ry-radius-btn);
  background:transparent; color:var(--ry-ink);
  font-weight:600; font-size:16px; text-transform:capitalize; letter-spacing:-0.64px;
  border:1.5px solid var(--ry-ink); transition: background var(--ry-fast) var(--ry-ease);
}
.ry-wc-wrap .button:hover, .ry-wc-wrap button.button:hover, .ry-wc-wrap a.button:hover{ background:var(--ry-gray-100); }
/* Two classes each — the base above is button.button (0,2,1), so a single
   class would lose to it. */
.ry-wc-wrap .button.alt,
.ry-wc-wrap .button.checkout-button,
.ry-wc-wrap .button.woocommerce-form-login__submit,
.ry-wc-wrap .button.woocommerce-form-register__submit,
.ry-wc-wrap #place_order{
  background:var(--ry-red); color:var(--ry-white); border-color:var(--ry-red);
}
.ry-wc-wrap .button.alt:hover,
.ry-wc-wrap .button.checkout-button:hover,
.ry-wc-wrap .button.woocommerce-form-login__submit:hover,
.ry-wc-wrap .button.woocommerce-form-register__submit:hover,
.ry-wc-wrap #place_order:hover{ background:var(--ry-red-dark); border-color:var(--ry-red-dark); }
/* Woo drops these submits into a stretch flex column, which stretched them to
   1232px on desktop; size them to their text instead. */
.ry-wc-wrap .button.woocommerce-form-login__submit,
.ry-wc-wrap .button.woocommerce-form-register__submit{ align-self:flex-start; }
.ry-wc-wrap .button:disabled{ background:var(--ry-gray-100); color:var(--ry-gray-500); border-color:var(--ry-gray-300); cursor:not-allowed; }
.ry-wc-wrap .button.is-loading{ opacity:.7; pointer-events:none; }

/* notices */
.ry-wc-wrap .woocommerce-message, .ry-wc-wrap .woocommerce-info, .ry-wc-wrap .woocommerce-error{
  border-left:3px solid var(--ry-red); background:var(--ry-gray-100);
  padding: var(--sp-3) var(--sp-4); border-radius:var(--ry-radius-sm); font-size:12.5px; margin-bottom: var(--sp-4);
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); flex-wrap:wrap;
}
.ry-wc-wrap .woocommerce-message{ border-left-color:var(--ry-success); }

/* cart / checkout tables */
.ry-wc-wrap table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.ry-wc-wrap table th, .ry-wc-wrap table td{ padding: var(--sp-3) var(--sp-2); border-bottom:1px solid var(--ry-gray-300); text-align:left; }
.ry-wc-wrap table th{ font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ry-gray-700); }

/* Cart actions — coupon field, Apply coupon and Update cart share one row at
   every width. Styled against WooCommerce's core cart.php markup rather than
   overriding the template: cart.php carries most of the cart's action hooks and
   changes almost every release, so a copy in the theme is upgrade debt for a
   layout that flexbox alone can fix. */
.ry-wc-wrap .woocommerce-cart-form td.actions{
  display:flex; align-items:center; gap: var(--sp-2); flex-wrap:wrap;
}
/* display:contents lifts the input and Apply coupon out of core's .coupon
   wrapper so all three controls are siblings in one flex row. The wrapper's
   only other child is the screen-reader label, which is absolutely positioned. */
.ry-wc-wrap .woocommerce-cart-form td.actions .coupon{ display:contents; }
.ry-wc-wrap .woocommerce-cart-form td.actions #coupon_code{ flex:1 1 100%; min-width:0; width:auto; }
.ry-wc-wrap .woocommerce-cart-form td.actions .button{ flex:1 1 0; min-width:0; white-space:nowrap; }
.ry-wc-wrap .woocommerce-cart-form [name="apply_coupon"]{ background:var(--ry-green); border-color:var(--ry-green); color:var(--ry-white); }
.ry-wc-wrap .woocommerce-cart-form [name="apply_coupon"]:hover{ background:var(--ry-green-dark); border-color:var(--ry-green-dark); }
/* Dark ink on yellow, never white — see the token comment in :root. */
.ry-wc-wrap .woocommerce-cart-form [name="update_cart"]{ background:var(--ry-yellow); border-color:var(--ry-yellow); color:var(--ry-ink); }
.ry-wc-wrap .woocommerce-cart-form [name="update_cart"]:hover{ background:var(--ry-yellow-dark); border-color:var(--ry-yellow-dark); }
/* Core ships it disabled until a qty changes; it keeps the yellow so the row
   reads as one pair, but it must not look pressable while it isn't (audit G19). */
.ry-wc-wrap .woocommerce-cart-form [name="update_cart"]:disabled{ cursor:not-allowed; opacity:.5; }
/* Qty box matches the global button height so the row reads as one control set. */
.ry-wc-wrap .quantity input[type="number"],
.ry-wc-wrap .woocommerce-cart-form input[type="text"]{ height:44px; border-radius:var(--ry-radius-btn); }

/* Mobile: stack WooCommerce's responsive tables into cards instead of letting
   them scroll the whole page sideways. Uses the data-title attributes WC emits. */
@media (max-width: 781px){
  .ry-wc-wrap table.shop_table_responsive thead{ display:none; }
  .ry-wc-wrap table.shop_table_responsive,
  .ry-wc-wrap table.shop_table_responsive tbody,
  .ry-wc-wrap table.shop_table_responsive tr,
  .ry-wc-wrap table.shop_table_responsive td{ display:block; width:100%; }
  .ry-wc-wrap table.shop_table_responsive tr{
    position:relative; border:1px solid var(--ry-gray-300); border-radius:var(--ry-radius);
    padding: var(--sp-3) var(--sp-10) var(--sp-3) var(--sp-3); margin-bottom: var(--sp-3);
  }
  .ry-wc-wrap table.shop_table_responsive td{ border:none; padding: var(--sp-1) 0; }
  .ry-wc-wrap table.shop_table_responsive td::before{
    content: attr(data-title); font-weight:700; font-size:11px;
    text-transform:uppercase; color:var(--ry-gray-700); margin-right: var(--sp-3);
  }
  .ry-wc-wrap table.shop_table_responsive td.product-remove::before,
  .ry-wc-wrap table.shop_table_responsive td.product-thumbnail::before,
  .ry-wc-wrap table.shop_table_responsive td.actions::before{ content:none; }
  /* name, price, subtotal read as label → value rows */
  .ry-wc-wrap table.shop_table_responsive td.product-name,
  .ry-wc-wrap table.shop_table_responsive td.product-price,
  .ry-wc-wrap table.shop_table_responsive td.product-subtotal,
  .ry-wc-wrap table.shop_table_responsive td.product-quantity{
    display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3);
  }
  .ry-wc-wrap table.shop_table_responsive td.product-thumbnail img{
    width:72px; height:72px; object-fit:cover; border-radius:var(--ry-radius-sm); border:1px solid var(--ry-gray-300);
  }
  .ry-wc-wrap table.shop_table_responsive td.product-remove{ position:absolute; top:8px; right:8px; width:auto; }
  .ry-wc-wrap table.shop_table_responsive td.actions{ padding-top: var(--sp-3); }
  .ry-wc-wrap .cart-collaterals table td::before{ content:none; }
}
/* Desktop: the coupon field joins the two buttons on one line. The cell goes
   back to table-cell first — display:flex takes a td out of table layout, and
   the anonymous cell that replaces it shrink-wraps to ~504px, which wrapped
   Update cart onto a second line. Floats keep the cell a real one. */
@media (min-width: 782px){
  .ry-wc-wrap .woocommerce-cart-form td.actions{ display:table-cell; }
  .ry-wc-wrap .woocommerce-cart-form td.actions::after{ content:""; display:block; clear:both; }
  .ry-wc-wrap .woocommerce-cart-form td.actions .coupon{ display:flex; align-items:center; gap: var(--sp-2); float:left; }
  .ry-wc-wrap .woocommerce-cart-form td.actions #coupon_code{ flex:0 0 240px; width:240px; }
  .ry-wc-wrap .woocommerce-cart-form td.actions .button{ flex:0 0 auto; }
  .ry-wc-wrap .woocommerce-cart-form td.actions [name="update_cart"]{ float:left; margin-left: var(--sp-2); }
}

/* Nothing may push the page sideways on a phone. */
.ry-wc-wrap{ overflow-x:hidden; }
.ry-wc-wrap .woocommerce-cart-form{ max-width:100%; }
.ry-wc-wrap .cart_totals h2, .ry-wc-wrap #order_review_heading{ font-size:16px; margin: var(--sp-5) 0 var(--sp-3); }
.ry-wc-wrap .form-row{ display:flex; flex-direction:column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.ry-wc-wrap .form-row label{ font-size:11.5px; font-weight:700; text-transform:uppercase; color:var(--ry-gray-700); }
.ry-wc-wrap input[type="text"], .ry-wc-wrap input[type="email"], .ry-wc-wrap input[type="tel"],
.ry-wc-wrap input[type="password"], .ry-wc-wrap textarea, .ry-wc-wrap select{
  height:44px; padding-inline: var(--sp-3); border:1.5px solid var(--ry-gray-300);
  border-radius:var(--ry-radius-sm); background:var(--ry-white); width:100%;
}
.ry-wc-wrap textarea{ height:auto; padding: var(--sp-3) var(--sp-3); }

/* ================= 16d. SHOP / CATEGORY LISTING ================= */
.ry-shop{ padding-block: var(--sp-4) var(--section-y); }
.ry-breadcrumb{ font-size:11.5px; color:var(--ry-gray-500); display:flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ry-breadcrumb a{ color:var(--ry-gray-700); }
.ry-shop-head h1{ font-size:20px; font-weight:800; letter-spacing:-0.02em; text-transform:none; }
.ry-shop-count{ font-size:12px; font-weight:500; color:var(--ry-gray-500); margin-top: var(--sp-1); }
.ry-shop-desc{ font-size:12.5px; color:var(--ry-gray-700); margin-top: var(--sp-2); max-width:60ch; }

/* mobile toolbar */
.ry-shop-toolbar{
  display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-3); margin: var(--sp-4) 0;
  position:sticky; top:calc(var(--ry-announce-h) + var(--ry-header-h)); z-index:30;
  background:var(--ry-white); padding-block: var(--sp-2);
}
.ry-toolbar-btn{
  display:flex; align-items:center; justify-content:center; gap: var(--sp-2);
  height:42px; border:1.5px solid var(--ry-gray-300); border-radius:var(--ry-radius-sm);
  font-size:12.5px; font-weight:700; text-transform:uppercase;
}
.ry-toolbar-btn svg{ width:var(--icon-sm); height:var(--icon-sm); }
.ry-toolbar-count{
  background:var(--ry-red); color:var(--ry-white); border-radius:var(--ry-radius-pill);
  min-width:17px; height:17px; font-size:10px; display:flex; align-items:center; justify-content:center; padding: 0 var(--sp-1);
}
.ry-sort-desktop{ display:none; }

/* filter panel — bottom sheet on mobile */
.ry-filters, .ry-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:var(--ry-white); border-radius:var(--ry-radius-lg) var(--ry-radius-lg) 0 0;
  max-height:82vh; display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform var(--ry-fast) var(--ry-ease);
  box-shadow:0 -8px 24px rgba(0,0,0,.16);
}
.ry-filters.is-open, .ry-sheet.is-open{ transform:translateY(0); }
.ry-sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--sp-4); border-bottom:1px solid var(--ry-gray-300);
  font-weight:800; text-transform:uppercase; font-size:13px; flex:0 0 auto;
}
.ry-sheet-scroll{ overflow-y:auto; padding: var(--sp-1) var(--sp-4) var(--sp-4); flex:1 1 auto; }
.ry-sheet-foot{
  display:flex; gap: var(--sp-3); padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  border-top:1px solid var(--ry-gray-300); flex:0 0 auto;
}
.ry-sheet-foot .ry-btn{ flex:1; }

.ry-filter-group{ border:none; padding: var(--sp-4) 0 0; margin: 0; border-bottom:1px solid var(--ry-gray-100); padding-bottom: var(--sp-4); }
.ry-filter-group legend{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ry-gray-700); padding: 0; margin-bottom: var(--sp-3); }
.ry-check{ display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-2) 0; font-size:13px; cursor:pointer; }
.ry-check input{ width:17px; height:17px; accent-color:var(--ry-red); flex:0 0 auto; }
.ry-swatch-list{ display:flex; flex-direction:column; gap: var(--sp-1); }
.ry-swatch-check{ display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-2) 0; font-size:13px; cursor:pointer; }
.ry-swatch-check input{ width:17px; height:17px; accent-color:var(--ry-red); flex:0 0 auto; }
.ry-swatch-dot{
  width:18px; height:18px; border-radius:50%; background:var(--sw);
  border:1px solid var(--ry-gray-300); flex:0 0 auto;
}

/* sort sheet */
.ry-sort-list{ overflow-y:auto; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
.ry-sort-option{ display:block; width:100%; text-align:left; padding: var(--sp-4); font-size:13px; border-bottom:1px solid var(--ry-gray-100); }
.ry-sort-option.is-active{ font-weight:800; color:var(--ry-red); }

/* results grid */
.ry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-5) var(--card-gap); }
.ry-grid .ry-card{ flex:none; width:auto; }
.ry-loadmore-wrap{ display:flex; justify-content:center; margin-top: var(--sp-6); }
.ry-loadmore-wrap .ry-btn{ padding-inline: var(--sp-8); border-width:1px; }
.ry-btn.is-loading{ opacity:.6; pointer-events:none; }
.ry-empty{ text-align:center; padding: var(--sp-12) var(--sp-4); color:var(--ry-gray-500); font-size:13.5px; }
.ry-empty .ry-btn{ width:auto; margin:var(--sp-4) auto 0; padding-inline: var(--sp-6); }
.ry-empty strong{ font-weight:800; color:var(--ry-gray-900); }
.ry-empty-hint{ margin-top: var(--sp-2); font-size:12.5px; color:var(--ry-gray-400); }
/* The ribbon owns the top-left of the image, so this sits top-right (base rule). */
.ry-card-badge--out{ background:var(--ry-gray-700); }

/* WooCommerce price markup inside our card */
.ry-card-price .price{ display:flex; align-items:baseline; gap: var(--sp-1); flex-wrap:wrap; font-weight:700; font-size:12.5px; }
.ry-card-price del{ font-size:11px; font-weight:600; color:var(--ry-gray-500); }
.ry-card-price ins{ text-decoration:none; }

/* ================= 16e. PRODUCT PAGE (PDP) ================= */
.ry-pdp{ padding-block: var(--sp-4) var(--section-y); }
/* Larger on mobile than desktop — matches the reference, not a typo. */
.ry-pdp-title{ font-size:30px; line-height:1.15; font-weight:700; letter-spacing:-1.12px; margin-bottom: var(--sp-2); }
.ry-pdp-sub{ font-size:14px; color:var(--ry-gray-700); margin-bottom: var(--sp-2); }

/* Rating row. Rendered only when the product has real reviews — see the
   template. With no reviews anywhere in the catalogue this never paints. */
.ry-pdp-rating{
  display:inline-flex; align-items:center; gap: var(--sp-1);
  font-size:14px; color:var(--ry-gray-700); margin-bottom: var(--sp-1);
}
.ry-pdp-rating svg{ color:var(--ry-yellow-dark); flex:0 0 14px; }
.ry-pdp-rating strong{ font-weight:600; color:var(--ry-ink); }
/* Grown tap target without changing the row's height. */
.ry-pdp-rating{ position:relative; }
.ry-pdp-rating::before{ content:""; position:absolute; inset:calc(var(--sp-3) * -1) calc(var(--sp-2) * -1); }

/* Small block label above the offers and delivery panels. */
.ry-block-label{ font-size:15px; font-weight:700; margin-bottom: var(--sp-2); }
.ry-block-label label{ cursor:pointer; }

/* gallery — swipe on mobile, thumb strip at every breakpoint */
.ry-gallery-main{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  border:1px solid var(--ry-gray-300); border-radius:var(--ry-radius); background:var(--ry-gray-100);
}
.ry-gallery-main::-webkit-scrollbar{ display:none; }
.ry-gallery-slide{ flex:0 0 100%; scroll-snap-align:start; }
.ry-gallery-img, .ry-gallery-slide img{ width:100%; aspect-ratio:var(--ar-tile); object-fit:cover; }
/* Six thumbs rarely fit a phone, so the strip scrolls sideways. Box size is
   fixed rather than derived from the image, so the strip owns its full height
   before any thumbnail decodes. */
.ry-gallery-thumbs{
  display:flex; gap: var(--sp-2); margin-top: var(--sp-3);
  overflow-x:auto; scrollbar-width:none;
}
.ry-gallery-thumbs::-webkit-scrollbar{ display:none; }
/* Below 1024px the rail is replaced by the slide counter (audit G45). Its
   thumbnails are lazy, so display:none also stops them downloading on a phone. */
.ry-gallery-thumbs{ display:none; }
.ry-gallery-count{
  display:block; margin-top: var(--sp-3); text-align:center;
  font-size:12px; font-weight:500; color:var(--ry-gray-500);
}
.ry-thumb{
  width:var(--ry-rail-w); height:var(--ry-rail-w); border-radius:var(--ry-radius-sm); overflow:hidden;
  border:1.5px solid var(--ry-gray-300); background:var(--ry-gray-100); flex:0 0 auto;
}
/* Inactive and active must not be the same weight of black (audit G15) — the
   ring is what makes the selected thumb readable at a glance. */
.ry-thumb.is-active{ border-color:var(--ry-ink); box-shadow:0 0 0 1px var(--ry-ink); }
.ry-thumb:focus-visible{ outline:2px solid var(--ry-red); outline-offset:3px; }
.ry-thumb img{ width:100%; height:100%; object-fit:cover; }

/* price block — lighter weight at a larger size is what makes the reference's
   price read as calm (audit G32). */
.ry-pdp-price{ display:flex; align-items:baseline; gap: var(--sp-2); flex-wrap:wrap; margin-top: var(--sp-3); }
.ry-price-now{ font-size:24px; font-weight:500; letter-spacing:-1.12px; }
.ry-price-was{ font-size:14px; color:var(--ry-gray-500); text-decoration:line-through; }
.ry-price-off{ font-size:14px; font-weight:600; color:var(--ry-success); }
.ry-tax-note{ font-size:11.5px; color:var(--ry-gray-500); margin-top: var(--sp-1); }

/* variation form + add to cart (WooCommerce markup) */
.ry-buybox form.cart{ display:block; margin: var(--sp-5) 0 0; }
.ry-buybox table.variations{ width:100%; border-collapse:collapse; margin-bottom: var(--sp-4); }
.ry-buybox table.variations th,
.ry-buybox table.variations td{ display:block; padding: 0; border:none; text-align:left; }
.ry-buybox table.variations th{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ry-gray-700); margin-bottom: var(--sp-2); }
.ry-buybox table.variations select{
  width:100%; height:44px; padding-inline: var(--sp-3); border:1.5px solid var(--ry-gray-300);
  border-radius:var(--ry-radius-sm); background:var(--ry-white); margin-bottom: var(--sp-2);
}
.ry-buybox .reset_variations{ font-size:12px; color:var(--ry-red); display:inline-block; margin-bottom: var(--sp-3); }

/* colour swatches — the native select stays for WooCommerce's JS, hidden from view */
.ry-swatches{ display:flex; gap: var(--sp-3); flex-wrap:wrap; margin-bottom: var(--sp-3); }
/* 44px, not the reference's 50px box: it is the repo's tap-target floor and
   keeps four swatches on one row at 375px. */
.ry-swatch{
  width:44px; height:44px; border-radius:50%; background:var(--sw);
  border:2px solid var(--ry-gray-300); position:relative;
  transition: box-shadow var(--ry-fast) var(--ry-ease), border-color var(--ry-fast) var(--ry-ease);
}
.ry-swatch:hover{ border-color:var(--ry-gray-700); }
.ry-swatch.is-selected{ border-color:var(--ry-black); box-shadow:0 0 0 2px var(--ry-white) inset, 0 0 0 2px var(--ry-black); }
.ry-swatch:focus-visible{ outline:2px solid var(--ry-red); outline-offset:3px; }
.ry-swatch[disabled]{ opacity:.35; cursor:not-allowed; }
/* Selector must out-specify `.ry-buybox table.variations select` above, which
   is (0,2,2) and was winning on width/padding/margin — the "hidden" select was
   computing 1280px wide off the initial containing block and adding 663px of
   phantom scrollWidth to every variable product page (invisible only because
   html/body carry overflow-x:clip). */
.ry-buybox table.variations select[data-ry-swatch-select],
.ry-buybox select[data-ry-swatch-select]{
  position:absolute; width:1px; height:1px; padding: 0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.ry-swatch-selected{ font-weight:600; color:var(--ry-ink); text-transform:none; letter-spacing:0; margin-left: var(--sp-2); }
.ry-buybox .woocommerce-variation-price{ margin-bottom: var(--sp-3); font-size:18px; font-weight:800; }
.ry-buybox .woocommerce-variation-availability{ font-size:12px; font-weight:700; margin-bottom: var(--sp-3); }
.ry-buybox .quantity{ display:inline-flex; margin-right: var(--sp-3); }
.ry-buybox .quantity input{
  width:64px; height:var(--ry-h-action); text-align:center;
  border:1.5px solid var(--ry-gray-300); border-radius:var(--ry-radius-sm);
}
/* Action pair: Add to cart and Buy Now are fixed equal halves of one row, so
   neither resizes when the other's label changes. The quantity box takes a full
   row above them rather than stealing width from either half. */
/* :not(.variations_form) — on a variable product the row is the inner
   .woocommerce-variation-add-to-cart; flexing the whole form would put the
   attribute table beside the button instead of above it. */
.ry-buybox form.cart:not(.variations_form),
.ry-buybox .woocommerce-variation-add-to-cart{ display:flex; flex-wrap:wrap; gap: var(--sp-2); align-items:center; }
.ry-buybox .quantity{ flex:0 0 100%; margin-right:0; }
.ry-buybox .single_add_to_cart_button,
.ry-buybox .ry-buynow{
  flex:1 1 0; min-width:0;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--ry-h-action); padding-inline: var(--sp-4); border-radius:var(--ry-radius-btn);
  font-weight:500; font-size:16px; text-transform:none; letter-spacing:-0.64px;
  /* The action pair deliberately does NOT transition its fill. These two are
     the only buttons on the site whose colour changes because of a *state*
     swap (grey while no variation is chosen, brand colour once one is), and a
     colour transition across that swap measurably sticks at the grey it was
     interpolating from — computed rgb(107,107,107) with the brand rule
     matching and no other rule in the cascade. Only transform animates. */
  transition: transform var(--ry-fast) var(--ry-ease);
}
.ry-buybox .single_add_to_cart_button{ background:var(--ry-red); color:var(--ry-white); }
.ry-buybox .single_add_to_cart_button:hover{ background:var(--ry-red-dark); }
.ry-buybox .ry-buynow{ background:var(--ry-buy); color:var(--ry-black); }
.ry-buybox .ry-buynow:hover{ background:var(--ry-buy-dark); }
.ry-buybox .single_add_to_cart_button:active,
.ry-buybox .ry-buynow:active{ transform:scale(.98); }
.ry-buybox .single_add_to_cart_button:focus-visible,
.ry-buybox .ry-buynow:focus-visible{ outline:2px solid var(--ry-ink); outline-offset:2px; }
/* Disabled state uses a solid grey rather than a faded red: the faded red
   dropped white label text below the contrast floor, and grey reads as
   "not yet available" more clearly anyway. */
.ry-buybox .single_add_to_cart_button.disabled,
.ry-buybox .single_add_to_cart_button.is-loading,
.ry-buybox .ry-buynow.disabled,
.ry-buybox .ry-buynow[disabled]{
  background:var(--ry-gray-500); color:var(--ry-white); pointer-events:none;
  transition:none; /* enabling must snap, never interpolate out of grey */
}
.ry-buybox .stock.out-of-stock{ color:var(--ry-red); font-weight:700; font-size:12.5px; }

/* offers — one capsule per offer, not a bullet list (audit G17) */
.ry-offers{ margin-top: var(--sp-6); }
.ry-offer-cap{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap: var(--sp-1);
  min-height:var(--ry-cap-h); padding: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-2);
  background:var(--ry-offer-bg); color:var(--ry-red-dark);
  border:1px solid var(--ry-red); border-radius:var(--ry-cap-r);
  font-size:13px; line-height:21px;
}
.ry-offer-cap:last-child{ margin-bottom:0; }
.ry-offer-cap strong{ font-weight:600; }

/* delivery / pincode — a filled panel, matching the reference's grouped block */
.ry-pincode{ margin-top: var(--sp-5); }
.ry-pincode-panel{ background:var(--ry-gray-100); border-radius:var(--ry-radius-btn); padding: var(--sp-3); }
.ry-pincode-row{ display:flex; gap: var(--sp-2); }
.ry-pincode-row input{
  flex:1; min-width:0; height:var(--ry-h-action); padding-inline: var(--sp-3); border:1.5px solid var(--ry-gray-300);
  border-radius:var(--ry-radius-sm); background:var(--ry-white);
}
.ry-pincode-row .ry-btn{ width:auto; flex:0 0 auto; padding-inline: var(--sp-5); height:var(--ry-h-action); background:var(--ry-white); }
.ry-pincode-msg{ font-size:12.5px; font-weight:600; margin-top: var(--sp-2); min-height:18px; }
.ry-pincode-msg:empty{ margin-top:0; min-height:0; }
.ry-pincode-msg.is-ok{ color:var(--ry-success); }
.ry-pincode-msg.is-bad{ color:var(--ry-red); }

/* trust row — 2-up on mobile, 4-up on desktop, matching the reference's four
   claims. Every one is something the store actually does. */
.ry-pdp-trust{ display:grid; grid-template-columns:repeat(2,1fr); gap: var(--sp-4) var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top:1px solid var(--ry-gray-100); text-align:center; }
.ry-pdp-trust li{ display:flex; flex-direction:column; align-items:center; gap: var(--sp-2); }
.ry-pdp-trust svg{ width:var(--icon-lg); height:var(--icon-lg); color:var(--ry-red); }
.ry-pdp-trust span{ font-size:12px; font-weight:500; line-height:1.25; }

/* reviews — WooCommerce's own system; the whole section is absent until a
   product has a real review (see the template). */
.ry-review-summary{ display:flex; align-items:baseline; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ry-review-avg{ font-size:32px; font-weight:600; letter-spacing:-1.12px; }
.ry-review-count{ font-size:13px; color:var(--ry-gray-500); }

/* sections */
.ry-pdp-section{ margin-top: var(--section-y); }
.ry-specs{ width:100%; border-collapse:collapse; font-size:13px; }
.ry-specs th, .ry-specs td{ padding: var(--sp-3) var(--sp-3); border-bottom:1px solid var(--ry-gray-100); text-align:left; vertical-align:top; }
.ry-specs th{ width:44%; font-weight:700; color:var(--ry-gray-700); background:var(--ry-gray-100); }

/* A+ Content — stacked on mobile, alternating image/text on desktop */
.ry-aplus-block{ margin-top: var(--sp-6); }
.ry-aplus-block:first-of-type{ margin-top:0; }
.ry-aplus-media{ border-radius:var(--ry-radius); overflow:hidden; background:var(--ry-gray-100); }
/* Ratio is fixed here, not read off the file, so a below-the-fold image can
   never push the related row down as it loads. */
.ry-aplus-media img{ width:100%; aspect-ratio:var(--ar-wide); object-fit:cover; }
.ry-aplus-text{ margin-top: var(--sp-3); }
.ry-aplus-text h3{ font-size:15px; font-weight:800; margin-bottom: var(--sp-2); }
.ry-aplus-text .ry-page-content p:last-child{ margin-bottom:0; }

/* sticky mobile buy bar */
/* Parks 1px above the bottom nav rather than at bottom:0 — the two are both
   fixed on mobile and would otherwise cover each other (audit G33: the reference site pins
   theirs at 61px over a 60px bar). The nav absorbs the safe-area inset, so this
   bar no longer pads for it. */
/* A floating card, not a full-bleed slab (audit G33): inset by the container
   gutter, radius 10px, 1px tinted border. */
.ry-sticky-buy{
  position:fixed; left:var(--ry-gap); right:var(--ry-gap); z-index:50;
  bottom: calc(var(--ry-bnav-h) + env(safe-area-inset-bottom) + 1px);
  display:flex; flex-direction:column; gap: var(--sp-1);
  padding:var(--sp-1) var(--sp-1) var(--sp-2);
  background:var(--ry-white); border:1px solid var(--ry-sticky-line);
  border-radius:var(--ry-radius-btn);
  box-shadow:0 -4px 14px rgba(0,0,0,.08);
  /* visibility (not just transform) so the hidden bar's button leaves the tab
     order — an aria-hidden container must not hold focusable children. */
  /* Must clear its own height AND the bottom nav it now sits above, or the
     hidden bar leaves a sliver on screen mid-transition. */
  transform:translateY(calc(110% + var(--ry-bnav-h))); visibility:hidden;
  transition:transform var(--ry-fast) var(--ry-ease), visibility var(--ry-fast);
}
.ry-sticky-buy.is-visible{ transform:translateY(0); visibility:visible; }
/* One row, not two: the tax note sits beside the price the way the reference
   does, which is what keeps the card at ~76px instead of ~100px. */
.ry-sticky-price{ display:flex; align-items:baseline; gap: var(--sp-2); line-height:16px; padding-inline: var(--sp-1); overflow:hidden; }
.ry-sticky-price .tax{ flex:0 1 auto; font-size:10px; font-weight:500; color:var(--ry-gray-500); white-space:nowrap; }
.ry-sticky-price .now{ font-weight:600; font-size:15px; }
.ry-sticky-price .was{ font-size:12px; color:var(--ry-gray-500); text-decoration:line-through; }
.ry-sticky-price .off{ font-size:12px; font-weight:600; color:var(--ry-success); }
/* Fixed equal halves, same height as the in-page pair. */
.ry-sticky-actions{ display:flex; gap: var(--sp-2); }
.ry-sticky-buy .ry-btn{ flex:1 1 0; min-width:0; height:var(--ry-h-action); padding-inline: var(--sp-3); }
.ry-btn-buy{ background:var(--ry-buy); color:var(--ry-black); }
.ry-btn-buy:hover{ background:var(--ry-buy-dark); }

/* ================= 16f. DEALER BOOKING FORM ================= */
.ry-booking-form{ max-width:720px; margin-top: var(--sp-5); }
.ry-field-grid{ display:grid; grid-template-columns:1fr; gap: var(--sp-4); }
.ry-booking-form label,
.ry-field-block{ display:flex; flex-direction:column; gap: var(--sp-2); font-size:12.5px; font-weight:600; color:var(--ry-gray-700); }
.ry-booking-form input,
.ry-booking-form select,
.ry-booking-form textarea{
  width:100%; height:44px; padding-inline: var(--sp-3);
  border:1.5px solid var(--ry-gray-300); border-radius:var(--ry-radius-sm);
  background:var(--ry-white); font-size:14px; font-weight:400; color:var(--ry-ink);
}
.ry-booking-form textarea{ height:auto; padding: var(--sp-3); resize:vertical; }
.ry-booking-form input:focus,
.ry-booking-form select:focus,
.ry-booking-form textarea:focus{ outline:2px solid var(--ry-black); outline-offset:1px; }

.ry-booking-sub{ font-size:15px; margin: var(--sp-6) 0 var(--sp-3); }
.ry-booking-row{ display:grid; grid-template-columns:1fr 96px; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ry-booking-form .ry-field-block{ margin-top: var(--sp-4); }
.ry-booking-form > .ry-btn{ margin-top: var(--sp-5); width:auto; padding-inline: var(--sp-8); }
.ry-password-hint{ font-size:12px; color:var(--ry-gray-500); margin-top: var(--sp-2); }
.ry-booking-note{ font-size:12px; color:var(--ry-gray-500); margin-top: var(--sp-3); }
.ry-booking-error{
  background:#FDECEC; border-left:3px solid var(--ry-red); color:var(--ry-ink);
  padding: var(--sp-3) var(--sp-4); border-radius:var(--ry-radius-sm);
  font-size:13px; margin-bottom: var(--sp-4);
}
.ry-booking-done{
  background:var(--ry-gray-100); border-radius:var(--ry-radius);
  padding: var(--sp-6); text-align:center; margin-top: var(--sp-5);
}
.ry-booking-done h2{ margin-bottom: var(--sp-3); }

@media (min-width:782px){
  .ry-field-grid{ grid-template-columns:1fr 1fr; gap: var(--sp-4) var(--sp-5); }
  .ry-booking-row{ grid-template-columns:1fr 120px; max-width:520px; }
}

/* ================= 16c. CONTENT PAGES ================= */
.ry-page-title{ font-size:24px; margin-bottom: var(--sp-4); }
.ry-wc-wrap .ry-page-title{ margin-bottom: var(--sp-5); }
.ry-page-content{ font-size:14px; line-height:1.7; color:var(--ry-gray-700); }
.ry-page-content h2{ font-size:18px; margin: var(--sp-6) 0 var(--sp-3); color:var(--ry-ink); }
.ry-page-content p{ margin-bottom: var(--sp-4); }
.ry-page-content ul{ list-style:disc; padding-left: var(--sp-5); margin-bottom: var(--sp-4); }
.ry-page-content a{ color:var(--ry-red); text-decoration:underline; }

/* ================= 17. RESPONSIVE — TABLET/DESKTOP ================= */
@media (min-width: 782px){
  :root{
    --section-y: var(--sp-12);
    --card-gap: var(--sp-5);
    --card-w: 176px; /* 40% smaller than the old 3/4-up grid card (was ~293px rendered) */
    --ry-header-h: 65px; /* 15% shorter than the original 76px */
    --ry-gap: var(--sp-6);
    --ry-card-panel-h: 120px;
    --ry-card-strip-h: 30px;
    --ry-card-sw: 16px;
    --ry-card-sw-lap: -8px;
  }
  body{ font-size:15px; }
  h2{ font-size:18px; }

  .ry-hamburger{ display:none; }
  .ry-search-toggle{ display:none; }
  .ry-search-sheet{ display:none; }
  /* No auto margin here — .ry-nav-desktop owns the one that pushes this whole
     right-hand group over. A second auto margin would split the free space and
     strand the nav mid-header. */
  .ry-search-wrap{ display:block; position:relative; flex:none; max-width:252px; } /* 420px - 40% */
  .ry-search-desktop{ display:flex; align-items:center; height:24px; border:1.5px solid currentColor; opacity:.9; border-radius:var(--ry-radius-pill); padding-inline: var(--sp-3); gap: var(--sp-2); } /* 40px - 40% */
  .ry-search-desktop svg{ flex:0 0 16px; color:var(--ry-gray-500); }
  .ry-search-desktop input{ border:none; outline:none; flex:1; background:transparent; color:inherit; font-size:13px; min-width:0; }
  .ry-search-desktop input::placeholder{ color:currentColor; opacity:.65; }
  .ry-search-wrap .ry-suggest{
    position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:60;
    box-shadow:0 12px 28px rgba(0,0,0,.14); max-height:70vh; overflow-y:auto;
  }
  .ry-header-spacer{ display:none; }
  /* auto margin pushes the nav — and everything after it (search, account, cart) —
     flush right, leaving the logo alone on the left. */
  .ry-nav-desktop{ display:flex; align-items:center; margin-left:auto; }
  .ry-nav-list{ display:flex; align-items:center; gap: var(--sp-6); }
  .ry-nav-list > li{ position:static; }
  .ry-nav-list > li > a{ display:flex; align-items:center; gap: var(--sp-1); font-size:12.5px; font-weight:700; text-transform:uppercase; white-space:nowrap; padding-block: var(--sp-2); }
  .ry-nav-list > li > a svg{ width:var(--icon-xs); height:var(--icon-xs); flex:0 0 10px; }
  .ry-mega{
    position:fixed; left:0; right:0; top:calc(var(--ry-announce-h) + var(--ry-header-h)); background:var(--ry-white);
    border-top:1px solid var(--ry-gray-300); box-shadow:0 12px 24px rgba(0,0,0,.08);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition: opacity var(--ry-fast) var(--ry-ease), transform var(--ry-fast) var(--ry-ease), visibility var(--ry-fast);
    padding: var(--sp-6) 0;
  }
  .ry-nav-list > li:hover > .ry-mega,
  .ry-nav-list > li:focus-within > .ry-mega{ opacity:1; visibility:visible; transform:translateY(0); }
  /* auto-fit so the row still looks right when categories are added/removed from admin */
  .ry-mega-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-5); max-width:var(--ry-container); margin-inline:auto; padding-inline:var(--ry-gap); }
  .ry-mega-grid a{ display:flex; flex-direction:column; align-items:center; gap: var(--sp-2); text-align:center; }
  .ry-mega-grid .ry-cat-circle{ width:72px; height:72px; flex-basis:72px; }
  .ry-mega-grid span{ font-size:11.5px; font-weight:600; line-height:1.25; }

  /* "More" dropdown: a narrow list panel, not a full-width mega row. */
  .ry-mega--list{ left:auto; right:auto; width:auto; }
  .ry-mega-list{
    display:flex; flex-direction:column; gap: var(--sp-3);
    max-width:var(--ry-container); margin-inline:auto; padding-inline:var(--ry-gap);
  }
  .ry-mega-list a{ font-size:12.5px; font-weight:600; }
  /* Same row as mobile, just centred with room to breathe instead of a scroll strip. */
  .ry-cats{ justify-content:center; overflow-x:visible; flex-wrap:wrap; max-width:var(--ry-container); margin-inline:auto; padding-block: var(--sp-5); gap: var(--sp-8); }
  .ry-cat-item{ width:76px; }
  .ry-cats .ry-cat-circle{ width:76px; height:76px; flex-basis:76px; }
  .ry-mobile-nav, .ry-drawer-overlay:has(+ .ry-mobile-nav.is-open){ display:none; }

  /* Edge-to-edge like the reference site's: no inset, no wash, square corners. */
  .ry-hero-slide a{ padding:0; background-image:none; }
  .ry-hero-slide img{ border-radius:0; }
  .ry-hero-dots{ bottom:0; }
  .ry-hero-slide picture, .ry-hero-slide img{ aspect-ratio:var(--ar-hero-desktop); }
  .ry-hero-empty{ aspect-ratio:var(--ar-hero-desktop); border-radius:0; }
  /* one row, however many categories the admin adds */
  .ry-cat-grid{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:1fr; }
  .ry-card{ flex-basis:var(--card-w); }
  .ry-card-ribbon{ font-size:10px; }
  .ry-card-feature{ font-size:10px; }
  .ry-card-rating{ height:20px; font-size:11px; }
  .ry-card-rating svg{ width:10px; height:10px; }
  .ry-card-title{ height:28px; margin-top: var(--sp-5); font-size:15px; line-height:14px; }
  .ry-card-price .now{ font-size:18px; line-height:22px; }
  .ry-card-nums .now{ flex:0 0 auto; }
  .ry-wc-wrap ul.products{ grid-template-columns:repeat(auto-fill, var(--card-w)); gap: var(--sp-5); }

  /* Shop: filter rail beside the grid; sheets become static panels. */
  .ry-shop{ padding-block: var(--sp-5) var(--section-y); }
  .ry-shop-head h1{ font-size:26px; }
  .ry-shop-toolbar{ display:none; }
  .ry-shop-body{ display:grid; grid-template-columns:236px 1fr; gap: var(--sp-8); align-items:start; margin-top: var(--sp-6); }
  .ry-shop-body--full{ grid-template-columns:1fr; }
  .ry-filters{
    position:sticky; top:calc(var(--ry-announce-h) + var(--ry-header-h) + 16px);
    inset:auto; transform:none; box-shadow:none; border-radius:0; max-height:none;
    border-right:1px solid var(--ry-gray-100); padding-right: var(--sp-5); background:transparent;
  }
  .ry-filters .ry-sheet-head{ display:none; }
  .ry-filters .ry-sheet-scroll{ overflow:visible; padding: 0; }
  .ry-filters .ry-sheet-foot{ border-top:none; padding: var(--sp-4) 0 0; }
  .ry-sheet{ display:none; }
  .ry-sort-desktop{ display:flex; align-items:center; justify-content:flex-end; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .ry-sort-desktop label{ font-size:12px; color:var(--ry-gray-700); font-weight:700; text-transform:uppercase; }
  .ry-sort-desktop select{ height:38px; border:1.5px solid var(--ry-gray-300); border-radius:var(--ry-radius-sm); padding-inline: var(--sp-3); background:var(--ry-white); font-size:13px; }
  /* Fixed --card-w columns, not fractions: a card is the same size in the shop
     grid as it is in a homepage carousel. auto-fill packs as many as the row
     holds, so wider screens gain columns instead of stretching cards. */
  .ry-grid{ grid-template-columns:repeat(auto-fill, var(--card-w)); gap: var(--sp-6) var(--card-gap); }

  /* PDP: gallery left, buy box right. */
  .ry-pdp{ padding-block: var(--sp-5) var(--section-y); }
  .ry-pdp-top{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-12); align-items:start; margin-top: var(--sp-5); }
  .ry-pdp-title{ font-size:28px; }
  .ry-price-now{ font-size:22px; }
  /* Vertical thumb rail on the LEFT of the stage (audit G31). row-reverse puts
     the thumbs (2nd child) first without reordering the DOM, so tab order still
     runs stage → thumbs. */
  .ry-gallery{
    position:sticky; top:calc(var(--ry-announce-h) + var(--ry-header-h) + 20px);
    display:flex; flex-direction:row-reverse; gap: var(--sp-4); align-items:flex-start;
  }
  .ry-gallery-main{ flex:1 1 auto; min-width:0; }
  .ry-gallery-count{ display:none; }
  .ry-gallery-thumbs{
    display:flex; flex:0 0 var(--ry-rail-w); flex-direction:column; gap: var(--sp-2);
    margin-top:0; max-height:410px; overflow-y:auto; overflow-x:hidden;
  }
  .ry-pdp-trust{ grid-template-columns:repeat(4,1fr); }

  .ry-aplus-block{ display:grid; grid-template-columns:1fr 1fr; gap: var(--sp-8); align-items:center; margin-top: var(--sp-10); }
  /* h2 is the section's first child, so counting divs by type keeps block 1
     first — reversing every second one gives the standard A+ zig-zag. */
  .ry-aplus-block:nth-of-type(even) .ry-aplus-media{ order:2; }
  .ry-aplus-block--full{ grid-template-columns:1fr; }
  .ry-aplus-text{ margin-top:0; }
  .ry-aplus-text h3{ font-size:18px; }

  .ry-specs{ max-width:720px; }
  .ry-sticky-buy{ display:none; }
  .ry-wc-wrap div.product{ grid-template-columns:1fr 1fr; gap: var(--sp-10); align-items:start; }
  .ry-wc-wrap div.product .woocommerce-tabs,
  .ry-wc-wrap div.product .related{ grid-column:1 / -1; }
  .ry-wc-wrap h1.product_title{ font-size:28px; }
  .ry-trust{ grid-template-columns:repeat(6,1fr); }
  .ry-footer-grid{ display:flex; flex-direction:row; justify-content:space-between; flex-wrap:wrap; }
  .ry-footer-col{ flex:1 1 180px; }
  .ry-newsletter-form{ max-width:460px; }
}


/* No wider-screen column override needed — .ry-grid's auto-fill adds columns
   on its own, and the card stays one global size at every width. */

/* ================= 18. BLOG ================= */
.ry-blog-row .ry-blog-card{ flex:0 0 240px; scroll-snap-align:start; }
.ry-blog-card{ display:block; }
.ry-blog-card-img{
  aspect-ratio:var(--ar-wide); border-radius:var(--ry-radius); overflow:hidden;
  background:var(--ry-gray-100); border:1px solid var(--ry-gray-300);
}
.ry-blog-card-img img{ width:100%; height:100%; object-fit:cover; }
.ry-blog-card-title{
  font-size:13px; font-weight:700; line-height:1.35; margin-top: var(--sp-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ry-blog-card-date{ font-size:11px; color:var(--ry-gray-500); display:block; margin-top: var(--sp-1); }
.ry-blog-card-excerpt{ font-size:12.5px; color:var(--ry-gray-700); line-height:1.55; margin-top: var(--sp-2); }

.ry-blog-grid{ display:grid; grid-template-columns:repeat(1,1fr); gap: var(--sp-6); margin-top: var(--sp-5); }

.ry-pagination, .navigation.pagination{ margin-top: var(--sp-8); }
.ry-pagination .nav-links, .navigation.pagination .nav-links{ display:flex; justify-content:center; gap: var(--sp-2); }
.navigation.pagination .page-numbers{
  min-width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ry-gray-300); border-radius:var(--ry-radius-sm); font-size:13px; font-weight:700;
}
.navigation.pagination .page-numbers.current{ background:var(--ry-black); color:var(--ry-white); border-color:var(--ry-black); }

@media (min-width: 782px){
  /* Exactly 5 per row: container is min(100vw,--ry-container) minus its own
     side padding, less the 4 gaps between the 5 cards. */
  .ry-blog-row .ry-blog-card{
    flex-basis: calc((min(100vw, var(--ry-container)) - (var(--ry-gap) * 2) - (var(--card-gap) * 4)) / 5);
  }
  .ry-blog-grid{ grid-template-columns:repeat(3,1fr); gap: var(--sp-8) var(--sp-6); }
  .ry-blog-card-title{ font-size:15px; }
}

/* ================= 19. EXPLORE BAND + PROMO BANNER ================= */
/* Heading row over a wide promo banner. The banner is optional — with nothing
   uploaded the section is the heading row alone, not an empty image box. */
.ry-explore-banner{ display:block; border-radius:var(--ry-radius-promo); overflow:hidden; }
.ry-explore-banner img{
  width:100%; height:auto; aspect-ratio:var(--ar-promo-mobile); object-fit:cover;
}
.ry-explore-banner:focus-visible{ outline:2px solid var(--ry-red); outline-offset:3px; }

/* Shared by every "Lead-in Ryolite" heading (Explore/Best of/…), not just this band. */
.ry-thin{ font-weight:500; }
.ry-bold{ font-weight:700; position:relative; display:inline-block; }
/* Accent bar: 24x2px flush to the RIGHT edge of the bold word, not centred and
   not full width. Lives on .ry-bold — the class ry_brand_heading() always
   emits — so every present and future section heading gets it for free. */
.ry-bold::after{
  content:""; position:absolute; right:0; bottom:0.5px;
  width:24px; height:2px; background:var(--ry-red);
}

@media (min-width: 782px){
  /* The measured artwork ratio, at container width — 1232px inner gives a 125px strip. */
  .ry-explore-banner img{ aspect-ratio:var(--ar-promo); }
}

/* ================= 20. BIG DEALS (pill-filtered strip) ================= */
/* Scrolling pill row; scrollbar hidden the same way .ry-carousel hides its own.
   The vertical padding is the room the pills' enlarged tap targets need. */
.ry-pills{
  display:flex; gap: var(--sp-2); overflow-x:auto; scrollbar-width:none;
  padding-block: var(--sp-2); margin-bottom: var(--sp-2);
}
.ry-pills::-webkit-scrollbar{ display:none; }
.ry-pill{
  position:relative; flex:0 0 auto; height:var(--ry-pill-h); padding-inline: var(--sp-3);
  border-radius:var(--ry-pill-r); background:transparent;
  font-size:12px; font-weight:600; line-height:var(--ry-pill-h);
  color:var(--ry-gray-500); white-space:nowrap;
}
/* The pill is 30px by measurement, under the 44px tap minimum. Growing a
   pseudo-element instead of the box keeps the reference height on screen. */
.ry-pill::before{ content:""; position:absolute; inset:calc(var(--sp-2) * -1) 0; }
.ry-pill.is-active{ background:var(--ry-pill-bg); color:var(--ry-ink-price); font-weight:700; }
.ry-pill:focus-visible{ outline:2px solid var(--ry-red); outline-offset:2px; }
/* Dimmed, not collapsed: the track keeps its height while a tab loads. */
.ry-deals-track[aria-busy="true"]{ opacity:.5; }
.ry-deals-empty{ padding-block: var(--sp-6); font-size:13px; color:var(--ry-gray-500); }

/* ================= 21. MOBILE BOTTOM NAV ================= */
/* Sits below the drawer overlay (z-index 70) so an open drawer covers it, and
   below the PDP sticky buy bar, which is repositioned to clear it. */
.ry-bnav{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:flex; height:calc(var(--ry-bnav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--ry-white); box-shadow:0 -2px 18px rgba(0,0,0,.10);
}
.ry-bnav-item{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--sp-1);
  color:var(--ry-gray-500); font-size:10px; font-weight:600; line-height:1;
}
.ry-bnav-item svg{ width:var(--ry-bnav-icon); height:var(--ry-bnav-icon); }
.ry-bnav-item.is-active{ color:var(--ry-ink); }
.ry-bnav-item:focus-visible{ outline:2px solid var(--ry-red); outline-offset:-2px; }
/* Overrides the header badge's corner anchoring — here it pins to the icon,
   which is centred in a full-width item. */
.ry-bnav .ry-badge{ top:var(--sp-2); right:auto; left:calc(50% + var(--sp-1)); }
/* The bar permanently covers 60px of the viewport, so the page reserves it. */
body{ padding-bottom: calc(var(--ry-bnav-h) + env(safe-area-inset-bottom)); }
/* A PDP also carries the sticky buy card, which floats above the nav and is on
   screen by the time the footer is reachable — 60px alone left the copyright
   row under it at maximum scroll. :has() keys off the add-to-cart button so an
   unpurchasable product, whose bar never shows, keeps the plain 60px. */
@media (max-width: 781px){
  body.single-product:has(.single_add_to_cart_button){
    padding-bottom: calc(var(--ry-bnav-h) + var(--ry-sticky-h) + var(--sp-2) + env(safe-area-inset-bottom));
  }
}

/* Sections 20–21 are declared after §17's desktop block, so their desktop
   overrides have to live here or source order beats the media query. */
@media (min-width: 782px){
  /* The header nav and mega-menu reach all five destinations from here up. */
  .ry-bnav{ display:none; }
  body{ padding-bottom:0; }
  .ry-pill{ font-size:13px; }
}

/* ================= 22. FROSTED GLASS BARS (29/10) ================= */
/* Header stays white at rest too (no navy flip on scroll); header, PDP sticky
   buy card and mobile bottom nav are translucent white with a backdrop blur.
   Solid white fallback where backdrop-filter is unsupported. */
.ry-header, .ry-header.is-scrolled{
  background: rgba(255,255,255,.72); color: var(--ry-ink);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}
.ry-header .ry-logo--onDark{ display:none; }
.ry-header .ry-logo--onLight{ display:block; }
.ry-sticky-buy{
  background: rgba(255,255,255,.70); border-color: rgba(255,255,255,.6);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 -4px 18px rgba(0,0,0,.10);
}
.ry-bnav{
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 -1px 0 rgba(0,0,0,.06), 0 -2px 18px rgba(0,0,0,.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .ry-header, .ry-header.is-scrolled, .ry-sticky-buy, .ry-bnav{ background: var(--ry-white); }
}

/* ================= 23. CATEGORY STRIP: bare line icons (29/10) ================= */
/* No circle: transparent line-art icon only, 20% smaller than the old 60/76px discs. */
.ry-cats .ry-cat-circle{ width:48px; height:48px; flex-basis:48px; border:0; border-radius:0; background:transparent; overflow:visible; }
.ry-cats .ry-cat-circle img{ object-fit:contain; }
@media (min-width:782px){ .ry-cats .ry-cat-circle{ width:61px; height:61px; flex-basis:61px; } }
.ry-cats .ry-cat-circle img{ background:transparent; }

/* ================= 24. BIG DEALS: two-row strip (29/10) ================= */
.ry-deals-track{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(2, auto); grid-auto-columns:var(--card-w); row-gap: var(--card-gap); }
.ry-deals-track > .ry-card{ flex:none; }

/* category strip: icon and label tight together (29/10) */
.ry-cats .ry-cat-item{ gap:6px; }

/* category icons 30% smaller (29/10) */
.ry-cats .ry-cat-circle{ width:34px; height:34px; flex-basis:34px; }
@media (min-width:782px){ .ry-cats .ry-cat-circle{ width:43px; height:43px; flex-basis:43px; } }

/* Big Deals: only "All Deals" is the 2-row strip; a category tab wraps into rows of 3 (as many rows as products). */
.ry-deals:has(.ry-pill.is-active:not([data-term="0"])) .ry-deals-track{
  grid-auto-flow:row; grid-template-rows:none; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-columns:auto; overflow-x:visible; scroll-snap-type:none;
}
@media (min-width:782px){ .ry-deals:has(.ry-pill.is-active:not([data-term="0"])) .ry-deals-track{ grid-template-columns:repeat(auto-fill, var(--card-w)); } }

/* category strip: line icon inside a circle (29/10) */
.ry-cats .ry-cat-circle{ width:48px; height:48px; flex-basis:48px; border-radius:50%; border:1px solid var(--ry-gray-300); background:var(--ry-white); overflow:hidden; }
.ry-cats .ry-cat-circle img{ width:100%; height:100%; padding:9px; object-fit:contain; }
@media (min-width:782px){ .ry-cats .ry-cat-circle{ width:61px; height:61px; flex-basis:61px; } .ry-cats .ry-cat-circle img{ padding:12px; } }
/* category circle 30% smaller (29/10) */
.ry-cats .ry-cat-circle{ width:34px; height:34px; flex-basis:34px; }
.ry-cats .ry-cat-circle img{ padding:6px; }
@media (min-width:782px){ .ry-cats .ry-cat-circle{ width:43px; height:43px; flex-basis:43px; } .ry-cats .ry-cat-circle img{ padding:8px; } }
.ry-cats .ry-cat-circle img{ padding:4px; }
@media (min-width:782px){ .ry-cats .ry-cat-circle img{ padding:5px; } }

/* 30/10: hero wash behind banners OFF for now (colours kept in theme mods ry_hero_N_bg_*) — delete this rule to bring it back */
.ry-hero-slide a{ background-image:none; }
/* 30/10: desktop Big Deals (every tab) wraps — one row if all cards fit, a 2nd row only when they do not */
@media (min-width:782px){ .ry-deals .ry-deals-track{ grid-auto-flow:row; grid-template-rows:none; grid-template-columns:repeat(auto-fill, var(--card-w)); grid-auto-columns:auto; overflow-x:visible; scroll-snap-type:none; } }
/* desktop "All Deals" (one card per category, <=8): all in a single row, cards share the width */
@media (min-width:782px){ .ry-deals:has(.ry-pill.is-active[data-term="0"]) .ry-deals-track{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(0, 1fr); } }

/* ================= 26. CATEGORY STRIP — Flipkart-style tabs (30/10) ================= */
/* Bare line icons with a red accent, one-line 11px labels (long names end in …), the current
   tab gets a soft tile + bold label + red underline. On mobile the strip sticks under the header
   and folds to text-only tabs once you scroll (main.js toggles .is-compact). */
.ry-cats{ gap: var(--sp-4); padding: var(--sp-2) var(--ry-gap) 0; background: var(--ry-white); border-bottom:1px solid var(--ry-gray-300); }
.ry-cats .ry-cat-item{ position:relative; width:auto; min-width:48px; max-width:72px; gap:4px; padding-bottom:8px; }
.ry-cats .ry-cat-circle{ width:36px; height:36px; flex-basis:auto; border:0; border-radius:10px; background:transparent; overflow:hidden; transition:height .18s ease, opacity .18s ease; }
.ry-cats .ry-cat-circle img{ padding:3px; object-fit:contain; background:transparent; }
.ry-cats .ry-cat-item span:last-child{ display:block; max-width:100%; font-size:11px; font-weight:400; line-height:14px; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ry-cats .ry-cat-item.is-active .ry-cat-circle{ background:#FDE8E8; }
.ry-cats .ry-cat-item.is-active span:last-child{ font-weight:700; }
.ry-cats .ry-cat-item.is-active::after{ content:""; position:absolute; left:2px; right:2px; bottom:0; height:3px; border-radius:3px 3px 0 0; background:var(--ry-red); }
@media (max-width:781px){
  .ry-cats{ position:sticky; top:calc(var(--ry-announce-h) + var(--ry-header-h)); z-index:44;
    background:rgba(255,255,255,.88); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); }
  body.ry-no-announce .ry-cats{ top:var(--ry-header-h); }
  .ry-cats.is-compact .ry-cat-circle{ height:0; opacity:0; }
  .ry-cats.is-compact .ry-cat-item{ gap:0; padding-top:6px; }
}
@media (min-width:782px){
  .ry-cats{ gap: var(--sp-8); padding-top: var(--sp-4); }
  .ry-cats .ry-cat-item{ max-width:96px; }
  .ry-cats .ry-cat-circle{ width:44px; height:44px; }
  .ry-cats .ry-cat-item span:last-child{ font-size:12px; line-height:16px; }
}

/* 30/10: mobile — banner→Big Deals gap halved; homepage blog shows 3 small cards per row */
@media (max-width:781px){ .ry-hero + .ry-deals{ padding-top:11px; } }
.ry-blog-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap: var(--card-gap); overflow:visible; }
.ry-blog-row .ry-blog-card{ flex:none; min-width:0; }
.ry-blog-row .ry-blog-card-title{ font-size:11.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (min-width:782px){ .ry-blog-row .ry-blog-card{ width:auto; } .ry-blog-row .ry-blog-card-title{ font-size:14px; } }
@media (min-width:782px){ .ry-blog-row{ grid-template-columns:repeat(5, minmax(0, 1fr)); } }

/* 30/10: homepage mobile — section gaps halved (New Launches, Explore, trust strip, blog …) */
@media (max-width:781px){
  .home .ry-section{ padding-block:16px; }
  .ry-hero + .ry-deals{ padding-top:11px; }
}
/* homepage blog: one scrolling row (3 cards per screen on mobile, 5 on desktop) */
.ry-blog-row{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - var(--card-gap) * 2) / 3); overflow-x:auto; scroll-snap-type:x mandatory; }
.ry-blog-row .ry-blog-card{ scroll-snap-align:start; }
@media (min-width:782px){ .ry-blog-row{ grid-template-columns:none; grid-auto-columns:calc((100% - var(--card-gap) * 4) / 5); } }

/* 30/10: mobile homepage spacing pass — one even rhythm: 24px between sections, 12px heading→content,
   card rows spaced like card columns, no empty band inside cards between name and price. */
@media (max-width:781px){
  .home .ry-section{ padding-block:12px; }
  .ry-hero + .ry-deals{ padding-top:12px; }
  .home .ry-section-head{ margin-bottom:0; }
  .ry-grid{ row-gap: var(--card-gap); }
  .ry-card-price{ margin-top:6px; }
  .ry-pills{ margin-bottom:4px; }
}
@media (max-width:781px){ .ry-card-info{ height:auto; padding-bottom:6px; } .ry-card-price{ margin-top:4px; } }

/* ================= 27. TESTIMONIALS (30/10) ================= */
.ry-testi-row{ display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap: var(--card-gap); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.ry-testi-row::-webkit-scrollbar{ display:none; }
.ry-testi-card{ margin:0; scroll-snap-align:start; display:flex; flex-direction:column; gap: var(--sp-2); padding: var(--sp-4); border:1px solid var(--ry-gray-300); border-radius: var(--ry-radius-card); background: var(--ry-white); }
.ry-testi-stars{ color:#F5A623; font-size:14px; letter-spacing:2px; } .ry-testi-stars span{ color: var(--ry-gray-300); }
.ry-testi-card blockquote{ margin:0; font-size:13px; line-height:1.5; color: var(--ry-ink); }
.ry-testi-card figcaption{ margin-top:auto; font-size:12px; color: var(--ry-gray-700); } .ry-testi-card figcaption b{ color: var(--ry-ink); }
.ry-testi-card figcaption span{ display:block; margin-top:2px; font-size:11px; color: var(--ry-red); font-weight:600; }
@media (min-width:782px){ .ry-testi-row{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(3, 1fr); overflow:visible; } }

/* ================= 28. PRODUCT REVIEW FORM (30/10) ================= */
#reviews .woocommerce-Reviews-title{ font-size:14px; font-weight:700; margin:0 0 4px; }
#reviews .woocommerce-noreviews{ font-size:12.5px; color:var(--ry-gray-500); margin:0 0 var(--sp-3); }
#review_form_wrapper{ border:1px solid var(--ry-gray-300); border-radius:var(--ry-radius-card); padding: var(--sp-4); background:var(--ry-white); }
#reply-title{ display:block; font-size:15px; font-weight:700; margin-bottom: var(--sp-2); }
#review_form .comment-notes{ font-size:11.5px; color:var(--ry-gray-500); margin:0 0 var(--sp-3); }
#review_form label{ display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
#review_form .comment-form-rating select{ display:none; }
.ry-stars-pick{ display:flex; gap:6px; margin-bottom: var(--sp-3); }
.ry-stars-pick button{ font-size:30px; line-height:1; color:var(--ry-gray-300); background:none; border:0; padding:0; cursor:pointer; }
.ry-stars-pick button.on{ color:#F5A623; }
#review_form textarea, #review_form input[type=text], #review_form input[type=email]{ width:100%; border:1px solid var(--ry-gray-300); border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; margin-bottom: var(--sp-3); background:var(--ry-white); }
#review_form textarea{ height:110px; resize:vertical; }
#review_form .comment-form-cookies-consent{ display:flex; gap:8px; align-items:flex-start; font-size:11.5px; color:var(--ry-gray-700); }
#review_form .comment-form-cookies-consent label{ font-weight:400; }
#review_form .form-submit input[type=submit]{ width:100%; height:44px; border:0; border-radius:var(--ry-radius-btn); background:var(--ry-red); color:#fff; font-weight:700; font-size:14px; cursor:pointer; }
#reviews .commentlist{ list-style:none; padding:0; margin:0 0 var(--sp-4); }
#reviews .commentlist li{ border-bottom:1px solid var(--ry-gray-100); padding-block: var(--sp-3); font-size:13px; }
#reviews .commentlist .avatar{ display:none; }

/* 30/10: category tabs on every page — mobile sticky shop toolbar sits below the strip */
@media (max-width:781px){ .ry-shop-toolbar{ top:calc(var(--ry-announce-h) + var(--ry-header-h) + var(--ry-cats-h, 0px)); } }

/* 30/10: Trending ribbon — green with a white trend-up line arrow */
.ry-card-ribbon[data-k="trending"]{ background:#16A34A; color:#fff; display:inline-flex; align-items:center; gap:4px; }
.ry-card-ribbon[data-k="trending"]::before{ content:""; width:12px; height:12px; flex:none; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 17l6-6 4 4 8-8%27/%3E%3Cpath d=%27M15 7h6v6%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 17l6-6 4 4 8-8%27/%3E%3Cpath d=%27M15 7h6v6%27/%3E%3C/svg%3E") center/contain no-repeat; }
/* trending capsule: fully rounded, slimmer */
.ry-card-ribbon[data-k="trending"]{ border-radius:999px; padding:2px 7px 2px 5px; line-height:12px; gap:3px; }
.ry-card-ribbon[data-k="trending"]::before{ width:10px; height:10px; }

/* 30/10: Best Selling (yellow) + Most Trusted (blue) capsules, same shape as Trending */
.ry-card-ribbon[data-k="best-selling"], .ry-card-ribbon[data-k="most-trusted"]{ display:inline-flex; align-items:center; gap:3px; border-radius:999px; padding:2px 7px 2px 5px; line-height:12px; }
.ry-card-ribbon[data-k="best-selling"]{ background:#FACC15; color:#111; }
.ry-card-ribbon[data-k="most-trusted"]{ background:#2563EB; color:#fff; }
.ry-card-ribbon[data-k="best-selling"]::before, .ry-card-ribbon[data-k="most-trusted"]::before{ content:""; width:10px; height:10px; flex:none; background:currentColor; }
.ry-card-ribbon[data-k="best-selling"]::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m12 2 3 6.5 7 .9-5 4.8 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.8 7-.9z%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m12 2 3 6.5 7 .9-5 4.8 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.8 7-.9z%27/%3E%3C/svg%3E") center/contain no-repeat; }
.ry-card-ribbon[data-k="most-trusted"]::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z%27/%3E%3Cpath d=%27m9 12 2 2 4-4%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 2 4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z%27/%3E%3Cpath d=%27m9 12 2 2 4-4%27/%3E%3C/svg%3E") center/contain no-repeat; }

/* 30/10: High Demand (orange, flame) capsule for LED bulbs */
.ry-card-ribbon[data-k="high-demand"]{ display:inline-flex; align-items:center; gap:3px; border-radius:999px; padding:2px 7px 2px 5px; line-height:12px; background:#EA580C; color:#fff; }
.ry-card-ribbon[data-k="high-demand"]::before{ content:""; width:10px; height:10px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 2c1 4 6 6 6 12a6 6 0 0 1-12 0c0-3 2-5 3-6 0 2 1 3 2 3 0-4-1-6 1-9z%27/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M12 2c1 4 6 6 6 12a6 6 0 0 1-12 0c0-3 2-5 3-6 0 2 1 3 2 3 0-4-1-6 1-9z%27/%3E%3C/svg%3E") center/contain no-repeat; }

/* 30/10: badge capsule moved off the photo into the card info, above the name */
.ry-card-info .ry-card-ribbon{ position:static; align-self:flex-start; max-width:100%; margin:2px 0 0; }
.ry-card-info{ height:auto; }
/* 30/10: capsule back on the photo (top-left); main images keep a clear band at the top for it */

/* ================= 29. PDP GALLERY — Amazon-style thumb rail on phones too + autoplay (30/10) ================= */
@media (max-width:1023px){
  .ry-gallery{ display:flex; flex-direction:row-reverse; gap: var(--sp-2); align-items:flex-start; }
  .ry-gallery-main{ flex:1 1 auto; min-width:0; }
  .ry-gallery-count{ display:none; }
  .ry-gallery-thumbs{ display:flex; flex:0 0 52px; flex-direction:column; gap: var(--sp-2); margin-top:0; overflow-y:auto; overflow-x:hidden; max-height:100%; }
  .ry-gallery-thumbs .ry-thumb{ width:52px; height:52px; }
}
.ry-thumb.is-active{ border-color:var(--ry-red); box-shadow:0 0 0 1px var(--ry-red); }
.ry-thumb img{ width:100%; height:100%; object-fit:cover; }
/* 30/10: phones — thumbnails as a row UNDER the main image (tablet 782–1023 keeps the side rail) */
@media (max-width:781px){
  .ry-gallery{ flex-direction:column; gap: var(--sp-2); }
  .ry-gallery-main{ width:100%; }
  .ry-gallery-thumbs{ flex:none; flex-direction:row; justify-content:center; overflow-x:auto; overflow-y:hidden; max-height:none; width:100%; }
}

/* ================= 30. ABOUT THIS PRODUCT — A+ infographic stack (30/10) ================= */
.ry-aplus-stack{ display:flex; flex-direction:column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ry-aplus-stack img{ display:block; width:100%; height:auto; aspect-ratio:4/3; border-radius: var(--ry-radius); background:#111; }
@media (min-width:782px){ .ry-aplus-stack{ max-width:900px; gap: var(--sp-3); } }

/* 31. Specifications table (About this product) */
.ry-page-content .ry-spec-table{width:100%;border-collapse:separate;border-spacing:0;margin:8px 0 16px;border:1px solid #e3e6ea;border-radius:12px;overflow:hidden;font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums}
.ry-page-content .ry-spec-table th,.ry-page-content .ry-spec-table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #e3e6ea}
.ry-page-content .ry-spec-table tr:last-child th,.ry-page-content .ry-spec-table tr:last-child td{border-bottom:0}
.ry-page-content .ry-spec-table th{width:38%;background:#f5f6f8;color:#555b63;font-weight:600;border-right:1px solid #e3e6ea}
.ry-page-content .ry-spec-table td{color:#16181c;font-weight:500;background:#fff}
@media (max-width:600px){.ry-page-content .ry-spec-table th,.ry-page-content .ry-spec-table td{padding:8px 12px;font-size:13px}}

/* 32. Five-star rating rows (gold = rating, grey = remainder) */
.ry-stars,.star-rating{--s:14px;position:relative;display:inline-block;flex:0 0 auto;width:calc(var(--s) * 5);height:var(--s);vertical-align:middle;overflow:hidden;font-size:0;line-height:0;color:transparent;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 27 27'%3E%3Cpath fill='%23D1D5DB' d='M12 2l2.9 6.3 6.6.8-4.9 4.5 1.3 6.6L12 17l-5.9 3.2 1.3-6.6L2.5 9.1l6.6-.8z'/%3E%3C/svg%3E") repeat-x 0 0/var(--s) var(--s)}
.ry-stars::before,.star-rating span{content:"";position:absolute;inset:0 auto 0 0;width:var(--r,0%);overflow:hidden;font-size:0;color:transparent;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.5 -1.5 27 27'%3E%3Cpath fill='%23F5A623' d='M12 2l2.9 6.3 6.6.8-4.9 4.5 1.3 6.6L12 17l-5.9 3.2 1.3-6.6L2.5 9.1l6.6-.8z'/%3E%3C/svg%3E") repeat-x 0 0/var(--s) var(--s)}
.star-rating span{width:auto}
.star-rating span strong{display:none}
.ry-card-rating .ry-stars{--s:9px}
.ry-review-summary .ry-stars{--s:20px;margin-inline:8px 4px}
.star-rating{--s:15px;margin-bottom:4px}
@media (min-width:1024px){.ry-card-rating .ry-stars{--s:11px}}
/* home cards: single gold star + number; full 5-star row only inside the product page */
.home .ry-card-rating .ry-stars{width:var(--s)}
.home .ry-card-rating .ry-stars::before{width:100%}
/* every product card (home, category, shop, search, related): single gold star + number */
.ry-card-rating .ry-stars{width:var(--s)}
.ry-card-rating .ry-stars::before{width:100%}

/* 33. YouTube-style loading shimmer: grey sweep behind every image box until the photo paints */
@keyframes ry-shimmer{0%{background-position:-160% 0}100%{background-position:260% 0}}
.ry-card-img,.ry-blog-card-img,.ry-aplus-media,.ry-gallery-img,.ry-thumb,.ry-hero-slide picture,.ry-explore-banner picture{
	background-color:#eceef1;
	background-image:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 80%);
	background-size:60% 100%;background-repeat:no-repeat;animation:ry-shimmer 1.3s ease-in-out infinite}
.ry-hero-slide picture,.ry-explore-banner picture{display:block}
.ry-is-loaded{animation:none!important;background-image:none!important}
/* below-the-fold photos fade in instead of popping (the first hero banner is never faded — it is the LCP) */
img.ry-fade{opacity:0;transition:opacity .35s ease}
img.ry-fade.ry-in{opacity:1}
@media (prefers-reduced-motion:reduce){.ry-card-img,.ry-blog-card-img,.ry-aplus-media,.ry-gallery-img,.ry-thumb,.ry-hero-slide picture,.ry-explore-banner picture{animation:none}img.ry-fade{opacity:1;transition:none}}

/* 34. Passwordless login / sign-up (Google · Truecaller · Email OTP) */
.ry-auth{max-width:420px;margin:8px auto 32px;padding:24px 20px;border:1px solid var(--ry-gray-300);border-radius:16px;background:var(--ry-white)}
.ry-auth-head h2{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.5px}
.ry-auth-head p{margin:0 0 20px;font-size:13px;color:var(--ry-gray-500)}
.ry-auth-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;padding:0 16px;border-radius:12px;border:1.5px solid var(--ry-gray-300);background:var(--ry-white);color:var(--ry-ink);font:600 15px/1 inherit;cursor:pointer}
.ry-auth-btn:disabled{opacity:.6;cursor:default}
.ry-auth-btn.is-loading{opacity:.6;pointer-events:none}
.ry-auth-primary{background:var(--ry-red);border-color:var(--ry-red);color:var(--ry-white);margin-top:12px}
.ry-auth-primary:hover{background:var(--ry-red-dark);border-color:var(--ry-red-dark)}
.ry-auth-tc{border-color:#0087FF;color:#0087FF;margin-top:12px}
.ry-auth-google{margin-bottom:0}
.ry-auth-google .nsl-container{display:block!important;padding:0!important}
.ry-auth-google .nsl-container-buttons{display:block!important;padding:0!important}
.ry-auth-google .nsl-button{width:100%!important;max-width:none!important;height:48px;border-radius:12px!important;box-shadow:none!important;border:1.5px solid var(--ry-gray-300)!important}
.ry-auth-or{display:flex;align-items:center;gap:12px;margin:20px 0 16px;font-size:12px;color:var(--ry-gray-500)}
.ry-auth-or::before,.ry-auth-or::after{content:"";flex:1;height:1px;background:var(--ry-gray-300)}
.ry-auth-email label{display:block;margin-bottom:8px;font-size:13px;font-weight:600}
.ry-auth-email label small{font-weight:400;color:var(--ry-gray-500)}
.ry-auth-email input{width:100%;height:48px;padding:0 16px;border:1.5px solid var(--ry-gray-300);border-radius:12px;font-size:16px;background:var(--ry-white)}
.ry-auth-email input:focus{outline:none;border-color:var(--ry-ink)}
#ry-otp-code{letter-spacing:8px;font-size:20px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.ry-auth-row{display:flex;justify-content:space-between;margin-top:12px}
.ry-auth-link{background:none;border:0;padding:4px 0;color:var(--ry-red);font-size:13px;font-weight:600;cursor:pointer}
.ry-auth-link:disabled{color:var(--ry-gray-500);cursor:default}
.ry-auth-msg{margin:12px 0 0;padding:8px 12px;border-radius:8px;background:#FDECEC;color:#9B1C1C;font-size:13px}
.ry-auth-msg.is-ok{background:#E8F6EE;color:#14632F}
.ry-auth-legal{margin:16px 0 0;font-size:11.5px;color:var(--ry-gray-500);line-height:1.5}
.ry-auth-legal a{color:var(--ry-gray-700);text-decoration:underline}
.ry-auth-pass{margin-top:20px;border-top:1px solid var(--ry-gray-300);padding-top:12px}
.ry-auth-pass summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--ry-gray-700);padding:4px 0}
.ry-auth-pass form{margin-top:12px}

/* 35. Smooth scrolling (30/10)
   - frosted bars keep the glass look but blur less (blur cost grows with radius; 8px reads the same on a 375px phone)
     and sit on their own GPU layer so scrolling content under them is not repainted with them
   - loading shimmer moves on the GPU (transform) instead of repainting background-position every frame
   - below-the-fold home sections and the footer skip rendering until they come near the screen */
.ry-header, .ry-header.is-scrolled{ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(255,255,255,.82); }
.ry-sticky-buy, .ry-bnav{ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(255,255,255,.82); }
@media (max-width:781px){ .ry-cats{ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgba(255,255,255,.9); } }
.ry-header, .ry-bnav, .ry-sticky-buy, .ry-cats{ transform: translateZ(0); }
.ry-card-img,.ry-blog-card-img,.ry-aplus-media,.ry-gallery-img,.ry-thumb,.ry-hero-slide picture,.ry-explore-banner picture{
	animation:none; background-image:none; background-color:#eceef1; position:relative; overflow:hidden }
.ry-card-img::before,.ry-blog-card-img::before,.ry-aplus-media::before,.ry-gallery-img::before,.ry-thumb::before,.ry-hero-slide picture::before,.ry-explore-banner picture::before{
	content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
	background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 70%);
	transform:translateX(-100%); animation:ry-shimmer-x 1.3s ease-in-out infinite; will-change:transform }
.ry-card-img > img,.ry-blog-card-img > img,.ry-aplus-media > img,.ry-thumb > img,.ry-hero-slide picture > img,.ry-explore-banner picture > img{ position:relative; z-index:1 }
.ry-is-loaded::before{ content:none !important; animation:none !important }
@keyframes ry-shimmer-x{ to{ transform:translateX(100%) } }
@media (prefers-reduced-motion:reduce){ .ry-card-img::before,.ry-blog-card-img::before,.ry-aplus-media::before,.ry-gallery-img::before,.ry-thumb::before,.ry-hero-slide picture::before,.ry-explore-banner picture::before{ animation:none } }
.home .ry-testi, .ry-footer{ content-visibility:auto; contain-intrinsic-size:auto 600px; }

/* 36. Card extras (30/10): discount circle on the photo, rating above the price, Amazon-style "Save ₹" and delivery days */
.ry-card-offdot{ position:absolute; top:6px; right:6px; z-index:3; width:40px; height:40px; border-radius:50%;
  background:#9B0E14; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:7.5px; font-weight:700; line-height:1; letter-spacing:.02em; box-shadow:0 2px 6px rgba(0,0,0,.25); font-variant-numeric:tabular-nums }
.ry-card-offdot b{ font-size:12px; font-weight:800; letter-spacing:-.3px; margin-bottom:1px }
.ry-card-info .ry-card-rating{ display:flex; align-items:center; gap:4px; height:auto; padding:0; margin-top:4px; background:none; color:var(--ry-ink); font-size:11px; font-weight:400; }
.ry-card-info .ry-card-rating b{ font-weight:700 }
.ry-card-info .ry-card-rating .ry-stars{ --s:11px }
.ry-card-rcount{ color:var(--ry-gray-500) }
.ry-card-save{ display:block; margin-top:2px; color:#007185; font-size:11px; font-weight:600; line-height:1.3 }
.ry-card-save .woocommerce-Price-amount{ color:inherit }
.ry-card-eta{ display:flex; align-items:center; gap:4px; margin-top:2px; color:var(--ry-gray-700); font-size:10.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ry-card-eta svg{ width:13px; height:13px; flex:0 0 13px; color:#007185 }
@media (min-width:782px){
  .ry-card-offdot{ width:48px; height:48px; font-size:9px; top:8px; right:8px }
  .ry-card-offdot b{ font-size:15px }
  .ry-card-info .ry-card-rating, .ry-card-save{ font-size:13px }
  .ry-card-info .ry-card-rating .ry-stars{ --s:13px }
  .ry-card-eta{ font-size:12px }
}
/* 36b. phone cards are ~110px wide: smaller circle so it never covers the capsule; delivery line may wrap */
@media (max-width:781px){
  .ry-card-offdot{ width:32px; height:32px; top:4px; right:4px; font-size:6px }
  .ry-card-offdot b{ font-size:10px }
  .ry-card-ribbon{ max-width:calc(100% - 44px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
}
.ry-card-eta{ white-space:normal; align-items:flex-start }
.ry-card-eta svg{ margin-top:1px }
@media (max-width:781px){
  .ry-card-ribbon{ top:4px; left:4px; padding:3px 6px; font-size:8px; max-width:calc(100% - 42px) }
  .ry-card-ribbon::before{ transform:scale(.85) }
  .ry-card-offdot{ width:30px; height:30px; top:3px; right:3px }
  .ry-card-offdot b{ font-size:9.5px }
}
/* phones: a 101px card cannot hold "High Demand" (77px) and the circle side by side — circle drops just below the capsule row, still on the right */
@media (max-width:781px){
  .ry-card-ribbon{ max-width:calc(100% - 8px) }
  .ry-card-offdot{ top:24px; right:4px; width:32px; height:32px }
  .ry-card-offdot b{ font-size:10px }
}
/* 30/10: discount circle smaller (Ansar) */
.ry-card-offdot{ width:38px; height:38px; font-size:7px }
.ry-card-offdot b{ font-size:11.5px }
@media (max-width:781px){
  .ry-card-offdot{ top:23px; right:4px; width:26px; height:26px; font-size:5px; box-shadow:0 1px 4px rgba(0,0,0,.25) }
  .ry-card-offdot b{ font-size:8.5px; margin-bottom:0 }
}
/* 30/10: "Save ₹" as a solid blue deal box (Amazon-style), not plain blue text */
.ry-card-save{ display:inline-block; align-self:flex-start; margin-top:4px; padding:2px 6px; border-radius:3px; background:#146EB4; color:#fff; font-size:10.5px; font-weight:700; line-height:1.4; letter-spacing:.01em }
.ry-card-save .woocommerce-Price-amount, .ry-card-save .woocommerce-Price-currencySymbol{ color:#fff }
@media (min-width:782px){ .ry-card-save{ font-size:12px; padding:3px 8px } }
/* 30/10: shorter cards — no 20px gap above the name on desktop, delivery line fits one row on phones */
@media (min-width:782px){ .ry-card-title{ margin-top:6px } }
.ry-card-eta .ry-eta-long{ display:none }
@media (min-width:782px){ .ry-card-eta .ry-eta-long{ display:inline } .ry-card-eta .ry-eta-short{ display:none } }
.ry-card-eta{ white-space:nowrap }
@media (max-width:781px){ .ry-card-eta .ry-eta-short{ display:none } }
/* 30/10: Save box in ice blue (pale blue fill, deep blue text) */
.ry-card-save{ background:#DDF2FF; color:#0B4F8A; border:1px solid #B5DFFA }
.ry-card-save .woocommerce-Price-amount, .ry-card-save .woocommerce-Price-currencySymbol{ color:#0B4F8A }

/* 30/10: About this product — desktop shows 2:1 rectangles, full content width */
.ry-aplus-pic{ display:block }
@media (min-width:782px){
  .ry-aplus-stack{ max-width:none }
  .ry-aplus-stack .ry-aplus-pic img{ aspect-ratio:2/1 }
}

/* 37. Checkout address auto-fill (30/10) */
.ry-pin-hint{ display:block; margin-top:4px; font-size:12px; color:#0B4F8A; line-height:1.4 }
.ry-geo-btn{ display:inline-flex; align-items:center; gap:6px; margin:4px 0 12px; padding:8px 12px; border:1.5px solid #B5DFFA; border-radius:10px; background:#EEF8FF; color:#0B4F8A; font:600 13px/1 inherit; cursor:pointer }
.ry-geo-btn:disabled{ opacity:.6 }

/* 38. Mobile number + password block on the login page */
.ry-auth-tabs{ display:flex; gap:4px; padding:4px; margin-bottom:16px; border-radius:12px; background:var(--ry-gray-100) }
.ry-auth-tabs button{ flex:1; height:40px; border:0; border-radius:9px; background:none; font:600 14px/1 inherit; color:var(--ry-gray-700); cursor:pointer }
.ry-auth-tabs button.is-on{ background:var(--ry-white); color:var(--ry-ink); box-shadow:0 1px 3px rgba(0,0,0,.12) }
.ry-auth-reg label{ margin-top:12px }
.ry-auth-reg label:first-child{ margin-top:0 }
.ry-auth-mob .woocommerce-form-login .input-text{ width:100%; height:48px; padding:0 16px; border:1.5px solid var(--ry-gray-300); border-radius:12px; font-size:16px }
.ry-auth-mob .woocommerce-form-login .woocommerce-form-login__submit{ width:100%; height:48px; border-radius:12px; margin-top:8px }

/* 39. My Account: profile header, card dashboard, back arrow */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{ display:none }
.woocommerce-account.logged-in .woocommerce-MyAccount-content{ width:100%; float:none; max-width:880px; margin:0 auto }
.ry-acc-profile{ display:flex; align-items:center; gap:16px; padding:16px; margin-bottom:16px; border:1px solid var(--ry-gray-300); border-radius:16px; background:var(--ry-white) }
.ry-acc-avatar img{ display:block; width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--ry-gray-100) }
.ry-acc-who{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.ry-acc-who b{ font-size:18px; font-weight:700; letter-spacing:-.3px }
.ry-acc-who small{ font-size:13px; color:var(--ry-gray-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ry-acc-grid{ display:grid; grid-template-columns:1fr; gap:8px }
@media (min-width:600px){ .ry-acc-grid{ grid-template-columns:1fr 1fr; gap:12px } }
.ry-acc-card{ display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--ry-gray-300); border-radius:14px; background:var(--ry-white); color:var(--ry-ink); text-decoration:none; transition:border-color .15s, box-shadow .15s }
.ry-acc-card:hover{ border-color:var(--ry-ink); box-shadow:0 4px 14px rgba(0,0,0,.06) }
.ry-acc-ic{ flex:0 0 44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#FDECEC; color:var(--ry-red) }
.ry-acc-ic svg{ width:22px; height:22px }
.ry-acc-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.ry-acc-txt b{ font-size:15px; font-weight:700 }
.ry-acc-txt small{ font-size:12.5px; color:var(--ry-gray-500) }
.ry-acc-go{ flex:0 0 18px; width:18px; height:18px; color:var(--ry-gray-500) }
.ry-acc-card.is-logout .ry-acc-ic{ background:var(--ry-gray-100); color:var(--ry-gray-700) }
.ry-acc-back{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; margin-right:8px; border-radius:50%; background:var(--ry-gray-100); color:var(--ry-ink); vertical-align:middle; text-decoration:none }
.ry-acc-back svg{ width:20px; height:20px }
.ry-acc-back:hover{ background:var(--ry-gray-300) }
/* header: signed-in shopper sees their photo on the account icon */
.ry-icon-btn .ry-hdr-avatar{ display:block; width:26px; height:26px; border-radius:50%; object-fit:cover }
.ry-page-content a.ry-acc-card, .ry-page-content a.ry-acc-card:hover{ text-decoration:none; color:var(--ry-ink) }
.ry-page-content a.ry-acc-card b{ color:var(--ry-ink) }
.ry-page-content a.ry-acc-card small{ color:var(--ry-gray-500) }
.woocommerce-account.logged-in .woocommerce-MyAccount-content{ margin:0 }
.ry-page-title .ry-acc-back, .ry-page-title .ry-acc-back:hover{ text-decoration:none }

/* 40. "‹" back button beside every inner-page heading */
.ry-back{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; margin-right:8px; border-radius:50%; background:var(--ry-gray-100); color:var(--ry-ink); vertical-align:middle; text-decoration:none }
.ry-back svg{ width:20px; height:20px }
.ry-back:hover{ background:var(--ry-gray-300); text-decoration:none }
h1 .ry-back{ position:relative; top:-2px }
.ry-pdp > .ry-back{ float:left; margin:6px 10px 0 0 }
.ry-pdp > .ry-back + .ry-breadcrumb{ min-height:36px; display:flex; align-items:center; flex-wrap:wrap }
/* 41. Phones: product gallery thumbnails become dots (same buttons, same JS — the active one is red) */
@media (max-width:781px){
  .ry-gallery-count{ display:none }
  .ry-gallery-thumbs{ gap:8px; padding:4px 0 2px; overflow:visible }
  .ry-gallery-thumbs .ry-thumb{ flex:0 0 8px; width:8px; height:8px; padding:0; border:0; border-radius:50%; background:var(--ry-gray-300); box-shadow:none; transition:width .2s, background .2s }
  .ry-gallery-thumbs .ry-thumb img{ display:none }
  .ry-gallery-thumbs .ry-thumb::before{ content:none }
  .ry-gallery-thumbs .ry-thumb.is-active{ flex-basis:22px; width:22px; border-radius:4px; background:var(--ry-red); box-shadow:none }
  .ry-gallery-thumbs .ry-thumb{ position:relative }
  .ry-gallery-thumbs .ry-thumb::after{ content:""; position:absolute; inset:-10px -4px }   /* bigger tap area */
}

/* 42. Track order page */
.ry-track-form{ max-width:480px; margin:8px 0 16px; padding:20px; border:1px solid var(--ry-gray-300); border-radius:16px; background:var(--ry-white) }
.ry-track-row{ margin-bottom:12px }
.ry-track-row label{ display:block; margin-bottom:6px; font-size:13px; font-weight:600 }
.ry-track-row input{ width:100%; height:48px; padding:0 16px; border:1.5px solid var(--ry-gray-300); border-radius:12px; font-size:16px }
.ry-track-row input:focus{ outline:none; border-color:var(--ry-ink) }
.ry-track-hint{ margin:12px 0 0; font-size:12.5px; color:var(--ry-gray-500) }
#ry-track{ max-width:480px }
.ry-track-card{ padding:20px; border:1px solid var(--ry-gray-300); border-radius:16px; background:var(--ry-white) }
.ry-track-head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.ry-track-head b{ font-size:18px }
.ry-track-badge{ padding:4px 10px; border-radius:999px; background:color-mix(in srgb, var(--c) 14%, white); color:var(--c); font-size:12.5px; font-weight:700 }
.ry-track-date{ display:block; margin-top:2px; color:var(--ry-gray-500); font-size:12.5px }
.ry-track-steps{ display:flex; justify-content:space-between; margin:20px 0 8px; padding:0; list-style:none; position:relative; counter-reset:none }
.ry-track-steps::before{ content:""; position:absolute; left:8%; right:8%; top:7px; height:2px; background:var(--ry-gray-300) }
.ry-track-steps li{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11.5px; color:var(--ry-gray-500); text-align:center }
.ry-track-steps li span{ width:16px; height:16px; border-radius:50%; background:var(--ry-white); border:2px solid var(--ry-gray-300) }
.ry-track-steps li.is-done{ color:var(--ry-ink) }
.ry-track-steps li.is-done span{ background:#1E7A5A; border-color:#1E7A5A }
.ry-track-steps li.is-now{ font-weight:700 }
.ry-track-steps li.is-now span{ box-shadow:0 0 0 4px rgba(30,122,90,.2) }
.ry-track-ship{ display:flex; flex-direction:column; gap:4px; margin:12px 0; padding:12px; border-radius:12px; background:#EEF8FF; color:#0B4F8A; font-size:13.5px }
.ry-track-ship .ry-auth-btn{ margin-top:8px; height:40px; border-color:#B5DFFA; color:#0B4F8A; text-decoration:none }
.ry-track-items{ margin:12px 0 0; padding:0; list-style:none; border-top:1px dashed var(--ry-gray-300) }
.ry-track-items li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed var(--ry-gray-300); font-size:13.5px }
.ry-track-total{ display:flex; justify-content:space-between; padding-top:10px; font-size:15px }
.ry-track-pay{ color:var(--ry-gray-500) }
.ry-page-content .ry-track-items{ padding-left:0; margin-left:0 }
.ry-page-content .ry-track-items li{ list-style:none; margin:0 }
.ry-page-content .ry-track-steps{ padding-left:0; margin-left:0 }
.ry-page-content .ry-track-steps li{ list-style:none; margin:0 }
/* 43. Ryolite Digital logo (30/10): stacked mark ~1.92:1 — taller box so "digital" stays readable */
.ry-logo .ry-logo--onLight{ aspect-ratio:2055/1072 }
.ry-header .ry-logo{ height:42px }
@media (min-width:782px){ .ry-header .ry-logo{ height:52px } }
.ry-footer .ry-logo img{ height:44px; width:auto }
/* 43b. Ryolite Digital is the one-line black mark (~4.96:1), not the stacked one */
.ry-logo .ry-logo--onLight{ aspect-ratio:4155/838 }
.ry-header .ry-logo{ height:26px }
@media (min-width:782px){ .ry-header .ry-logo{ height:32px } }
.ry-footer .ry-logo img{ height:26px; width:auto }
/* 43c. Ryolite Digital: black "ryolite" + same-size thin "digital" (1200x264 → 4.55:1) */
.ry-logo .ry-logo--onLight{ aspect-ratio:1200/264 }
.ry-header .ry-logo{ height:28px }
@media (min-width:782px){ .ry-header .ry-logo{ height:34px } }
.ry-footer .ry-logo img{ height:28px; width:auto }
/* 43d. logo bigger (Ansar 30/10) */
.ry-header .ry-logo{ height:36px }
@media (min-width:782px){ .ry-header .ry-logo{ height:46px } }
.ry-footer .ry-logo img{ height:34px }
/* 44. Phones: no hamburger — the logo takes its place (Ansar 30/10). Categories stay in the strip + bottom nav. */
@media (max-width:1023px){ .ry-header .ry-hamburger{ display:none } }
/* 45. Logo strip (header) 20% taller (Ansar 30/10): 48→58px phones, 65→78px desktop */
:root{ --ry-header-h:58px }
@media (min-width:782px){ :root{ --ry-header-h:65px } }   /* desktop unchanged (Ansar: desktop mat badana) */

/* 46. Footer: Ryolite apps under the logo — Google Play badge + Flashlight + Rydio icons */
.ry-foot-apps{ display:flex; align-items:center; gap:12px; margin:12px 0 4px; flex-wrap:wrap }
.ry-foot-gp img{ display:block; height:48px; width:auto; margin-left:-7px }   /* badge PNG has built-in side padding */
.ry-foot-app{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ry-gray-700); font-size:11px; font-weight:600; text-decoration:none }
.ry-foot-app img{ display:block; width:44px; height:44px; border-radius:11px; box-shadow:0 1px 4px rgba(0,0,0,.15) }
.ry-foot-app:hover span{ color:var(--ry-ink) }
.ry-foot-apps img{ background:transparent !important }
/* 46b. Phones: logo centred, Google Play badge under it, app icons in one row under the badge */
@media (max-width:781px){
  .ry-footer-col:first-child{ text-align:center }
  .ry-footer-col:first-child > .ry-logo{ justify-content:center; margin:0 auto }
  .ry-foot-apps{ display:grid; grid-template-columns:repeat(auto-fit, 72px); justify-content:center; justify-items:center; row-gap:12px; column-gap:16px }
  .ry-foot-gp{ grid-column:1 / -1 }
  .ry-foot-gp img{ margin-left:0 }
}
@media (max-width:781px){
  .ry-foot-apps{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:12px 20px }
  .ry-foot-gp{ flex:0 0 100%; display:flex; justify-content:center }
}
/* 46c. Phones: Google Play badge + Flashlight + Rydio in ONE centred row (Ansar 30/10) */
@media (max-width:781px){
  .ry-foot-apps{ flex-wrap:nowrap; align-items:center; gap:14px }
  .ry-foot-gp{ flex:0 0 auto }
  .ry-foot-gp img{ height:44px }
  .ry-foot-app img{ width:40px; height:40px; border-radius:10px }
}
@media (max-width:781px){ .ry-foot-apps{ align-items:flex-start } .ry-foot-gp{ margin-top:-2px } }
@media (max-width:781px){ .ry-foot-gp img{ margin:0 -6px } }
/* 46d. tight-cropped Play badge: same 40px height as the app icons (phones), 44px desktop */
.ry-foot-gp img{ height:44px; margin:0; border-radius:8px }
@media (max-width:781px){ .ry-foot-apps{ align-items:flex-start } .ry-foot-gp{ margin-top:0 } .ry-foot-gp img{ height:40px; margin:0 } .ry-foot-app img{ width:40px; height:40px } }
/* 46e. caption under the Play badge, styled like the app names */
.ry-foot-gp{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ry-gray-700); font-size:11px; font-weight:600; text-decoration:none }

/* 47. Offer banners — Explore Ryolite (2 per row, 2 rows) and /offers/ */
.ry-offers-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--card-gap, 10px) }
.ry-offer{ display:block; border-radius:var(--ry-radius-promo, 10px); overflow:hidden; background:var(--ry-gray-100) }
.ry-offer img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover }
.ry-offer:focus-visible{ outline:2px solid var(--ry-red); outline-offset:3px }
@media (min-width:782px){ .ry-offers-grid.ry-offers-all{ grid-template-columns:repeat(4, minmax(0,1fr)) } .ry-offers-grid{ gap:16px } }
/* desktop: 4 offers in one row (2×2 squares were ~750px each); phones stay 2×2 */
@media (min-width:782px){ .ry-offers-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
/* phones: card delivery line reads "Delivery 3–7 days" next to the truck */
.ry-card-eta .ry-eta-mob{ display:none }
@media (max-width:781px){ .ry-card-eta .ry-eta-mob{ display:inline } .ry-card-eta{ font-size:10px; letter-spacing:-.2px; gap:3px } .ry-card-eta svg{ width:12px; height:12px; flex-basis:12px } }
@media (max-width:370px){ .ry-card-eta{ font-size:9.5px; letter-spacing:-.3px; gap:2px } .ry-card-eta svg{ width:11px; height:11px; flex-basis:11px } }
/* 48. Phones: no cart icon in the header — the bottom bar already has Cart (Ansar 30/10) */
@media (max-width:781px){ .ry-header #ry-open-cart{ display:none } }

/* 49. Bottom bar centre: Rydio LIVE button — raised black tile like the Rydio app icon, pulsing red dot */
.ry-bnav-live{ position:relative }
.ry-live-tile{ position:relative; display:block; width:46px; height:46px; margin-top:-22px; border-radius:14px; background:#0b0b0c; box-shadow:0 6px 16px rgba(0,0,0,.28), 0 0 0 3px #fff; overflow:hidden }
.ry-live-tile img{ display:block; width:100%; height:100%; object-fit:cover; background:transparent !important }
.ry-live-dot{ position:absolute; right:5px; top:5px; width:7px; height:7px; border-radius:50%; background:#ff2a2a; box-shadow:0 0 0 0 rgba(255,42,42,.6); animation:ry-live-ping 1.6s ease-out infinite }
@keyframes ry-live-ping{ 0%{ box-shadow:0 0 0 0 rgba(255,42,42,.6) } 80%,100%{ box-shadow:0 0 0 7px rgba(255,42,42,0) } }
.ry-bnav-live > span:last-child{ font-weight:700; color:#E20809 }
@media (prefers-reduced-motion:reduce){ .ry-live-dot{ animation:none } }
/* 47b. Explore Ryolite = single auto-moving row of offer banners: 2 on screen (phones), 4 (desktop) */
.ry-offers-row{ gap:var(--card-gap, 10px) }
.ry-offers-row .ry-offer{ flex:0 0 calc((100% - var(--card-gap, 10px)) / 2); scroll-snap-align:start }
@media (min-width:782px){ .ry-offers-row{ gap:16px } .ry-offers-row .ry-offer{ flex-basis:calc((100% - 48px) / 4) } }
/* 49b. Bottom bar centre = black "RYDIO •LIVE" wordmark (no icon tile) */
.ry-live-wm{ display:flex; flex-direction:column; align-items:flex-end; justify-content:center; height:100%; color:#0b0b0c; font-family:"poppins","Inter",sans-serif; font-weight:900; line-height:.9; letter-spacing:-.5px }
.ry-live-wm b{ display:flex; align-items:center; gap:3px; font-size:15px; font-weight:900 }
.ry-live-wm b:last-child{ font-size:15px }
.ry-live-wm .ry-live-dot{ position:static; display:inline-block; width:7px; height:7px; border-radius:50%; background:#ff2a2a }
/* 49c. the Rydio app wordmark itself (RYDIO with radio-ring O, •LIVE) in black; red dot pops then pings every 2s like the app */
.ry-live-wm{ display:flex; align-items:center; justify-content:center; height:100%; flex-direction:row }
.ry-bnav-wm{ display:block; height:34px; width:auto; color:#0b0b0c; overflow:visible }
.ry-bnav-wm .aw-dot, .ry-bnav-wm .aw-ping{ transform-box:fill-box; transform-origin:center; fill:#FF0A2C }
.ry-bnav-wm .aw-dot{ animation:awPop .7s cubic-bezier(.34,1.56,.64,1) .2s both }
.ry-bnav-wm .aw-ping{ opacity:0; animation:awPing 2s ease-out 1s infinite }
@keyframes awPop{ 0%{ transform:scale(0) } 60%{ transform:scale(1.35) } 100%{ transform:scale(1) } }
@keyframes awPing{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(2.8); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .ry-bnav-wm .aw-dot, .ry-bnav-wm .aw-ping{ animation:none } .ry-bnav-wm .aw-ping{ display:none } }
.ry-bnav .ry-bnav-live svg.ry-bnav-wm{ width:auto; height:38px; max-width:none; flex:none }
/* §49d RYDIO LIVE pill: 5% grey rounded box */
.ry-bnav .ry-bnav-live .ry-live-wm{ display:inline-flex; align-items:center; justify-content:center; padding:4px 12px; background:#f2f2f2; border:1px solid #f2f2f2; border-radius:12px }
.ry-bnav .ry-bnav-live svg.ry-bnav-wm{ height:30px }
.ry-bnav .ry-bnav-live{ justify-content:center; align-items:center }
.ry-bnav .ry-bnav-live .ry-live-wm{ flex:none; height:auto; align-self:center; line-height:0 }
/* §49e RYDIO LIVE pill: 10% grey frosted glass */
.ry-bnav .ry-bnav-live .ry-live-wm{ background:rgba(0,0,0,.10); border:1px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 4px rgba(0,0,0,.08) }
/* §50 New Launches desktop: 7 cards in view, same as Big Deals (Ansar 30/10) */
@media (min-width:782px){ .ry-carousel[data-ry-autoscroll="1000"] > .ry-card{ flex:0 0 calc((100% - 6 * var(--card-gap)) / 7); width:auto; min-width:0 } }
/* §50b Explore Ryolite desktop: 5 banners in one row (Ansar 30/10) */
@media (min-width:782px){ .ry-offers-row .ry-offer{ flex-basis:calc((100% - 64px) / 5) } }
/* §51 Desktop hover: mild lift-up on product cards + offer banners (Ansar 30/10). Mouse only, GPU transform. */
@media (hover:hover) and (pointer:fine){
  .ry-card, .ry-offer{ transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; will-change:transform }
  .ry-card:hover, .ry-offer:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 12px 28px rgba(0,0,0,.12); z-index:2; position:relative }
  .ry-card img, .ry-offer img{ transition:transform .3s cubic-bezier(.2,.8,.2,1) }
  .ry-card:hover img, .ry-offer:hover img{ transform:scale(1.04) }
}
@media (prefers-reduced-motion:reduce){ .ry-card, .ry-offer, .ry-card img, .ry-offer img{ transition:none } .ry-card:hover, .ry-offer:hover, .ry-card:hover img, .ry-offer:hover img{ transform:none } }
@media (hover:hover) and (pointer:fine) and (min-width:782px){
  .ry-carousel, .ry-deals-track{ padding-top:10px; margin-top:-10px; padding-bottom:20px; margin-bottom:-20px; padding-inline:6px; margin-inline:-6px }
}

/* §52 blog post cover image */
.ry-post-cover{ margin:0 0 24px; border-radius:12px; overflow:hidden; background:#0b0b0c; aspect-ratio:16/9 }
.ry-post-cover img{ display:block; width:100%; height:100%; object-fit:cover }

/* §53 share button beside Buy Now + desktop share menu (Ansar 30/10) */
.ry-share-btn{ flex:0 0 var(--ry-h-action); width:var(--ry-h-action); height:var(--ry-h-action); display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--ry-gray-300,#d4d4d4); border-radius:var(--ry-radius-btn); background:#fff; color:var(--ry-ink,#0b0b0c); cursor:pointer; transition:transform var(--ry-fast,.15s) ease }
.ry-share-btn:hover{ border-color:var(--ry-ink,#0b0b0c) }
.ry-share-btn:active{ transform:scale(.95) }
.ry-share-btn:focus-visible{ outline:2px solid var(--ry-ink,#0b0b0c); outline-offset:2px }
.ry-sticky-buy .ry-share-btn{ flex:0 0 var(--ry-h-action) }
.ry-share-menu{ position:fixed; z-index:1000; width:232px; padding:8px; background:#fff; border:1px solid #e5e5e5; border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.16) }
.ry-share-menu a, .ry-share-menu button{ display:flex; align-items:center; gap:12px; width:100%; padding:8px 12px; border:0; border-radius:8px; background:none; font:500 14px/20px inherit; color:#0b0b0c; text-decoration:none; cursor:pointer; text-align:left }
.ry-share-menu a:hover, .ry-share-menu button:hover{ background:#f2f2f2 }
.ry-share-menu i{ width:24px; height:24px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font:700 12px/1 sans-serif; font-style:normal; color:#fff; flex:none }
/* §53b smaller Add to cart / Buy Now + "Share" label under the icon (Ansar 30/10) */
.ry-buybox .single_add_to_cart_button, .ry-buybox .ry-buynow, .ry-sticky-buy .ry-btn{ height:40px; font-size:15px }
.ry-share-btn{ flex:0 0 52px; width:52px; height:44px; flex-direction:column; gap:2px; border:0; background:none }
.ry-sticky-buy .ry-share-btn{ flex:0 0 52px }
.ry-share-btn:hover{ color:var(--ry-red,#E20809) }
.ry-share-lbl{ font:600 11px/1 inherit; letter-spacing:0 }
.ry-share-lbl{ font-size:11px; font-weight:600; line-height:1 }
/* §54 Desktop categories: hover pop + click bounce (Ansar 30/10). Mouse only. */
@media (hover:hover) and (pointer:fine){
  .ry-cat-item .ry-cat-circle, .ry-cat-item img{ transition:transform .25s cubic-bezier(.34,1.56,.64,1) }
  .ry-cat-item:hover .ry-cat-circle{ transform:translateY(-3px) scale(1.12) }
  .ry-cat-item:hover span{ color:var(--ry-red,#E20809) }
  .ry-cat-item:active .ry-cat-circle{ animation:ryCatPop .35s cubic-bezier(.34,1.56,.64,1) }
  .ry-cats{ padding-top:12px }
}
@keyframes ryCatPop{ 0%{transform:translateY(-3px) scale(1.12)} 40%{transform:translateY(0) scale(.9)} 100%{transform:translateY(-3px) scale(1.18)} }
@media (prefers-reduced-motion:reduce){ .ry-cat-item .ry-cat-circle{ transition:none; animation:none!important; transform:none!important } }
@media (hover:hover) and (pointer:fine){
  .ry-cats .ry-cat-item .ry-cat-circle{ transition:transform .25s cubic-bezier(.34,1.56,.64,1), background-color .2s ease, box-shadow .2s ease }
  .ry-cats .ry-cat-item:hover .ry-cat-circle{ background:#FDE8E8; box-shadow:0 6px 14px rgba(226,8,9,.18); transform:translateY(-3px) scale(1.15) }
  .ry-cats .ry-cat-item:hover span:last-child{ color:var(--ry-red,#E20809) }
}
/* §55 Desktop checkout: form left, sticky order summary right; short fields share a row (Ansar 30/10) */
@media (min-width:1024px){
  .ry-wc-wrap form.checkout{ display:grid; grid-template-columns:minmax(0,1fr) 400px; column-gap:32px; align-items:start }
  .ry-wc-wrap form.checkout > wc-order-attribution-inputs{ display:none }
  .ry-wc-wrap form.checkout > #customer_details{ grid-column:1; grid-row:1 / span 2; width:auto; margin:0 }
  .ry-wc-wrap form.checkout > #order_review_heading{ grid-column:2; grid-row:1; margin:0; padding:16px 16px 0; background:#fafafa; border:1px solid #e5e5e5; border-bottom:0; border-radius:12px 12px 0 0 }
  .ry-wc-wrap form.checkout > #order_review{ grid-column:2; grid-row:2; padding:8px 16px 16px; background:#fafafa; border:1px solid #e5e5e5; border-top:0; border-radius:0 0 12px 12px; position:sticky; top:96px }
  .ry-wc-wrap #customer_details .col-1, .ry-wc-wrap #customer_details .col-2{ float:none; width:100%; max-width:none }
  .ry-wc-wrap .woocommerce-billing-fields__field-wrapper, .ry-wc-wrap .woocommerce-shipping-fields__field-wrapper{ display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); column-gap:16px; row-gap:4px }
  .ry-wc-wrap .woocommerce-billing-fields__field-wrapper > .form-row, .ry-wc-wrap .woocommerce-shipping-fields__field-wrapper > .form-row{ grid-column:span 6; float:none; width:auto; margin-left:0; margin-right:0 }
  .ry-wc-wrap #billing_first_name_field, .ry-wc-wrap #billing_last_name_field, .ry-wc-wrap #billing_phone_field, .ry-wc-wrap #billing_email_field,
  .ry-wc-wrap #shipping_first_name_field, .ry-wc-wrap #shipping_last_name_field{ grid-column:span 3 }
  .ry-wc-wrap #billing_postcode_field, .ry-wc-wrap #billing_city_field, .ry-wc-wrap #billing_state_field,
  .ry-wc-wrap #shipping_postcode_field, .ry-wc-wrap #shipping_city_field, .ry-wc-wrap #shipping_state_field{ grid-column:span 2 }
  .ry-wc-wrap #billing_address_1_field, .ry-wc-wrap #billing_address_2_field{ grid-column:span 3; align-self:end }
  .ry-wc-wrap #order_comments{ min-height:64px; height:64px }
  .ry-wc-wrap #order_review .shop_table{ font-size:13px }
  .ry-wc-wrap #order_review .shop_table th, .ry-wc-wrap #order_review .shop_table td{ padding:8px 4px }
  .ry-wc-wrap #order_review #place_order{ width:100% }
}
@media (min-width:1024px){
  .ry-wc-wrap form.checkout{ grid-template-rows:auto 1fr }
  .ry-wc-wrap form.checkout > #order_review_heading, .ry-wc-wrap form.checkout > #order_review{ align-self:start }
  .ry-wc-wrap .woocommerce-billing-fields__field-wrapper > .ry-geo-btn, .ry-wc-wrap .woocommerce-billing-fields__field-wrapper > .ry-pin-hint{ grid-column:1 / -1; justify-self:start; margin-bottom:8px }
}

/* §55b shipping choices: one line each, no bullets (Ansar 30/10) */
.ry-wc-wrap #shipping_method{ list-style:none; margin:0; padding:0 }
.ry-wc-wrap #shipping_method li{ white-space:nowrap; margin:0 0 4px; padding:0 }
.ry-wc-wrap #shipping_method li::before{ content:none }
.ry-wc-wrap #shipping_method input{ margin:0 6px 0 0; vertical-align:-2px }
/* §55c phones/tablets: First+Last name and Mobile+Email side by side too (Ansar 30/10) */
@media (max-width:1023px){
  .ry-wc-wrap .woocommerce-billing-fields__field-wrapper{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:12px }
  .ry-wc-wrap .woocommerce-billing-fields__field-wrapper > *{ grid-column:1 / -1; float:none; width:auto; margin-left:0; margin-right:0 }
  .ry-wc-wrap #billing_first_name_field, .ry-wc-wrap #billing_last_name_field, .ry-wc-wrap #billing_phone_field, .ry-wc-wrap #billing_email_field{ grid-column:span 1 }
  .ry-wc-wrap .woocommerce-billing-fields__field-wrapper > .ry-geo-btn{ justify-self:start }
}
/* §55d checkout fields 20% shorter (44→36px), State matches, location button beside "Billing details",
   "Ship to a different address?" + "Order notes" in one row (Ansar 30/10) */
.ry-wc-wrap form.checkout input.input-text, .ry-wc-wrap form.checkout select{ height:36px; min-height:36px; padding-top:0; padding-bottom:0 }
.ry-wc-wrap form.checkout .select2-container .select2-selection--single{ height:36px; display:flex; align-items:center; border:1px solid var(--ry-gray-300,#d4d4d4); border-radius:var(--ry-radius-input,8px) }
.ry-wc-wrap form.checkout .select2-container .select2-selection--single .select2-selection__rendered{ line-height:34px; padding-left:12px }
.ry-wc-wrap form.checkout .select2-container .select2-selection--single .select2-selection__arrow{ height:34px }
.ry-wc-wrap form.checkout textarea{ min-height:56px; height:56px }
.ry-wc-wrap .woocommerce-billing-fields{ position:relative }
.ry-wc-wrap .woocommerce-billing-fields > h3{ min-height:36px; display:flex; align-items:center; margin-bottom:8px }
.ry-wc-wrap .woocommerce-billing-fields__field-wrapper > .ry-geo-btn{ position:absolute; top:0; right:0; height:36px; margin:0; padding:0 12px }
.ry-wc-wrap #customer_details .col-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:16px; align-items:start }
.ry-wc-wrap #customer_details .col-2 > wc-order-attribution-inputs{ display:none }
.ry-wc-wrap #customer_details .col-2 .woocommerce-shipping-fields{ display:contents }
.ry-wc-wrap #customer_details .col-2 #ship-to-different-address{ grid-column:1; grid-row:1; margin:22px 0 0; font-size:14px }
.ry-wc-wrap #customer_details .col-2 .woocommerce-additional-fields{ grid-column:2; grid-row:1 }
.ry-wc-wrap #customer_details .col-2 .shipping_address{ grid-column:1 / -1; grid-row:2 }
.ry-wc-wrap #customer_details .col-2 .woocommerce-additional-fields .form-row{ margin:0 }
@media (max-width:480px){ .ry-wc-wrap #customer_details .col-2 #ship-to-different-address{ font-size:12px; margin-top:24px } .ry-wc-wrap #customer_details .col-2 #ship-to-different-address span{ white-space:nowrap } }
.ry-wc-wrap #ship-to-different-address label{ display:flex; align-items:center; gap:6px } .ry-wc-wrap #ship-to-different-address input{ margin:0; flex:none }
/* §56 customer cancel order button */
.ry-cancel-wrap{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:16px 0 }
.ry-cancel-order{ display:inline-flex; align-items:center; height:36px; padding:0 16px; border:1px solid var(--ry-red,#E20809); border-radius:8px; color:var(--ry-red,#E20809); background:#fff; font-weight:600; text-decoration:none }
.ry-cancel-order:hover{ background:#FDE8E8 }
.ry-cancel-wrap small{ color:var(--ry-gray-500,#6b6b6b) }
.ry-nocod-hint{ margin:8px 0; padding:8px 12px; border-radius:8px; background:#E8F5EE; color:#0B6B3A; font-size:13px }
/* §57 coupon box inside the "Your order" card */
.ry-coupon-box{ margin:12px 0; padding:12px; border:1px dashed #cfcfcf; border-radius:10px; background:#fff }
.ry-coupon-box label{ display:block; margin:0 0 8px; font-size:13px; font-weight:600 }
.ry-coupon-row{ display:flex; gap:8px }
.ry-coupon-row input{ flex:1 1 auto; min-width:0; height:36px; padding:0 12px; text-transform:uppercase }
.ry-coupon-apply{ flex:none; height:36px; padding:0 16px; border:0; border-radius:8px; background:var(--ry-ink,#0b0b0c); color:#fff; font-weight:600; cursor:pointer }
.ry-coupon-apply[disabled]{ opacity:.6 }
.ry-coupon-msg{ margin-top:8px; font-size:12.5px; color:#0B6B3A }
.ry-coupon-msg:empty{ display:none }
.ry-coupon-msg.is-error{ color:var(--ry-red,#E20809) }
.ry-wc-wrap #order_review .cart-discount td, .ry-wc-wrap #order_review .cart-discount th{ color:#0B6B3A; font-weight:600 }
@media (min-width:1024px){ .ry-header .ry-logo{ transform:translateY(-5px) } } /* §58 desktop logo a little higher (Ansar 30/10) */
.ry-nocod-hint.is-muted{ background:#F2F7FF; color:#1F4E8C }

/* §59 Thank-you / order pages organised into cards + 6-step status tracker (Ansar 30/10) */
.ry-ty{ display:flex; flex-direction:column; gap:16px; max-width:880px }
.ry-ty > p:not([class]), .ry-ty .woocommerce-notice--success, .ry-ty .woocommerce-thankyou-order-received{ display:none } /* gateway "thank you" paragraphs; our hero says it */
.ry-ty-hero{ display:flex; gap:16px; align-items:center; padding:16px; border-radius:12px; background:#E8F5EE; border:1px solid #BFE3CF }
.ry-ty-hero.is-failed{ background:#FDE8E8; border-color:#F5C2C2 }
.ry-ty-icon{ flex:none; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#1E7A5A; color:#fff; font:700 24px/1 sans-serif }
.ry-ty-hero.is-failed .ry-ty-icon{ background:var(--ry-red,#E20809) }
.ry-ty-hero h2{ margin:0 0 4px; font-size:20px }
.ry-ty-hero p{ margin:0; font-size:14px; color:#3a3a3a }
.ry-ty-facts{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:0 }
.ry-ty-facts > div{ padding:12px; border:1px solid #e5e5e5; border-radius:12px; background:#fafafa; min-width:0 }
.ry-ty-facts dt{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#6b6b6b; margin:0 0 4px }
.ry-ty-facts dd{ margin:0; font-size:16px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ry-ty-card, .ry-ty .woocommerce-order-details, .ry-ty .woocommerce-customer-details{ padding:16px; border:1px solid #e5e5e5; border-radius:12px; background:#fff; margin:0 }
.ry-ty-card h3, .ry-ty .woocommerce-order-details__title, .ry-ty .woocommerce-column__title{ margin:0 0 12px; font-size:16px }
.ry-ty-note{ margin:12px 0 0; font-size:13px; color:#6b6b6b }
.ry-ty-actions{ display:flex; flex-wrap:wrap; gap:8px }
.ry-ty-btn{ display:inline-flex; align-items:center; height:40px; padding:0 16px; border-radius:8px; border:1px solid #d4d4d4; background:#fff; color:#0b0b0c; font-weight:600; font-size:14px; text-decoration:none }
.ry-ty-btn.is-primary{ background:var(--ry-red,#E20809); border-color:var(--ry-red,#E20809); color:#fff }
.ry-ty .woocommerce-order-details table{ margin:0; font-size:14px }
.ry-ty .woocommerce-order-details td, .ry-ty .woocommerce-order-details th{ padding:8px 4px }
.ry-ty .woocommerce-customer-details .woocommerce-columns{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px }
.ry-ty .woocommerce-customer-details .woocommerce-column{ float:none; width:auto; max-width:none; margin:0 }
.ry-ty .woocommerce-customer-details address{ font-style:normal; font-size:14px; line-height:1.6; border:0; padding:0 }
@media (max-width:640px){
  .ry-ty-facts{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .ry-ty .woocommerce-customer-details .woocommerce-columns{ grid-template-columns:1fr }
  .ry-ty-btn{ flex:1 1 auto; justify-content:center }
}

/* tracker: horizontal on wide screens, vertical list on phones */
.ry-tracker{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); counter-reset:tk }
.ry-tracker li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font-size:12px; color:#8a8a8a; padding:0 4px }
.ry-tracker li::before{ content:""; position:absolute; top:11px; left:-50%; width:100%; height:3px; background:#e5e5e5; z-index:0 }
.ry-tracker li:first-child::before{ display:none }
.ry-tracker li.is-done::before{ background:#1E7A5A }
.ry-tk-dot{ position:relative; z-index:1; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid #d4d4d4; box-sizing:border-box }
.ry-tracker li.is-done .ry-tk-dot{ background:#1E7A5A; border-color:#1E7A5A }
.ry-tracker li.is-done .ry-tk-dot::after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font:700 12px/1 sans-serif }
.ry-tracker li.is-now .ry-tk-dot{ box-shadow:0 0 0 4px rgba(30,122,90,.18) }
.ry-tracker li.is-done{ color:#0b0b0c }
.ry-tracker li.is-now .ry-tk-lbl{ font-weight:700; color:#1E7A5A }
.ry-tracker.is-closed{ display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:8px; background:#f2f2f2; font-size:14px }
@media (max-width:640px){
  .ry-tracker{ grid-template-columns:1fr; gap:0 }
  .ry-tracker li{ flex-direction:row; align-items:center; text-align:left; gap:12px; padding:0 0 16px; font-size:14px }
  .ry-tracker li::before{ top:-16px; left:10.5px; width:3px; height:16px }
  .ry-tracker li:last-child{ padding-bottom:0 }
}

/* §59b My Account orders: current cards + history list */
.ry-orders{ display:flex; flex-direction:column; gap:12px }
.ry-orders-h{ margin:8px 0 0; font-size:16px }
.ry-order-card{ display:flex; flex-direction:column; gap:12px }
.ry-order-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.ry-order-head span{ display:block; font-size:12px; color:#6b6b6b; margin-top:2px }
.ry-order-total{ font-size:16px; white-space:nowrap }
.ry-order-items{ margin:0; font-size:13px; color:#3a3a3a; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.ry-order-history{ list-style:none; padding:0 }
.ry-order-history li + li{ border-top:1px solid #eee }
.ry-order-history a{ display:flex; justify-content:space-between; gap:12px; padding:12px 16px; color:inherit; text-decoration:none }
.ry-order-history a:hover{ background:#fafafa }
.ry-oh-main{ min-width:0; font-size:14px }
.ry-oh-main small{ display:block; color:#6b6b6b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ry-oh-side{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; font-size:14px }
.ry-oh-badge{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; color:#fff; background:var(--c,#6b6b6b) }
.ry-vo-status{ margin:0 0 16px }
.woocommerce-MyAccount-content > p:first-of-type mark{ background:none; font-weight:700 }
.ry-order-head > div{ min-width:0 } .ry-order-total{ flex:none } .ry-order-total *{ white-space:nowrap }
/* §60 trust strip: centred, on a 10% grey band (Ansar 30/10) */
.ry-trust{ padding:16px 12px; border-radius:12px; background:#e6e6e6 }
@media (min-width:782px){ .ry-trust{ grid-template-columns:repeat(3, minmax(0, 240px)); justify-content:center; column-gap:48px; padding:20px 24px } }

/* §61 newsletter inside footer "Get in touch"; tighter gap around the trust band (Ansar 30/10) */
.ry-footer-nl{ margin-top:16px }
.ry-footer-nl h3{ margin:0 0 4px; font-size:14px; font-weight:700 }
.ry-footer-nl p{ margin:0 0 8px; font-size:12.5px; color:var(--ry-gray-500,#6b6b6b) }
.ry-footer-nl .ry-newsletter-form{ display:flex; gap:8px; max-width:360px; margin:0 }
.ry-footer-nl .ry-newsletter-form input{ flex:1 1 auto; min-width:0; height:36px; padding:0 12px; font-size:14px }
.ry-footer-nl .ry-newsletter-form button{ flex:none; height:36px; padding:0 14px; font-size:14px }
.ry-footer-nl .ry-newsletter-msg{ margin-top:6px; font-size:12.5px }
.ry-section:has(> .ry-trust){ padding-top:8px; padding-bottom:8px }
.ry-section:has(+ .ry-section > .ry-trust){ padding-bottom:12px } .ry-section:has(> .ry-trust) + .ry-section{ padding-top:16px }
/* §62 category bar: selection + hover in Pantone Classic Blue #0F4C81 instead of red (Ansar 30/10) */
.ry-cats .ry-cat-item.is-active .ry-cat-circle{ background:#E3ECF5 }
.ry-cats .ry-cat-item.is-active::after{ background:#0F4C81 }
.ry-cats .ry-cat-item.is-active span:last-child{ color:#0F4C81 }
@media (hover:hover) and (pointer:fine){
  .ry-cats .ry-cat-item:hover .ry-cat-circle{ background:#E3ECF5; box-shadow:0 6px 14px rgba(15,76,129,.20) }
  .ry-cats .ry-cat-item:hover span:last-child{ color:#0F4C81 }
}
/* §62b category bar: macOS system blue #007AFF (Ansar 30/10, replaces Pantone #0F4C81) */
.ry-cats .ry-cat-item.is-active .ry-cat-circle{ background:#E5F1FF }
.ry-cats .ry-cat-item.is-active::after{ background:#007AFF }
.ry-cats .ry-cat-item.is-active span:last-child{ color:#007AFF }
@media (hover:hover) and (pointer:fine){
  .ry-cats .ry-cat-item:hover .ry-cat-circle{ background:#E5F1FF; box-shadow:0 6px 14px rgba(0,122,255,.22) }
  .ry-cats .ry-cat-item:hover span:last-child{ color:#007AFF }
}

/* §63 category page: product count hidden (JS still updates #ry-count), intro text at the bottom (Ansar 30/10) */
.ry-shop-head .ry-shop-count{ display:none }
.ry-shop-about{ margin:32px 0 8px; padding-top:16px; border-top:1px solid #eee }
.ry-shop-about .ry-shop-desc{ margin:0; font-size:13px; line-height:1.6; color:var(--ry-gray-500,#6b6b6b) }
.ry-shop-about a{ color:var(--ry-red,#E20809); text-decoration:underline }

/* §64 review form: compact + professional (Ansar 30/10) */
#review_form_wrapper #respond{ padding:16px; border:1px solid #e5e5e5; border-radius:12px; background:#fafafa }
.ry-rv-title{ margin:0 0 12px; font-size:16px; font-weight:700 }
#review_form .comment-form-rating, #review_form .comment-form-comment{ margin:0 0 12px }
#review_form label{ font-size:13px; font-weight:600 }
.ry-rv-opt{ font-weight:400; color:#6b6b6b }
#review_form textarea#comment{ min-height:72px; height:72px; padding:8px 12px; font-size:14px; border-radius:8px }
#review_form .form-submit{ margin:0 }
#review_form .form-submit .ry-rv-submit, #review_form .form-submit input[type=submit]{ width:auto !important; min-width:0; height:40px; padding:0 24px !important; font-size:14px; font-weight:600; border-radius:8px; display:inline-flex; align-items:center }
#review_form p.stars a{ font-size:24px }

.ry-rv-login{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0; font-size:14px; color:#3a3a3a }
.ry-rv-loginbtn{ display:inline-flex; align-items:center; height:40px; padding:0 20px; border-radius:8px; background:var(--ry-red,#E20809); color:#fff !important; font-weight:600; font-size:14px; text-decoration:none }
#review_form_wrapper{ border:0 !important; padding:0 !important; background:none !important }

/* §65 listing Sort dropdown (Ansar 30/10) */
.ry-shop-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.ry-shop-head h1{ margin:0 }
.ry-sort{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#6b6b6b }
.ry-sort select{ height:36px; padding:0 32px 0 12px; border:1px solid #d4d4d4; border-radius:8px; background:#fff; font-size:14px; font-weight:600; color:#0b0b0c; cursor:pointer }
@media (max-width:480px){ .ry-sort span{ display:none } .ry-sort select{ font-size:13px } }
@media (max-width:480px){ .ry-shop-head{ flex-wrap:nowrap } .ry-sort select{ height:30px; padding:0 22px 0 8px; font-size:12px; font-weight:600; border-radius:6px; max-width:140px; background-position:right 6px center } } /* §65b compact sort on phones (Ansar 30/10) */
@media (max-width:480px){ .ry-sort select{ max-width:none; width:auto } }

/* New Arrival ribbon (Ansar 30/10) */
.ry-card-ribbon[data-k="new-arrival"]{ display:inline-flex; align-items:center; gap:3px; border-radius:999px; padding:2px 7px 2px 5px; line-height:12px; background:#007AFF; color:#fff }
.ry-card-ribbon[data-k="new-arrival"]::before{ content:"\2726"; font-size:10px; line-height:10px }

@media (min-width:782px){ .ry-carousel[data-ry-row="new-launches"] > .ry-card{ flex:0 0 calc((100% - 6 * var(--card-gap)) / 7); width:auto; min-width:0 } } /* §50 re-keyed: 7 cards without auto-scroll */

/* Desktop header: RYDIO LIVE after the cart, same frosted 10% grey box as the mobile bottom bar (Ansar 30/10) */
.ry-hdr-live{ display:none }
@media (min-width:782px){
  .ry-hdr-live{ display:inline-flex; align-items:center; margin-left:8px; text-decoration:none; transition:transform .15s ease }
  .ry-hdr-live:hover{ transform:translateY(-1px) }
  .ry-hdr-live .ry-live-wm{ display:inline-flex; align-items:center; height:auto; padding:4px 12px; line-height:0; border-radius:12px; background:rgba(0,0,0,.10); border:1px solid rgba(255,255,255,.55); -webkit-backdrop-filter:blur(12px) saturate(160%); backdrop-filter:blur(12px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 4px rgba(0,0,0,.08) }
  .ry-hdr-live svg.ry-bnav-wm{ height:28px; width:auto; max-width:none }
}

/* Header mascot: Ryolite robot walks in (legs swing, body bobs) beside RYDIO LIVE and says "Yahan click karo!" (Ansar 30/10) */
.ry-hdr-live{ position:relative }
.ry-mascot{ display:none }
@media (min-width:1200px){
  .ry-mascot{ display:block; position:absolute; left:calc(100% + 8px); top:50%; width:54px; height:58px; margin-top:-30px; z-index:60; animation:ryWalkIn 1.9s linear .5s both }
  .ry-m-rig{ position:absolute; left:0; top:0; width:64.5px; height:70px; transform:scale(.83); transform-origin:0 0 }
  .ry-m-rig img{ position:absolute; display:block; max-width:none }
  .ry-m-body{ left:0; top:0; width:64.5px; height:51.6px; z-index:2; transform-origin:50% 100%; animation:ryBob .16s ease-in-out .5s 12 alternate, ryDance 1s ease-in-out 2.5s infinite }
  .ry-m-legl{ left:13.5px; top:48.5px; width:20.2px; height:21.5px; transform-origin:50% 8%; animation:ryLegA .32s ease-in-out .5s 6 alternate, ryKickL 1s ease-in-out 2.5s infinite }
  .ry-m-legr{ left:33.7px; top:48.5px; width:22px; height:20.2px; transform-origin:50% 8%; animation:ryLegB .32s ease-in-out .5s 6 alternate, ryKickR 1s ease-in-out 2.5s infinite }
  .ry-mascot-say{ position:absolute; top:calc(100% + 6px); right:0; padding:8px 12px; border-radius:12px; background:#fff; color:#0b0b0c; font:700 13px/1.2 "Inter",sans-serif; white-space:nowrap; box-shadow:0 6px 20px rgba(0,0,0,.18); transform-origin:85% 0; animation:ryBubble 7s ease 2.5s both; pointer-events:none }
  .ry-mascot-say b{ color:#FF0A2C; font-weight:800 }
  .ry-mascot-say::before{ content:""; position:absolute; top:-6px; right:22px; width:12px; height:12px; background:#fff; transform:rotate(45deg); border-radius:2px }
  .ry-hdr-live:hover .ry-mascot-say{ animation:none; opacity:1; transform:none }
  .ry-hdr-live:hover .ry-m-body{ animation:ryWave .4s ease-in-out 2 alternate }
}
@keyframes ryWalkIn{ 0%{ transform:translateX(170px); opacity:0 } 10%{ opacity:1 } 100%{ transform:none; opacity:1 } }
@keyframes ryLegA{ from{ transform:rotate(18deg) } to{ transform:rotate(-18deg) } }
@keyframes ryLegB{ from{ transform:rotate(-18deg) } to{ transform:rotate(18deg) } }
@keyframes ryBob{ from{ transform:translateY(0) } to{ transform:translateY(-2px) } }
@keyframes ryIdle{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-2px) } }
@keyframes ryWave{ from{ transform:rotate(0) } to{ transform:rotate(-6deg) } }
/* after arriving the robot keeps dancing (Ansar 30/10): sway + bounce, legs kick in turn */
@keyframes ryDance{ 0%,100%{ transform:rotate(-7deg) translateY(0) } 25%{ transform:rotate(0) translateY(-3px) } 50%{ transform:rotate(7deg) translateY(0) } 75%{ transform:rotate(0) translateY(-3px) } }
@keyframes ryKickL{ 0%,50%,100%{ transform:rotate(0) } 25%{ transform:rotate(16deg) } }
@keyframes ryKickR{ 0%,50%,100%{ transform:rotate(0) } 75%{ transform:rotate(-16deg) } }
@keyframes ryBubble{ 0%{ opacity:0; transform:scale(.4) } 6%{ opacity:1; transform:scale(1.08) } 10%{ transform:scale(1) } 90%{ opacity:1; transform:scale(1) } 100%{ opacity:0; transform:scale(.9) } }
@media (prefers-reduced-motion:reduce){ .ry-mascot, .ry-m-rig img, .ry-mascot-say{ animation:none !important } }

/* Refund status: card on the order page + badge in order history (Ansar 30/10) */
.ry-refund-card{ margin:0 0 16px; border-left:4px solid var(--rc,#007AFF) }
.ry-refund-card.is-done{ --rc:#1a9b4b } .ry-refund-card.is-wait{ --rc:#007AFF } .ry-refund-card.is-manual{ --rc:#e08a00 }
.ry-refund-card p{ margin:8px 0 0; font-size:14px; line-height:1.5 }
.ry-refund-steps{ display:flex; gap:8px; margin:0; padding:0; list-style:none; font-size:12px; font-weight:600; color:#8a8a8a }
.ry-refund-steps li{ flex:1; padding-top:8px; border-top:4px solid #e5e5e5 }
.ry-refund-steps li.is-on{ color:#0b0b0c; border-top-color:var(--rc,#007AFF) }
.ry-refund-badge{ display:inline-block; margin-top:4px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; line-height:16px; color:#fff; background:#007AFF }
.ry-refund-badge.is-done{ background:#1a9b4b } .ry-refund-badge.is-manual{ background:#e08a00 }

/* Inside the Ryolite Digital Android app (UA RyoliteDigitalApp): app shows its own header/tabs/bottom bar (Ansar 30/10) */
html.ry-app{ --ry-announce-h:0px; --ry-header-h:0px; --ry-cats-h:0px; }
html.ry-app .ry-announce, html.ry-app .ry-header, html.ry-app .ry-cats, html.ry-app .ry-footer, html.ry-app .ry-bnav, html.ry-app .ry-back, html.ry-app .ry-breadcrumb{ display:none !important; }
html.ry-app body{ padding-top:0 !important; padding-bottom:0 !important; }

/* Blog articles (SEO Day 3, 31/10): wide comparison / price tables scroll sideways on phones instead of being cut off. */
@media (max-width: 600px){
  body.single-post .ry-spec-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body.single-post .ry-spec-table th, body.single-post .ry-spec-table td{ padding:8px; font-size:13px; }
  body.single-post .ry-spec-table td:first-child{ min-width:96px; }
}