/* * Raadha Krishna Design Studio — main stylesheet * Fashion e-commerce theme — girls / women / kids / family. * Color values come from CSS custom properties written by inc/customizer.php * (rkds_dynamic_css) so the Customizer can repaint the whole site. */ /* ========================================================================== 0. Reset & base ========================================================================== */ :root{ /* Values match docs/DESIGN.md — extracted from the brand logo. These are the fallback defaults; inc/customizer.php's rkds_dynamic_css overrides them from the live Customizer settings (same defaults). */ --rkds-primary:#1c8777; /* peacock teal */ --rkds-secondary:#6b90c6; /* periwinkle blue */ /* Was the logo's gold (#c79b40) — changed 2026-09-08 to this coral to match the reference homepage's button/price/badge color, per the store owner's explicit "with colors also" instruction. Variable name kept as --rkds-gold (renaming it would mean touching every call site and Customizer setting ID for a cosmetic label) but the value is coral now — see docs/DESIGN.md §2. */ --rkds-gold:#e8423c; --rkds-sage:#2f9e6e; /* success / in-stock */ --rkds-text:#26282b; --rkds-bg:#fdfcf9; --rkds-white:#ffffff; --rkds-radius:10px; --rkds-shadow:0 6px 24px rgba(38,40,43,.08); /* Soft pastel tile backgrounds (category cards, hero eyebrow badge) — each is the brand palette's own hues mixed with white, not a new unrelated color, so tile variety never breaks the "colors must match the logo" rule. */ --rkds-cat-tint-1:#f4ebd9; /* gold tint */ --rkds-cat-tint-2:#dee7f2; /* secondary/periwinkle tint */ --rkds-cat-tint-3:#d1eadf; /* sage tint */ --rkds-cat-tint-4:#d6e9e7; /* primary/teal tint */ --rkds-cat-tint-5:#e4e7da; /* gold+primary blend tint */ --rkds-container:1280px; --rkds-header-h:88px; --rkds-font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --rkds-font-display:'Playfair Display',Georgia,'Times New Roman',serif; } *,*::before,*::after{box-sizing:border-box;} /* overflow-x:hidden lives on ONLY, never on too. is the real scrollingElement on this site (confirmed via document.scrollingElement), so this alone is enough to guard against horizontal white-space/scroll bugs from off-canvas elements (the mobile slide-in menu's translateX(100%) state, the accessibility skip-link's left:-9999px, etc). Putting overflow-x:hidden on as well looks harmless but isn't: per the CSS overflow spec, setting overflow-x without an explicit overflow-y makes the browser compute overflow-y as "auto" too, which turns into a CSS "scroll container" even though it never actually scrolls itself. Once body counts as a scroll container, any position:sticky descendant (like the header) sticks relative to body's scrollport instead of the real viewport — and since body just grows tall with the page instead of ever scrolling, the sticky element never re-triggers its "stuck" state and just scrolls away with the rest of the page. This bit the header's sticky-on-scroll behavior in production; keep the guard html-only. */ html{scroll-behavior:smooth;overflow-x:hidden;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;} } body{ margin:0; font-family:var(--rkds-font); color:var(--rkds-text); background:var(--rkds-bg); line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased; max-width:100%; } img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} h1,h2,h3,h4{font-family:var(--rkds-font-display);font-weight:600;color:var(--rkds-primary);line-height:1.2;margin:0 0 .5em;} ul{list-style:none;margin:0;padding:0;} button{font-family:inherit;cursor:pointer;} [lang="te"], .rkds-lang-panel[data-rkds-lang-panel="te"]{font-family:var(--rkds-font-te);} .rkds-container{max-width:var(--rkds-container);margin:0 auto;padding:0 20px;} .rkds-skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:9999;} .rkds-skip-link:focus{left:10px;top:10px;} .screen-reader-text{position:absolute !important;clip:rect(1px,1px,1px,1px);overflow:hidden;height:1px;width:1px;} .rkds-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 28px;border-radius:999px;border:1px solid var(--rkds-primary); background:var(--rkds-primary);color:#fff;font-weight:600;font-size:15px; transition:background .2s ease, transform .15s ease, box-shadow .2s ease; } .rkds-btn:hover{background:#146156;box-shadow:var(--rkds-shadow);} .rkds-btn--gold{background:var(--rkds-gold);border-color:var(--rkds-gold);} .rkds-btn--gold:hover{background:#be3631;} .rkds-btn--outline{background:transparent;color:var(--rkds-primary);} .rkds-btn--outline:hover{background:var(--rkds-primary);color:#fff;} .rkds-btn--outline-light{background:transparent;color:#fff;border-color:#fff;} .rkds-btn--outline-light:hover{background:#fff;color:var(--rkds-primary);} .rkds-btn--small{padding:8px 16px;font-size:13px;} .rkds-btn--disabled, .rkds-btn[disabled]{ background:#d4d6d8;border-color:#d4d6d8;color:#8a8d90;cursor:not-allowed; box-shadow:none;pointer-events:none; } .rkds-section{padding:64px 0;} .rkds-eyebrow{ display:block;text-align:center;color:var(--rkds-gold);font-size:12.5px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px; } .rkds-section__title{text-align:center;font-size:30px;margin-bottom:36px;position:relative;} .rkds-section__title::after{content:"";display:block;width:56px;height:3px;background:var(--rkds-gold);margin:14px auto 0;border-radius:2px;} .rkds-section__title--tight{margin-bottom:16px;} .rkds-section__title--tight::after{display:none;} .rkds-section__title--left{text-align:left;margin-bottom:0;} .rkds-section__title--left::after{margin:14px 0 0;} .rkds-section__head{ display:flex;align-items:flex-end;justify-content:space-between;gap:16px; flex-wrap:wrap;margin-bottom:36px; } .rkds-section__head .rkds-eyebrow{text-align:left;margin-bottom:8px;} .rkds-section__link{ color:var(--rkds-gold);font-weight:600;font-size:14px;white-space:nowrap; display:inline-flex;align-items:center;gap:6px; } .rkds-section__link:hover{text-decoration:underline;} /* ========================================================================== 1. Header — structure/sizing modeled closely on the prabhasjewellery.in reference header (same top bar, same ~126px-default desktop header height — now Customizer-editable, see inc/customizer.php — same centered pill nav + circular icon-button actions, same off-canvas mobile nav with the cart icon moving out of the header row below 900px). Search is a compact dropdown bar, not a full-screen overlay (reverted from an earlier revision per feedback). Colors/typography use Raadha Krishna's own brand variables throughout instead of copying theirs. Logo height/width are both Customizer-editable. ========================================================================== */ .rkds-topbar{ background:var(--rkds-primary);color:#fff;font-size:12.5px;letter-spacing:.02em; } .rkds-topbar__in{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:8px 20px;flex-wrap:wrap; } .rkds-topbar__ann{margin:0;opacity:.92;letter-spacing:.02em;} .rkds-topbar__contact{display:flex;align-items:center;gap:18px;} .rkds-topbar__contact a{color:#fff;opacity:.9;text-decoration:none;} .rkds-topbar__contact a:hover{opacity:1;text-decoration:underline;} @media (max-width:640px){ .rkds-topbar__in{justify-content:center;text-align:center;padding:7px 16px;} .rkds-topbar__contact{display:none;} } .rkds-header{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid rgba(232, 66, 60,.16); box-shadow:0 2px 10px rgba(38, 40, 43,.04); } .rkds-header__row{ display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:nowrap; min-height:var(--rkds-header-h);padding:6px 0; } /* margin-left:-10px — store owner asked for the logo nudged slightly left after the logo-width increase below; shifts the whole brand block (logo + tagline) left as a unit rather than just the image, so the internal gap/alignment between them is undisturbed. */ .rkds-header__brand{display:flex;align-items:center;gap:14px;flex:0 0 auto;min-width:0;margin-left:-10px;} .rkds-header__logo{flex:0 0 auto;display:flex;align-items:center;} .rkds-header__logo a{display:flex;align-items:center;} .rkds-header__logo img, .rkds-header__logo .custom-logo{ /* Driven by --rkds-logo-h / --rkds-logo-w, both set from Appearance > Customize > RKDS: Header ("Logo height" / "Logo max width") so the store owner can size the logo without a code change. height:auto + width:auto means the browser scales to whichever of the two caps is hit first while always keeping the full image visible (object-fit:contain never crops) — nothing is ever clipped. */ display:block;height:auto;max-height:var(--rkds-logo-h,130px);width:auto;max-width:var(--rkds-logo-w,280px);object-fit:contain; } .rkds-header__site-title{ font-family:var(--rkds-font-display);font-size:24px;font-weight:700;color:var(--rkds-primary); line-height:1;padding-bottom:3px;border-bottom:2px solid rgba(232, 66, 60,.55); } .rkds-header__brand-text{display:flex;align-items:center;min-width:0;} .rkds-header__brand-tagline{ font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--rkds-gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px; border-left:1px solid var(--rkds-secondary);padding-left:14px; } .rkds-nav{flex:1 1 auto;display:none;min-width:0;justify-content:center;} /* gap:12.6px — store owner asked for a 10% tighter gap between nav items (was 14px: 14 * 0.9 = 12.6px), applied after the logo-width increase so the extra breathing room helps keep all 5 items on one line. */ .rkds-nav__list{display:flex;align-items:center;justify-content:center;gap:12.6px;flex-wrap:wrap;} .rkds-nav__item{position:relative;display:flex;align-items:center;} .rkds-nav__link,.rkds-nav__toggle{ display:flex;align-items:center;gap:6px;padding:10px 20px;border:none;background:none; color:var(--rkds-text);font-size:15px;font-weight:500;border-radius:999px;line-height:1.2; white-space:nowrap;transition:background .18s ease,color .18s ease; } /* Every top-level item — plain links AND the "Products" dropdown toggle — gets the exact same light-brown "capsule" hover treatment (Apple-style pill highlight), so hovering never singles out just one menu item. */ .rkds-nav__link:hover, .rkds-nav__toggle:hover, .rkds-has-sub:hover > .rkds-nav__toggle, .rkds-has-sub.is-open > .rkds-nav__toggle{ color:var(--rkds-primary);background:var(--rkds-secondary,#6b90c6); } .rkds-nav__chev{transition:transform .2s ease;} .rkds-has-sub:hover .rkds-nav__chev, .rkds-has-sub.is-open .rkds-nav__chev{transform:rotate(180deg);} /* "Products" submenu: opens on hover and closes the moment the mouse leaves (standard hover dropdown), and also stays keyboard-accessible via :focus-within, and via the existing click-to-open JS (adds .is-open) for touchscreen laptops/hybrid devices — all three paths just reveal the same panel. */ .rkds-nav__sub{ position:absolute;top:calc(100% + 4px);left:0;min-width:220px; background:var(--rkds-secondary,#6b90c6);border-radius:var(--rkds-radius);box-shadow:var(--rkds-shadow); padding:10px;display:none;flex-direction:column;z-index:50; } .rkds-has-sub:hover > .rkds-nav__sub, .rkds-has-sub.is-open > .rkds-nav__sub, .rkds-has-sub:focus-within > .rkds-nav__sub{display:flex;} .rkds-nav__sublink{display:block;padding:9px 12px;border-radius:6px;font-size:14px;color:var(--rkds-primary);transition:background .15s ease,color .15s ease;} .rkds-nav__sublink:hover{background:var(--rkds-gold,#e8423c);color:#fff;} .rkds-header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;} .rkds-icon-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;padding:0;border:1px solid var(--rkds-secondary);background:#fff; color:var(--rkds-primary);border-radius:50%;transition:background .2s ease,color .2s ease,transform .15s ease,border-color .2s ease; text-decoration:none; } .rkds-icon-btn:hover{background:var(--rkds-primary);color:#fff;border-color:var(--rkds-primary);transform:translateY(-1px);} .rkds-cart-count{ position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px; background:var(--rkds-gold);color:#fff;border-radius:999px;font-size:11px;font-weight:700; display:flex;align-items:center;justify-content:center;line-height:1; } .rkds-cart-count--inline{position:static;margin-left:8px;display:inline-flex;} /* The badge is always in the DOM now (see inc/mini-cart.php) so the WooCommerce AJAX fragment refresh always has an element to replace — it's just left empty at zero, and :empty hides it rather than the PHP template omitting the element entirely. */ .rkds-cart-count:empty{display:none;} .rkds-mobile-toggle{display:inline-flex;} /* --------------------------------------------------------------- Header mini-cart dropdown. */ .rkds-mini-cart{position:relative;} .rkds-mini-cart__panel{ position:absolute;top:calc(100% + 10px);right:0;z-index:110; width:min(360px,90vw);background:#fff;border:1px solid var(--rkds-secondary); border-radius:var(--rkds-radius);box-shadow:var(--rkds-shadow);padding:16px; } .rkds-mini-cart__empty{text-align:center;padding:10px 0;} .rkds-mini-cart__empty p{margin:0 0 14px;color:var(--rkds-text);} .rkds-mini-cart__items{list-style:none;margin:0 0 14px;padding:0;max-height:320px;overflow-y:auto;} .rkds-mini-cart__item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--rkds-bg);} .rkds-mini-cart__item:last-child{border-bottom:none;} .rkds-mini-cart__thumb{flex:0 0 auto;width:52px;height:52px;border-radius:8px;overflow:hidden;display:block;} .rkds-mini-cart__thumb img{width:100%;height:100%;object-fit:cover;display:block;} .rkds-mini-cart__details{flex:1 1 auto;min-width:0;} .rkds-mini-cart__name{display:block;font-size:13.5px;font-weight:600;color:var(--rkds-primary);text-decoration:none;line-height:1.3;} .rkds-mini-cart__name:hover{text-decoration:underline;} .rkds-mini-cart__meta{font-size:12px;color:var(--rkds-text);opacity:.75;margin-top:2px;} .rkds-mini-cart__qty{display:block;font-size:12.5px;color:var(--rkds-text);opacity:.85;margin-top:4px;} .rkds-mini-cart__remove{ flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center; border-radius:50%;color:var(--rkds-text);opacity:.55;text-decoration:none;font-size:16px;line-height:1; } .rkds-mini-cart__remove:hover{opacity:1;background:var(--rkds-bg);color:#a3372c;} .rkds-mini-cart__subtotal{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding-top:10px;border-top:1px solid var(--rkds-secondary);margin-bottom:14px;} .rkds-mini-cart__subtotal strong{color:var(--rkds-primary);font-size:16px;} .rkds-mini-cart__actions{display:flex;gap:10px;} .rkds-mini-cart__actions .rkds-btn{flex:1 1 0;text-align:center;padding:10px 12px;font-size:13.5px;} @media (max-width:480px){ .rkds-mini-cart__panel{position:fixed;top:var(--rkds-header-h);left:12px;right:12px;width:auto;} } /* Search form embedded directly in the mobile slide-in menu (Search is no longer a header-row icon on mobile — see the max-width:900px block below). Full-width, stacked above the nav links. */ .rkds-mobile-menu__search{margin-bottom:18px;} .rkds-mobile-menu__search form{display:flex;gap:8px;} .rkds-mobile-menu__search input[type="search"]{ flex:1 1 auto;min-width:0;padding:11px 14px;border:1px solid var(--rkds-secondary); border-radius:8px;font-size:15px; } .rkds-mobile-menu__search button[type="submit"]{ flex:0 0 auto;padding:11px 16px;border-radius:8px;border:none; background:var(--rkds-primary);color:#fff;font-weight:600; } /* Cart / Track Order / My Account — same vertical stacked-list treatment as the nav links above them, so nothing here sits side-by-side or wraps into a staggered row; each is a full-width block with a divider. */ .rkds-mobile-menu__actions{ display:flex;flex-direction:column;margin-top:10px;padding-top:10px; border-top:1px solid var(--rkds-secondary); } .rkds-mobile-menu__action{ display:flex;align-items:center;justify-content:space-between;width:100%; padding:14px 4px;font-size:16px;font-weight:700;color:var(--rkds-primary); border-bottom:1px solid var(--rkds-secondary); } .rkds-mobile-menu__action:last-child{border-bottom:none;} /* Round 5: compact dropdown search bar (was a full-screen overlay — the store owner asked for that to go). It now opens directly under the sticky header as a slim bar spanning the header's width, never covering the rest of the page, and pushes nothing else around since it's position:fixed relative to the viewport top offset by the header height. */ .rkds-search-panel{ display:none;position:fixed;top:var(--rkds-header-h);left:0;right:0;z-index:120; background:#fff;border-bottom:1px solid rgba(232, 66, 60,.18); box-shadow:0 14px 30px rgba(38, 40, 43,.12);padding:16px 0; } .rkds-search-panel.is-open{display:block;} .rkds-search-panel__box{display:flex;align-items:center;gap:10px;} .rkds-search-panel__box form{display:flex;gap:8px;flex:1 1 auto;min-width:0;} .rkds-search-panel input[type="search"]{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--rkds-secondary);border-radius:8px;font-size:15px;} .rkds-search-panel button[type="submit"]{padding:12px 20px;border-radius:8px;border:none;background:var(--rkds-primary);color:#fff;font-weight:600;flex:0 0 auto;} .rkds-search-panel__close{ flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--rkds-secondary); background:#fff;color:var(--rkds-primary);font-size:20px;line-height:1;cursor:pointer; } .rkds-search-panel__close:hover{background:var(--rkds-primary);color:#fff;border-color:var(--rkds-primary);} /* Mobile slide-in menu. Width capped at 50vw (never more than half the screen) as well as 340px, so it stays a reasonable size on both small and large phones instead of covering most of the viewport. */ .rkds-mobile-menu{ position:fixed;top:0;right:0;bottom:0;width:min(340px,50vw);background:#fff;z-index:200; transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;box-shadow:-8px 0 24px rgba(0,0,0,.15); } .rkds-mobile-menu.is-open{transform:translateX(0);} .rkds-mobile-menu__in{padding:24px 20px;} .rkds-mobile-nav__item{border-bottom:1px solid var(--rkds-secondary);} .rkds-mobile-nav .rkds-nav__link,.rkds-mobile-nav .rkds-nav__toggle{ display:flex;justify-content:space-between;width:100%;padding:14px 4px;font-size:16px;border-radius:0; } .rkds-mobile-nav .rkds-nav__link:hover,.rkds-mobile-nav .rkds-nav__toggle:hover{background:none;} .rkds-mobile-nav__sub{display:none;padding-left:14px;} .rkds-mobile-nav__item.is-open .rkds-mobile-nav__sub{display:block;} .rkds-nav__sublink{padding:12px 4px;} .rkds-mobile-menu__phone{display:block;margin-top:18px;font-weight:700;color:var(--rkds-gold);} .rkds-overlay{position:fixed;inset:0;background:rgba(38, 40, 43,.4);z-index:150;} .rkds-overlay.is-open{display:block;} .rkds-overlay:not(.is-open){display:none;} @media (max-width:900px){ /* Search / Track Order / My Account / Cart are no longer separate icon buttons crowding the mobile header row — they've all moved into the slide-in menu (see .rkds-mobile-menu__search / .rkds-mobile-menu__actions above), leaving only the hamburger toggle next to the logo. */ .rkds-header__actions .rkds-cart-link, .rkds-header__actions .rkds-search-toggle, .rkds-header__actions .rkds-track-link, .rkds-header__actions .rkds-account-link{display:none;} /* With only the hamburger toggle left in the row, let the logo + tagline block grow to occupy the full remaining width instead of being squeezed into just the space it needs. */ .rkds-header__brand{flex:1 1 auto;min-width:0;} } @media (max-width:640px){ /* Was display:none — the store owner explicitly asked for the gold tagline to stay visible next to the logo on mobile too, not just desktop. Instead of hiding it, shrink it and let it wrap onto a second line (rather than truncate with an ellipsis) so the full text is still readable in the tighter header width. Sizes bumped again (120px->172px tagline, 60px->64px logo height) per the store owner's request that the logo+tagline block visually extend to reach the hamburger toggle, not stop partway across the row (the row itself already grows full-width via the flex:1 1 auto rule above — this makes the visible content actually fill that space instead of leaving it empty). Row padding tightened slightly to offset the taller logo's effect on header height. */ .rkds-header__brand{gap:10px;} .rkds-header__brand-tagline{ display:block;font-size:.6rem;letter-spacing:.1em;line-height:1.2; max-width:172px;white-space:normal;overflow:visible;text-overflow:clip; padding-left:8px; } .rkds-header__logo img, .rkds-header__logo .custom-logo{max-height:64px;max-width:230px;} .rkds-header__row{padding:6px 0;} } @media (max-width:400px){ .rkds-header__brand-tagline{max-width:132px;font-size:.55rem;padding-left:6px;} .rkds-header__logo img, .rkds-header__logo .custom-logo{max-height:54px;max-width:186px;} } @media (min-width:901px){ /* Desktop --rkds-header-h value now comes from inc/customizer.php's rkds_dynamic_css() (Appearance > Customize > RKDS: Header > "Header height"), not a hardcoded value here, so the Customizer control actually has an effect. */ .rkds-nav{display:flex;} .rkds-mobile-toggle{display:none;} .rkds-mobile-menu,.rkds-overlay{display:none !important;} } @media (max-width:900px){ :root{--rkds-header-h:88px;} } /* ========================================================================== 2. Hero ========================================================================== */ .rkds-hero{ background:linear-gradient(180deg,var(--rkds-bg) 0%,#fff 100%); /* Top padding cut to 10px 2026-09-08 per store-owner request — the header is sticky/its own element, so this is the entire visible gap between it and the hero content below. */ padding:10px 0 56px;overflow:hidden; } .rkds-hero__grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;} .rkds-hero__content{text-align:center;max-width:560px;margin:0 auto;} .rkds-hero__eyebrow{ display:inline-flex;align-items:center;gap:7px;color:var(--rkds-primary);background:var(--rkds-cat-tint-1,#f4ebd9); font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; padding:7px 14px;border-radius:999px;margin-bottom:18px; } .rkds-hero__eyebrow svg{color:var(--rkds-gold);flex:0 0 auto;} .rkds-hero__title{ font-family:var(--rkds-font-display);font-size:clamp(30px,4.4vw,48px); line-height:1.14;margin:0 0 20px;font-weight:600; } .rkds-hero__title em{color:var(--rkds-gold);font-style:italic;} .rkds-hero__sub{margin:0 0 26px;font-size:16.5px;line-height:1.6;color:var(--rkds-text);} .rkds-hero__cta{display:flex;gap:14px;margin-bottom:26px;flex-wrap:wrap;justify-content:center;} .rkds-hero__trust{display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;} .rkds-hero__trust-icon{ display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto; border-radius:50%;background:var(--rkds-secondary);color:var(--rkds-primary); } .rkds-hero__trust-text{display:flex;flex-direction:column;text-align:left;line-height:1.35;} .rkds-hero__trust-text strong{font-size:13.5px;color:var(--rkds-text);} .rkds-hero__trust-rating{font-size:12.5px;color:var(--rkds-gold);font-weight:600;} .rkds-hero__badges{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;} .rkds-hero__badges li{ font-size:13.5px;font-weight:600;color:var(--rkds-primary); display:inline-flex;align-items:center;gap:6px; } .rkds-hero__badges li::before{content:"✓";color:var(--rkds-gold);font-weight:700;} .rkds-hero__visual{position:relative;display:flex;align-items:center;justify-content:center;padding:20px;} .rkds-hero__blob{ position:absolute;top:50%;left:50%;width:min(520px,88%);aspect-ratio:1/1; transform:translate(-50%,-50%);border-radius:50%; /* Changed 2026-09-08 from the periwinkle secondary (blue) per direct "remove that blue color" request — a warm cream/peach tint from the theme's own existing category-tint palette instead of an unrelated new color. */ background:var(--rkds-cat-tint-1,#f4ebd9);opacity:.7;z-index:0; } .rkds-hero__leaf{position:absolute;top:6%;right:2%;color:var(--rkds-primary);opacity:.18;z-index:0;pointer-events:none;} .rkds-hero__frame{ position:relative;z-index:1;width:min(520px,100%);aspect-ratio:1/1.08;border-radius:var(--rkds-radius); overflow:hidden;box-shadow:0 24px 60px rgba(38, 40, 43,.2),0 4px 14px rgba(24,24,32,.08); border:4px solid #fff;outline:1.5px solid rgba(232, 66, 60,.35);outline-offset:-4px; /* Changed 2026-09-08 from the periwinkle secondary (blue) — this is the letterbox fill visible around a video/image that doesn't exactly fill the frame (see object-fit:contain on the video variant below), so it needed to stop being blue too. */ background:var(--rkds-bg); } .rkds-hero__frame-media{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block; } /* Video variant — revised 2026-09-08 per direct feedback: keep the SAME frame the photo uses (size/shape unchanged, same rounded corners from the frame's own border-radius + overflow:hidden above) rather than reshaping the frame to the video's own 9:16 ratio (the earlier approach). The video is scaled down to fit fully inside that frame with object-fit:contain, so its whole picture and all four edges stay visible with no cropping — height/width both shrink together, never stretched. Letterboxing (if any) shows the frame's own background color, not black bars. */ .rkds-hero__frame--video .rkds-hero__frame-media{object-fit:contain;object-position:center;} .rkds-hero__frame-placeholder{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:#fff;opacity:.6; } /* Requested: reduce the gap between the header and the hero content on mobile/tablet (single-column layout, below the 1024px breakpoint where text stacks above the video) so the hero video is fully visible on the mobile landing page without scrolling. Compresses top/bottom padding and every piece of vertical spacing in the text stack above the video, without touching the desktop two-column layout. */ @media (max-width:900px){ .rkds-hero{padding:10px 0 26px;} .rkds-hero__grid{gap:14px;} .rkds-hero__eyebrow{margin-bottom:6px;font-size:11px;} .rkds-hero__title{font-size:clamp(22px,7vw,30px);margin:0 0 8px;line-height:1.1;} .rkds-hero__sub{margin:0 0 12px;font-size:13.5px;line-height:1.4;} .rkds-hero__cta{margin-bottom:12px;gap:8px;} } @media (min-width:1024px){ .rkds-hero__grid{grid-template-columns:1fr 1.15fr;gap:60px;text-align:left;} .rkds-hero__content{text-align:left;margin:0;} .rkds-hero__eyebrow{text-align:left;} .rkds-hero__cta{justify-content:flex-start;} .rkds-hero__badges{justify-content:flex-start;} .rkds-hero__frame{width:100%;} } /* ========================================================================== 3. Category cards ========================================================================== */ .rkds-categories__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;} @media (min-width:640px){.rkds-categories__grid{grid-template-columns:repeat(3,1fr);}} @media (min-width:960px){.rkds-categories__grid{grid-template-columns:repeat(5,1fr);}} .rkds-category-card{ background:var(--rkds-card-tint,#fff);border-radius:var(--rkds-radius);overflow:hidden;box-shadow:var(--rkds-shadow); transition:transform .2s ease;display:block; } .rkds-category-card:hover{transform:translateY(-4px);} .rkds-category-card__media{aspect-ratio:1/1;background:var(--rkds-card-tint,var(--rkds-secondary));overflow:hidden;} .rkds-category-card__media img{width:100%;height:100%;object-fit:cover;} .rkds-category-card__placeholder{width:100%;height:100%;} .rkds-category-card__body{padding:16px;} .rkds-category-card__body h3{margin-bottom:4px;font-size:16.5px;} .rkds-category-card__count{margin:0 0 8px;font-size:12.5px;color:#5c6266;} .rkds-category-card__cta{color:var(--rkds-gold);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:4px;} /* ========================================================================== 4. Product grid & cards (homepage rows + WooCommerce shop/category/search) ========================================================================== */ .rkds-products-row{background:transparent;} .rkds-products-row--alt{background:var(--rkds-secondary);} /* Grid: equal-width columns, equal-height rows, consistent gutters at every breakpoint. grid-auto-rows:1fr makes every card in a row match the tallest card's height regardless of title/description length. */ /* clear:both guards against WooCommerce's own (un-dequeued) default stylesheet floating the result-count/ordering row above this grid — without it, a stray float there can push the whole grid sideways, leaving an empty-looking gap before the first product. */ /* CONFIRMED ROOT CAUSE of the "gap before products" report (verified by live-inspecting the actual rendered page, not guessed): WooCommerce's own default stylesheet puts a legacy float-clearfix pseudo-element on this list — `ul.products::before,::after{content:" ";display:table}`. That's harmless under WC's old float-based layout, but the instant this list becomes display:grid, that ::before (non-empty content, so it's still generated) becomes an actual GRID ITEM, silently occupying column 1 and pushing every real product one column to the right. This neutralizes it so it can never generate a box at all. */ ul.products::before, ul.products::after{content:none !important;display:none !important;} .rkds-product-grid, ul.products{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-auto-rows:1fr !important; gap:16px !important; list-style:none;margin:0 !important;padding:0 !important; float:none !important;width:auto !important;clear:both !important; } @media (min-width:640px){ .rkds-product-grid,ul.products{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:22px !important;} } @media (min-width:1024px){ .rkds-product-grid,ul.products{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:26px !important;} } /* Belt-and-suspenders alongside the PHP-level fix in inc/woocommerce.php (which forces the Shop/category pages to products-only): if a WooCommerce "subcategory tile"

ever ends up in this grid for any reason, this removes it from layout entirely with display:none rather than leaving an unstyled, near-invisible tile sitting in front of the real products (that mismatch was very likely what was reported as a "gap" before the products). display:none pulls it out of the grid completely, so the real products always start at column 1. */ ul.products li.product-category{display:none !important;} .rkds-product-card, ul.products li.product{ background:#fff;border-radius:var(--rkds-radius);overflow:hidden;box-shadow:var(--rkds-shadow); display:flex !important;flex-direction:column; width:auto !important;margin:0 !important;padding:0 !important; min-width:0; /* let long titles/prices shrink instead of blowing out the grid track */ } .rkds-product-card:hover, ul.products li.product:hover{box-shadow:0 10px 28px rgba(38, 40, 43,.14);} /* .rkds-product-card__media (our own homepage cards) is a dedicated image-only wrapper, so it can safely own the aspect ratio with an absolutely-positioned filling it. WooCommerce's native archive markup is different — the

` block containing a plain Search form + Pages list + Archives + Categories — the hardcoded content of WordPress's old "Twenty Ten" default sidebar.php — is not coming from this theme. Some other active plugin hooks the `get_footer` action and unconditionally echoes it as a direct child of , between

and