/* ============================================================ VELMORA DIAMONDS — Global Design System Palette: #FFFFFF / #F9F9F9 / #C5A880 / #1A1A1A ============================================================ */ /* ---------- Fonts ---------- Loaded via in each document : Playfair Display (headings) · Cormorant Garamond (display alt) · Inter (UI) Local/system fallbacks are declared in the --serif / --sans stacks below. */ :root{ /* Colour */ --white:#FFFFFF; --bg-soft:#F9F9F9; --gold:#C5A880; --gold-dark:#B08F63; --gold-deep:#9A7A4F; --gold-tint:#F3EBDF; --gold-wash:#FBF7F1; --ink:#1A1A1A; --ink-70:#4A4A4A; --ink-55:#6E6E6E; --ink-40:#9A9A9A; --line:#E6E6E6; --line-soft:#F0EEEA; --danger:#C0392B; --ok:#2E7D5B; /* Type */ --serif:'Playfair Display','Cormorant Garamond',Georgia,'Times New Roman',serif; --serif-alt:'Cormorant Garamond','Playfair Display',Georgia,serif; --sans:'Inter','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* Layout */ --maxw:1400px; --gutter:40px; --radius:2px; --radius-md:6px; /* Motion */ --ease:cubic-bezier(.22,.61,.36,1); --dur:.42s; --shadow-sm:0 1px 3px rgba(26,26,26,.06); --shadow-md:0 6px 26px rgba(26,26,26,.08); --shadow-lg:0 18px 60px rgba(26,26,26,.13); --header-h:150px; } *,*::before,*::after{box-sizing:border-box;} /* [hidden] must always win — a later `display:grid/flex` rule silently defeats the browser default and leaves hidden panels on screen. */ [hidden]{display:none!important;} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px);} /* Smooth scrolling is opt-in per interaction (see .js anchor handling) rather than global, so programmatic scrollTo/scroll restoration remains instant and accurate. */ html:focus-within{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important;} } body{ margin:0;background:var(--white);color:var(--ink); font-family:var(--sans);font-size:15px;line-height:1.65; font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;overflow-x:hidden; } body.no-scroll{overflow:hidden;} img,svg,video{max-width:100%;display:block;} img{height:auto;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;} input,select,textarea{font:inherit;color:inherit;} h1,h2,h3,h4,h5{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:.01em;color:var(--ink);} p{margin:0;} ul{margin:0;padding:0;list-style:none;} :focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px;} ::selection{background:var(--gold);color:#fff;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);} .wrap-narrow{max-width:1140px;margin:0 auto;padding:0 var(--gutter);} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} .skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--ink);color:#fff; padding:12px 22px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;} .skip-link:focus{left:12px;top:12px;} /* ============================================================ ANNOUNCEMENT MARQUEE ============================================================ */ /* max-width + contain stops the (deliberately very wide) marquee track from inflating the document's scrollWidth. body{overflow-x:hidden} hides the scrollbar but the page is still technically 3400px wide without this. */ .announce{background:var(--gold);color:#fff;overflow:hidden;position:relative;height:40px; max-width:100vw; display:flex;align-items:center;} /* Taken out of flow: while the track was `position:static` its 3400px width inflated documentElement.scrollWidth on every page, so the whole document reported a horizontal overflow even though body{overflow-x:hidden} hid the scrollbar. Absolute positioning keeps the animation identical but stops the track contributing to layout width. */ .announce__track{position:absolute;top:0;left:0;height:100%; display:flex;align-items:center;width:max-content; animation:marquee 38s linear infinite;will-change:transform;} .announce:hover .announce__track{animation-play-state:paused;} .announce__seg{white-space:nowrap;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase; font-weight:700;padding-right:0;text-shadow:0 1px 2px rgba(0,0,0,.18);} .announce__seg span{padding:0 30px;} @keyframes marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}} /* ============================================================ HEADER (logo size identical on every page — never shrinks) ============================================================ */ .site-header{position:sticky;top:0;z-index:900;background:#fff; box-shadow:0 1px 0 rgba(230,230,230,.9);transition:box-shadow .3s var(--ease);} .site-header.is-stuck{box-shadow:0 4px 24px rgba(26,26,26,.07);} /* z-index:2 puts the whole top row (and therefore the currency dropdown) above the nav row that follows it in the DOM. Without it the later sibling wins on paint order and "INQUIRY" showed through the menu. */ .header__main{position:relative;z-index:2;display:flex;align-items:center;justify-content:center; padding:22px var(--gutter) 14px;max-width:var(--maxw);margin:0 auto;min-height:96px;} .logo{display:block;text-align:center;line-height:1;} .logo__word{font-family:var(--serif);font-size:63px;font-weight:400;letter-spacing:.185em; color:var(--ink);text-indent:.185em;display:block;line-height:1.04;} .logo__sub{font-family:var(--serif);font-size:20.5px;letter-spacing:.52em;color:var(--gold); text-indent:.52em;display:block;margin-top:1px;font-weight:400;} .header__utils{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%); display:flex;align-items:center;gap:19px;} .util-btn{display:grid;place-items:center;width:31px;height:31px;color:var(--ink); transition:color .25s var(--ease),transform .25s var(--ease);position:relative;} .util-btn:hover{color:var(--gold);transform:translateY(-1px);} .util-btn svg{width:24px;height:24px;stroke-width:1.6;} /* Search · Cart · Account sit 20% larger again at the client's request */ .util-btn--lg{width:37px;height:37px;} .util-btn--lg svg{width:29px;height:29px;stroke-width:1.55;} .util-badge{position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;padding:0 5px; background:var(--gold);color:#fff;border-radius:10px;font-size:10.5px;font-weight:700; display:grid;place-items:center;line-height:1;font-family:var(--sans);} .util-badge:empty,.util-badge[data-count="0"]{display:none;} .currency{display:flex;align-items:center;gap:5px;position:relative;} .currency__btn{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;letter-spacing:.03em; color:var(--ink);padding:3px 2px;transition:color .25s var(--ease);} .currency__btn:hover{color:var(--gold);} .currency__flag{width:17px;height:17px;border-radius:50%;object-fit:cover;display:block;} .currency__btn svg{width:13px;height:13px;stroke-width:2.2;opacity:.75;} /* z-index:50 was trapped inside .header__main (position:relative), so the dropdown painted UNDER the nav row and the word "INQUIRY" showed through it. .currency gets its own stacking context above the nav, and the menu sits above that. (Reported on desktop, 30 Jul 2026.) */ .currency.is-open{z-index:930;} .currency__menu{position:absolute;top:calc(100% + 12px);right:0;background:#fff;min-width:186px; border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:6px;z-index:931; opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .26s var(--ease);} .currency.is-open .currency__menu{opacity:1;visibility:visible;transform:translateY(0);} .currency__item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;font-size:13px; text-align:left;transition:background .18s;} .currency__item:hover{background:var(--gold-wash);} .currency__item.is-active{background:var(--gold-tint);font-weight:600;} .currency__item b{font-weight:600;min-width:34px;} .currency__item span{color:var(--ink-55);font-size:12px;} /* Nav */ .header__nav{border-top:1px solid var(--line-soft);} .navclose{display:none;} .nav{display:flex;align-items:center;justify-content:center;gap:44px; max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);} .nav__link{position:relative;display:block;padding:16px 0;font-size:13px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:color .28s var(--ease);} .nav__link::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:2px;background:var(--gold); transform:scaleX(0);transform-origin:center;transition:transform .34s var(--ease);} .nav__link:hover,.nav__link[aria-current="page"]{color:var(--gold);} .nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);} .burger{display:none;position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%); width:28px;height:28px;place-items:center;} .burger svg{width:22px;height:22px;stroke-width:1.5;} /* ============================================================ BUTTONS ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:11px; padding:15px 34px;font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.15em; text-transform:uppercase;border-radius:var(--radius);cursor:pointer;position:relative; transition:all .34s var(--ease);border:1px solid transparent;white-space:nowrap;} .btn svg{width:14px;height:14px;stroke-width:1.8;transition:transform .34s var(--ease);} .btn--gold{background:var(--gold);color:#fff;border-color:var(--gold);} .btn--gold:hover{background:var(--gold-dark);border-color:var(--gold-dark); box-shadow:0 8px 24px rgba(197,168,128,.34);transform:translateY(-1px);} .btn--gold:hover svg{transform:translateX(4px);} .btn--outline{background:#fff;color:var(--ink);border-color:var(--gold);} .btn--outline:hover{background:var(--gold);color:#fff;box-shadow:0 8px 24px rgba(197,168,128,.28); transform:translateY(-1px);} .btn--outline:hover svg{transform:translateX(4px);} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);} .btn--ghost:hover{border-color:var(--gold);color:var(--gold);} .btn--dark{background:var(--ink);color:#fff;border-color:var(--ink);} .btn--dark:hover{background:#000;transform:translateY(-1px);box-shadow:var(--shadow-md);} .btn--sm{padding:11px 22px;font-size:10.5px;letter-spacing:.13em;} .btn--lg{padding:18px 44px;font-size:12px;} .btn--block{display:flex;width:100%;} .btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;} .link-gold{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep); border-bottom:1px solid rgba(197,168,128,.42);padding-bottom:3px;transition:all .3s var(--ease);} .link-gold:hover{color:var(--gold-dark);border-color:var(--gold-dark);gap:12px;} /* ============================================================ SECTION FURNITURE ============================================================ */ .eyebrow{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.3em; text-transform:uppercase;color:var(--gold);display:block;} .section{padding:88px 0;} .section--soft{background:var(--bg-soft);} .section__head{text-align:center;margin-bottom:46px;} .section__head .eyebrow{margin-bottom:14px;} .section__title{font-size:38px;line-height:1.16;font-weight:400;} /* Reveal on scroll — progressive enhancement. Content is visible by default; only hidden once JS confirms it can reveal it, so a JS failure can never leave the page blank. */ html.js [data-reveal]{opacity:0;transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease);} html.js [data-reveal].is-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ html.js [data-reveal]{opacity:1;transform:none;} } /* ============================================================ FOOTER — light gold/champagne theme (NEVER solid black) ============================================================ */ .site-footer{background:linear-gradient(178deg,#FBF7F1 0%,#F5EDE1 46%,#EFE3D2 100%); color:var(--ink);border-top:1px solid rgba(197,168,128,.4);margin-top:0;} .footer__grid{display:grid;grid-template-columns:1.55fr 1fr 1fr 1.15fr 1.25fr;gap:44px; padding:66px 0 46px;} .footer__brandword{font-family:var(--serif);font-size:20px;letter-spacing:.15em;color:var(--ink); margin-bottom:4px;display:block;} .footer__brandsub{font-family:var(--serif);font-size:10px;letter-spacing:.44em;color:var(--gold-deep); display:block;margin-bottom:18px;} .footer__blurb{font-size:13.5px;line-height:1.85;color:var(--ink-70);max-width:300px;margin-bottom:20px;} .footer__badge{display:inline-block;border:1px solid var(--gold);color:var(--gold-deep); padding:7px 14px;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase; background:rgba(255,255,255,.62);margin-bottom:22px;} .footer__col-title{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--ink);margin-bottom:20px;} .footer__list li{margin-bottom:11px;} .footer__list a{font-size:13.5px;font-weight:500;color:var(--ink-70);transition:color .26s var(--ease),padding-left .26s var(--ease);} .footer__list a:hover{color:var(--gold-deep);padding-left:4px;} .footer__note{font-size:12.5px;line-height:1.8;color:var(--ink-70);margin-bottom:16px;} .footer__label{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-40);display:block;margin-bottom:5px;} .footer__mail{font-size:13px;color:var(--gold-deep);font-weight:700;word-break:break-word;} .footer__mail:hover{text-decoration:underline;} .footer__socials{display:flex;gap:12px;margin-top:6px;} .footer__socials a{width:32px;height:32px;display:grid;place-items:center; border:1px solid rgba(197,168,128,.55);color:var(--ink-70);transition:all .3s var(--ease);} .footer__socials a:hover{background:var(--gold);border-color:var(--gold);color:#fff;transform:translateY(-2px);} .footer__socials svg{width:15px;height:15px;} .footer__bottom{border-top:1px solid rgba(197,168,128,.36);padding:19px 0; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .footer__copy{font-size:12px;color:var(--ink-70);} /* Companies Act 1993 s25 requires the registered company name on the site. The brand stays Velmora Diamonds everywhere; this one quiet line names the legal entity behind it, which is what every trading-name business does. */ .footer__legal{font-size:10.5px;color:var(--ink-40);display:inline-block;margin-top:3px;} .footer__certs{display:flex;gap:20px;flex-wrap:wrap;} .footer__certs span{font-size:11px;font-weight:600;letter-spacing:.09em;color:var(--ink-70);text-transform:uppercase;} /* ============================================================ AI CONSULTANT WIDGET ============================================================ */ /* AI consultant widget removed 30 Jul 2026 — replaced by Tawk.to, which injects and styles its own bubble. */ .toast-host{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:1200; display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;} .toast{background:var(--ink);color:#fff;padding:13px 24px;font-size:12.5px;letter-spacing:.05em; box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:11px;border-radius:2px; animation:toastIn .4s var(--ease);max-width:90vw;} .toast svg{width:15px;height:15px;color:var(--gold);flex-shrink:0;} .toast.is-out{animation:toastOut .34s var(--ease) forwards;} @keyframes toastIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} @keyframes toastOut{to{opacity:0;transform:translateY(10px);}} /* ============================================================ CART DRAWER ============================================================ */ .scrim{position:fixed;inset:0;background:rgba(26,26,26,.44);z-index:940;backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:all .38s var(--ease);} .scrim.is-open{opacity:1;visibility:visible;} .drawer{position:fixed;top:0;right:0;bottom:0;width:436px;max-width:100vw;background:#fff;z-index:950; display:flex;flex-direction:column;transform:translateX(100%); transition:transform .46s var(--ease);box-shadow:-14px 0 50px rgba(26,26,26,.14);} .drawer.is-open{transform:none;} .drawer__head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px; border-bottom:1px solid var(--line);flex-shrink:0;} .drawer__title{font-family:var(--serif);font-size:22px;} .drawer__title span{font-family:var(--sans);font-size:12px;color:var(--ink-40);margin-left:7px;} .drawer__close{width:30px;height:30px;display:grid;place-items:center;color:var(--ink-55); transition:color .24s,transform .24s;} .drawer__close:hover{color:var(--ink);transform:rotate(90deg);} .drawer__close svg{width:17px;height:17px;} .drawer__body{flex:1;overflow-y:auto;padding:22px 26px;} .drawer__foot{border-top:1px solid var(--line);padding:20px 26px 24px;background:var(--bg-soft);flex-shrink:0;} .cart-line{display:grid;grid-template-columns:78px 1fr auto;gap:15px;padding:16px 0; border-bottom:1px solid var(--line-soft);align-items:start;} .cart-line__img{width:78px;height:78px;background:var(--bg-soft);object-fit:cover;} .cart-line__name{font-family:var(--serif);font-size:15px;line-height:1.35;margin-bottom:5px;} .cart-line__meta{font-size:11px;color:var(--ink-55);letter-spacing:.04em;line-height:1.6;} .cart-line__sku{font-size:10px;color:var(--ink-40);letter-spacing:.08em;margin-top:3px;} .cart-line__price{font-size:14px;font-weight:600;white-space:nowrap;} .cart-line__rm{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40); margin-top:8px;transition:color .24s;} .cart-line__rm:hover{color:var(--danger);} .cart-empty{text-align:center;padding:60px 20px;} .cart-empty svg{width:46px;height:46px;color:var(--line);margin:0 auto 18px;stroke-width:1;} .cart-empty p{font-size:14px;color:var(--ink-55);margin-bottom:22px;} .promo{display:flex;gap:8px;margin-bottom:16px;} .promo input{flex:1;border:1px solid var(--line);padding:11px 14px;font-size:12px;background:#fff; letter-spacing:.06em;text-transform:uppercase;} .promo input:focus{outline:none;border-color:var(--gold);} .sum-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-70); margin-bottom:10px;font-variant-numeric:tabular-nums lining-nums;} .sum-row--total{font-size:17px;font-weight:800;color:var(--ink);padding-top:14px; border-top:1px solid var(--line);margin-top:14px;font-family:var(--sans); letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;} .sum-row--save{color:var(--ok);} /* "Including GST" sits under the word Total instead of showing a separate GST amount, which read as if tax were being added on top. */ .sum-row--total span:first-child{display:flex;flex-direction:column;gap:2px;} .sum-row--total small{font-size:10.5px;font-weight:600;color:var(--ink-55); letter-spacing:.06em;text-transform:uppercase;} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1180px){ :root{--gutter:28px;} .footer__grid{grid-template-columns:1.4fr 1fr 1fr;gap:36px;} .nav{gap:30px;} } @media (max-width:900px){ .logo__word{font-size:46px;} .logo__sub{font-size:15.5px;letter-spacing:.42em;text-indent:.42em;} /* Three real columns. The absolutely-positioned utils used to sit ON TOP of the centred logo on narrow screens — burger | logo | utils now each own their own track so they can never overlap. */ .header__main{display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;column-gap:10px;padding:14px var(--gutter) 11px;min-height:70px;} .header__utils{position:static;transform:none;justify-self:end;gap:14px;} .logo{justify-self:center;min-width:0;} .burger{display:grid;position:static;transform:none;justify-self:start;} .header__nav{display:none;} /* z-index 970 beats the scrim (940) AND the cart drawer (950). The scrim is appended to at click time, so it comes later in the DOM — without a higher z-index it painted ON TOP of the menu, which looked blurred and swallowed every tap. (Reported on iPhone, 30 Jul 2026.) 100dvh + safe-area keeps the last link clear of the iOS home bar. */ /* .header__nav lives INSIDE .site-header, which is position:sticky with z-index:900 — that creates a stacking context, so the drawer's own z-index can never beat the scrim (940) sitting at body level. The fix is to lift the HEADER while the menu is open. */ body.nav-open .site-header{z-index:975;} .header__nav.is-open{display:block;position:fixed;top:0;left:0;bottom:0;width:288px;background:#fff; z-index:975;padding-top:26px;box-shadow:var(--shadow-lg);border-top:0; height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch; padding-bottom:calc(26px + env(safe-area-inset-bottom));} .navclose{display:grid;place-items:center;width:38px;height:38px;margin:0 0 6px auto; margin-right:20px;color:var(--ink);border:1px solid var(--line);border-radius:50%;} .navclose svg{width:19px;height:19px;} .navclose:hover{color:var(--gold);border-color:var(--gold);} .header__nav.is-open .nav{flex-direction:column;align-items:flex-start;gap:0;padding:0 26px;} .header__nav.is-open .nav__link{padding:15px 0;width:100%;border-bottom:1px solid var(--line-soft); font-size:12.5px;} .section{padding:60px 0;} .section__title{font-size:29px;} .footer__grid{grid-template-columns:1fr 1fr;gap:32px;padding:48px 0 34px;} .drawer{width:100%;} } @media (max-width:600px){ :root{--gutter:18px;} .announce{height:36px;} .announce__seg{font-size:11px;letter-spacing:.1em;} .announce__seg span{padding:0 20px;} /* Logo scales with the viewport so it can never push the icons off-screen */ /* Slightly tighter than v4.2 to make room for the NZD/AUD text that is now shown next to it. Measured to clear the icons at 375px. */ .logo__word{font-size:clamp(17px,5.4vw,30px);letter-spacing:.08em;text-indent:.08em;} .logo__sub{font-size:clamp(7px,2.1vw,11.5px);letter-spacing:.22em;text-indent:.22em;} .header__main{column-gap:6px;padding:11px var(--gutter) 9px;min-height:62px;} .header__utils{gap:7px;} .util-btn{width:26px;height:26px;} .util-btn svg{width:20px;height:20px;} .util-btn--lg{width:28px;height:28px;} .util-btn--lg svg{width:22px;height:22px;} /* SHOW the currency code on mobile. Hiding it (v4.2) left only a tiny flag, and the owner rightly pointed out you cannot tell NZD from AUD that way. Width is recovered by dropping the flag and the chevron instead — the three letters carry all the meaning. */ .currency__btn > svg{display:none;} /* chevron */ .currency__code{display:inline;font-size:12px;font-weight:700;letter-spacing:.02em;} .currency__btn{gap:0;padding:3px 4px;} .util-badge{min-width:15px;height:15px;font-size:9px;top:-3px;right:-4px;} .footer__grid{grid-template-columns:1fr;} .footer__bottom{flex-direction:column;text-align:center;} .section__title{font-size:25px;} } @media print{ .site-header,.site-footer,.drawer,.scrim,.announce{display:none!important;} } /* Inline SVG currency flags (emoji flags don't render cross-platform) */ .currency__flagemo{display:inline-grid;place-items:center;width:21px;height:21px;flex-shrink:0;} .currency__flagemo svg{width:21px;height:21px;border-radius:50%;display:block;} .currency__item .currency__flagemo{width:18px;height:18px;} .currency__item .currency__flagemo svg{width:18px;height:18px;} /* ------------------------------------------------------------------ MOBILE FLAG SIZE — must come AFTER the .currency__flagemo base rules above, otherwise the media query loses on source order and the flag collapses to 0x0. (Real bug found on iPhone, 30 Jul 2026.) ------------------------------------------------------------------ */ @media (max-width:600px){ /* Hide the button's flag so the NZD/AUD text fits. MUST live here, after the base .currency__flagemo rules above — a media query earlier in the file loses on source order and silently does nothing. */ .currency__btn .currency__flagemo{display:none;} /* the dropdown list keeps its flags — there is room in the menu */ .currency__item .currency__flagemo{display:inline-grid;width:18px;height:18px;} .currency__item .currency__flagemo svg{width:18px;height:18px;} } /* ══════════════════════════════════════════════════════════════════ MOBILE READABILITY (added 30 Jul 2026 at the owner's request) "Mobile pe writing bahut light aur choti dikh rahi hai." Desktop is deliberately untouched — everything below 700px only. ══════════════════════════════════════════════════════════════════ */ @media (max-width:700px){ /* 1. Base text up from 15px, and darker */ body{font-size:16.5px;line-height:1.62;color:#141414;} /* 2. The three grey tints were too pale on a phone in daylight. Each is darkened one step; the CSS variables are re-declared so every component that uses them benefits at once. */ :root{ --ink-70:#3A3A3A; --ink-55:#565656; --ink-40:#767676; } /* 3. Small print — spec strips, labels, meta, notes */ .pinfo__strip{font-size:13px!important;font-weight:700;} .card__spec,.card__spec *{font-size:12.5px;font-weight:600;} .sum-row{font-size:15px;font-weight:600;} .sum-row--total{font-size:19px;font-weight:800;} .drawer__body,.drawer__foot{font-size:15px;} .cart-line__meta{font-size:13px;font-weight:600;} .cart-line__title{font-size:15.5px;font-weight:700;} /* 4. Section headings and body copy */ .section__title{font-size:27px;} .section__sub,.section p,.lede{font-size:16px;} /* 5. Forms — 16px minimum stops iOS zooming the page on focus */ input,select,textarea,.input{font-size:16px!important;} label,.field__label{font-size:13.5px;font-weight:700;} /* 6. Buttons and nav */ .btn{font-size:13px;letter-spacing:.09em;font-weight:700;} .nav__link{font-size:14px!important;font-weight:700;} /* 7. Footer */ .site-footer{font-size:14.5px;} .footer__col a,.footer__col p{font-size:14.5px;} .footer__title{font-size:12.5px;font-weight:800;} .footer__note{font-size:12px!important;} /* 8. Tables (diamond details) */ .dtable th,.dtable td{font-size:13.5px!important;padding:11px 12px!important;} .dtable th{font-weight:700;} } /* ---- Deliver-to switch (drives GST zero-rating) ---- */ .shipto{position:relative;} .shipto__btn{display:flex;align-items:center;gap:6px;background:none;border:none; padding:6px 8px;cursor:pointer;color:var(--ink);font:inherit;font-size:12px; letter-spacing:.04em;} .shipto__btn svg{width:15px;height:15px;flex-shrink:0;} .shipto__chev{width:12px;height:12px;opacity:.6;} .shipto__btn:hover{color:var(--gold-deep);} .shipto__btn.is-export .shipto__label{color:var(--gold-deep);font-weight:700;} .shipto__menu{position:absolute;top:calc(100% + 8px);right:0;z-index:940;width:268px; background:#fff;border:1px solid var(--line);box-shadow:0 12px 34px rgba(26,26,26,.14); padding:12px;} .shipto__menu[hidden]{display:none;} .shipto__lead{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--ink-40);margin:0 0 9px;font-weight:700;} .shipto__menu button{display:block;width:100%;text-align:left;background:none; border:1px solid transparent;padding:9px 11px;cursor:pointer;font:inherit;margin-bottom:4px;} .shipto__menu button:hover{background:var(--bg-soft);} .shipto__menu button.is-on{border-color:var(--gold);background:var(--gold-wash);} .shipto__menu button b{display:block;font-size:13.5px;color:var(--ink);} .shipto__menu button span{display:block;font-size:11.5px;color:var(--ink-55);margin-top:1px;} .shipto__note{font-size:11px;color:var(--ink-40);line-height:1.6;margin:8px 0 0; padding-top:8px;border-top:1px solid var(--line);} .sum-note{font-size:11.5px;color:var(--ink-55);line-height:1.65;margin:10px 0 0;} @media (max-width:900px){ .shipto__label{display:none;} .shipto__menu{width:250px;} } /* ---------- NZ-only: overseas address blocked at checkout ---------- */ .co-block{margin-top:12px;padding:14px 16px;border-left:4px solid var(--gold); background:linear-gradient(180deg,rgba(197,168,128,.1),rgba(197,168,128,.03)); border-radius:0 3px 3px 0;} .co-block[hidden]{display:none;} .co-block b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:5px;} .co-block span{display:block;font-size:12.5px;color:var(--ink-70);line-height:1.55;margin-bottom:11px;} .btn.is-off,.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;} /* The locked "Outside New Zealand" row in the header picker */ .shipto__menu [data-shipto].is-locked{opacity:.62;} .shipto__menu [data-shipto].is-locked span{color:var(--gold-deep);font-weight:700;} /* ---------- Cart / checkout: the stone is a link ---------- */ .cart-line__ln{display:block;color:inherit;text-decoration:none;} .cart-line__ln:hover .cart-line__name{color:var(--gold-deep);text-decoration:underline;} .cart-line__ln:hover .cart-line__img{opacity:.88;}