/*
Theme Name: Organio Child
Theme URI: http://demo.casethemes.net/organio/
Author: Case-Themes
Author URI: https://themeforest.net/user/case-themes/portfolio/
Description: Nirsha child theme (based on Organio parent). Custom design system for the Nirsha premium food e-commerce brand — dry fruits, spices, sweets, namkeen and healthy products.
Version: 10.0.0
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: organio
Text Domain: organio-child
Tags: organic, food, woocommerce
*/
/* ═══════════════════════════════════════════════════════════════════════════
NIRSHA CHILD THEME — v10.2.0 (Phase 11.2 Full-Width Responsive Content System)
---------------------------------------------------------------------------
Layer order (loaded once, cascading):
1. Design tokens (colors, type, spacing)
2. Global overrides (primary color, links, header, mobile menu)
3. Announcement bar
4. Homepage sections (.nrs-*) — Phase 9 blueprint
5. WooCommerce product loop (shop/archive) — kept from previous phases
6. Single product + related products — kept from previous phases
7. Currency switcher header polish
8. Footer polish
9. Safety nets (mobile ATC, horizontal overflow, breadcrumb icon)
═══════════════════════════════════════════════════════════════════════════ */
/* ── 1. DESIGN TOKENS ────────────────────────────────────────────────────── */
:root {
/* ═══ NIRSHA PREMIUM PALETTE — Warm Ivory × Deep Cocoa × Antique Gold ═══
The single authoritative colour source for the whole site. Nothing below
this block, and nothing in nirsha-pages.css, functions.php or the Nirsha
plugins, introduces a brand hex of its own — they all resolve here, so a
future brand change is a dozen lines in ONE file.
Distribution target: ~70% warm neutrals, ~20% cocoa/espresso, ~10% gold.
The interface FRAMES the product photography; it never competes with it.
ROLES ARE PART OF THE TOKEN. Two rules matter and are enforced below:
· Antique Gold (#B8893B) measures 2.6–3.1:1 on the light surfaces, so
it is DECORATION, dark-surface text, and button FILL only — never
small text on ivory/sand/card. `--nirsha-gold-ink` is the readable
gold for text on light (4.9:1). This is a role change, not a palette
change: the approved gold is still the gold you see.
· Green is NO LONGER a brand colour. It survives only as the semantic
success/in-stock token, and as the FSSAI veg mark in the compliance
plugin (a regulated symbol — see nirsha-commerce/food-info.css). */
/* Brand — cocoa & gold */
--nirsha-cocoa: #3B241B; /* primary: CTAs, dark brand surfaces */
--nirsha-cocoa-dark: #2B1913; /* pressed / deepest cocoa */
--nirsha-gold: #B8893B; /* accent: decoration, fills, dark-bg text */
--nirsha-gold-dark: #956D2E; /* gold hover; large glyphs on light 3.8:1 */
--nirsha-gold-ink: #8C6529; /* gold-toned TEXT on light — 4.9:1 on ivory*/
/* Gold small text on the LIFTED surfaces inside a cocoa band (the Special
Selection cards sit on rgba(ivory,.05) over cocoa = rgb(69,47,38), where
#B8893B measures only 3.96:1). Same hue, one step up. */
--nirsha-gold-light: #C69A4E;
--nirsha-espresso: #201713; /* headings, footer, deep photographic band */
/* Ink */
--nirsha-text: #675A50; /* body copy — 6.2:1 on ivory */
--nirsha-muted: #8B7B6D; /* de-emphasis w/ a non-colour cue (3.8:1) */
/* Secondary copy. Chosen against the WORST ground it lands on, Soft Sand
(4.61:1), not the best one — at #7D6D60 the trust-strip descriptions
measured 4.09:1 on sand and failed. */
--nirsha-muted-ink: #756557; /* 5.23 ivory · 4.61 sand · 5.50 card */
/* Surfaces */
--nirsha-ivory: #FBF7EF; /* dominant site ground */
--nirsha-sand: #F2E8D8; /* alternate band — rhythm, not everywhere */
--nirsha-card: #FFFDF8; /* cards, product surfaces, header */
--nirsha-border: #E8DDCD; /* borders & dividers */
/* Semantic — deliberately NOT brand colours */
--nirsha-success: #557A46; /* success · in stock · confirmed */
--nirsha-success-ink: #48663B; /* success text on a success tint */
--nirsha-success-bg: #EDF3E9;
--nirsha-error: #A63D32; /* validation failure · destructive */
--nirsha-error-bg: #FBF0EE;
--nirsha-warning: #9A6B1E; /* restrained warm amber — genuine warnings */
--nirsha-warning-bg: #FBF3E4;
/* ── Legacy surface aliases ──────────────────────────────────────────────
Kept so the 4,000 lines below did not have to be rewritten by hand; each
now points at its NEW role. The old green/sage names are gone entirely so
nothing can resolve to a green by accident. */
--nirsha-bg-main: var(--nirsha-ivory);
--nirsha-surface: var(--nirsha-card);
--nirsha-cream: var(--nirsha-sand); /* deepest warm band (Combo) */
--nirsha-cream-soft: var(--nirsha-ivory); /* Shop by Category */
--nirsha-forest: var(--nirsha-espresso);
--nirsha-charcoal: var(--nirsha-espresso);
/* Brand aliases — every one of these now resolves to cocoa/gold */
--nrs-brand: var(--nirsha-cocoa);
--nrs-brand-dark: var(--nirsha-cocoa-dark);
--nrs-brand-deep: var(--nirsha-cocoa);
--nrs-brand-tint: var(--nirsha-sand); /* soft warm tint behind glyphs */
--nrs-accent: var(--nirsha-gold);
/* Primary action — one place to change every CTA on the site.
Cocoa fill / ivory label at rest; gold fill / espresso label on hover. */
--nrs-cta-bg: var(--nirsha-cocoa);
--nrs-cta-ink: var(--nirsha-ivory);
--nrs-cta-bg-hover: var(--nirsha-gold);
--nrs-cta-ink-hover: var(--nirsha-espresso);
/* Focus: cocoa on light surfaces (13.5:1); dark bands override to gold. */
--nrs-focus: var(--nirsha-cocoa);
/* Neutrals — warm bias, chosen not defaulted */
--nrs-ink: var(--nirsha-espresso);
--nrs-ink-2: var(--nirsha-text);
--nrs-muted: var(--nirsha-muted-ink);
--nrs-line: var(--nirsha-border);
--nrs-line-2: #F0E7DA; /* one step softer than --nrs-line */
--nrs-cream: var(--nirsha-ivory);
--nrs-cream-2: var(--nirsha-sand);
--nrs-white: var(--nirsha-card);
--nrs-shadow: 0 6px 24px rgba(59, 36, 27, 0.07);
--nrs-shadow-lg: 0 12px 42px rgba(32, 23, 19, 0.12);
/* Legacy hooks used elsewhere in the parent theme */
--primary-color: var(--nirsha-cocoa);
--link-color: var(--nirsha-cocoa);
/* Type & rhythm
NOTE: only faces the site actually enqueues may appear first here.
'Fraunces' was previously first but is never loaded by the theme, so every
display heading silently fell back to the theme's Lora !important rule.
Playfair Display IS enqueued by Organio and is the intended display face. */
--nrs-font-body: 'Poppins', 'Barlow', sans-serif;
--nrs-font-display: 'Playfair Display', 'Lora', Georgia, serif;
--nrs-radius: 12px;
--nrs-radius-sm: 8px;
--nrs-radius-lg: 20px;
--nrs-section-y: 88px;
}
/* ── 2. GLOBAL OVERRIDES ─────────────────────────────────────────────────── */
.ct-cursor--follower { background-color: rgba(59, 36, 27, 0.20) !important; }
/* Body links read cocoa and warm to gold on hover. Gold-INK, not gold: plain
#B8893B is 2.9:1 on ivory and would make every hovered link unreadable. */
a:hover { color: var(--nirsha-gold-ink); }
/* Site ground. Organio leaves at #fff, so every Elementor section that
declares no background of its own rendered pure white — the real cause of the
white/white/cream/white rhythm. Set once, here. */
body { background-color: var(--nirsha-bg-main); }
/* The header surface is set in functions.php (nirsha-header-polish), the only
place that can beat Organio own !important rule. Not duplicated here —
one background, one owner. */
@media screen and (min-width: 1200px) {
#ct-header-wrap.ct-header-layout10 .ct-header-branding {
margin-top: 6px; margin-bottom: 6px;
}
#ct-header-wrap.ct-header-layout10 .ct-header-main .ct-main-menu > li > a {
line-height: 52px;
font-weight: 600;
letter-spacing: 0.01em;
}
/* Underline indicator for active + hover */
#ct-header-wrap.ct-header-layout10 .ct-main-menu > li > a::after {
content: ""; position: absolute; left: 12px; right: 12px; bottom: 12px;
height: 2px; background: var(--nirsha-gold);
transform: scaleX(0); transform-origin: left center;
transition: transform .22s ease;
}
#ct-header-wrap.ct-header-layout10 .ct-main-menu > li > a { position: relative; }
#ct-header-wrap.ct-header-layout10 .ct-main-menu > li:hover > a::after,
#ct-header-wrap.ct-header-layout10 .ct-main-menu > li.current-menu-item > a::after,
#ct-header-wrap.ct-header-layout10 .ct-main-menu > li.current-menu-parent > a::after {
transform: scaleX(1);
}
}
#ct-header-wrap.ct-header-layout10 .ct-main-menu > li.current-menu-item > a,
#ct-header-wrap.ct-header-layout10 .ct-main-menu > li.current-menu-parent > a {
color: var(--nirsha-cocoa) !important;
}
@media (max-width: 991px) { #ct-menu-mobile { display: flex !important; } }
/* ── 3. ANNOUNCEMENT BAR — premium rotating (2026, pure CSS @keyframes) ──── */
/*
* Strategy: pure CSS animation — works in foreground AND background tabs.
* 4 messages × 5 s each = 20 s total cycle.
* Keyframe: visible 0-25 % of cycle; hidden 25-100 %.
* Negative delay on msg[0] makes it instantly visible at page load.
* JS is only used for aria-hidden toggling (no timer-sensitive logic).
*/
@keyframes nrs-annb-rotate {
0% { opacity: 0; transform: translateY(8px); }
2% { opacity: 1; transform: translateY(0); }
23% { opacity: 1; transform: translateY(0); }
25% { opacity: 0; transform: translateY(-8px);}
25.5%, 100% { opacity: 0; transform: translateY(8px); }
}
.nrs-annb {
background: var(--nirsha-espresso);
color: rgba(251, 247, 239, 0.82);
font-family: var(--nrs-font-body);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
line-height: 1;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
z-index: 1200;
width: 100%;
}
.nrs-annb__msg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 20px;
opacity: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* animation: each msg plays a 20 s cycle; staggered by 5 s each */
animation: nrs-annb-rotate 20000ms ease-in-out infinite;
}
/* Stagger: -400ms offset makes msg[0] appear at 2 % (fully visible) at page load */
.nrs-annb__msg:nth-child(1) { animation-delay: -400ms; }
.nrs-annb__msg:nth-child(2) { animation-delay: 4600ms; }
.nrs-annb__msg:nth-child(3) { animation-delay: 9600ms; }
.nrs-annb__msg:nth-child(4) { animation-delay: 14600ms; }
.nrs-annb__dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--nirsha-gold);
display: inline-block;
flex-shrink: 0;
opacity: 0.9;
}
@media (max-width: 767px) {
.nrs-annb { font-size: 10px; height: 32px; letter-spacing: 0.09em; }
.nrs-annb__msg { gap: 8px; }
.nrs-annb__dot { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
4. HOMEPAGE — .nrs-* COMPONENTS (Phase 9 blueprint)
═══════════════════════════════════════════════════════════════════════════ */
/* Neutralise Elementor section defaults for all Phase 9 full-bleed sections */
.elementor-element-nrshero, .elementor-element-nrstrust, .elementor-element-nrscats,
.elementor-element-nrspromo, .elementor-element-nrswhy,
.elementor-element-nrscoll, .elementor-element-nrsabout, .elementor-element-nrsprom,
.elementor-element-nrsgall, .elementor-element-nrsnews {
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* Favorites is the one Phase-9 section that carries its own full-bleed surface
colour (its content sits in a plain .nrs-container with no band wrapper of
its own), so it is neutralised individually and keeps its background. */
.elementor-element-nrsbest { margin: 0 !important; }
.elementor-element-nrshero .elementor-column-gap-default,
.elementor-element-nrshero .elementor-widget-html,
.elementor-element-nrshero .elementor-widget-container,
.elementor-element-nrstrust .elementor-widget-container,
.elementor-element-nrscats .elementor-widget-container,
.elementor-element-nrspromo .elementor-widget-container,
.elementor-element-nrswhy .elementor-widget-container,
.elementor-element-nrscoll .elementor-widget-container,
.elementor-element-nrsabout .elementor-widget-container,
.elementor-element-nrsprom .elementor-widget-container,
.elementor-element-nrsgall .elementor-widget-container,
.elementor-element-nrsnews .elementor-widget-container,
.elementor-element-nrsbest .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
.elementor-element-nrsbest .elementor-widget-ct_product_grid {
margin-top: 0 !important;
}
/* Container + shared type */
.nrs-container {
max-width: 1360px;
margin: 0 auto;
padding: 0 40px;
}
.nrs-eyebrow {
display: inline-block;
font-family: var(--nrs-font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
/* Eyebrows are the site's signature gold detail. On LIGHT surfaces they use
the readable gold-ink (4.9:1); over dark bands and photography the full
Antique Gold is used instead — see .nrs-eyebrow--light and §13/§16. */
color: var(--nirsha-gold-ink);
margin-bottom: 14px;
}
/* Eyebrow OVER PHOTOGRAPHY.
Antique Gold is 2.9:1 against a light photograph and there is no overlay
opacity that rescues it without also flattening the picture — so this is a
role change, exactly as §38 prescribes: the LABEL becomes ivory (5.3:1 at the
weakest point of the hero wash) and the gold moves to a 2px rule beside it,
where it is decoration and carries no meaning of its own. The gold reads just
as strongly; it simply stops being the thing you have to read.
Over SOLID cocoa/espresso bands the gold text is 4.6–5.6:1 and stays gold —
see .nrs-coll and .nrs-gallery. */
.nrs-eyebrow--light {
color: var(--nirsha-ivory);
text-shadow: 0 1px 6px rgba(32,23,19,0.55);
display: inline-flex;
align-items: center;
gap: 10px;
}
.nrs-eyebrow--light::before {
content: "";
width: 24px; height: 2px;
background: var(--nirsha-gold);
flex: 0 0 24px;
border-radius: 2px;
}
.nrs-title {
font-family: var(--nrs-font-display);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--nrs-ink);
margin: 0 0 14px;
text-wrap: balance;
}
.nrs-head { text-align: center; max-width: 720px; margin: 0 auto 42px; }
.nrs-head--left { text-align: left; margin: 0 0 32px; max-width: none;
display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.nrs-head--light .nrs-title { color: var(--nirsha-ivory); }
.nrs-head--light .nrs-lead { color: rgba(251,247,239,0.80); }
.nrs-lead {
font-family: var(--nrs-font-body);
font-size: 15.5px;
line-height: 1.65;
color: var(--nrs-muted);
margin: 0;
}
/* Buttons */
.nrs-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 13px 26px;
font-family: var(--nrs-font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
border-radius: 999px;
border: 1.5px solid transparent;
line-height: 1;
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
white-space: nowrap;
}
/* One primary-action treatment for the whole site: cocoa fill, ivory label;
hover lifts to Antique Gold with an espresso label (5.6:1). White on gold is
only 3.1:1, which is why the hover label is espresso and not #fff. */
.nrs-btn--primary { background: var(--nrs-cta-bg); color: var(--nrs-cta-ink); border-color: var(--nrs-cta-bg); }
.nrs-btn--primary:hover,
.nrs-btn--primary:focus-visible { background: var(--nrs-cta-bg-hover); border-color: var(--nrs-cta-bg-hover); color: var(--nrs-cta-ink-hover); }
.nrs-btn--ghost { background: transparent; color: var(--nirsha-cocoa); border-color: rgba(59,36,27,0.28); }
.nrs-btn--ghost:hover { background: var(--nirsha-cocoa); color: var(--nirsha-ivory); border-color: var(--nirsha-cocoa); }
.nrs-btn--light { background: var(--nirsha-ivory); color: var(--nirsha-espresso); border-color: var(--nirsha-ivory); }
.nrs-btn--light:hover { background: var(--nirsha-gold); color: var(--nirsha-espresso); border-color: var(--nirsha-gold); }
/* ─── HERO ─── */
.nrs-hero {
background: linear-gradient(180deg, var(--nrs-cream) 0%, var(--nrs-cream-2) 100%);
padding: 72px 0 88px;
position: relative;
overflow: hidden;
}
.nrs-hero::before {
content: ""; position: absolute; inset: auto -10% -30% auto;
width: 460px; height: 460px; border-radius: 50%;
background: radial-gradient(circle, rgba(184,137,59,0.12) 0%, transparent 70%);
pointer-events: none;
}
.nrs-hero__inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
}
.nrs-hero__content { max-width: 560px; }
.nrs-hero__title {
font-family: var(--nrs-font-display);
font-weight: 500;
font-size: clamp(38px, 4.6vw, 62px);
line-height: 1.05;
letter-spacing: -0.015em;
color: var(--nrs-ink);
margin: 0 0 22px;
text-wrap: balance;
}
.nrs-hero__lead {
font-family: var(--nrs-font-body);
font-size: 17px;
line-height: 1.65;
color: var(--nrs-ink-2);
margin: 0 0 30px;
max-width: 520px;
}
.nrs-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }
.nrs-hero__points {
display: flex; flex-wrap: wrap; gap: 18px 26px;
list-style: none; padding: 0; margin: 0;
font-family: var(--nrs-font-body);
font-size: 13.5px;
font-weight: 500;
color: var(--nrs-muted);
letter-spacing: 0.02em;
}
.nrs-hero__points li {
padding-left: 22px;
position: relative;
}
.nrs-hero__points li::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 14px; height: 14px; margin-top: -7px;
border-radius: 50%;
background: var(--nrs-brand-tint);
box-shadow: inset 0 0 0 4px var(--nirsha-gold-dark);
}
.nrs-hero__media { position: relative; }
.nrs-hero__frame {
position: relative;
aspect-ratio: 4/3;
border-radius: 28px;
overflow: hidden;
box-shadow: var(--nrs-shadow-lg);
background: #eee;
}
.nrs-hero__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nrs-hero__badge {
position: absolute;
right: -12px; bottom: -22px;
background: #fff;
padding: 14px 20px;
border-radius: var(--nrs-radius);
box-shadow: var(--nrs-shadow-lg);
display: flex; flex-direction: column; gap: 2px;
z-index: 2;
}
.nrs-hero__badge strong {
font-family: var(--nrs-font-display);
font-weight: 600;
font-size: 20px;
color: var(--nrs-ink);
line-height: 1;
}
.nrs-hero__badge span {
font-family: var(--nrs-font-body);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--nrs-muted);
}
@media (max-width: 991px) {
.nrs-hero { padding: 52px 0 68px; }
.nrs-hero__inner { grid-template-columns: 1fr; gap: 40px; }
.nrs-hero__content { max-width: none; }
.nrs-hero__frame { aspect-ratio: 3/2; }
}
@media (max-width: 480px) {
.nrs-hero { padding: 36px 0 56px; }
.nrs-hero__cta { flex-direction: column; align-items: stretch; }
.nrs-hero__cta .nrs-btn { width: 100%; }
.nrs-hero__badge { right: 8px; bottom: -18px; padding: 10px 14px; }
.nrs-hero__badge strong { font-size: 16px; }
.nrs-hero__badge span { font-size: 10px; }
}
/* ─── TRUST STRIP ─── */
/* Soft Sand, not ivory: this is a thin band directly under the photographic
hero, and a sand ground reads as a deliberate rule between the hero and the
ivory category section rather than merging into it. */
.nrs-trust {
background: var(--nirsha-sand);
border-top: 1px solid var(--nrs-line);
border-bottom: 1px solid var(--nrs-line);
padding: 22px 0;
margin-top: -1px;
position: relative;
z-index: 1;
}
.nrs-trust__item {
display: flex; align-items: center; gap: 14px;
padding: 8px 22px;
border-right: 1px solid var(--nrs-line);
}
.nrs-trust__item:last-child { border-right: none; }
.nrs-trust__icon {
flex-shrink: 0;
width: 42px; height: 42px;
/* Card medallion on the sand band, cocoa glyph. Quiet by design (§7) —
these four marks must not compete with the hero above them. */
background: var(--nirsha-card);
color: var(--nirsha-cocoa);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
}
.nrs-trust__icon svg { width: 22px; height: 22px; display: block; }
.nrs-trust__label {
font-family: var(--nrs-font-body);
font-size: 14px; font-weight: 700; color: var(--nrs-ink);
margin: 0 0 2px; line-height: 1.25;
}
.nrs-trust__desc {
font-family: var(--nrs-font-body);
font-size: 12.5px; color: var(--nrs-muted);
margin: 0; line-height: 1.35;
}
@media (max-width: 991px) {
.nrs-trust__inner { grid-template-columns: repeat(2, 1fr); }
.nrs-trust__item { border-right: none; padding: 12px 16px; }
.nrs-trust__item:nth-child(odd) { border-right: 1px solid var(--nrs-line); }
.nrs-trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--nrs-line); }
}
@media (max-width: 520px) {
.nrs-trust__inner { grid-template-columns: 1fr; }
.nrs-trust__item, .nrs-trust__item:nth-child(odd) { border-right: none; }
.nrs-trust__item:not(:last-child) { border-bottom: 1px solid var(--nrs-line); }
}
/* ─── SHOP BY CATEGORY ─── */
@keyframes nrs-cat-in {
from { opacity: 0; transform: translateY(38px) scale(0.95); filter: blur(3px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes nrs-cat-shine {
0% { transform: translateX(-100%) skewX(-15deg); }
100% { transform: translateX(220%) skewX(-15deg); }
}
.nrs-cats {
background: var(--nrs-cream);
padding: var(--nrs-section-y) 0;
}
/* 6-column mosaic: 2 tall rows + optional bottom row for items 6-8 */
.nrs-cats__grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 240px 240px;
gap: 16px;
align-items: stretch;
}
.nrs-cats__grid .nrs-cat:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.nrs-cats__grid .nrs-cat:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 2; }
.nrs-cats__grid .nrs-cat:nth-child(3) { grid-column: 5 / 7; grid-row: 1 / 2; }
.nrs-cats__grid .nrs-cat:nth-child(4) { grid-column: 3 / 5; grid-row: 2 / 3; }
.nrs-cats__grid .nrs-cat:nth-child(5) { grid-column: 5 / 7; grid-row: 2 / 3; }
.nrs-cats__grid .nrs-cat:nth-child(6) { grid-column: 1 / 3; grid-row: 3 / 4; min-height: 210px; }
.nrs-cats__grid .nrs-cat:nth-child(7) { grid-column: 3 / 5; grid-row: 3 / 4; min-height: 210px; }
.nrs-cats__grid .nrs-cat:nth-child(8) { grid-column: 5 / 7; grid-row: 3 / 4; min-height: 210px; }
/* ── Base card ── */
.nrs-cat {
position: relative;
display: block;
border-radius: var(--nrs-radius-lg);
overflow: hidden;
text-decoration: none;
background: var(--nirsha-sand);
box-shadow: 0 2px 8px rgba(59,36,27,0.10), 0 1px 2px rgba(59,36,27,0.06);
transition: transform .32s cubic-bezier(0.22,1,0.36,1), box-shadow .32s ease;
will-change: transform;
min-height: 220px;
}
/* Entrance animation — .nrs-visible added by JS IntersectionObserver */
@media (prefers-reduced-motion: no-preference) {
.nrs-cat {
opacity: 0;
animation: nrs-cat-in 0.72s cubic-bezier(0.22,1,0.36,1) both;
animation-play-state: paused;
}
.nrs-cat.nrs-visible { animation-play-state: running; }
}
/* ── Hover ── */
.nrs-cat:hover {
transform: translateY(-7px) scale(1.018);
box-shadow: 0 22px 52px rgba(32,23,19,0.20), 0 4px 12px rgba(32,23,19,0.10);
}
/* ── Image ── */
.nrs-cat__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.nrs-cat__media img {
width: 100% !important; height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
transition: transform .68s cubic-bezier(0.22,1,0.36,1);
}
.nrs-cat:hover .nrs-cat__media img { transform: scale(1.1); }
/* ── Gradient overlay ── */
.nrs-cat::before {
content: ""; position: absolute; inset: 0;
/* Warm espresso wash, not the old green-black. Keeps the photography's own
colour honest while guaranteeing the ivory caption stays legible.
Pixel-sampled: on the SMALL tiles (215px tall) the title sits at ~70% of
the card, where the previous 0.52@62% ramp left "Chocolates", "Sweets",
"Healthy Products" and "Combo Packs" at 3.3–4.1:1 over their brighter
photographs. Reaching 0.62 by 52% and 0.86 by 76% fixes all four; the top
quarter of every tile is still essentially untouched. */
background: linear-gradient(180deg,
rgba(0,0,0,0.03) 0%,
rgba(0,0,0,0.12) 26%,
rgba(32,23,19,0.62) 52%,
rgba(32,23,19,0.86) 76%,
rgba(32,23,19,0.94) 100%
);
z-index: 1;
transition: background .4s ease;
}
.nrs-cat:hover::before {
background: linear-gradient(180deg,
rgba(0,0,0,0.07) 0%,
rgba(32,23,19,0.26) 26%,
rgba(32,23,19,0.70) 52%,
rgba(32,23,19,0.90) 76%,
rgba(32,23,19,0.96) 100%
);
}
/* ── Shine sweep on hover ── */
.nrs-cat::after {
content: '';
position: absolute; top: 0; left: 0;
width: 55%; height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.15) 50%,
transparent 100%
);
transform: translateX(-100%) skewX(-15deg);
z-index: 3;
pointer-events: none;
}
.nrs-cat:hover::after { animation: nrs-cat-shine 0.7s ease forwards; }
/* ── Text content ── */
.nrs-cat__body {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 22px 24px 20px;
z-index: 2;
color: var(--nirsha-ivory);
display: flex; flex-direction: column; gap: 4px;
transform: translateY(5px);
transition: transform .35s cubic-bezier(0.22,1,0.36,1);
}
.nrs-cat:hover .nrs-cat__body { transform: translateY(0); }
.nrs-cat__title {
font-family: var(--nrs-font-display);
font-weight: 500;
font-size: 24px;
line-height: 1.1;
letter-spacing: -0.01em;
text-shadow: 0 1px 5px rgba(0,0,0,0.28);
}
.nrs-cats__grid .nrs-cat:nth-child(1) .nrs-cat__title { font-size: 32px; }
.nrs-cat__desc {
font-family: var(--nrs-font-body);
font-size: 13px;
opacity: 0.88;
line-height: 1.4;
margin-top: 2px;
}
.nrs-cat__link {
font-family: var(--nrs-font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 10px;
display: inline-flex; align-items: center; gap: 6px;
color: rgba(251,247,239,0.88);
transition: color .2s ease;
}
/* Hover warms to Antique Gold over the darkened photograph (4.6:1+). */
.nrs-cat:hover .nrs-cat__link { color: var(--nirsha-gold); }
.nrs-cat__link em {
font-style: normal;
display: inline-block;
opacity: 0.68;
transition: transform .28s cubic-bezier(0.22,1,0.36,1), opacity .2s ease;
}
.nrs-cat:hover .nrs-cat__link em { transform: translateX(6px); opacity: 1; }
/* ── Responsive ── */
@media (max-width: 1199px) {
.nrs-cats__grid { grid-template-rows: 210px 210px; gap: 14px; }
}
/* The feature-tile span and the 1-column drop that used to live here fought the
.nrs-cats__grid--six ladder in R.4 and won on specificity (0,3,0 vs 0,2,0),
so tile 1 still spanned the full row at <=991px. The markup always carries
--six, so R.4 is the single authority for columns below 1200; only type
sizing remains here. */
@media (max-width: 991px) {
.nrs-cats__grid .nrs-cat:nth-child(1) .nrs-cat__title { font-size: 28px; }
}
@media (max-width: 480px) {
.nrs-cat__title { font-size: 20px; }
.nrs-cats__grid .nrs-cat:nth-child(1) .nrs-cat__title { font-size: 24px; }
}
/* ─── BEST SELLERS ─── */
/* Card-white band. It sits between the ivory category mosaic and the sand
Combo band, so the ladder reads ivory → white → sand rather than three
identical grounds in a row (§43 rhythm). */
.elementor-element-nrsbest {
background: var(--nirsha-card);
padding: var(--nrs-section-y) 0 !important;
}
.nrs-bs-head {
max-width: 1360px;
padding: 0 40px;
margin-bottom: 32px;
}
@media (max-width: 767px) {
.nrs-bs-head { padding: 0 18px; flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* ─── NIRSHA FAVORITES — curated card rail ───────────────────────────────────
The 17 rules that used to sit here were scoped to `.ct-product-grid-layout3`,
the Organio product-grid widget this section was originally built on. That
widget was replaced (first by WooCommerce's [products] shortcode, now by
[nirsha_favorites]) and the DOM contains ZERO .ct-product-grid-layout3 nodes,
so every one of those rules was dead — which is why the cards had lost their
surface, shadow and title styling. Re-pointed at the markup WooCommerce's
own content-product.php actually emits. Column counts live in R.5. */
.nrs-fav {
max-width: 1360px;
margin: 0 auto;
padding: 0 40px;
}
.elementor-element-nrsbest li.product .woocommerce-product-inner {
border-radius: var(--nrs-radius) !important;
background: var(--nirsha-card);
border: 1px solid var(--nirsha-border) !important;
box-shadow: var(--nrs-shadow);
overflow: hidden;
transition: box-shadow .22s ease, transform .22s ease;
}
.elementor-element-nrsbest li.product .woocommerce-product-inner:hover {
box-shadow: var(--nrs-shadow-lg);
transform: translateY(-3px);
}
/* Fixed image area so every card is the same height regardless of how tall the
source photograph is. `contain` because these are packets and bowls shot on
white — cropping them (cover) cuts the product. */
.elementor-element-nrsbest li.product .woocommerce-product-header {
background: var(--nrs-cream) !important;
padding: 18px;
}
.elementor-element-nrsbest li.product .woocommerce-product-header a {
display: block;
aspect-ratio: 1 / 1;
}
.elementor-element-nrsbest li.product .woocommerce-product-header img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
background: transparent !important;
mix-blend-mode: multiply; /* white product backgrounds melt into the cream tile */
}
.elementor-element-nrsbest li.product .woocommerce-loop-product__title,
.elementor-element-nrsbest li.product .woocommerce-product--title {
font-family: var(--nrs-font-body);
font-size: 15px !important;
font-weight: 600 !important;
color: var(--nrs-ink) !important;
line-height: 1.35 !important;
/* Long names must not push the button out of line with its neighbours:
reserve exactly two lines in every card, ellipsing anything longer. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(2 * 1.35 * 15px);
margin-bottom: 6px;
}
.elementor-element-nrsbest li.product .price {
font-family: var(--nrs-font-body);
font-size: 15px;
font-weight: 700;
color: var(--nirsha-cocoa);
}
/* Struck price: the line-through is the primary cue, so the muted token can
carry the de-emphasis without the colour having to do the work alone. */
.elementor-element-nrsbest li.product .price del {
font-weight: 500; opacity: 1; color: var(--nirsha-muted-ink); margin-right: 6px;
}
.elementor-element-nrsbest li.product .price ins {
text-decoration: none; color: var(--nirsha-cocoa);
}
/* Out of stock: WooCommerce swaps the button for a "Read more" link, so the
state is called out explicitly instead of looking like a broken CTA. */
.elementor-element-nrsbest li.product.outofstock .woocommerce-product-header::after {
content: "Out of stock";
position: absolute; top: 14px; left: 14px;
background: rgba(32,23,19,.86); color: var(--nirsha-ivory);
font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
padding: 5px 10px; border-radius: 999px;
}
.elementor-element-nrsbest li.product.outofstock .woocommerce-product-header { position: relative; }
.elementor-element-nrsbest li.product.outofstock .woocommerce-product-inner { opacity: .92; }
/* Organio reveals quick-view and wishlist on hover, positioned by CSS that was
scoped to .ct-product-grid-layout3. With that wrapper gone the buttons fall
into normal flow and stack ~104px of dead height at the base of every card
(measured 696px cards, of which 104px was empty). The curated card spec is
image, title, price, one action — so they are hidden in this rail.
NOTE: the Shop archive shows the same symptom and is deliberately left
alone here; it is outside this section's brief. */
.elementor-element-nrsbest li.product > .woosq-btn,
.elementor-element-nrsbest li.product > .woosw-btn,
.elementor-element-nrsbest li.product .woocommerce-product-meta {
display: none !important;
}
/* The bare .onsale badge sits above the card as a 26px block; float it onto
the image tile instead so it does not add height. */
.elementor-element-nrsbest li.product > .woocommerce-loop-product__link {
position: absolute; top: 10px; left: 10px; z-index: 3; height: auto;
}
/* Sale badge: Antique Gold with an espresso label (5.6:1). Deliberately NOT
cocoa — the Add to Cart button below it is cocoa, and two cocoa blocks in one
card flattens the hierarchy. Gold reads as "offer", cocoa as "action". */
.elementor-element-nrsbest li.product .onsale {
background: var(--nirsha-gold); color: var(--nirsha-espresso); border-radius: 999px;
font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 4px 10px;
}
/* CTA under the grid — dynamic Shop permalink, printed by the shortcode. */
.nrs-fav__cta { display: flex; justify-content: center; margin-top: 36px; }
.nrs-fav__cta .nrs-btn {
background: transparent;
color: var(--nirsha-cocoa);
border: 1.5px solid rgba(59,36,27,0.28);
}
.nrs-fav__cta .nrs-btn:hover {
background: var(--nirsha-cocoa);
border-color: var(--nirsha-cocoa);
color: var(--nirsha-ivory);
}
/* Admin-only empty state (visitors get the section collapsed instead). */
.nrs-fav--empty {
max-width: 1360px; margin: 0 auto; padding: 22px 40px;
border: 1px dashed rgba(59,36,27,0.30); border-radius: var(--nrs-radius);
background: var(--nirsha-ivory);
}
.nrs-fav--empty p { margin: 0; font-size: 14.5px; color: var(--nrs-muted); }
@media (max-width: 767px) {
.nrs-fav { padding: 0 18px; }
.nrs-fav__cta { margin-top: 26px; }
}
/* ─── SPLIT PROMO BANNERS ─── */
.nrs-promos { background: var(--nirsha-ivory); padding: 0 0 var(--nrs-section-y); }
.nrs-promos__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.nrs-promo {
position: relative;
/* Flex column with the copy pinned to the end: the text block sits at the
BOTTOM-left instead of being centred over the middle of the photograph,
which is where every one of these three images carries its subject. */
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 16/9;
border-radius: var(--nrs-radius-lg);
overflow: hidden;
text-decoration: none;
color: #fff;
box-shadow: var(--nrs-shadow);
transition: transform .3s ease, box-shadow .3s ease;
}
.nrs-promo:hover { transform: translateY(-4px); box-shadow: var(--nrs-shadow-lg); }
.nrs-promo__img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .6s ease;
}
.nrs-promo:hover .nrs-promo__img { transform: scale(1.04); }
.nrs-promo__shade {
position: absolute; inset: 0;
/* Was a left-to-right wash that dimmed the whole left half of the picture.
Now fully clear across the top ~40% so the product photography reads, and
ramping to near-solid only across the band the copy actually occupies. */
/* The ramp starts earlier and climbs harder than before. Measured cause:
the gold eyebrow sat at ~44% of the card height, where the old ramp was
still only ~0.35 opaque, so on the two bright photographs (the lit gift
table and the pale gift box) it fell to roughly 2:1 against the image.
Seating the whole copy block on a reliable ground is what fixes it —
the eyebrow keeps its gold. */
/* Ramp measured against the copy block, not chosen by eye. The eyebrow sits
at roughly 44% of the card height; at the old 0.35 there, ivory label text
fell to ~2.5:1 over the two bright photographs. 0.68 by 44% puts it at
5.7:1 in the worst case (a pure-white photo) while the top 24% of every
picture stays completely clear. */
/* Card-level vignette only — depth, not readability. The readability scrim
is on .nrs-promo__content below, because a FIXED ramp cannot work here:
card 2's headline wraps to two lines, which lifts its copy block (and its
eyebrow) to 24% of the card while cards 1 and 3 start at 36%. Any ramp
dark enough for card 2 at 24% would have flattened the top quarter of all
three photographs — and the subjects of these three shots sit at 30–42%,
exactly there. Anchoring the scrim to the copy instead of to the card
makes it correct at any copy height. */
background: linear-gradient(180deg,
rgba(26,18,14,0) 34%,
rgba(26,18,14,0.16) 58%,
rgba(26,18,14,0.34) 100%);
z-index: 1;
}
/* Keep each photograph's subject clear of the bottom-left copy: card 1 is an
all-over spread biased up to its best bowls, card 2's gift box sits high of
centre, card 3's box sits right of centre. */
.nrs-promos__grid--three .nrs-promo:nth-child(1) .nrs-promo__img { object-position: 50% 30%; }
.nrs-promos__grid--three .nrs-promo:nth-child(2) .nrs-promo__img { object-position: 52% 36%; }
.nrs-promos__grid--three .nrs-promo:nth-child(3) .nrs-promo__img { object-position: 64% 42%; }
.nrs-promo__content {
/* relative, not absolute: the block sits in normal flow at the end of the
card's flex column, so it anchors bottom-left and lets a long title grow
the card instead of overflowing a box pinned to the card's height.
z-index needs a position, hence relative rather than static. */
position: relative;
z-index: 2;
padding: 28px 30px;
display: flex; flex-direction: column; align-items: flex-start;
text-align: left;
max-width: 80%;
color: #fff;
}
/* Readability scrim, anchored to the COPY rather than to the card, so it is
always exactly as tall as the text it has to carry — however many lines the
headline wraps to. Bled past the card edges with -100vw and clipped by the
card's own overflow:hidden, because .nrs-promo__content is only 80–88% wide
and a gradient on the element itself would have left a visible vertical seam
down the middle of the photograph. */
.nrs-promo__content::before {
content: "";
position: absolute;
top: -26px; bottom: 0; left: -100vw; right: -100vw;
background: linear-gradient(180deg,
rgba(26,18,14,0) 0%,
rgba(26,18,14,0.66) 16%,
rgba(26,18,14,0.88) 52%,
rgba(26,18,14,0.95) 100%);
z-index: -1;
pointer-events: none;
}
.nrs-promo__content .nrs-eyebrow { opacity: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.45); }
.nrs-promo__desc, .nrs-promo__title { text-shadow: 0 1px 5px rgba(0,0,0,0.40); }
.nrs-promo__title {
font-family: var(--nrs-font-display);
font-weight: 500;
font-size: 32px;
line-height: 1.1;
letter-spacing: -0.01em;
margin-bottom: 8px;
/* at most two lines, so a long headline can never push the CTA out */
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden;
}
.nrs-promo__desc {
font-family: var(--nrs-font-body);
font-size: 14.5px;
opacity: 0.92;
line-height: 1.5;
margin-bottom: 20px;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
overflow: hidden;
}
.nrs-promo__content > * { flex-shrink: 0; }
.nrs-promo .nrs-btn { align-self: flex-start; }
@media (max-width: 767px) {
.nrs-promos__grid { grid-template-columns: 1fr; gap: 14px; }
.nrs-promo { aspect-ratio: 5/4; }
.nrs-promo__content { padding: 22px 24px; max-width: 80%; }
.nrs-promo__title { font-size: 24px; }
}
/* ─── WHY CHOOSE ─── */
.nrs-why {
background: var(--nirsha-ivory);
padding: var(--nrs-section-y) 0;
border-top: 1px solid var(--nrs-line);
border-bottom: 1px solid var(--nrs-line);
}
.nrs-why__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 1280px;
margin: 0 auto;
}
.nrs-pillar {
background: var(--nirsha-card);
padding: 34px 30px;
border-radius: var(--nrs-radius);
position: relative;
border: 1px solid var(--nrs-line-2);
transition: transform .22s ease, box-shadow .22s ease;
}
.nrs-pillar:hover { transform: translateY(-3px); box-shadow: var(--nrs-shadow); }
.nrs-pillar__num {
position: absolute;
top: 22px; right: 26px;
font-family: var(--nrs-font-display);
font-size: 30px;
font-weight: 500;
color: var(--nrs-line);
line-height: 1;
}
.nrs-pillar__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px;
background: var(--nirsha-sand);
/* gold-dark, not #B8893B: a 28px glyph needs 3:1 and plain gold on sand is
2.6:1. Same gold family, one step down, legible (3.8:1). */
color: var(--nirsha-gold-dark);
border-radius: 14px;
margin-bottom: 20px;
}
.nrs-pillar__icon svg { width: 28px; height: 28px; }
.nrs-pillar__title {
font-family: var(--nrs-font-display);
font-weight: 500;
font-size: 22px;
color: var(--nrs-ink);
margin: 0 0 10px;
line-height: 1.2;
}
.nrs-pillar__desc {
font-family: var(--nrs-font-body);
font-size: 14.5px;
color: var(--nrs-muted);
line-height: 1.6;
margin: 0;
}
/* ─── NIRSHA SPECIAL SELECTION (signature dark band) ─────────────────────────
This band used to be a large flat olive field and was the single strongest
reason the storefront still read as an organic-grocery theme. It is now Deep
Cocoa — the chocolatier / gift-box register the brand actually sells in. Two
very low-opacity radials keep it from looking like a painted rectangle: a
warm ivory lift top-left, an Antique Gold bloom bottom-right. */
.nrs-coll {
background: var(--nirsha-cocoa);
background-image:
radial-gradient(ellipse at 15% 0%, rgba(251,247,239,0.06), transparent 62%),
radial-gradient(ellipse at 85% 100%, rgba(184,137,59,0.16), transparent 62%);
color: var(--nirsha-ivory);
padding: var(--nrs-section-y) 0;
}
.nrs-coll .nrs-eyebrow { color: var(--nirsha-gold); }
.nrs-coll .nrs-title { color: var(--nirsha-ivory); }
.nrs-coll .nrs-lead { color: rgba(251,247,239,0.78); }
/* One gold hairline above the grid — the band's only hard accent. */
.nrs-coll__grid { border-top: 1px solid rgba(184,137,59,0.24); padding-top: 34px; }
.nrs-coll__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.nrs-coll__card {
display: block;
background: rgba(251,247,239,0.05);
border: 1px solid rgba(251,247,239,0.10);
border-radius: var(--nrs-radius);
overflow: hidden;
text-decoration: none;
color: var(--nirsha-ivory);
transition: transform .28s ease, background .28s ease, border-color .28s ease;
}
.nrs-coll__card:hover {
transform: translateY(-4px);
background: rgba(251,247,239,0.09);
border-color: rgba(184,137,59,0.45);
color: var(--nirsha-ivory);
}
.nrs-coll__media {
display: block;
aspect-ratio: 4/3;
overflow: hidden;
background: rgba(0,0,0,0.2);
}
.nrs-coll__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s ease;
}
.nrs-coll__card:hover .nrs-coll__media img { transform: scale(1.05); }
.nrs-coll__body {
padding: 20px 22px 22px;
display: block;
}
.nrs-coll__title {
font-family: var(--nrs-font-display);
font-weight: 500;
font-size: 22px;
line-height: 1.15;
color: var(--nirsha-ivory);
margin-bottom: 6px;
display: block;
}
.nrs-coll__desc {
font-family: var(--nrs-font-body);
font-size: 13.5px;
color: rgba(251,247,239,0.74);
line-height: 1.5;
margin-bottom: 14px;
display: block;
}
.nrs-coll__link {
font-family: var(--nrs-font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
/* gold-LIGHT: these links sit on the card's translucent lift, not on the
cocoa band itself, where plain gold measures 3.96:1. */
color: var(--nirsha-gold-light);
display: inline-flex; align-items: center; gap: 6px;
}
.nrs-coll__link em { font-style: normal; transition: transform .2s ease; }
.nrs-coll__card:hover .nrs-coll__link em { transform: translateX(4px); }
/* ─── ABOUT ─── */
.nrs-about {
background: var(--nirsha-sand);
padding: var(--nrs-section-y) 0;
}
.nrs-about__inner {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: center;
}
.nrs-about__media {
position: relative;
aspect-ratio: 4/5;
max-width: 480px;
}
.nrs-about__media img {
width: 100%; height: 100%; object-fit: cover;
border-radius: var(--nrs-radius-lg);
display: block;
box-shadow: var(--nrs-shadow-lg);
}
.nrs-about__tag {
position: absolute;
left: -18px; bottom: 30px;
background: var(--nirsha-card);
padding: 12px 18px;
border-radius: 999px;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--nrs-font-body);
font-size: 13px;
font-weight: 600;
color: var(--nrs-ink);
box-shadow: var(--nrs-shadow-lg);
}
.nrs-about__tag em {
display: inline-flex; width: 22px; height: 22px;
background: var(--nirsha-sand);
color: var(--nirsha-gold-ink);
border-radius: 50%;
align-items: center; justify-content: center;
}
.nrs-about__tag em svg { width: 14px; height: 14px; }
.nrs-about__body { max-width: 540px; }
.nrs-about__text {
font-family: var(--nrs-font-body);
font-size: 16px;
line-height: 1.75;
color: var(--nrs-ink-2);
margin: 0 0 22px;
}
.nrs-about__list {
list-style: none; padding: 0; margin: 0 0 30px;
display: grid; gap: 10px;
}
.nrs-about__list li {
font-family: var(--nrs-font-body);
font-size: 14.5px;
color: var(--nrs-ink-2);
padding-left: 30px;
position: relative;
line-height: 1.5;
}
.nrs-about__list li::before {
content: "";
position: absolute; left: 0; top: 2px;
width: 20px; height: 20px;
/* Tick glyph is Deep Cocoa (%233B241B) on the sand disc — this is a
decorative list marker, not a success state, so it must not be green. */
background: var(--nirsha-sand) url("data:image/svg+xml;utf8,") center/12px 12px no-repeat;
border-radius: 50%;
}
@media (max-width: 991px) {
.nrs-about__inner { grid-template-columns: 1fr; gap: 40px; }
/* `margin: 0 auto` cancels the grid item's default stretch, and the only
child is sized 100% of this box — so with width:auto the box had nothing
to measure itself against and collapsed to 0x0, taking the photo with it
on every screen at or below 991px. An explicit width restores it. */
.nrs-about__media { width: 100%; max-width: 380px; margin: 0 auto; }
}
/* ─── PROMISE ─── */
/* Was a pale-green tinted band. Now Warm Ivory (§15) — the green tint was the
last "wellness aisle" cue on the page. */
.nrs-promise {
background: var(--nirsha-ivory);
padding: var(--nrs-section-y) 0;
border-top: 1px solid var(--nrs-line);
}
.nrs-promise__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1280px;
margin: 0 auto;
}
.nrs-promise__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 62px; height: 62px;
background: var(--nirsha-card);
color: var(--nirsha-gold-dark);
border-radius: 50%;
margin-bottom: 18px;
border: 1px solid var(--nrs-line);
}
.nrs-promise__desc {
font-family: var(--nrs-font-body);
font-size: 14px;
color: var(--nrs-muted);
line-height: 1.55;
margin: 0;
}
/* ─── GALLERY — "From Our Table to Yours" ─── */
/* Espresso, not green-black: the photographs are the hero, the ground only has
to disappear behind them. */
.nrs-gallery {
background: var(--nirsha-espresso);
padding: var(--nrs-section-y) 0;
}
/* Override heading colours inside the dark gallery */
.nrs-gallery .nrs-eyebrow { color: var(--nirsha-gold); }
.nrs-gallery .nrs-title { color: var(--nirsha-ivory); }
.nrs-gallery .nrs-lead { color: rgba(251,247,239,0.72); }
.nrs-gallery__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 14px;
}
.nrs-gallery__item {
margin: 0;
overflow: hidden;
border-radius: var(--nrs-radius);
background: var(--nirsha-card);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
transition: transform .28s ease, box-shadow .28s ease;
}
/* Base: all images fill their cell.
!important is required — Organio ships `img { height: auto !important }`, which
otherwise collapses these to height:0. That was not merely cosmetic: a
zero-height `loading="lazy"` image never intersects the viewport, so the lazy
loader never fired and the entire gallery stayed permanently blank. */
.nrs-gallery__item img {
width: 100% !important; height: 100% !important;
object-fit: cover; object-position: center center;
display: block !important; transition: transform .5s ease;
}
.nrs-gallery__item:hover img { transform: scale(1.05); }
/* Small product tiles: anchor slightly above centre so bowl fills frame */
.nrs-gallery__item:not(.nrs-gallery__item--wide) img {
object-position: center 40%;
transform-origin: center 40%;
}
/* Wide feature image: contain — must come last to win specificity via !important */
.nrs-gallery__item--wide img {
object-fit: contain !important;
object-position: center center !important;
background: var(--nirsha-espresso);
}
.nrs-gallery__item--wide { grid-column: span 2; grid-row: span 2; }
/* Last item in a row-3 of-8 layout: span 2 cols to fill the 4th column gap */
.nrs-gallery__item:nth-child(8) { grid-column: span 2; }
@media (max-width: 991px) {
.nrs-gallery__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 160px; }
.nrs-gallery__item--wide { grid-column: span 2; grid-row: span 2; }
}
/* ─── NEWSLETTER BAND ─── */
.elementor-element-nrsnews {
background: var(--nirsha-cocoa);
background-image:
radial-gradient(ellipse at 0% 0%, rgba(251,247,239,0.06), transparent 60%),
radial-gradient(ellipse at 100% 100%, rgba(184,137,59,0.18), transparent 60%);
padding: 60px 0 !important;
}
.elementor-element-nrsnews > .elementor-container {
max-width: 1360px !important;
margin: 0 auto !important;
padding: 0 40px !important;
align-items: center !important;
gap: 40px !important;
}
.nrs-news__text .nrs-title { color: #fff; margin: 0 0 10px; font-size: clamp(24px, 3vw, 34px); }
.nrs-news__lead {
font-family: var(--nrs-font-body);
font-size: 14.5px;
line-height: 1.6;
color: rgba(255,255,255,0.78);
margin: 0;
max-width: 480px;
}
/* Mailchimp widget inside our band: neutralise its own container styles */
.elementor-element-nrsnews .ct-mailchimp,
.elementor-element-nrsnews .ct-mailchimp-form,
.elementor-element-nrsnews .mc4wp-form-fields {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border: none !important;
}
.elementor-element-nrsnews .mc4wp-form,
.elementor-element-nrsnews form {
display: flex; gap: 8px; margin: 0;
}
.elementor-element-nrsnews input[type="email"],
.elementor-element-nrsnews .mc4wp-form input[type="email"] {
flex: 1;
background: rgba(251,247,239,0.94) !important;
border: 1px solid rgba(251,247,239,0.55) !important;
color: var(--nirsha-espresso) !important;
padding: 14px 18px !important;
border-radius: 999px !important;
font-family: var(--nrs-font-body) !important;
font-size: 14px !important;
line-height: 1;
min-width: 0;
height: auto !important;
box-shadow: none !important;
}
.elementor-element-nrsnews input[type="email"]::placeholder { color: var(--nrs-muted); }
.elementor-element-nrsnews input[type="email"]:focus {
background: var(--nirsha-card) !important;
border-color: var(--nirsha-gold) !important;
box-shadow: 0 0 0 3px rgba(184,137,59,0.55) !important;
outline: none !important;
}
.elementor-element-nrsnews input[type="submit"],
.elementor-element-nrsnews button[type="submit"] {
background: var(--nirsha-gold) !important;
color: var(--nirsha-espresso) !important;
border: none !important;
padding: 14px 26px !important;
border-radius: 999px !important;
font-family: var(--nrs-font-body) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
cursor: pointer;
transition: background .18s ease;
height: auto !important;
}
.elementor-element-nrsnews input[type="submit"]:hover,
.elementor-element-nrsnews button[type="submit"]:hover {
background: var(--nirsha-ivory) !important;
color: var(--nirsha-espresso) !important;
}
@media (max-width: 991px) {
.elementor-element-nrsnews > .elementor-container { flex-direction: column !important; text-align: center; }
.elementor-element-nrsnews .elementor-column { width: 100% !important; }
.nrs-news__lead { margin-left: auto; margin-right: auto; }
.elementor-element-nrsnews form { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 520px) {
.elementor-element-nrsnews form { flex-direction: column; }
.elementor-element-nrsnews input[type="submit"], .elementor-element-nrsnews button[type="submit"] { width: 100%; }
}
/* Inner layout for inline newsletter HTML (no mailchimp widget) */
.nrs-news { width: 100%; }
.nrs-news__inner {
display: flex;
align-items: center;
gap: 48px;
}
.nrs-news__text { flex: 0 0 auto; max-width: 480px; }
.nrs-news__form { flex: 1; }
.nrs-news__row { display: flex; gap: 8px; margin: 0; }
.nrs-news__note {
font-size: 12px;
color: rgba(251,247,239,0.62);
margin: 10px 0 0;
letter-spacing: 0.03em;
}
@media (max-width: 991px) {
.nrs-news__inner { flex-direction: column; text-align: center; }
.nrs-news__text { max-width: 100%; }
.nrs-news__form { width: 100%; max-width: 460px; }
.nrs-news__note { margin: 10px auto 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
5. WOOCOMMERCE PRODUCT LOOP (shop/archive) — kept from Phase 4+
═══════════════════════════════════════════════════════════════════════════ */
.woocommerce .products, .woocommerce-page .products {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Brand colours on ATC everywhere the loop appears */
.ct-product-grid-layout3 .woocommerce-add-to-cart a,
.ct-product-grid-layout3 .button {
background-color: var(--nrs-cta-bg) !important;
border-color: var(--nrs-cta-bg) !important;
color: var(--nrs-cta-ink) !important;
}
.ct-product-grid-layout3 .woocommerce-add-to-cart a:hover,
.ct-product-grid-layout3 .button:hover {
background-color: var(--nrs-cta-bg-hover) !important;
border-color: var(--nrs-cta-bg-hover) !important;
color: var(--nrs-cta-ink-hover) !important;
}
.ct-product-grid-layout3 .price ins { color: var(--nirsha-cocoa) !important; font-weight: 700 !important; }
.ct-product-grid-layout3 .price del { color: var(--nirsha-muted-ink) !important; font-weight: 400 !important; opacity: 1 !important; }
.ct-product-grid-layout3 .woocommerce-product-header img {
object-fit: contain !important;
height: 220px !important;
width: 100% !important;
}
/* Empty-state messaging retained for filter tabs on best sellers */
.ct-product-grid-layout3 .ct-grid-inner:has(.grid-sizer:only-child) {
height: auto !important; position: relative !important;
overflow: visible !important; min-height: 0; display: block;
}
.ct-product-grid-layout3 .ct-grid-inner:has(.grid-sizer:only-child) .grid-sizer { display: none; }
.ct-product-grid-layout3 .ct-grid-inner:has(.grid-sizer:only-child)::before {
content: "New products are coming soon.";
display: block; text-align: center; padding: 28px 20px 6px;
border-top: 1px solid var(--nrs-line-2); color: var(--nrs-ink-2);
font-family: var(--nrs-font-body); font-size: 15px; font-weight: 600;
}
.ct-product-grid-layout3 .ct-grid-inner:has(.grid-sizer:only-child)::after {
content: "We\2019re carefully selecting premium products for you. Check back soon.";
display: block; text-align: center; padding: 0 20px 28px;
color: var(--nrs-muted); font-family: var(--nrs-font-body); font-size: 14px; line-height: 1.75;
}
.ct-product-grid-layout3 .ct-grid-inner.nirsha-filter-empty {
height: auto !important; position: relative !important;
overflow: visible !important; min-height: 0; display: block;
}
.ct-product-grid-layout3 .ct-grid-inner.nirsha-filter-empty .grid-sizer { display: none; }
.ct-product-grid-layout3 .ct-grid-inner.nirsha-filter-empty::before {
content: "No products in this category yet.";
display: block; text-align: center; padding: 28px 20px 6px;
border-top: 1px solid var(--nrs-line-2); color: var(--nrs-ink-2);
font-family: var(--nrs-font-body); font-size: 15px; font-weight: 600;
}
.ct-product-grid-layout3 .ct-grid-inner.nirsha-filter-empty::after {
content: "Check back soon \2014 we\2019re curating the best for you.";
display: block; text-align: center; padding: 0 20px 28px;
color: var(--nrs-muted); font-family: var(--nrs-font-body); font-size: 14px; line-height: 1.75;
}
/* ═══════════════════════════════════════════════════════════════════════════
6. SINGLE PRODUCT + RELATED PRODUCTS — kept intact from Phase 6+
═══════════════════════════════════════════════════════════════════════════ */
.single-product .summary { --primary-color: var(--nirsha-cocoa); }
.single-product .summary .single_add_to_cart_button {
background-color: var(--nrs-cta-bg) !important;
border-color: var(--nrs-cta-bg) !important;
color: var(--nrs-cta-ink) !important; opacity: 1 !important; filter: none !important;
min-width: 160px; flex: 1 1 auto;
}
.single-product .summary .single_add_to_cart_button:hover,
.single-product .summary .single_add_to_cart_button:focus-visible {
background-color: var(--nrs-cta-bg-hover) !important;
border-color: var(--nrs-cta-bg-hover) !important; color: var(--nrs-cta-ink-hover) !important;
}
.single-product .summary .single_add_to_cart_button.loading {
background-color: var(--nrs-cta-bg) !important; color: var(--nrs-cta-ink) !important;
opacity: 0.75 !important; cursor: wait;
}
/* Disabled must stay recognisably the SAME control, just unavailable — a warm
neutral rather than a washed-out cocoa that could read as a hover state. */
.single-product .summary .single_add_to_cart_button.disabled,
.single-product .summary .single_add_to_cart_button[disabled] {
background-color: var(--nirsha-border) !important;
border-color: var(--nirsha-border) !important;
color: var(--nirsha-text) !important;
opacity: 1 !important; cursor: not-allowed !important;
}
.single-product .summary .price { color: var(--nirsha-cocoa) !important; }
.single-product .summary .price ins { color: var(--nirsha-cocoa) !important; font-size: 28px !important; font-weight: 700; text-decoration: none !important; }
.single-product .summary .price del { color: var(--nirsha-muted-ink) !important; font-size: 18px !important; font-weight: 400 !important; opacity: 1 !important; }
.single-product .summary .quantity {
border: 1.5px solid var(--nirsha-border) !important; border-radius: 8px !important;
overflow: hidden; background: var(--nirsha-card);
}
.single-product .summary .quantity input.qty { border: none !important; background: transparent !important; color: var(--nirsha-espresso) !important; }
.single-product .summary i.quantity-down, .single-product .summary i.quantity-up {
background-color: var(--nirsha-sand) !important; color: var(--nirsha-cocoa) !important;
width: 32px !important; height: 28px !important; line-height: 28px !important;
font-size: 15px !important; font-style: normal; transition: background 0.15s ease;
}
.single-product .summary i.quantity-down:hover, .single-product .summary i.quantity-up:hover {
background-color: var(--nirsha-border) !important;
}
.single-product .summary .woosw-btn,
.single-product .summary .woocommerce-sg-product-button .woosw-btn {
background-color: var(--nirsha-card) !important; color: var(--nirsha-cocoa) !important;
border: 1px solid var(--nirsha-border) !important; box-shadow: none !important;
}
/* Wishlist hover is GOLD, not green: wishlist is a saved-for-later preference,
never a success state (§26). The pale-green wash here was a brand remnant. */
.single-product .summary .woosw-btn:hover,
.single-product .summary .woocommerce-sg-product-button .woosw-btn:hover {
background-color: var(--nirsha-sand) !important; border-color: var(--nirsha-gold) !important; color: var(--nirsha-gold-ink) !important;
}
.single-product .summary form.cart { gap: 12px; flex-wrap: wrap; }
.single-product .summary .product_meta {
margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--nirsha-border);
font-size: 14px; color: var(--nrs-muted);
}
/* Selected variation swatch: cocoa ring. Deliberately not gold — a customer
must be able to tell "this size is chosen" at a glance, and cocoa on the
card surface is 14:1 where gold would be 3:1. */
.single-product .summary .wvs-term.selected,
.single-product .summary .wvs-style-rounded.selected {
border-color: var(--nirsha-cocoa) !important;
box-shadow: 0 0 0 2px var(--nirsha-cocoa) !important;
}
.single-product .summary .wvs-term:hover,
.single-product .summary .wvs-style-rounded:hover {
border-color: var(--nirsha-gold) !important;
}
.single-product .related { --primary-color: var(--nirsha-cocoa); }
.single-product .related .woocommerce-product-inner::before,
.single-product .related .woocommerce-product-inner:hover::before {
content: none !important; display: none !important; border: none !important; visibility: hidden !important;
}
.single-product .related .products {
display: flex !important; flex-wrap: wrap !important;
justify-content: center !important; gap: 24px !important;
list-style: none !important; padding: 0 !important;
margin-left: 0 !important; margin-right: 0 !important;
}
.single-product .related li.product {
float: none !important; width: auto !important;
flex: 0 0 calc(33.333% - 16px) !important; max-width: 380px !important; margin: 0 !important;
}
.single-product .related .woocommerce-product-inner {
border: none !important; border-radius: 8px !important; overflow: hidden !important;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07) !important;
transition: box-shadow 0.2s ease !important;
}
.single-product .related .woocommerce-product-inner:hover { box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12) !important; }
.single-product .related .woocommerce-product-header { border-radius: 0 !important; overflow: hidden !important; }
.single-product .related .woocommerce-product-inner:hover .woocommerce-product-content .woocommerce-add-to-cart,
.single-product .related .woocommerce-product-inner.cart-added .woocommerce-product-content .woocommerce-add-to-cart {
bottom: 6px !important; opacity: 1 !important; visibility: visible !important;
}
.single-product .related .woocommerce-product-content {
padding-left: 16px !important; padding-right: 16px !important;
padding-bottom: 60px !important; overflow: visible !important;
}
.single-product .related .woocommerce-product-header img {
width: 100% !important; max-width: 100% !important; height: 220px !important;
object-fit: contain !important; display: block !important;
padding: 12px !important; background: var(--nirsha-ivory) !important;
}
.single-product .related .price ins { color: var(--nirsha-cocoa) !important; font-weight: 700 !important; text-decoration: none !important; }
.single-product .related .price del { color: var(--nirsha-muted-ink) !important; font-weight: 400 !important; opacity: 1 !important; font-size: 0.85em !important; }
.single-product .related .woocommerce-product--title,
.single-product .related .woocommerce-loop-product__title {
font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important;
color: var(--nirsha-espresso) !important; margin-bottom: 6px !important;
}
.single-product .related .woocommerce-product--title a,
.single-product .related .woocommerce-loop-product__title a { color: var(--nirsha-espresso) !important; }
.single-product .related .woocommerce-product--title a:hover,
.single-product .related .woocommerce-loop-product__title a:hover { color: var(--nirsha-gold-ink) !important; }
/* Colour and width only. Radius, padding, display, font-size and font-weight
used to be declared here too — a 6px radius, 10px/16px padding and
`display:block` that made the related rail the odd one out among the five
places this same card CTA appears. Those four properties now belong to the
single product-card CTA block in section 26; leaving them here would be two
rules fighting over the same button. */
.single-product .related .woocommerce-add-to-cart a,
.single-product .related .woocommerce-add-to-cart .button,
.single-product .related a.add_to_cart_button {
background-color: var(--nrs-cta-bg) !important; border-color: var(--nrs-cta-bg) !important; color: var(--nrs-cta-ink) !important;
width: 100% !important; text-align: center !important;
}
.single-product .related .woocommerce-add-to-cart a:hover,
.single-product .related .woocommerce-add-to-cart .button:hover,
.single-product .related a.add_to_cart_button:hover {
background-color: var(--nrs-cta-bg-hover) !important; border-color: var(--nrs-cta-bg-hover) !important;
color: var(--nrs-cta-ink-hover) !important;
}
@media (max-width: 767px) {
.single-product .related li.product { flex: 0 0 calc(50% - 12px) !important; max-width: 300px !important; }
}
@media (min-width: 480px) and (max-width: 599px) {
.single-product .related li.product { flex: 0 0 calc(50% - 12px) !important; max-width: 210px !important; }
}
/* ═══════════════════════════════════════════════════════════════════════════
7. CURRENCY SWITCHER — leave the plugin styles alone; only header sizing
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
8. FOOTER polish (preserves post 30 content + widgets)
═══════════════════════════════════════════════════════════════════════════ */
.site-footer-custom {
background: var(--nirsha-espresso);
color: rgba(251,247,239,0.75);
}
.site-footer-custom .ct-heading .ct-heading-inner,
.site-footer-custom .ct-heading .heading-title {
color: var(--nirsha-ivory) !important;
font-family: var(--nrs-font-display) !important;
font-weight: 500 !important;
font-size: 18px !important;
letter-spacing: 0.01em;
}
.site-footer-custom a { color: rgba(251,247,239,0.75); transition: color .15s ease; }
.site-footer-custom a:hover { color: var(--nirsha-gold); }
.site-footer-custom .ct-navigation-menu ul li a { padding: 4px 0 !important; }
.site-footer-custom .ct-divider { border-color: rgba(251,247,239,0.12) !important; }
.site-footer-custom .ct-contact-info li { color: rgba(251,247,239,0.75); }
/* Footer copyright band bg-image was a demo file — cover with a solid tone */
.site-footer-custom .elementor-element-c05d2ff {
background-image: none !important;
background: rgba(0,0,0,0.35) !important;
border-top: 1px solid rgba(184,137,59,0.20);
margin-top: 20px;
}
/* Older subscribe module in-footer visual: neutralise Organio demo bg image */
.site-footer-custom .ct-mailchimp-form.style1,
.site-footer-custom .ct-mailchimp-form.style2 {
background-image: none !important;
background-color: transparent !important;
}
@media (max-width: 767px) {
.site-footer-custom .ct-footer-inner > .row { flex-direction: column; }
.site-footer-custom .ct-footer-inner > .row > [class*="col-"] {
flex: 0 0 100%; max-width: 100%; margin-bottom: 32px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
9. SAFETY NETS — mobile ATC visibility, overflow, breadcrumb
═══════════════════════════════════════════════════════════════════════════ */
/* Mobile ATC — Organio hides ATC at rest (hover-only). Show it on touch. */
@media (max-width: 991px) {
/* The 54px reserve below the card body existed to hold an ABSOLUTELY
positioned hover-reveal add-to-cart. That button was returned to normal
flow (see section 12.6), so the reserve became dead space -- 112px of
blank card below the CTA at 375px. Removed; the card now sizes to its
content. */
.single-product .related .woocommerce-add-to-cart {
bottom: 4px !important; opacity: 1 !important; visibility: visible !important;
}
}
/* Overflow safety */
body { overflow-x: hidden; }
.elementor-section.elementor-section-stretched { overflow-x: hidden; }
/* Breadcrumb labels use the site UI font. This rule previously forced
"Caseicon, Barlow, sans-serif" here on the assumption that the separator glyph
lived on .breadcrumb-entry -- it does not, it is on li::after, which sets
font-family: Caseicon itself. Applying an icon font to the LABEL gave every
Latin character a near-zero advance width, so "Home" measured 10px instead of
41px and breadcrumbs read "H >> C". Inheriting from .ct-breadcrumb restores
the text; the separator is untouched. */
.ct-breadcrumb .breadcrumb-entry {
font-family: inherit;
}
/* =========================================================
NIRSHA PHASE 10 — FULL-WIDTH LAYOUT / HERO SLIDER / FOOTER
========================================================= */
/* ── A. Wide-desktop best-sellers padding fix ─────────────── */
@media (max-width: 1024px) {
.nrs-bs-head { padding: 0 24px; }
.elementor-element-nrsbest .nrs-fav { padding: 0 24px; }
}
/* =========================================================
ELEMENTOR CONTAINER WIDTH OVERRIDE (Phase 10 — Task A)
Overrides Elementor's default 1140px and Organio's 1190px
to match the Nirsha 1360px content-width target.
========================================================= */
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor .elementor-section.elementor-section-boxed > .elementor-container.elementor-column-gap-default,
.elementor .elementor-section.elementor-section-boxed > .elementor-container.elementor-column-gap-extended {
max-width: 1360px !important;
}
/* =========================================================
NIRSHA PREMIUM HERO SLIDER (Phase 10 — Task B)
Image replacement: edit style="background-image:url(...)"
on each .nrs-slide div in the Elementor HTML widget (post 2870).
========================================================= */
/* ── Wrapper ─────────────────────────────────────────────── */
.elementor-element-nrshero { position: relative; }
.nrs-slider-wrap { position: relative; }
.nrs-slider { position: relative; }
/* ── Pre-init FOUC guard ─────────────────────────────────────
Before Slick adds .slick-initialized all slides render as raw
block elements and only partially fill the viewport (white gap
on the right). Hide every slide except the first so the hero
looks correct from the very first paint. The moment Slick fires
it adds .slick-initialized and takes full control, so these
rules stop applying with zero visual change. */
.nrs-slider:not(.slick-initialized) {
overflow: hidden;
}
.nrs-slider:not(.slick-initialized) .nrs-slide {
display: none;
}
.nrs-slider:not(.slick-initialized) .nrs-slide:first-child {
display: block;
width: 100%;
}
/* ── Slick container overrides ───────────────────────────── */
.nrs-slider .slick-list,
.nrs-slider .slick-track { height: 100%; }
/* ── Individual slide ────────────────────────────────────── */
.nrs-slide {
min-height: 780px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex !important;
align-items: center;
justify-content: flex-start;
position: relative;
overflow: hidden;
}
/* Pin content to left — override .nrs-container's margin:0 auto inside the flex slide */
.nrs-slide > .nrs-slide__content {
margin-left: 0 !important;
margin-right: auto !important;
padding-left: clamp(80px, 8vw, 140px) !important;
padding-right: 40px !important;
}
/* ── Dark overlay ────────────────────────────────────────── */
/* ── Hero slide image ────────────────────────────────────────
The hero used to be a CSS background-image, which cannot carry
a srcset — every phone downloaded the 1920-wide file. It is now
a real pinned under the overlay with object-fit: cover,
which reproduces background-size: cover exactly while letting
the browser pick an appropriately sized source.
object-position defaults to centre, matching the old
background-position, and per-slide focus points are set inline. */
/* The wrapper is not decoration. The slide's height comes from min-height, so
it is not a definite containing block: an absolutely positioned there
falls back to its intrinsic ratio — too short at 360px, overflowing by 300px
at 1920px. A non-replaced element stretches to inset:0 and becomes definite,
and the image then resolves 100%/100% against it. Verified at both widths. */
.nrs-slide__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
/* Selector deliberately includes the element and its parent. Organio ships a
global `img { max-width:100%; height:auto }`, and a single class is not
enough to beat it once WordPress also puts real width/height attributes on
the tag — the image kept collapsing to its intrinsic ratio. */
.nrs-slide__media > img.nrs-slide__img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center center;
}
.nrs-slide__overlay {
position: absolute;
inset: 0;
z-index: 1;
/* Warm espresso wash (was a cool green-black). Same readability budget —
ivory headline on the darkest stop is > 12:1 — but the tint now belongs
to the cocoa palette rather than fighting it. */
background: linear-gradient(
110deg,
rgba(26, 18, 14, 0.80) 0%,
rgba(26, 18, 14, 0.44) 55%,
rgba(26, 18, 14, 0.16) 100%
);
pointer-events: none;
}
/* ── Slide content ───────────────────────────────────────── */
.nrs-slide__content {
position: relative;
z-index: 2;
padding-top: 120px;
padding-bottom: 120px;
max-width: 680px;
text-align: left;
}
.nrs-slide__title {
font-family: var(--nrs-font-display);
font-size: clamp(42px, 5.4vw, 82px);
line-height: 1.04;
color: var(--nirsha-ivory);
letter-spacing: -0.022em;
margin: 0 0 22px;
text-wrap: balance;
text-align: left;
}
.nrs-slide__desc {
font-family: var(--nrs-font-body);
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.65;
color: rgba(251, 247, 239, 0.86);
margin: 0 0 36px;
max-width: 540px;
text-align: left;
}
.nrs-slide__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
/* A cocoa fill is the right brand answer everywhere EXCEPT here: on the dark
chocolate and sweets slides the button is nearly the same value as the
photograph behind it, so the CTA loses its shape even though its label is
perfectly legible. A gold hairline restores the edge without turning the
button gold — the accent stays a micro-detail. */
.nrs-slide__cta .nrs-btn--primary {
border: 1.5px solid rgba(184, 137, 59, 0.65);
box-shadow: 0 6px 20px rgba(26, 18, 14, 0.45);
}
.nrs-slide__cta .nrs-btn--primary:hover { border-color: var(--nirsha-gold); }
/* ── Ghost light button (on dark hero) ───────────────────── */
.nrs-btn--ghost-light {
background: transparent;
color: var(--nirsha-ivory);
border: 2px solid rgba(251, 247, 239, 0.58);
padding: 13px 28px;
border-radius: 999px;
font-family: var(--nrs-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.nrs-btn--ghost-light:hover {
background: rgba(184, 137, 59, 0.18);
border-color: var(--nirsha-gold);
color: var(--nirsha-ivory);
}
/* ── Slider nav (dots + arrows) ──────────────────────────── */
.nrs-slider-nav {
position: absolute;
bottom: 36px;
left: 0;
right: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
pointer-events: none;
}
.nrs-slider-nav > * { pointer-events: auto; }
/* Dots. The numerals sit directly on the photograph, where the hero wash has
already faded to ~0.4 — ivory measured 2.5:1 there against a light slide. A
small espresso pill gives them a ground of their own (worst case 4.6:1) and
reads as deliberate chrome rather than a patch. */
.nrs-slider-nav .slick-dots {
position: static;
display: flex !important;
gap: 10px;
list-style: none;
margin: 0;
padding: 6px 14px;
background: rgba(32, 23, 19, 0.72);
border-radius: 999px;
backdrop-filter: blur(3px);
}
.nrs-slider-nav .slick-dots li { margin: 0; width: auto; height: auto; }
.nrs-slider-nav .slick-dots li button {
font-family: var(--nrs-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
/* 0.45 alpha measured 1.0:1 over a light slide. 0.80 clears AA on the pill. */
color: rgba(251, 247, 239, 0.80);
background: none;
border: none;
padding: 4px 6px 7px;
cursor: pointer;
line-height: 1;
transition: color .2s ease;
width: auto;
height: auto;
position: relative;
}
.nrs-slider-nav .slick-dots li button::before { display: none; }
/* Active slide: full ivory PLUS a gold underline, so which slide you are on is
not signalled by colour alone. */
.nrs-slider-nav .slick-dots li.slick-active button { color: var(--nirsha-ivory); }
.nrs-slider-nav .slick-dots li.slick-active button::after {
content: ""; position: absolute; left: 5px; right: 5px; bottom: 0;
height: 2px; border-radius: 2px; background: var(--nirsha-gold);
}
.nrs-slider-nav .slick-dots li button:hover { color: var(--nirsha-ivory); }
/* Arrow buttons — absolutely positioned over the slides */
.nrs-slider__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 48px;
height: 48px;
border-radius: 50%;
/* Was a translucent WHITE disc, which on a pale slide left an ivory chevron
at ~1:1 — the arrows were invisible on the light hero images. An espresso
disc keeps the glyph at 4.6:1 in the worst case. */
background: rgba(32, 23, 19, 0.62);
border: 1.5px solid rgba(251, 247, 239, 0.42);
color: var(--nirsha-ivory);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .18s ease, border-color .18s ease;
flex-shrink: 0;
}
/* The arrow SVG carries width="20"/height="20" as presentation attributes, but
as a flex item Chrome does not use those as its flex base size, so it shrank
to 0px wide -- the controls rendered as empty circles. An explicit CSS size
plus flex:none restores the glyph. */
.nrs-slider__arrow svg { width: 20px; height: 20px; flex: none; display: block; }
.nrs-slider__prev { left: 20px; }
.nrs-slider__next { right: 20px; }
.nrs-slider__arrow:hover {
background: rgba(32, 23, 19, 0.82);
border-color: var(--nirsha-gold);
color: var(--nirsha-gold);
}
/* ── Responsive heights — REMOVED (superseded by section 17.1/17.2).
Held min-height 660/580/540px and a stacked CTA column that pushed the
mobile hero past 550px. Only the non-conflicting bits are kept here. */
@media (max-width: 767px) {
.nrs-slide__content { max-width: 100%; }
.nrs-slider-nav { bottom: 20px; }
}
/* HEADER TRANSPARENCY block removed — header is always solid white, controlled via functions.php wp_head */
/* =========================================================
PREMIUM FOOTER (Phase 10 — Task D)
Post 30 — rebuilt via phase10-build-footer.php
CSS class prefix: .nrs-ft-*
========================================================= */
/* ── Footer section wrappers ─────────────────────────────── */
.elementor-element-nrsft-news,
.elementor-element-nrsft-main,
.elementor-element-nrsft-bar {
padding: 0 !important;
margin: 0 !important;
}
.elementor-element-nrsft-news .elementor-widget-container,
.elementor-element-nrsft-main .elementor-widget-container,
.elementor-element-nrsft-bar .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
/* ── Newsletter band ─────────────────────────────────────── */
/* Newsletter: Deep Cocoa. It is the deliberate warm ribbon between the espresso
gallery above and the espresso footer below — three dark bands, but two tones,
so the page still steps rather than flattening into one black tail. */
.nrs-ft-news {
background:
radial-gradient(ellipse 65% 85% at 18% 52%, rgba(184,137,59,0.16) 0%, transparent 62%),
var(--nirsha-cocoa);
padding: 64px 0;
}
.nrs-ft-news__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
gap: 48px;
}
.nrs-ft-news__text { flex: 0 0 auto; max-width: 500px; }
.nrs-ft-news__heading {
font-family: var(--nrs-font-display);
font-size: clamp(26px, 3vw, 38px);
color: var(--nirsha-ivory);
margin: 0 0 10px;
line-height: 1.15;
letter-spacing: -0.01em;
}
.nrs-ft-news__sub {
font-size: 15px;
color: rgba(251, 247, 239, 0.82);
margin: 0;
line-height: 1.6;
}
.nrs-ft-news__row { display: flex; gap: 10px; }
.nrs-ft-news__input {
flex: 1;
/* Warm light surface on the cocoa band (§17), not a translucent grey. */
background: rgba(251, 247, 239, 0.94) !important;
border: 1.5px solid rgba(251, 247, 239, 0.55) !important;
color: var(--nirsha-espresso) !important;
padding: 15px 20px !important;
border-radius: 999px !important;
font-family: var(--nrs-font-body) !important;
font-size: 14px !important;
min-width: 0;
height: auto !important;
box-shadow: none !important;
outline: none;
}
.nrs-ft-news__input::placeholder { color: var(--nrs-muted); }
/* Focus must be unmistakable against a dark band: gold border + gold ring. */
.nrs-ft-news__input:focus {
background: var(--nirsha-card) !important;
border-color: var(--nirsha-gold) !important;
box-shadow: 0 0 0 3px rgba(184,137,59,0.55) !important;
}
.nrs-ft-news__btn {
background: var(--nirsha-gold) !important;
color: var(--nirsha-espresso) !important;
border: none !important;
padding: 15px 30px !important;
border-radius: 999px !important;
font-family: var(--nrs-font-body) !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
cursor: pointer;
white-space: nowrap;
transition: background .18s ease, box-shadow .18s ease;
box-shadow: 0 4px 18px rgba(184,137,59,0.35);
}
.nrs-ft-news__btn:hover {
background: var(--nirsha-ivory) !important;
color: var(--nirsha-espresso) !important;
box-shadow: 0 6px 24px rgba(251,247,239,0.30) !important;
}
.nrs-ft-news__note { font-size: 12px; color: rgba(251, 247, 239, 0.62); margin: 10px 0 0; }
/* ── Main footer body ─────────────────────────────────────── */
.nrs-ft-main {
background: var(--nirsha-espresso);
padding: 72px 0 52px;
}
/* Box only. Columns are declared once, in the R.13 footer ladder. */
.nrs-ft-main__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 40px;
}
/* Footer mark: the approved footer artwork is horizontal (2172x724, 3:1) with a
transparent ground, so it sits directly on the dark band. 56px tall renders
it 168px wide, which fits the brand column at every tier (300px at 1440,
324px full-width on a 360px phone). Full opacity — the file is already
tuned for a dark background, and dimming it would alter the approved art. */
.nrs-ft-logo img {
max-height: 96px;
width: auto;
height: auto;
object-fit: contain;
filter: none;
opacity: 1;
margin-bottom: 20px;
display: block;
}
.nrs-ft-desc {
font-size: 14px;
line-height: 1.7;
/* was 0.58 alpha = 6.3:1; 0.68 keeps the quiet tone and clears AA solidly */
color: rgba(251, 247, 239, 0.68);
margin: 0 0 24px;
max-width: 280px;
}
.nrs-ft-social { display: flex; gap: 14px; }
.nrs-ft-social a {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(251, 247, 239, 0.20);
display: flex;
align-items: center;
justify-content: center;
color: rgba(251, 247, 239, 0.62);
text-decoration: none;
transition: border-color .18s, color .18s;
}
.nrs-ft-social a:hover { border-color: var(--nirsha-gold); color: var(--nirsha-gold); }
.nrs-ft-col ul li a {
font-size: 14px;
color: rgba(251, 247, 239, 0.72);
text-decoration: none;
transition: color .15s ease;
}
.nrs-ft-col ul li a:hover { color: var(--nirsha-gold); }
.nrs-ft-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.nrs-ft-contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--nirsha-gold); }
.nrs-ft-contact-item p { margin: 0; font-size: 14px; color: rgba(251, 247, 239, 0.72); line-height: 1.5; }
.nrs-ft-contact-item strong { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(251, 247, 239, 0.48); margin-bottom: 3px; }
.nrs-ft-contact-item a { color: rgba(251, 247, 239, 0.72); text-decoration: none; }
.nrs-ft-contact-item a:hover { color: var(--nirsha-gold); }
/* ── Footer bottom bar ────────────────────────────────────── */
.nrs-ft-bar {
/* One step below the espresso footer body so the legal bar still separates. */
background: #17100D;
/* Restrained gold hairline. */
border-top: 1px solid rgba(184,137,59,0.24);
padding: 22px 0;
}
.nrs-ft-bar__inner {
max-width: 1360px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
/* 0.38 alpha measured 3.3:1 — below AA for 13px text. 0.62 keeps the bar quiet
and clears 7:1. */
.nrs-ft-bar__copy {
font-size: 13px;
color: rgba(251, 247, 239, 0.62);
margin: 0;
}
/* wrap, not nowrap: six legal links across a 390px phone ran past the viewport
and "Return & Refund Policy" was clipped by the page's overflow guard — the
link was there, just unreadable and half off-screen. */
.nrs-ft-bar__links { display: flex; gap: 20px; flex-wrap: wrap; }
.nrs-ft-bar__links a {
font-size: 13px;
color: rgba(251, 247, 239, 0.62);
text-decoration: none;
transition: color .15s ease;
}
.nrs-ft-bar__links a:hover { color: var(--nirsha-gold); }
/* Footer responsive lives in ONE place — the R.13 ladder near the end of this
file. The Phase-10 block that used to sit here (1024 / 767 / 480 queries with
a 1fr-1fr grid) was superseded and has been deleted, not layered over. */
/* =========================================================
NIRSHA PHASE 11 — VISUAL POLISH
Section-by-section refinements, wide-desktop breathing room,
text-wrap consistency, and gallery / hero enhancements.
========================================================= */
/* ── Wider vertical rhythm at 1440px+ ────────────────────── */
@media (min-width: 1440px) {
/* 96px, not 100 — keeps the whole ladder inside the 80–96px desktop brief. */
:root { --nrs-section-y: 96px; }
}
/* ── Hero: more dramatic height at wide viewports ─────────── */
@media (min-width: 1280px) {
.nrs-slide { min-height: 820px; }
}
@media (min-width: 1600px) {
.nrs-slide { min-height: 880px; }
.home .nrs-slide__content { padding-top: 240px !important; }
}
/* ── text-wrap: balance on all display headings ───────────── */
.nrs-slide__title,
.nrs-cat__title,
.nrs-promo__title,
.nrs-coll__title,
.nrs-pillar__title,
.nrs-promise__title {
text-wrap: balance;
}
/* ── Category: richer loading placeholder ─────────────────── */
.nrs-cat__media {
background: linear-gradient(135deg, var(--nirsha-border) 0%, var(--nrs-cream-2) 100%);
}
/* ── Category first-card title: larger on wide desktop ───── */
@media (min-width: 1280px) {
.nrs-cats__grid .nrs-cat:nth-child(1) .nrs-cat__title { font-size: 38px; }
.nrs-cats__grid .nrs-cat:nth-child(1) .nrs-cat__body { padding: 28px 30px 26px; }
}
/* ── Promo: larger title at 1280px+ ──────────────────────── */
@media (min-width: 1280px) {
.nrs-promo__title { font-size: 36px; }
.nrs-promo__content { padding: 40px 48px; }
}
/* ── Gallery: taller cells at 1280px+ ────────────────────── */
/* ── Gallery: card shadow on hover ──────────────────────── */
.nrs-gallery__item:hover {
box-shadow: var(--nrs-shadow-lg);
transform: translateY(-3px);
}
/* ── Collection: max-width for grid on ultra-wide ───────── */
@media (min-width: 1440px) {
.nrs-coll__grid { gap: 22px; }
.nrs-coll__body { padding: 22px 26px 26px; }
}
/* ── Logo filter transition: smooth header scroll ─────────── */
.home #page #ct-masthead .ct-header-branding-inner img {
transition: filter .25s ease;
}
/* ── Why section: wider grid on large desktop ─────────────── */
@media (min-width: 1280px) {
.nrs-why__grid { max-width: 1360px; gap: 28px; }
}
@media (min-width: 1440px) {
.nrs-promise__grid { max-width: 1360px; gap: 28px; }
}
/* ── Best sellers: card image area gradient for transparency ─ */
.elementor-element-nrsbest li.product .woocommerce-product-header {
background: linear-gradient(160deg, var(--nrs-cream) 0%, var(--nrs-cream-2) 100%) !important;
}
/* ── Trust strip: icon accent ring — the one gold touch in this band ─────── */
.nrs-trust__icon {
box-shadow: 0 0 0 3px rgba(184, 137, 59, 0.20);
}
/* =========================================================
NIRSHA PHASE 11.2 — FULL-WIDTH RESPONSIVE CONTENT SYSTEM
Root causes fixed:
a) Hero slider confined to 1360px column — made full-viewport
b) Header Bootstrap .container at 1200px vs sections at 1360px
c) Section content stays 1360px at ≥1600px — progressive widening
========================================================= */
/* ── a. Hero slider: full-bleed background across the viewport ──────
The hero uses elementor-section-boxed which caps its inner container
at 1360px. This override lifts that cap so the slide background-image
fills the entire stretched section (= full viewport width).
Uses .home prefix for specificity (0,5,0) to beat the ≥1600px
widening rule (0,4,0) that would otherwise cap the hero at 1520px. */
.home .elementor-element-nrshero.elementor-section.elementor-section-boxed > .elementor-container {
max-width: 100% !important;
padding: 0 !important;
}
/* ── b. Header: align Organio Bootstrap container to section width ───
At ≥1200px Organio caps .container at 1200px inside the masthead,
placing the logo and nav 113px from viewport edges while section
content sits at 33px. Aligning both to 1360px removes the gap. */
@media (min-width: 1200px) {
#ct-masthead .container { max-width: 1360px; }
}
/* ── c. Large desktop ≥1600px: widen content to 1520px ──────────────
At 1600px the viewport is ~1585px; 1360px containers leave ~112px
blank on each side. 1520px reduces this to ~33px — same proportional
gutter as 1440px. */
@media (min-width: 1600px) {
/* Elementor inner containers — homepage stretched sections only */
.home .elementor-section-stretched.elementor-section-boxed > .elementor-container {
max-width: 1520px !important;
}
/* Newsletter section has its own !important-guarded container */
.elementor-element-nrsnews > .elementor-container {
max-width: 1520px !important;
padding: 0 60px !important;
}
/* Custom inline containers */
.nrs-container { max-width: 1520px; }
.nrs-slide__content { max-width: 680px; } /* hero text stays narrow */
/* Best sellers section — column-gap-default container needs (0,6,0) to beat the (0,5,0) global rule */
.home .elementor .elementor-element-nrsbest.elementor-section-boxed > .elementor-container.elementor-column-gap-default {
max-width: 1520px !important;
}
.nrs-bs-head { max-width: 1520px; padding: 0 48px; }
.elementor-element-nrsbest .nrs-fav { max-width: 1520px; padding: 0 48px; }
/* Why and Promise pillar grids */
.nrs-why__grid { max-width: 1480px; }
.nrs-promise__grid { max-width: 1480px; }
/* Header */
#ct-masthead .container { max-width: 1520px; }
}
/* ── d. Extra-large ≥1800px: widen to 1720px ────────────────────────
At 1920px viewport (1905px clientWidth) 1720px content leaves ~93px
per side — comfortable gutter at ultrawide without feeling narrow. */
@media (min-width: 1800px) {
.home .elementor-section-stretched.elementor-section-boxed > .elementor-container {
max-width: 1720px !important;
}
.elementor-element-nrsnews > .elementor-container {
max-width: 1720px !important;
padding: 0 80px !important;
}
.nrs-container { max-width: 1720px; }
.nrs-slide__content { max-width: 700px; }
/* Best sellers section — (0,6,0) override for ≥1800px */
.home .elementor .elementor-element-nrsbest.elementor-section-boxed > .elementor-container.elementor-column-gap-default {
max-width: 1720px !important;
}
.nrs-bs-head { max-width: 1720px; padding: 0 60px; }
.elementor-element-nrsbest .nrs-fav { max-width: 1720px; padding: 0 60px; }
.nrs-why__grid { max-width: 1680px; }
.nrs-promise__grid { max-width: 1680px; }
#ct-masthead .container { max-width: 1720px; }
}
/* =========================================================
HEADER POLISH — Phase 11.3
- Hide empty 24/7 Support (no phone number configured)
- Compact top row once support item is removed
- Clean Shop Now button to brand green
- Badge counters: orange → brand green
- Icon + link colors in transparent-header state
========================================================= */
/* 1. Hide 24/7 Support item — no phone number is set */
.ct-header-info { display: none !important; }
/* 2. Compact the top row now that only logo + button remain */
#ct-header-middle { padding-top: 6px !important; padding-bottom: 6px !important; }
#ct-header-middle .row { min-height: 48px !important; align-items: center !important; }
/* 3. Shop Now button — consistent brand styling */
.ct-header-button .btn.btn-gradient,
.ct-header-button .btn.btn-gradient:visited {
background: var(--nirsha-cocoa) !important;
border-color: var(--nirsha-cocoa) !important;
color: var(--nirsha-ivory) !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 9px 24px !important;
border-radius: 6px !important;
letter-spacing: 0.03em !important;
text-transform: none !important;
transition: background 0.2s, border-color 0.2s !important;
box-shadow: none !important;
}
.ct-header-button .btn.btn-gradient:hover {
background: var(--nirsha-gold) !important;
border-color: var(--nirsha-gold) !important;
color: var(--nirsha-espresso) !important;
}
/* 4. Cart + wishlist badge counters — cocoa, so they read as brand chrome
rather than as a status. Ivory numeral on cocoa is 13.5:1. */
.wishlist-count,
.widget_cart_counter {
background: var(--nirsha-cocoa) !important;
color: var(--nirsha-ivory) !important;
}
/* Currency switcher styles removed in Phase 4 — INR is the base currency
and the switcher no longer renders. See nirsha-currency plugin. */
/* 5. Compact top-row logo — organio-theme-inline-css uses (1,1,2)+!important; two IDs gives (2,1,2) */
#ct-header-wrap #ct-header-middle .ct-header-branding a img {
max-height: 55px !important;
height: auto !important;
width: auto !important;
}
/* 6. Shop Now button: white outline style on transparent hero header */
.home #page #ct-masthead:not(.nrs-header--scrolled) .ct-header-button .btn.btn-gradient {
background: transparent !important;
border: 2px solid rgba(255,255,255,0.75) !important;
color: #fff !important;
}
.home #page #ct-masthead:not(.nrs-header--scrolled) .ct-header-button .btn.btn-gradient:hover {
background: rgba(255,255,255,0.15) !important;
border-color: #fff !important;
}
/* 7. Scrolled: restore the solid cocoa Shop Now */
.home #page #ct-masthead.nrs-header--scrolled .ct-header-button .btn.btn-gradient {
background: var(--nirsha-cocoa) !important;
border-color: var(--nirsha-cocoa) !important;
color: var(--nirsha-ivory) !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 12 — LAYOUT FOUNDATION & DESIGN-SYSTEM CONSOLIDATION (v11.0.0)
---------------------------------------------------------------------------
Root cause fixed here: Elementor's stretch-section JS mis-measures inside the
parent theme's 1200px Bootstrap container and writes `width:0; left:-15px`
inline onto every stretched section (12 of 13 were collapsed, footer included).
Everything below replaces that JS race with deterministic CSS.
═══════════════════════════════════════════════════════════════════════════ */
/* ── 12.1 Full-bleed stretched sections ──────────────────────────────────────
`--nrs-vw` is set from JS to documentElement.clientWidth, i.e. the viewport
MINUS the scrollbar. Using it instead of raw 100vw is what prevents the
classic scrollbar-induced horizontal overflow. 100vw is the no-JS fallback.
The !important beats Elementor's inline style without needing to unset it. */
.elementor-section.elementor-section-stretched {
position: relative !important;
width: var(--nrs-vw, 100vw) !important;
max-width: var(--nrs-vw, 100vw) !important;
left: 50% !important;
right: auto !important;
margin-left: calc(var(--nrs-vw, 100vw) / -2) !important;
margin-right: 0 !important;
}
/* Inner container of a stretched section must fill it, then re-constrain via
.nrs-container so text still sits on the design grid. */
.elementor-section.elementor-section-stretched > .elementor-container {
max-width: 100% !important;
width: 100% !important;
}
/* ── 12.2 Kill the dead side gutters from the parent Bootstrap container ─────
The Organio container caps page content at 1200px. On the Elementor-built
pages we want the shell to span the viewport and let .nrs-container do the
measuring, so full-bleed bands (hero, dark collection band, gallery, footer)
actually reach the screen edges.
Organio nests: .container (max-width 1200, padding 15) > .row (margin -15)
> .content-area.col-12 (padding 15). Zeroing only the container padding leaves
the row's negative margins uncancelled and pushes content 30px past the
viewport, so all three levels must be neutralised together. */
body.elementor-page .container.content-container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.elementor-page .container.content-container > .row.content-row {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.elementor-page .content-area.content-full-width {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* ── 12.3 Horizontal-overflow safety net ─────────────────────────────────────
Applied to ONLY, never . Setting overflow-x on body forces its
overflow-y to compute to `auto`, which promotes body to a scroll container
with its own height — that breaks window scrolling, so lazy images below the
fold never load and IntersectionObserver reveals never fire. */
html { overflow-x: clip; }
body { max-width: 100%; }
/* ── 12.4 Typography enforcement ─────────────────────────────────────────────
Organio ships heading rules with !important, which silently beat every
`font-family: var(--nrs-font-display)` declaration in this file. Rather than
sprinkle !important through 12 component rules, the tokens are re-asserted
once here, scoped to the .nrs-* design system so WooCommerce and parent-theme
chrome keep their own typography. */
.nrs-title,
.nrs-slide__title,
.nrs-cat__title,
.nrs-coll__title,
.nrs-promo__title,
.nrs-why__title,
.nrs-about__title,
.nrs-promise__title,
.nrs-ft__brandname {
font-family: var(--nrs-font-display) !important;
font-weight: 600;
letter-spacing: -0.015em;
text-wrap: balance;
}
.nrs-eyebrow,
.nrs-lead,
.nrs-cat__desc,
.nrs-coll__desc,
.nrs-btn,
.nrs-cat__link,
.nrs-coll__link {
font-family: var(--nrs-font-body) !important;
}
/* Lead paragraphs: comfortable measure so they never run edge to edge */
.nrs-lead { max-width: 62ch; margin-left: auto; margin-right: auto; }
/* ── 12.5 Mobile & tablet UX ─────────────────────────────────────────────────
Audited at 375 / 768 / 1024px. Three classes of defect were found:
single-column grids wasting horizontal space, sub-44px tap targets, and
sub-12.5px body copy. Each is addressed below. */
/* 12.5a Container gutters scale down with the viewport */
/* 12.5b Category grid mobile rules — REMOVED. The live grid is
.nrs-cats__grid--six and is handled once in section 14.1, which already
defines the 2-up phone layout and its title sizes. Keeping both meant two
rule sets competing for the same component. */
/* 12.5c Collection cards: 2-up on phones rather than a long single stack */
/* 12.5d Tap targets — WCAG 2.5.8 minimum 44px.
Slider dots and the wishlist / quick-view icons were 12–30px. */
/* 12.5e Legibility — no body copy below 12.5px on small screens */
/* 12.5f Hero: readable proportions on phones */
/* 12.5f-2 Footer newsletter — the text block was `flex: 0 0 auto; max-width:500px`
so it refused to shrink, squeezing the form to 191px at 768px and collapsing
the email input to 42px while the button overflowed the viewport. */
.nrs-ft-news__text { flex: 1 1 auto !important; min-width: 0; }
.nrs-ft-news__form { flex: 1 1 340px !important; min-width: 0; }
.nrs-ft-news__input { min-width: 0; }
.nrs-ft-news__btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 991px) {
.nrs-ft-news__inner {
flex-direction: column;
align-items: flex-start;
gap: 24px;
padding-left: 24px; padding-right: 24px;
}
.nrs-ft-news__text { max-width: 100% !important; }
.nrs-ft-news__form { width: 100%; flex: 1 1 100% !important; }
}
/* 12.5g Tablet (768–1024): the range that felt most unfinished.
Give the category and gallery grids a deliberate 3-up rhythm. */
/* ═══════════════════════════════════════════════════════════════════════════
12.6 WOOCOMMERCE LAYOUT — shop, product, cart, checkout, account
---------------------------------------------------------------------------
WooCommerce pages are NOT elementor-page, so they never received the layout
work above and stayed capped at the parent theme's 1200px (226px of dead
gutter at 1440px). They are widened to the same measure as the design system
and the product loop is moved from margin-spaced flex to grid so gutters are
even and column counts are deliberate at every breakpoint.
═══════════════════════════════════════════════════════════════════════════ */
/* 12.6a Match Woo page width to the .nrs-container measure */
.woocommerce .container.content-container,
.woocommerce-page .container.content-container {
max-width: 1440px !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
@media (max-width: 991px) {
.woocommerce .container.content-container,
.woocommerce-page .container.content-container {
padding-left: 24px !important; padding-right: 24px !important;
}
}
@media (max-width: 767px) {
.woocommerce .container.content-container,
.woocommerce-page .container.content-container {
padding-left: 18px !important; padding-right: 18px !important;
}
}
/* 12.6b Product loop → CSS grid with even gutters.
Excludes the single-product related/upsell rails, which keep their own
flex layout defined earlier in this file. */
.woocommerce:not(.single-product) ul.products,
.woocommerce-page:not(.single-product) ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 28px !important;
margin: 0 0 40px !important;
padding: 0 !important;
list-style: none;
}
.woocommerce:not(.single-product) ul.products::before,
.woocommerce:not(.single-product) ul.products::after,
.woocommerce-page:not(.single-product) ul.products::before,
.woocommerce-page:not(.single-product) ul.products::after { display: none !important; }
.woocommerce:not(.single-product) ul.products li.product,
.woocommerce-page:not(.single-product) ul.products li.product {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
float: none !important;
clear: none !important;
display: flex !important;
flex-direction: column;
}
/* Card body stretches so CTAs align across a row regardless of title length */
.woocommerce:not(.single-product) ul.products li.product .woocommerce-product-inner,
.woocommerce-page:not(.single-product) ul.products li.product .woocommerce-product-inner {
display: flex; flex-direction: column; height: 100%;
}
/* Organio frames every product card TWICE, and neither frame sets a border
width: .woocommerce-product-inner gets `border-color: rgba(255,120,0,.32)` (the
orange line) and its ::before draws a second 2px inset frame inheriting that
colour. With no width declared the border falls back to `medium` = 3px, and a
UA-level `:where([style*="border-color"])` rule supplies border-style:solid.
Products still carrying Organio's demo `line_color` post meta additionally get
an INLINE border-color (rgba(69,9,9,1)) which repaints both frames dark maroon.
Zeroing width+style here kills every variant at once no matter which layer
supplies the colour -- including the inline one, which only sets colour and so
cannot resurrect a border that has no width. Organio's card shadow is kept. */
.woocommerce-product-inner,
.woocommerce .woocommerce-product-inner,
.woocommerce-page .woocommerce-product-inner { border: 0; }
.woocommerce-product-inner::before,
.woocommerce .woocommerce-product-inner::before,
.woocommerce-page .woocommerce-product-inner::before { border: 0; }
/* Sidebar present → 3 columns; the loop still fills its column evenly */
.woocommerce .content-has-sidebar ul.products,
.woocommerce-page .content-has-sidebar ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* 12.6c Deliberate column counts per breakpoint */
@media (max-width: 1199px) {
.woocommerce:not(.single-product) ul.products,
.woocommerce-page:not(.single-product) ul.products,
.woocommerce .content-has-sidebar ul.products,
.woocommerce-page .content-has-sidebar ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 22px !important;
}
}
@media (max-width: 1024px) {
.woocommerce:not(.single-product) ul.products,
.woocommerce-page:not(.single-product) ul.products,
.woocommerce .content-has-sidebar ul.products,
.woocommerce-page .content-has-sidebar ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
}
/* Cap the card: two tracks of a 1024px viewport are ~463px each, which
rendered a 427px product image and a 585px-tall card. */
.woocommerce:not(.single-product) ul.products li.product,
.woocommerce-page:not(.single-product) ul.products li.product {
max-width: 400px !important; justify-self: center;
}
/* Sidebar drops below the products on tablet rather than squeezing them */
.woocommerce .content-area.content-has-sidebar,
.woocommerce-page .content-area.content-has-sidebar { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
.woocommerce .widget-area, .woocommerce-page .widget-area { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-top: 40px; }
}
/* Phone: ONE product per row. Two columns left a 182px card holding a 152px
image, a 3-line title and a 128px CTA -- unreadable and unsellable. A single
centred card gives the packaging its full width. */
@media (max-width: 767px) {
.woocommerce:not(.single-product) ul.products,
.woocommerce-page:not(.single-product) ul.products,
.woocommerce .content-has-sidebar ul.products,
.woocommerce-page .content-has-sidebar ul.products {
grid-template-columns: minmax(0, 1fr) !important;
gap: 20px !important;
justify-items: center;
}
.woocommerce:not(.single-product) ul.products li.product,
.woocommerce-page:not(.single-product) ul.products li.product {
width: 100% !important; max-width: 400px !important; margin-inline: auto !important;
}
}
/* 12.6d Cart / Checkout / Account — readable measure + consistent controls */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce { font-family: var(--nrs-font-body); }
.woocommerce table.shop_table {
border-radius: var(--nrs-radius);
border-color: var(--nrs-line);
overflow: hidden;
}
.woocommerce table.shop_table th { font-weight: 600; color: var(--nrs-ink); }
/* Form controls: one consistent style across cart, checkout and account */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.select2-container .select2-selection--single {
border: 1px solid var(--nrs-line) !important;
border-radius: var(--nrs-radius-sm) !important;
padding: 12px 14px !important;
min-height: 48px !important;
font-family: var(--nrs-font-body);
font-size: 15px;
color: var(--nirsha-espresso);
background: var(--nirsha-card);
transition: border-color .18s ease, box-shadow .18s ease;
}
/* Focus: gold border (3.1:1 against the card surface, so it qualifies as a
non-text indicator) plus a cocoa ring, so the state survives even where the
gold sits against a warmer band. */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-account input.input-text:focus,
.select2-container--focus .select2-selection--single {
border-color: var(--nirsha-gold) !important;
box-shadow: 0 0 0 3px rgba(59,36,27,0.22) !important;
outline: none;
}
/* Visible keyboard focus everywhere (was missing). Cocoa is 13.5:1 on ivory;
the offset puts the ring on the page ground, so it stays visible even around
a cocoa button. Dark bands override this to gold further down (§37). */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.nrs-btn:focus-visible,
.nrs-cat:focus-visible,
.nrs-coll__card:focus-visible {
outline: 3px solid var(--nrs-focus);
outline-offset: 2px;
border-radius: var(--nrs-radius-sm);
}
/* Inside the dark bands the cocoa ring would disappear — use gold there. */
.nrs-coll a:focus-visible,
.nrs-coll__card:focus-visible,
.nrs-gallery a:focus-visible,
.nrs-ft-news a:focus-visible,
.nrs-ft-news button:focus-visible,
.nrs-ft-main a:focus-visible,
.nrs-ft-bar a:focus-visible,
.nrs-slide a:focus-visible,
.nrs-slider__arrow:focus-visible,
.nrs-slider-nav button:focus-visible {
outline: 3px solid var(--nirsha-gold);
outline-offset: 3px;
}
/* Checkout column layout.
The 2-track grid that used to sit here put Billing Details in the RIGHT track
and "Ship to a different address?" plus the order notes in the LEFT one —
measured at 1440px: .col-1 at x=389, .col-2 at x=40 — with an empty gutter
beside them. Organio already lays #customer_details out as a 50%-wide column
with .col-1 and .col-2 STACKED inside it, next to the order review; forcing a
grid on top of that fought the theme and reversed the reading order.
The width/float reset is kept (it is what stops Woo's own floats leaking);
the grid is not. */
@media (min-width: 992px) {
.woocommerce-checkout .col2-set { display: block; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; }
.woocommerce-checkout .col2-set .col-1 { margin-bottom: 8px; }
}
@media (max-width: 991px) {
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; }
.woocommerce table.shop_table_responsive tr td { text-align: right; }
}
/* Cart totals / order review card treatment */
/* Sand, not ivory: the page ground IS ivory now, so an ivory panel would have
lost its edge against it. */
.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
background: var(--nirsha-sand);
border: 1px solid var(--nrs-line);
border-radius: var(--nrs-radius);
padding: 24px;
}
/* Account dashboard navigation as a proper sidebar list */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
display: block; padding: 12px 16px; border-radius: var(--nrs-radius-sm);
color: var(--nrs-ink); font-weight: 500; transition: background .18s ease, color .18s ease;
}
/* Active account page = solid cocoa, so "where am I" is unmistakable; hover is
the softer sand tint so the two states never look alike (§25). */
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
background: var(--nirsha-sand); color: var(--nirsha-cocoa);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
background: var(--nirsha-cocoa); color: var(--nirsha-ivory); font-weight: 600;
}
/* Logout is a plain exit, not a destructive action and not a brand CTA — it
stays neutral so it can never be confused with the active page. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
color: var(--nrs-muted);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
background: var(--nirsha-sand); color: var(--nirsha-espresso);
}
/* 12.6e Mobile: stop Woo tables scrolling the page sideways */
@media (max-width: 767px) {
.woocommerce table.shop_table { display: block; overflow-x: auto; }
.woocommerce .quantity input.qty { min-height: 44px; }
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button {
min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 13 — VISUAL POLISH (v11.2.0)
Measured-defect fixes only; no structural or functional change.
═══════════════════════════════════════════════════════════════════════════ */
/* 13.1 Button scale.
Primary CTAs measured 43px tall with mismatched 13px/14px labels between the
solid and ghost variants. Premium storefront CTAs sit at 48–52px, and the two
variants must share one type size or the hero pair looks misaligned. */
.nrs-btn {
padding: 16px 30px;
font-size: 14px;
letter-spacing: 0.045em;
}
.nrs-btn--ghost-light {
padding: 15px 30px; /* 1px less: its 2px border makes up the difference */
font-size: 14px;
letter-spacing: 0.045em;
}
/* Hero CTA pair: equal optical weight, comfortable separation */
.nrs-slide__cta { gap: 14px; }
/* 13.2 Card description legibility.
Category card descriptions rendered at 13px — under the 14px floor used
everywhere else in the system, which made the cards read as unfinished. */
.nrs-cat__desc { font-size: 14px; line-height: 1.45; }
.nrs-coll__desc { font-size: 14px; line-height: 1.5; }
/* 13.3 Eyebrow: slightly larger and less cramped at desktop */
@media (min-width: 992px) {
.nrs-eyebrow { font-size: 12.5px; letter-spacing: 0.14em; }
}
/* 13.4 Gallery responsive ladder.
The 3-column rule stopped at 991px, so 992–1024px (iPad landscape) fell back
to the 4-column desktop grid at ~240px cells — denser than the layout used at
a *smaller* width. Extending the 3-column band to 1024px makes the ladder
monotonic: 4 cols ≥1025, 3 cols 600–1024, 2 cols below. */
@media (max-width: 1024px) {
.nrs-gallery__grid {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 180px;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 14 — HOMEPAGE UPGRADE (v12.0.0)
6-category mosaic · Combo Packs section · header polish · adaptive best-sellers
═══════════════════════════════════════════════════════════════════════════ */
/* ── 14.1 Shop by Category — six-tile editorial mosaic ───────────────────────
The five-tile rule set above assumes 2 rows; the six-tile variant uses a
3-row composition: one tall feature, two stacked beside it, three across
the base. Declared as a modifier so the original 5-tile layout still works. */
.nrs-cats__grid--six {
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 215px 215px 215px;
gap: 16px;
}
.nrs-cats__grid--six .nrs-cat:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.nrs-cats__grid--six .nrs-cat:nth-child(2) { grid-column: 4 / 7; grid-row: 1 / 2; }
.nrs-cats__grid--six .nrs-cat:nth-child(3) { grid-column: 4 / 7; grid-row: 2 / 3; }
.nrs-cats__grid--six .nrs-cat:nth-child(4) { grid-column: 1 / 3; grid-row: 3 / 4; min-height: 0; }
.nrs-cats__grid--six .nrs-cat:nth-child(5) { grid-column: 3 / 5; grid-row: 3 / 4; min-height: 0; }
.nrs-cats__grid--six .nrs-cat:nth-child(6) { grid-column: 5 / 7; grid-row: 3 / 4; min-height: 0; }
/* Feature tile earns a larger title; the rest step down for clear hierarchy */
.nrs-cats__grid--six .nrs-cat:nth-child(1) .nrs-cat__title { font-size: 32px; }
/* Tablet: two columns, feature spans the top */
/* ── 14.2 Combo Packs ───────────────────────────────────────────────────────
A commercial band, visually distinct from the cream category section above
it so the two don't blur together while scrolling. */
/* Soft Sand — the gifting band (§10). Deliberately NOT a cocoa field: cocoa is
already carrying Special Selection further down, and two large dark bands in
the upper half would swamp the product photography. */
.elementor-element-nrscombo { background: var(--nirsha-sand); }
.nrs-combo {
padding: var(--nrs-section-y) 0;
position: relative;
}
.nrs-combo__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.nrs-combo__card {
position: relative;
display: flex;
flex-direction: column;
background: var(--nirsha-card);
border: 1px solid var(--nrs-line);
border-radius: var(--nrs-radius-lg);
overflow: hidden;
text-decoration: none;
color: var(--nrs-ink);
box-shadow: var(--nrs-shadow);
transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.nrs-combo__card:hover {
transform: translateY(-5px);
box-shadow: var(--nrs-shadow-lg);
border-color: var(--nirsha-gold);
color: var(--nrs-ink);
}
.nrs-combo__media {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--nrs-cream-2);
}
.nrs-combo__media img {
width: 100% !important; height: 100% !important;
object-fit: cover; display: block !important;
transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.nrs-combo__card:hover .nrs-combo__media img { transform: scale(1.06); }
.nrs-combo__body {
display: flex; flex-direction: column; gap: 6px;
padding: 20px 22px 22px;
flex: 1 1 auto;
}
.nrs-combo__title {
font-family: var(--nrs-font-display) !important;
font-size: 21px; font-weight: 600; line-height: 1.2;
letter-spacing: -0.015em; color: var(--nrs-ink);
}
.nrs-combo__desc {
font-family: var(--nrs-font-body);
font-size: 14px; line-height: 1.5; color: var(--nrs-muted);
flex: 1 1 auto;
}
.nrs-combo__link {
font-family: var(--nrs-font-body);
font-size: 12.5px; font-weight: 700; letter-spacing: 0.10em;
text-transform: uppercase; color: var(--nirsha-cocoa);
display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
transition: color .22s ease;
}
.nrs-combo__link em { font-style: normal; transition: transform .22s ease; }
.nrs-combo__card:hover .nrs-combo__link { color: var(--nirsha-gold-ink); }
.nrs-combo__card:hover .nrs-combo__link em { transform: translateX(5px); }
/* Feature card: spans two columns on desktop so the section opens strongly */
.nrs-combo__card--featured { grid-column: span 2; }
.nrs-combo__card--featured .nrs-combo__media { aspect-ratio: 16 / 7; }
.nrs-combo__card--featured .nrs-combo__title { font-size: 27px; }
.nrs-combo__cta { display: flex; justify-content: center; margin-top: 38px; }
/* ── 14.3 Currency switcher + dropdown treatment.
(Header logo/nav sizing lives solely in section 16.) */
/* Dropdown menus: readable panel for the Combo Packs submenu */
#ct-header-wrap .ct-main-menu .sub-menu {
border-radius: var(--nrs-radius-sm);
box-shadow: 0 12px 34px rgba(25,26,21,0.14);
padding: 8px 0;
border: 1px solid var(--nrs-line);
}
#ct-header-wrap .ct-main-menu .sub-menu > li > a {
padding: 11px 20px !important;
font-size: 14px !important;
font-weight: 500 !important;
}
/* Currency switcher on touch sizes: meet the 44px tap minimum */
/* Mobile / tablet nav: touch-friendly rows */
@media (max-width: 991px) {
#ct-menu-mobile .ct-main-menu > li > a,
#ct-menu-mobile .sub-menu > li > a {
min-height: 48px !important;
display: flex !important; align-items: center;
font-size: 16px !important;
}
#ct-menu-mobile .sub-menu > li > a { font-size: 15px !important; padding-left: 26px !important; }
}
/* ── 14.4 Best Sellers ──────────────────────────────────────────────────────
Deliberately NOT restyled. The section renders through Organio's ct-grid
masonry widget, which positions items with inline `left` percentages from its
own JS; CSS attempts to re-centre or cap them fight that JS and leave gaps
between cards. With only two products in the catalogue the section will look
sparse regardless — that is a content gap, not a styling one, and it resolves
itself as soon as more products are published. Left untouched on purpose. */
/* ═══════════════════════════════════════════════════════════════════════════
PHASE 15 — STRUCTURAL FIX SUPPORT (v13.0.0)
Styling for the sections rebuilt in Elementor this phase. No speculative
rules: each block backs a specific structural change.
═══════════════════════════════════════════════════════════════════════════ */
/* (15.1 Header presence removed — header owned entirely by section 16.) */
/* ── 15.2 Promotional banners — now three, equal height ─────────────────── */
.nrs-promos__grid--three {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
/* .nrs-promo carries `aspect-ratio: 16/9`. Setting a min-height here made the
ratio derive WIDTH from that height (340 x 16/9 = 604px), which overflowed
the 414px grid track. Constrain width and let the ratio drive height instead
— 4/3 suits the narrower three-up column. */
.nrs-promos__grid--three .nrs-promo {
width: 100%;
min-width: 0;
/* A hard aspect-ratio derives height from width, so between 1025 and 1199 the
three-up cards computed shorter than their own copy and clipped 14-30px
off the top of the text block. A viewport-scaled MINIMUM keeps the same
proportions at wide widths (21vw = 302px at 1440, versus the 311px the
4/3 ratio gave) while letting a card grow when the copy needs it; the grid
stretches the row so all three stay equal height. */
aspect-ratio: auto;
min-height: clamp(250px, 21vw, 320px);
}
.nrs-promos__grid--three .nrs-promo__content { padding: 26px 28px; max-width: 88%; }
/* ── 15.3 Why Choose — four pillars, stronger hierarchy ─────────────────────
The numbered 01/02/03 markers were removed: the four benefits are a set,
not a sequence, so numbering implied an order that does not exist. Emphasis
now comes from the icon medallion and title weight instead. */
.nrs-why__grid--four {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 22px;
}
.nrs-why__grid--four .nrs-pillar {
background: var(--nirsha-card);
border: 1px solid var(--nrs-line);
border-radius: var(--nrs-radius-lg);
padding: 34px 26px 30px;
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 12px;
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.nrs-why__grid--four .nrs-pillar:hover {
transform: translateY(-4px);
box-shadow: var(--nrs-shadow-lg);
border-color: var(--nirsha-gold);
}
.nrs-why__grid--four .nrs-pillar__icon {
width: 62px; height: 62px; flex: 0 0 62px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--nirsha-sand);
color: var(--nirsha-gold-dark);
margin-bottom: 4px;
}
.nrs-why__grid--four .nrs-pillar__icon svg { width: 27px; height: 27px; }
.nrs-why__grid--four .nrs-pillar__title {
font-family: var(--nrs-font-display) !important;
font-size: 19px; font-weight: 600; margin: 0; color: var(--nrs-ink);
letter-spacing: -0.01em;
}
.nrs-why__grid--four .nrs-pillar__desc {
font-size: 14px; line-height: 1.6; color: var(--nrs-muted); margin: 0;
}
/* ── 15.4 Nirsha Promise — more visual weight ───────────────────────────────
Promoted from plain cards on white to a tinted band with medallion icons so
it reads as a statement rather than a repeat of Why Choose. */
.nrs-promise__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.nrs-promise__card {
background: var(--nirsha-card);
border: 1px solid var(--nirsha-border);
border-radius: var(--nrs-radius-lg);
padding: 40px 30px;
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 14px;
box-shadow: var(--nrs-shadow);
transition: transform .28s ease, box-shadow .28s ease;
}
.nrs-promise__card:hover { transform: translateY(-4px); box-shadow: var(--nrs-shadow-lg); border-color: var(--nirsha-gold); }
/* Filled cocoa medallion with a gold glyph (4.6:1). Promise is the statement
section, so its marks carry more weight than the outlined sand medallions in
Why Choose — same family, different rank. */
.nrs-promise__icon {
width: 72px; height: 72px; flex: 0 0 72px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--nirsha-cocoa); color: var(--nirsha-gold);
}
.nrs-promise__icon svg { width: 31px; height: 31px; }
.nrs-promise__title {
font-family: var(--nrs-font-display) !important;
font-size: 22px; font-weight: 600; margin: 0; color: var(--nrs-ink);
}
.nrs-promise__desc { font-size: 14.5px; line-height: 1.6; color: var(--nrs-muted); margin: 0; }
/* ── 15.5 Footer — typography and column internals (layout lives in R.13) ── */
.nrs-ft-col h4 {
font-family: var(--nrs-font-body);
font-size: 12.5px; font-weight: 700; letter-spacing: 0.13em;
text-transform: uppercase; color: var(--nirsha-ivory);
margin: 0 0 16px;
}
.nrs-ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.nrs-ft-col ul a {
color: rgba(251,247,239,0.72); font-size: 14.5px; text-decoration: none;
transition: color .18s ease, padding-left .18s ease;
display: inline-block;
}
.nrs-ft-col ul a:hover { color: var(--nirsha-gold); padding-left: 4px; }
/* Footer links sat at 18–23px tall. Padding lifts the hit area toward the 44px
guidance without visually spacing the list out. */
.nrs-ft-col ul a { padding: 7px 0; line-height: 1.4; }
/* Touch sizing moved onto the 1023 ladder breakpoint (was an orphan 991). */
@media (max-width: 1023px) {
.nrs-ft-col ul { gap: 2px; }
.nrs-ft-col ul a { padding: 11px 0; min-height: 44px; display: flex; align-items: center; }
.nrs-ft-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* Currency — informational only. The header owns the real switcher, so this is
deliberately secondary text; the pill chips (.nrs-ft-pay__chips / .nrs-ft-chip)
that used to compete with it have been removed from the markup and their
now-dead selectors deleted with them. */
.nrs-ft-pay { margin-top: 20px; }
.nrs-ft-pay__text {
margin: 0; font-size: 13px; line-height: 1.5;
color: rgba(251,247,239,0.72);
}
.nrs-ft-pay__note {
margin: 5px 0 0;
/* 0.42 alpha was 3.7:1 at 12.5px — raised to clear AA. */
font-size: 12.5px; color: rgba(251,247,239,0.60); line-height: 1.5;
}
/* ═══════════════════════════════════════════════════════════════════════════
SECTION 16 — HEADER: single authoritative block (v14.0.0)
---------------------------------------------------------------------------
Header sizing previously lived in FOUR places that fought each other:
functions.php inline (84px bar / 96px logo / 15px nav), style.css §2
(line-height 52px), Phase 14 (104px logo / 15.5px nav) and Phase 15
(122px logo / 104px bar / 16px-700 nav). The Phase 15 values won and pushed
the 8-item menu past the available width.
ROOT CAUSE of the 250px header: #ct-header .row is `display:flex;
flex-wrap:wrap` and .ct-header-navigation was computing to 1330px inside a
1360px row. Branding (96px) could not fit beside it, so the nav wrapped to a
second line — and the menu then wrapped again internally. Fixed by letting
the navigation flex-shrink instead of claiming the full row.
This is now the ONLY place header size/spacing is declared.
═══════════════════════════════════════════════════════════════════════════ */
/* 16.1b Branding vertical margin reset -- the parent theme applies a
margin-top/bottom to .ct-header-branding (15px at <=991px, 6px at
>=992px) that flexbox does NOT collapse, so it silently adds on top of
the row's min-height above and grows the bar as the logo grows. Zeroing
it here is what actually keeps the header height locked to the ladder
below regardless of logo size; align-items:center on the row still
centers the logo correctly with margin:0. */
#ct-header-wrap #ct-header .ct-header-branding {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* 16.0 Desktop-nav breakpoint — deliberately left to the parent theme.
Organio turns .ct-header-navigation into the off-canvas drawer at <=991px
and uses .ct-main-navigation as that drawer's CONTENT. An earlier attempt
here hid .ct-main-navigation below 1300px to stop the desktop menu
overflowing — which silently emptied the mobile drawer (panel slid open with
zero visible links). Never hide .ct-main-navigation responsively; size the
menu to fit instead (16.3). */
/* 16.1 One row, three zones: branding | menu | actions ───────────────────── */
@media (min-width: 992px) {
#ct-header-wrap #ct-header .row {
flex-wrap: nowrap !important;
align-items: center !important;
min-height: 84px !important;
gap: 20px;
}
#ct-header-wrap #ct-header,
#ct-header-wrap .ct-header-main { min-height: 84px !important; }
/* Branding: fixed, never shrinks */
#ct-header-wrap #ct-header .ct-header-branding {
flex: 0 0 auto !important;
max-width: none !important;
width: auto !important;
}
/* Navigation: shares the row and is allowed to shrink (the actual fix) */
#ct-header-wrap #ct-header .ct-header-navigation {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 14px;
}
/* .ct-header-navigation holds BOTH the menu and the ~330px icons cluster.
Without this the menu wrapper collapsed to the leftover ~516px and the
8 items (≈800px) wrapped to a second row. */
#ct-header-wrap #ct-header .ct-main-navigation {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
}
/* Organio renders .ct-main-menu as display:block with inline-block
s,
so flex-wrap alone had no effect — the items wrapped like text. Making
the list a flex row is what actually keeps all 8 on one line. */
#ct-header-wrap #ct-header .ct-main-menu {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: flex-end;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Organio puts ~28px horizontal MARGIN on every top-level