/* ==========================================================================
   Oh My My — premium refresh (v1.5). Loaded last; refines the whole store.
   ========================================================================== */
:root{--bg:#faf6f2;--surface:#fff;--tint:#f1e7e3;--line:#e9ddd8;--ink:#1d1017;--muted:#7b6a71;--berry:#a01d55;--gold:#b8924a;
  --r-lg:22px;--r-md:16px;--r-sm:10px;--shadow:0 30px 60px -34px rgba(40,14,28,.42);--ease:cubic-bezier(.2,.7,.2,1)}
html,body{overflow-x:clip}
body{background:var(--bg);font-size:15.5px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:#f3cddb;color:var(--ink)}
section{padding:clamp(48px,6.5vw,96px) 0}

/* ---------- announcement + header ---------- */
.announce{background:#140a10;font-size:11px;letter-spacing:.2em}
.announce .t span{padding-block:9px}
header.site{background:rgba(250,246,242,.82);backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid rgba(233,221,216,.7)}
header.site.scrolled{box-shadow:0 10px 40px -24px rgba(40,14,28,.4)}
.bar{padding:12px 0}
.nav{gap:26px;font-size:12px;letter-spacing:.18em;font-weight:500}
.nav a{position:relative;border:0!important;padding:6px 0}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover:after,.nav a[aria-current]:after{transform:scaleX(1);transform-origin:left}
.nav a[href*="jewellery"]{color:#8a5a12}
.nav a[href*="jewellery"]:before{content:"✦";font-size:9px;margin-right:5px;color:var(--gold);vertical-align:2px}
.ib{border-radius:50%;transition:background .25s,transform .25s}
.ib:hover{background:rgba(29,16,23,.06)}
.badge{background:var(--ink);box-shadow:0 0 0 2px var(--bg)}

/* ---------- headings ---------- */
.sh{margin-bottom:clamp(22px,3vw,36px);align-items:end}
.sh h2{font-size:clamp(34px,4.4vw,62px);letter-spacing:-.02em;line-height:.98;font-weight:400}
.sh h2 em{color:var(--berry);font-weight:400}
.la{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;transition:all .25s}
.la:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.eyebrow{letter-spacing:.22em}

/* ---------- buttons ---------- */
.btn{padding:15px 28px;font-weight:500;letter-spacing:.18em;transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn.dark{box-shadow:0 16px 30px -18px rgba(29,16,23,.7)}
.ulink{letter-spacing:.16em}

/* ---------- shop by category: arches ---------- */
.cats{gap:clamp(12px,1.6vw,22px)}
.cat img,.cat .ph,.cat-ico{aspect-ratio:3/4!important;border-radius:999px 999px var(--r-md) var(--r-md)!important;object-position:center 18%}
.cat img{box-shadow:none!important}
.cat:hover img{transform:translateY(-6px)!important;box-shadow:var(--shadow)!important}
.cat span{margin-top:14px;font-size:12px;letter-spacing:.2em;font-weight:500}
.cat-ico{border-radius:999px 999px var(--r-md) var(--r-md)}

/* ---------- product cards ---------- */
.grid{gap:clamp(28px,3vw,44px) clamp(12px,1.4vw,20px)}
.card .th,.rimg{border-radius:var(--r-md)!important;background:linear-gradient(160deg,#f4ebe7,#ecdfda)}
.card:hover .th{transform:translateY(-4px);box-shadow:var(--shadow)}
.th img,.rimg img{transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.card:hover .th img,.rcard:hover .rimg img{transform:scale(1.045)}
.tag{left:12px;top:12px;border-radius:999px;padding:5px 10px;font-size:10px;letter-spacing:.12em;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.tag.sale-tag{background:var(--berry)}
.wish{right:12px;top:12px;width:38px;height:38px;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);box-shadow:0 8px 18px -10px rgba(0,0,0,.4)}
.wish:hover{background:#fff}
.add{left:12px;right:12px;bottom:12px;padding:13px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink);backdrop-filter:blur(10px);font-weight:600;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.5);transform:translateY(16px);opacity:0;transition:transform .35s var(--ease),opacity .35s,background .25s,color .25s}
.card:hover .add,.add:focus-visible{transform:none;opacity:1}
.add:hover{background:var(--ink);color:#fff}
.meta{gap:4px;margin-top:14px}
.meta .ty{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gold)}
.meta h3{font-size:15px;font-weight:400;line-height:1.4;color:var(--ink)}
.card:hover .meta h3{color:var(--ink)}
.meta h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.card:hover .meta h3 a{background-size:100% 1px}
.meta .pr,.rprice{font-size:15px;font-weight:600;color:var(--ink)}
.meta .pr del,.rprice del{font-weight:400;color:var(--muted);opacity:.8;margin-right:4px}
.meta .pr ins,.rprice ins{text-decoration:none;color:var(--berry)}
@media (hover:none){.add{opacity:1;transform:none;padding:10px;font-size:10px}}

/* rails */
.rail{gap:clamp(12px,1.4vw,20px)}
.rcard{gap:8px}
.rcard:hover .rimg{box-shadow:var(--shadow)}
.rimg{transition:box-shadow .4s}
.rimg em{font-size:64px;left:14px;bottom:4px;opacity:.95}
.rname{font-weight:400;font-size:15px}
.rail-nav .ib{border:1px solid var(--line);background:#fff;width:44px;height:44px}
.rail-nav .ib:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* filter chips */
.chip{padding:10px 18px;font-size:13px;letter-spacing:.04em;transition:all .25s}
.chip:hover{border-color:var(--ink);transform:translateY(-1px)}

/* ---------- collection tiles ---------- */
.cols{gap:clamp(12px,1.4vw,18px)}
.col{border-radius:var(--r-lg);padding:clamp(22px,3vw,38px)}
.col:after{background:linear-gradient(180deg,transparent 35%,rgba(18,6,12,.78))}
.col h3{font-size:clamp(34px,3.6vw,54px);letter-spacing:-.02em}
.col .la{display:inline-block;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(6px)}
.col:hover .la{background:#fff;color:var(--ink)}

/* promo tiles */
.ptile{border-radius:var(--r-lg)!important;overflow:hidden}

/* ---------- occasion band ---------- */
.occ{background:linear-gradient(120deg,#f6e6ea,#f7efe3);border-block:1px solid var(--line);padding:clamp(40px,5vw,64px) 0}
.occ h2{font-size:clamp(34px,4vw,56px);letter-spacing:-.02em}
.occ .chip{background:rgba(255,255,255,.75);backdrop-filter:blur(6px);padding:12px 22px;font-size:14px}
.occ .chip:hover{background:var(--ink);color:#fff}

/* ---------- shop the look / denim / promo ---------- */
.stl,.look .big{border-radius:var(--r-lg);overflow:hidden}
.stl-img{border-radius:var(--r-lg);overflow:hidden}
.look .mini a{border-radius:var(--r-sm);overflow:hidden}
.promo{margin-inline:clamp(0px,2vw,24px);border-radius:clamp(0px,2.4vw,32px);padding-block:clamp(64px,8vw,110px)}
.promo h2{letter-spacing:-.02em}

/* ---------- reviews / blog / instagram ---------- */
.rev{border-radius:var(--r-md);background:#fff;border:1px solid var(--line);padding:26px;box-shadow:0 20px 40px -36px rgba(40,14,28,.5)}
.blog-grid article,.post-card{border-radius:var(--r-md)}
.blog-grid img,.post-card img{border-radius:var(--r-md)}
.ig{gap:10px}
.ig a{border-radius:var(--r-sm);overflow:hidden}
.ig img{transition:transform .8s var(--ease)}
.ig a:hover img{transform:scale(1.06)}

/* ---------- trust bar ---------- */
.trust{border:0;gap:14px;padding:clamp(28px,4vw,48px) 0}
.trust div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:20px 20px 20px 64px;position:relative}
.trust div:before{content:"✦";position:absolute;left:20px;top:50%;translate:0 -50%;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#f7e0a3,#c9973f);color:#2a0a1c;font-size:13px}
.trust div:nth-child(1):before{content:"🔒";background:#f3e6ec}
.trust div:nth-child(2):before{content:"♡";background:#f3e6ec;color:var(--berry)}
.trust div:nth-child(4):before{content:"✉";background:#f3e6ec;color:var(--berry)}
.trust b{font-size:14.5px}

/* ---------- footer ---------- */
footer{background:#140a10;border-radius:clamp(0px,3vw,36px) clamp(0px,3vw,36px) 0 0;margin-top:clamp(20px,3vw,40px);padding-top:clamp(48px,6vw,80px)}
footer h4{color:#f3d28a;opacity:.85}
footer a{transition:opacity .2s,color .2s}footer a:hover{color:#f3d28a;text-decoration:none}

/* ---------- reveal on scroll ---------- */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)!important}

/* ---------- product page polish ---------- */
.pgal img,.pgal .ph{border-radius:var(--r-md)}
.single_add_to_cart_button,.button.alt{border-radius:999px!important}

@media (max-width:860px){
  body{font-size:15px}
  .sh h2{font-size:clamp(32px,9vw,42px)}
  .trust{grid-template-columns:1fr 1fr}
  .trust div{padding:16px 14px 16px 52px}.trust div:before{left:14px;width:26px;height:26px;font-size:11px}
  .add{opacity:1;transform:none}
  .promo{margin-inline:12px;border-radius:24px}
  .la{padding:8px 14px;font-size:10.5px}
}
.cat img{display:block}.cat-ico{display:grid}
.jw{padding-top:0}

/* ==========================================================================
   Blog — Style Journal (magazine banner, cards, article)
   ========================================================================== */
.jr-hero{position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(60% 80% at 85% 20%,#6b1d4a 0%,transparent 70%),radial-gradient(50% 70% at 0% 100%,#3b0f2a,transparent 70%),#170610}
.jr-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.jr-word{position:absolute;right:-.04em;bottom:-.2em;font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(120px,19vw,320px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(243,210,138,.2);white-space:nowrap}
.jr-hero .spk{color:#f3d28a}
.jr-in{padding-block:clamp(36px,5vw,64px) clamp(44px,6vw,80px);display:grid;gap:clamp(24px,3vw,40px)}
.jr-intro{display:grid;gap:12px;max-width:760px}
.jr-intro .eyebrow{color:#f3d28a}
.jr-intro h1{font-size:clamp(40px,5.4vw,80px);line-height:.96;letter-spacing:-.02em;color:#fff}
.jr-intro h1 em{font-style:italic;background:linear-gradient(90deg,#f7e0a3,#c9973f,#fff1c9,#f3d28a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.jr-intro p{margin:0;opacity:.82;max-width:58ch;font-size:16.5px}
.jr-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.jr-side{display:grid;gap:16px}
.jr-lead,.jr-mini{position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);background:#2a0a1c;isolation:isolate;box-shadow:0 40px 80px -40px #000}
.jr-lead{min-height:clamp(360px,46vw,560px)}
.jr-mini{min-height:clamp(180px,22vw,272px)}
.jr-lead img,.jr-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;z-index:-2;transition:transform 1.2s var(--ease)}
.jr-lead:hover img,.jr-mini:hover img{transform:scale(1.05)}
.jr-lead:after,.jr-mini:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(18,4,12,.86))}
.jr-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,2.4vw,32px);display:grid;gap:10px;justify-items:start}
.jr-pill,.post-pill{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 11px;border-radius:999px;background:#f3d28a;color:#2a0a1c}
.jr-t{font-family:var(--display);font-size:clamp(26px,2.8vw,42px);line-height:1.05;letter-spacing:-.01em}
.jr-mini .jr-t{font-size:clamp(19px,1.6vw,24px)}
.jr-m{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.jr-after .crumbs{display:none}
.jr-after .coll-head{padding-top:clamp(36px,4vw,56px)}
.jr-after .coll-head .h2{font-size:clamp(34px,4.4vw,58px)}
.jr-after .coll-head .h2 em{font-style:italic;color:var(--berry)}

/* blog cards */
.blog-grid{gap:clamp(28px,3vw,44px) clamp(16px,2vw,28px)}
.post{gap:10px}
.post-img{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--tint)}
.post-img img,.post-img .post-ph{aspect-ratio:4/5!important;width:100%;object-fit:cover;object-position:center 20%;border-radius:0!important;transition:transform 1.2s var(--ease)}
.post:hover .post-img img{transform:scale(1.05)}
.post-pill{position:absolute;left:14px;top:14px}
.post .eyebrow{color:var(--muted);margin-top:4px}
.post h3{font-size:clamp(21px,1.8vw,26px);line-height:1.18;letter-spacing:-.01em}
.post h3 a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.post:hover h3 a{background-size:100% 1px}
.post p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-more{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--berry);font-weight:600}

/* article */
.art-head h1{font-size:clamp(38px,5vw,68px);letter-spacing:-.02em;line-height:1.02}
.art-img{position:relative;border-radius:var(--r-lg);overflow:hidden;margin:28px 0;box-shadow:var(--shadow)}
.art-img img{width:100%;max-height:640px;object-fit:cover;object-position:center 20%;display:block}
.art-badge{position:absolute;right:18px;bottom:18px;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:#f3d28a;color:#2a0a1c;font-family:var(--display);font-style:italic;font-size:17px;line-height:1;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);transform:rotate(-8deg)}
.art-badge em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.entry h2{font-size:clamp(28px,3vw,38px);letter-spacing:-.01em;margin-top:1.6em}
.entry a{color:var(--berry);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.story-shop{margin:32px 0;padding:22px;border-radius:var(--r-lg);background:linear-gradient(160deg,#fff7f2,#f8ecef);border:1px solid var(--line)}
.story-shop .eyebrow{display:block;margin-bottom:14px;color:var(--berry)}
.story-grid{grid-template-columns:repeat(3,1fr)!important;gap:16px!important}
.story-shop .card a{text-decoration:none;color:inherit}
.toc{border-radius:var(--r-md)}

@media (max-width:860px){
  .jr-grid{grid-template-columns:1fr}
  .jr-side{grid-template-columns:1fr 1fr}
  .jr-mini{min-height:220px}.jr-mini .jr-t{font-size:17px}
  .jr-word{font-size:34vw}
  .story-grid{grid-template-columns:1fr 1fr!important}
  .art-badge{width:78px;height:78px;font-size:13px;right:12px;bottom:12px}
}
.jr-hide>.eyebrow,.jr-hide .coll-desc{display:none}
.jr-after .coll-head{padding-top:clamp(28px,3vw,44px)}

/* Footer: big wordmark no longer clipped (descenders of "y"), more room at the very bottom */
.bigword{line-height:1.08;padding:.02em 0 .14em;overflow:visible;overflow-x:clip;margin-top:28px}
footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
footer .sm{margin-top:20px;padding-bottom:6px}
@media (max-width:860px){
  .bigword{font-size:23vw;margin-top:22px}
  footer .sm{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:64px} /* clear the WhatsApp button */
}

/* product options: highlight the option the shopper still has to choose */
.size-btns.need{animation:omm-need .6s ease 2}
.size-btns.need button:not([disabled]){border-color:var(--berry)!important}
@keyframes omm-need{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
