:root{--paper:#f6f3eb;--ink:#18251d;--green:#152b22;--line:#c9c9b9;--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",Arial,sans}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans)}button,input,select,textarea{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer;background:none;border:0;padding:0}button:disabled{cursor:default;opacity:.5}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #82a878;outline-offset:4px}header{height:83px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand img{width:136px;display:block}nav,.actions{display:flex;gap:clamp(13px,3vw,44px);align-items:center}nav a:hover,footer button:hover{text-decoration:underline}.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 54vw, 880px);
  background: var(--green);
  color: #f8f5eb;
}
.hero-copy {
  width: min(41vw, 660px);
  padding: clamp(45px, 7vw, 110px) 0 clamp(45px, 7vw, 110px) 6vw;
}
.eyebrow, figcaption, .card small, .regions span {font-size:.71rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hero h1, h2, h3 {font-family:var(--serif);font-weight:400;margin:0;line-height:.96}
.hero h1 {font-size:clamp(52px, 6.8vw, 124px);letter-spacing:-.025em;margin:20px 0}
.hero p {max-width:380px;color:#e0e4d6;margin:0 0 29px}
.hero figure {
  position: absolute;
  z-index: -1;
  inset: 0;
  margin: 0;
}
.hero figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.hero figure::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(9, 24, 17, .92), rgba(9, 24, 17, .79) 23%, transparent 55%);
}
.button{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;background:var(--green);color:white;border:1px solid transparent;min-height:47px}.button.light{background:var(--paper);color:var(--ink)}.button:hover:not(:disabled){filter:brightness(1.15)}.section{padding:76px 6vw;scroll-margin-top:12px}.section-top{display:flex;align-items:end;justify-content:space-between;gap:20px}.section-top p{max-width:300px;margin:0}.section h2{font-size:clamp(54px,7vw,104px);margin:.08em 0 .16em}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.filters button{border:1px solid var(--line);border-radius:30px;padding:7px 17px}.filters button[aria-pressed=true]{background:var(--green);color:white}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{text-align:left;display:block;width:100%;min-width:0}.card-media{aspect-ratio:1.22;display:grid;place-items:center;background:#e7e8df;overflow:hidden}.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.card:hover img{transform:scale(1.05)}.card-media span{color:#46574a;font:italic clamp(21px,3vw,38px) var(--serif)}.card-info{padding:13px 0 22px;border-bottom:1px solid var(--line)}.card-name{font:clamp(26px,3vw,40px) var(--serif);display:block}.card small{letter-spacing:.08em}.origin{background:#e4e8dc}.origin-lead,.private>p{max-width:580px}.regions{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:35px}.regions article{border-top:1px solid #8b9d8d;padding-top:18px}.regions h3{font-size:52px;margin:10px 0}.regions p{max-width:400px}.private{background:#172b23;color:var(--paper)}.private .card-media{background:#254238}.private .card-media span{color:#dce5d5}.private .grid{margin-top:28px}footer{padding:28px 6vw;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}footer a{letter-spacing:.17em}dialog{width:min(92vw,650px);max-height:90dvh;border:1px solid var(--line);padding:25px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#0b1813ab}dialog h2{font-size:52px;margin:15px 0}dialog h3{font-size:30px}dialog p{margin:10px 0 17px}.close{display:block;margin-left:auto;font-size:25px;line-height:1;padding:4px 10px}.detail-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px}.detail-layout img{width:100%;display:block}.detail-layout figure{margin:0}.detail-layout figcaption{margin-top:8px}.control{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0}.control input,.control select{padding:8px;border:1px solid var(--line);background:white}.under{text-decoration:underline}.cart-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}textarea{display:block;width:100%;min-height:110px;background:#fff;border:1px solid var(--line);padding:10px;margin:10px 0}.notes{font-size:.83rem}.cart-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}.cart-actions .under{min-height:44px}@media(max-width:680px){header{height:auto;padding:12px 4vw;flex-wrap:wrap;gap:10px}.brand img{width:110px}nav{order:3;width:100%;justify-content:center;gap:24px}header button{min-height:36px}.section{padding:46px 5vw}.section-top{display:block}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.regions{gap:14px}.detail-layout{grid-template-columns:1fr}.detail-layout figure img{max-height:220px;object-fit:contain}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

@media (max-width: 820px) {
  .hero {
    min-height: 0;
    padding-top: clamp(245px, 58vw, 420px);
  }
  .hero-copy {
    width: auto;
    padding: 0 6vw 44px;
  }
  .hero h1 {
    font-size: clamp(56px, 11vw, 88px);
  }
  .hero figure {
    bottom: auto;
    height: clamp(290px, 67vw, 490px);
  }
  .hero figure img {
    object-position: center 43%;
  }
  .hero figure::after {
    background: linear-gradient(180deg, transparent 66%, var(--green));
  }
}

.hero .hero-cta {
  min-height: 48px;
  gap: 12px;
  padding-inline: 20px 23px;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  transition: background-color 160ms ease-out;
}
.hero-cta-arrow {
  display: inline-block;
  transition: transform 160ms ease-out;
}
.hero .hero-cta:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .hero .hero-cta:hover {
    background: #eae5d9;
    filter: none;
  }
  .hero-cta:hover .hero-cta-arrow { transform: translateX(3px); }
}
.hero .hero-cta:active {
  background: #ddd6c6;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta:hover .hero-cta-arrow { transform: none; }
}

:root {
  --paper: #f8f5ed;
  --ink: #1b2c24;
  --green: #15382a;
  --line: #d4cbb8;
  --serif: "Cormorant Garamond", Georgia, serif;
  --motion: 180ms ease-out;
  --header-height: 78px;
}
body { font-size: 16px; }
[hidden] { display: none !important; }
.site-header {
  position: sticky;
  z-index: 3;
  top: 0;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding-inline: clamp(20px, 5vw, 88px);
  background: var(--paper);
}
.site-header .brand { justify-self: start; }
.site-header .actions { justify-self: end; gap: 8px; }
.site-header nav { gap: clamp(6px, 2vw, 32px); }
.site-header nav a {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  padding-inline: 10px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}
.site-header nav a::after {
  position: absolute;
  inset: auto 10px 5px;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transition: transform var(--motion);
}
.site-header nav a[aria-current]::after,
.site-header nav a:focus-visible::after { transform: scaleX(1); }
.actions button, .close, .filters button, button.under, #footGuide {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #bcb5a4;
  border-radius: 3px;
  padding: 8px 14px;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--motion), border-color var(--motion), color var(--motion);
}
#bag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--green);
  color: var(--paper);
  border-color: var(--green);
}
#bag::before {
  content: "";
  width: 11px;
  height: 10px;
  border: 1px solid currentColor;
  border-radius: 1px 1px 3px 3px;
  box-shadow: 0 -4px 0 -2px currentColor;
}
#inicio, .section { scroll-margin-top: calc(var(--header-height) + 12px); }
.hero { min-height: clamp(560px, 49vw, 820px); }
.hero-copy { width: min(43vw, 660px); }
.hero h1 {
  font-size: clamp(60px, 7.1vw, 124px);
  line-height: .88;
  font-weight: 500;
  letter-spacing: -.042em;
}
.hero p { line-height: 1.6; }
.eyebrow { letter-spacing: .17em; }
.section { padding: clamp(58px, 7vw, 112px) clamp(20px, 6vw, 112px); }
.section h2 { font-size: clamp(52px, 6.2vw, 99px); font-weight: 500; letter-spacing: -.04em; }
.section-top { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.section-top p { padding-bottom: 4px; }
.filters { gap: 8px; margin-block: 22px 28px; }
.filters button { border-radius: 3px; padding-inline: 17px; }
.filters button[aria-pressed=true] { background: var(--green); color: var(--paper); border-color: var(--green); }
.grid { gap: clamp(14px, 2.2vw, 32px); }
.card {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: #fdfaf3;
  transition: border-color var(--motion), box-shadow var(--motion);
}
.card-media { aspect-ratio: 1.18; background: #ece9df; }
.card-info { padding: 15px 17px 18px; border: 0; }
.card-info small { display: block; }
.card-name { font-size: clamp(25px, 3vw, 42px); line-height: 1.08; margin-block: 4px 7px; }
.card-info > span:last-child { display: block; font-size: .88rem; }
.card-media img { transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
.card:hover img { transform: none; }
.origin { background: #e9ecdf; }
.regions { gap: clamp(16px, 4vw, 64px); }
.regions h3 { font-size: clamp(39px, 5vw, 70px); }
.private { background: #112c22; }
.private .card { background: #19392d; border-color: #4d6758; }
.private .card-media { background: #214235; }
.private .card-info { color: #f8f5ed; }
footer { align-items: center; }
.button { min-height: 48px; border-radius: 3px; font-weight: 600; transition: background-color var(--motion), color var(--motion); }
.button:disabled { opacity: 1; color: #47584c; background: #e3e8df; border-color: #a9b8a9; }
.button:hover:not(:disabled) { filter: none; }
.button:active:not(:disabled), .actions button:active, .filters button:active,
.close:active, button.under:active, #footGuide:active { box-shadow: inset 0 0 0 2px currentColor; }
.under[href] { text-underline-offset: 4px; }
dialog {
  width: min(94vw, 720px);
  padding: clamp(18px, 4vw, 36px);
  border-radius: 5px;
  box-shadow: 0 24px 90px #071b1540;
}
dialog h2 { font-size: clamp(39px, 6vw, 62px); letter-spacing: -.035em; }
dialog h3 { font-size: 33px; }
.close { padding: 0; font-size: 24px; line-height: 1; }
.control input, .control select, textarea {
  max-width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid #a7a995;
  border-radius: 3px;
  background-color: #fffdf7;
}
.control select {
  appearance: none;
  padding-right: 38px;
  background-image: linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-size: 6px 6px;
  background-position: right 18px center, right 12px center;
  background-repeat: no-repeat;
}
#mm { appearance: textfield; width: min(100%, 170px); }
#mm::-webkit-inner-spin-button, #mm::-webkit-outer-spin-button { appearance: none; margin: 0; }
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #2d6349;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--paper);
}
@media (hover: hover) and (pointer: fine) {
  .site-header nav a:hover::after { transform: scaleX(1); }
  .actions button:not(#bag):hover, .close:hover, button.under:hover, #footGuide:hover,
  .filters button[aria-pressed=false]:hover { background: #e8e6db; border-color: #738474; }
  .button:not(.light):hover:not(:disabled), #bag:hover { background: #24523e; }
  .card:hover { border-color: #778e7d; box-shadow: 0 6px 20px #14291e13; }
  .card:hover img { transform: scale(1.025); }
}
@media (max-width: 820px) {
  :root { --header-height: 113px; }
  .site-header { grid-template-columns: 1fr auto; grid-template-rows: 54px 44px; gap: 0 10px; padding: 6px 5vw; }
  .site-header nav { grid-column: 1 / -1; justify-content: space-between; width: 100%; gap: 3px; }
  .site-header nav a { padding-inline: 7px; text-align: center; }
  .hero { min-height: 0; }
  .hero-copy { width: auto; }
  .hero h1 { font-size: clamp(51px, 10vw, 85px); }
}
@media (max-width: 440px) {
  .site-header nav a, .actions button { font-size: .79rem; }
  .actions button { padding-inline: 9px; }
  .site-header .brand img { width: 108px; }
  .filters button { padding-inline: 11px; }
  .card-info { padding: 11px; }
  .card-info > span:last-child { font-size: .81rem; }
  .private .grid { grid-template-columns: 1fr; }
  .private .card-media { aspect-ratio: 2.5; }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover img { transform: none; }
}

/* Dark surfaces and illuminated controls */
:root {
  --forest-base: #0b1511;
  --forest-raised: #15261d;
  --forest-ink: #f2f3e8;
  --leaf: #d8efa1;
  --leaf-soft: #b9d78d;
  --forest-border: #65765a;
}
body {
  background: var(--forest-base);
}
.site-header, footer {
  background: #101d16;
  color: var(--forest-ink);
  border-color: #304438;
}
.site-header .brand img {
  filter: grayscale(1) brightness(0) invert(1);
}
.site-header nav a[aria-current] {
  color: var(--leaf);
}
#joyas, .origin, .private {
  color: var(--forest-ink);
  background:
    radial-gradient(ellipse at 85% 0%, #263e26 0%, transparent 56%),
    var(--forest-base);
}
.origin {
  background:
    radial-gradient(ellipse at 8% 0%, #2a3c23 0%, transparent 63%),
    #111f17;
}
.private {
  background:
    radial-gradient(ellipse at 90% 0%, #263a25 0%, transparent 55%),
    #0d1913;
}
.section-top, .regions article {
  border-color: var(--forest-border);
}
.section .card {
  color: var(--forest-ink);
  border-color: #425840;
  background: var(--forest-raised);
}
.section .card-media {
  background: radial-gradient(ellipse at 50% 15%, #304730, #15261d 72%);
}
.section .card-media span {
  color: #d1dfc7;
}
.section .card-info small {
  color: var(--leaf-soft);
}
.actions button, .filters button, #footGuide {
  color: var(--forest-ink);
  background: linear-gradient(145deg, #243529, #14241c);
  border-color: var(--forest-border);
  box-shadow: inset 0 1px #ffffff18;
}
.actions button, .filters button, #footGuide,
.hero .hero-cta, .button, .close, button.under {
  border-radius: 999px;
  transition: background-color var(--motion), border-color var(--motion), color var(--motion), box-shadow var(--motion);
}
#bag, .hero .hero-cta, .filters button[aria-pressed=true] {
  color: #172515;
  background: linear-gradient(115deg, #badd8e, #e6f3ac);
  border-color: #d2e89a;
  box-shadow: 0 0 16px #badf6940, inset 0 1px #ffffff65;
}
dialog .button:not(:disabled) {
  border-color: #244c37;
  background: linear-gradient(125deg, #244c37, #15382a);
  box-shadow: inset 0 1px #ffffff32;
}
.site-header :focus-visible, .section :focus-visible, footer :focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--forest-base);
}
@media (hover: hover) and (pointer: fine) {
  .actions button:not(#bag):hover, .filters button[aria-pressed=false]:hover, #footGuide:hover {
    color: var(--leaf);
    background: #2b3f2d;
    border-color: var(--leaf-soft);
    box-shadow: 0 0 14px #badf6930, inset 0 1px #ffffff26;
  }
  .hero .hero-cta:hover, #bag:hover {
    color: #172515;
    background: linear-gradient(115deg, #d1ed9b, #f1f8c2);
    box-shadow: 0 0 24px #cde88b75, inset 0 1px #ffffff88;
  }
  .section .card:hover {
    border-color: var(--leaf-soft);
    box-shadow: 0 4px 25px #badf6922;
  }
  dialog .button:not(:disabled):hover {
    background: #29563d;
    box-shadow: 0 0 15px #48745643;
  }
}
.hero .hero-cta:active, #bag:active {
  background: #c3df8b;
  box-shadow: inset 0 1px 5px #2a421d55;
}

.section-top .origin-entry { display: block; width: fit-content; margin-top: 8px; color: #e4f2c7; text-underline-offset: 5px; }
.origin-entry:hover { text-decoration: underline; }
footer .origin-entry { letter-spacing: normal; color: var(--leaf); }
.product-gallery{min-width:0}
.product-gallery [data-gallery-photo] > figure > img,
.product-gallery figure[data-gallery-photo] > img{
  width:100%;
  height:auto;
  max-height:440px;
  aspect-ratio:4/5;
  object-fit:contain;
  background:#f7f7f4;
}
.product-gallery-controls{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.product-gallery-controls button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:4px 11px 4px 4px;
  border:1px solid #a7aa9a;
  border-radius:7px;
  background:#f7f7f4;
  color:#172e23;
  font:inherit;
  font-size:.85rem;
  cursor:pointer;
}
.product-gallery-controls button[aria-pressed="true"]{border-color:#204739;background:#204739;color:#fff}
.product-gallery-controls button:focus-visible{outline:2px solid #204739;outline-offset:3px}
.product-gallery-controls button img{width:34px;height:34px;border-radius:4px;object-fit:cover}
.product-gallery-controls button:first-child img{object-fit:contain;background:white}
@media(max-width:650px){
  .product-gallery [data-gallery-photo] > figure > img,
  .product-gallery figure[data-gallery-photo] > img{max-height:320px}
}

/* Product cards and selection */
.visually-hidden,
.ring-options input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.section .jewel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #17281f;
}
.section .card-media--studio {
  position: relative;
  aspect-ratio: 5 / 4;
  background: #fafafa;
}
.card-media--studio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.jewel-card .card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 2vw, 23px);
}
.jewel-card .card-category {
  font-size: .65rem;
  letter-spacing: .13em;
}
.jewel-card .card-name {
  margin: 7px 0 14px;
  font-size: clamp(1.45rem, 2.65vw, 2.5rem);
}
.card-open {
  text-align: left;
  line-height: inherit;
}
.card-open::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.jewel-card:has(.card-open:focus-visible) {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
}
.jewel-card .card-open:focus-visible { outline: 0; box-shadow: none; }
.card-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #405047;
}
.jewel-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 6px;
  font-weight: 600;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  font-size: clamp(.94rem, 1.8vw, 1.3rem);
  line-height: 1.25;
}
.jewel-price small { font-size: .62rem; letter-spacing: .1em; }
.price-request { color: #d4ded0; font-size: .82rem; line-height: 1.25; }
.card-add {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #91a97a;
  border-radius: 50%;
  background: #293e2c;
  color: var(--leaf);
  transition: color var(--motion), background-color var(--motion), border-color var(--motion);
}
.card-add span { font-size: 25px; line-height: 1; font-weight: 400; }
.card-add:active { color: #15271a; background: #b9d78d; }
#footGuide { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 15px; letter-spacing: normal; }
#detail { width: min(94vw, 880px); }
#detail .close { width: 44px; height: 44px; }
.detail-heading { margin-bottom: 18px; }
.detail-heading h2 { margin: 2px 0 0; line-height: .98; }
.detail-info { min-width: 0; }
.detail-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.detail-price .jewel-price { font-size: 1.65rem; }
.detail-price > small { color: #48574c; font-size: .75rem; }
.detail-price .price-request { color: #304939; font-size: 1rem; font-weight: 600; }
.detail-info .detail-description { margin: 12px 0 16px; }
.ring-options { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.ring-options legend { padding: 0; font-weight: 700; }
.size-guide-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: #28513a; text-decoration: underline; text-underline-offset: 4px; }
.size-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(44px,1fr)); gap: 6px; }
.ring-options label { position: relative; display: block; }
.ring-options label span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 5px;
  border: 1px solid #899a88;
  border-radius: 7px;
  background: #fffdf7;
  color: #253b2e;
  cursor: pointer;
  font-size: .85rem;
}
.ring-options input:checked + span { background: #214735; border-color: #214735; color: #fff; }
.ring-options input:focus-visible + span { outline: 2px solid #28513a; outline-offset: 2px; }
.ring-options .size-help { margin-top: 8px; }
.ring-options .size-help span { padding-inline: 12px; }
.detail-add { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; }
.detail-add span { font-size: 1.4rem; font-weight: 400; }
.detail-info .detail-origin { margin: 13px 0 0; font-size: .82rem; }
@media (hover: hover) and (pointer: fine) {
  .card-add:hover { color: #15271a; background: var(--leaf); border-color: var(--leaf); }
  .ring-options label:hover span { border-color: #244c37; box-shadow: inset 0 0 0 1px #244c37; }
}
@media (max-width: 440px) {
  .jewel-card .card-info { padding: 10px; }
  .jewel-card .card-name { font-size: 1.35rem; }
  .card-buy { gap: 4px; }
  .price-request { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .section .jewel-card img, .card-add { transition: none; }
}
.card-media--fill img { object-fit: cover; }
.cart-price { margin-top: 4px; }
.cart-price .price-request { color: #425847; }
.cart-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; padding-block: 10px; border-block: 1px solid var(--line); }

/* Catalog quick add */
#products .jewel-card {
  border-color: #3c5142;
  background: linear-gradient(145deg, #1c3024, #13241b 80%);
}
#products .card-category {
  color: #b8cbb8;
  font-weight: 600;
}
#products .card-name { margin: 6px 0 12px; }
#products .card-buy { min-height: 50px; padding-top: 0; border-top: 0; }
#products .jewel-price {
  color: #fff9e9;
  font-size: clamp(1.02rem, 2vw, 1.5rem);
}
#products .jewel-price small { color: #bfd09f; font-size: .63rem; }
#products .card-add {
  color: #172515;
  border-color: #c2d89e;
  background: #d8e9b6;
  box-shadow: inset 0 1px #ffffff75;
}
#products .card-add:hover { background: #eef8ce; }
#products .card-add:active { background: #b7ce91; }
#quickAdd { width: min(94vw, 460px); }
#quickAdd .close { width: 44px; height: 44px; }
.quick-product {
  display: grid;
  grid-template-columns: 66px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  margin: 4px 0 20px;
}
.quick-product img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  background: #fafafa;
  border-radius: 8px;
}
.quick-product h2 { margin: 0 0 4px; font-size: clamp(1.9rem, 6vw, 2.7rem); line-height: 1; }
.quick-product .price-request { color: #425847; }
.selection-notice {
  position: fixed;
  z-index: 20;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(440px,calc(100vw - 32px));
  padding: 9px 12px;
  border: 1px solid #748669;
  border-radius: 12px;
  background: #17291f;
  color: #faf6ea;
  box-shadow: 0 12px 35px #06150cb0;
}
.selection-notice[hidden] { display: none; }
.selection-notice p { margin: 0; font-size: .86rem; }
.selection-notice-icon { color: #d8e9b6; }
#viewSelection {
  flex-shrink: 0;
  min-height: 44px;
  padding-inline: 8px;
  color: #e4f3be;
  font-weight: 600;
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#viewSelection:focus-visible { outline-color: #e4f3be; box-shadow: none; }

/* Product detail */
:is(#detail, #quickAdd) {
  --detail-ink: #f7f3e7;
  --detail-muted: #bdcbbd;
  --detail-line: #647968;
  --detail-accent: #deedb5;
  position: fixed;
  background: radial-gradient(ellipse at 100% 0%, #293f2d 0%, #15271e 47%, #0f1e17 100%);
  color: var(--detail-ink);
  border: 1px solid #536c57;
  border-radius: 22px;
  box-shadow: 0 25px 90px #07120ee0;
  padding: clamp(16px, 3vw, 34px);
  max-height: 92dvh;
}
#detail { width: min(95vw, 980px); }
:is(#detail, #quickAdd)::backdrop { background: #050d09b8; backdrop-filter: blur(5px); }
:is(#detail, #quickAdd) .close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: #172b21;
  border: 1px solid var(--detail-line);
  color: var(--detail-ink);
}
:is(#detail, #quickAdd) :focus-visible {
  outline: 2px solid var(--detail-accent);
  outline-offset: 3px;
  box-shadow: none;
}
#detail .jewel-detail.detail-layout {
  grid-template-columns: minmax(0,1fr) minmax(0,.93fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}
#detail .detail-heading {
  display: block;
  height: auto;
  padding: 0;
  border: 0;
  margin: 4px 40px 13px 0;
  background: transparent;
}
#detail .detail-heading .eyebrow { color: var(--detail-accent); }
#detail .detail-heading h2 {
  margin-top: 5px;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: .92;
}
#detail .detail-price .jewel-price { font-size: clamp(1.45rem, 3vw, 2rem); }
:is(#detail, #quickAdd) .jewel-price small { color: var(--detail-accent); }
#detail .detail-price > small, #detail .detail-description,
:is(#detail, #quickAdd) .price-request { color: var(--detail-muted); }
#detail .detail-description { margin: 10px 0 16px; }
#detail .gallery-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid #738073;
  border-radius: 15px;
  background: #21352a;
}
#detail .gallery-stage figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.06;
  max-height: 490px;
  background: #fafafa;
}
#detail .gallery-stage [data-gallery-photo="1"] img { object-fit: cover; }
#detail .gallery-stage figcaption {
  display: flex;
  align-items: center;
  min-height: 35px;
  margin: 0;
  padding: 6px 10px;
  color: #e0eadb;
  letter-spacing: .08em;
  font-size: .65rem;
}
.gallery-arrows {
  position: absolute;
  inset: auto 8px 44px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.gallery-arrows button {
  width: 44px;
  height: 44px;
  border: 1px solid #849888;
  border-radius: 50%;
  background: #16281ff2;
  color: #faf9ee;
  font: 1.55rem/1 var(--sans);
  pointer-events: auto;
}
#detail .product-gallery-controls { display: grid; grid-template-columns: 1fr 1fr; }
#detail .product-gallery-controls button {
  min-height: 48px;
  background: #21352a;
  color: var(--detail-ink);
  border-color: var(--detail-line);
  border-radius: 10px;
}
#detail .product-gallery-controls button[aria-pressed="true"] {
  background: var(--detail-accent);
  color: #1c3326;
  border-color: var(--detail-accent);
  font-weight: 700;
}
:is(#detail, #quickAdd) .size-guide-link { color: var(--detail-accent); min-height: 40px; font-size: .86rem; }
:is(#detail, #quickAdd) .ring-options legend { font-size: .93rem; }
:is(#detail, #quickAdd) .ring-options label span {
  border-color: var(--detail-line);
  color: var(--detail-ink);
  background: #20352a;
  border-radius: 9px;
}
:is(#detail, #quickAdd) .ring-options input:checked + span {
  background: var(--detail-accent);
  color: #172b1e;
  border-color: var(--detail-accent);
  font-weight: 700;
  box-shadow: 0 0 12px #b7d58526;
}
:is(#detail, #quickAdd) .ring-options input:focus-visible + span { outline-color: var(--detail-accent); }
:is(#detail, #quickAdd) .size-help span { background: transparent; border-style: dashed; color: var(--detail-muted); }
:is(#detail, #quickAdd) .detail-add {
  min-height: 54px;
  padding: 5px 6px 5px 16px;
  border-radius: 12px;
}
:is(#detail, #quickAdd) .detail-add span[data-add-label] { font-size: .94rem; font-weight: 700; }
:is(#detail, #quickAdd) .detail-add:not(:disabled) {
  color: #12291c;
  background: linear-gradient(120deg, #c2da95, #ecf4c4);
  border-color: #d7e8b4;
}
:is(#detail, #quickAdd) .detail-add:disabled {
  background: #26382e;
  border-color: var(--detail-line);
  color: #d3ddd0;
}
.detail-add-icon {
  display: grid;
  place-items: center;
  min-width: 39px;
  height: 39px;
  border-radius: 8px;
  background: #19341b19;
}
.detail-add:disabled .detail-add-icon { opacity: .55; }
#detail .detail-origin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 59px;
  margin: 13px 0 0;
  padding: 7px 12px;
  border: 1px solid #58725e;
  border-radius: 10px;
  color: var(--detail-ink);
}
.detail-origin small, .detail-origin strong { display: block; }
.detail-origin small { color: #c0cfbd; font-size: .69rem; }
.detail-origin strong { font-weight: 600; }
:is(#detail, #quickAdd) :is(.close, .ring-options label span, .gallery-arrows button, .detail-origin, .product-gallery-controls button) {
  transition: color var(--motion), background-color var(--motion), border-color var(--motion), transform var(--motion), box-shadow var(--motion);
}
@media (hover: hover) and (pointer: fine) {
  :is(#detail, #quickAdd) :is(.close:hover, .gallery-arrows button:hover, .product-gallery-controls button[aria-pressed="false"]:hover),
  :is(#detail, #quickAdd) .ring-options label:hover input:not(:checked) + span,
  #detail .detail-origin:hover { background: #344e39; border-color: #b8cc98; }
  :is(#detail, #quickAdd) .detail-add:not(:disabled):hover {
    background: #f1f8d0;
    box-shadow: 0 0 18px #d3e89345;
  }
}
:is(#detail, #quickAdd) :is(.close, .gallery-arrows button, .product-gallery-controls button, .detail-add:not(:disabled), .ring-options label span):active {
  transform: scale(.97);
}
@media (max-width: 680px) {
  #detail .jewel-detail.detail-layout { grid-template-columns: 1fr; }
  #detail .product-gallery { margin-top: 44px; }
  #detail .gallery-stage figure img { max-height: 330px; }
  #detail .detail-heading { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#detail, #quickAdd) :is(button, a, .ring-options label span) { transition: none; }
  :is(#detail, #quickAdd) :is(button, .ring-options label span):active { transform: none; }
}

/* Match the bottom of the cover to the opening colors of the catalog. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: clamp(115px, 23vw, 270px);
  pointer-events: none;
  background: radial-gradient(ellipse 82% 540px at 85% 100%, #263e26, transparent 75%), var(--forest-base);
  mask-image: linear-gradient(to bottom, transparent, #000 96%);
}
#joyas {
  background: radial-gradient(ellipse 82% 540px at 85% 0%, #263e26, transparent 75%), var(--forest-base);
}
@media (max-width: 820px) {
  .hero::after { height: clamp(44px, 12vw, 96px); }
}

/* Catalog */
.catalog-tools {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 24px 0 clamp(18px, 3vw, 36px);
}
.catalog-tools .filters { margin: 0; }
.catalog-currency { display: grid; justify-items: end; gap: 5px; }
.catalog-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.catalog-rotation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid #65765a;
  border-radius: 999px;
  background: #16291f;
  color: #e4ebdb;
  font-size: .78rem;
  font-weight: 600;
}
.catalog-rotation:active { background: #304736; }
.rotation-icon {
  width: 9px;
  height: 12px;
  border-inline: 2px solid currentColor;
}
.catalog-rotation[data-paused="true"] .rotation-icon {
  width: 10px;
  height: 12px;
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.currency-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #65765a;
  border-radius: 999px;
  background: #16291f;
}
.currency-switch button {
  min-height: 44px;
  min-width: 52px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #e4ebdb;
  font-size: .8rem;
  font-weight: 700;
}
.currency-switch button[aria-pressed="true"] { background: #d8e9b6; color: #172515; }
.currency-switch button:hover:not([aria-pressed="true"]) { background: #304736; }
#currency-note { margin: 0; color: #c9d8c2; font-size: .73rem; }
#products { row-gap: clamp(25px, 4vw, 56px); }
#products .jewel-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
#products .card-media--studio {
  aspect-ratio: 1.04;
  border-radius: 12px;
  background: #f8f8f5;
}
#products .card-media--studio > img {
  transform: none;
  object-fit: cover;
}
#products [data-card-id="C01"] .card-media--studio {
  aspect-ratio: .87;
}
#products .card-worn {
  opacity: 0;
  object-fit: cover;
  object-position: center 53%;
  transition: opacity 220ms ease-out;
}
#products .show-worn .card-worn { opacity: 1; }
#products .card-info {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 13px 1px 0;
}
#products .card-category {
  color: #b5c6b0;
  font-size: .66rem;
  letter-spacing: .095em;
}
#products .card-name {
  margin: 3px 0 8px;
  font-size: clamp(1.45rem, 2.75vw, 2.55rem);
  line-height: 1.02;
}
#products .card-open::after { border-radius: 12px; }
#products .jewel-price { font-size: clamp(.96rem, 1.35vw, 1.2rem); }
#products .card-add { margin-top: 10px; }
.ui-plus, .ui-cross {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  vertical-align: middle;
}
.ui-cross { transform: rotate(45deg); }
.ui-plus::before, .ui-plus::after, .ui-cross::before, .ui-cross::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.ui-plus::after, .ui-cross::after { transform: translate(-50%, -50%) rotate(90deg); }
.ui-arrow, .ui-chevron, .ui-check {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}
.ui-arrow::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 1px;
  width: 11px;
  border-top: 1.5px solid currentColor;
}
.ui-arrow::after, .ui-chevron::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 2px;
  width: 5px;
  height: 5px;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}
.ui-arrow-up { transform: rotate(-45deg); }
.ui-chevron-back { transform: rotate(180deg); }
.ui-check::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#products .card-media--studio {
  outline: 1px solid #c6e5b43b;
  box-shadow: 0 6px 22px #02090565;
  transition: outline-color var(--motion), box-shadow var(--motion);
}
#products .card-media--studio::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 #e8ffc450;
}
#products .card-view-toggle {
  position: absolute;
  z-index: 1;
  inset: 2px 6px auto auto;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
}
.card-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 3px 8px;
  border: 1px solid #d4e2c57a;
  border-radius: 999px;
  background: #14261ee8;
  color: #f3f6ec;
  box-shadow: 0 2px 7px #06150c29;
  backdrop-filter: blur(8px);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  transition: color var(--motion), background-color var(--motion), transform var(--motion);
}
.card-view-icon {
  position: relative;
  width: 12px;
  height: 11px;
}
.card-view-icon::before, .card-view-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.card-view-icon::before { inset: 0 auto auto 0; opacity: .55; }
.card-view-icon::after { inset: auto 0 0 auto; background: #14261e; }
.card-view-toggle:active .card-view-chip { transform: scale(.95); }
#products .card-view-toggle:focus-visible { outline-offset: 0; }
@media (hover:hover) and (pointer:fine) {
  #products .jewel-card:is(:hover, :focus-within) .card-media--studio {
    outline-color: #b9dc958a;
    box-shadow: 0 0 16px #b4d9882f, 0 8px 24px #02090560;
  }
  .card-view-toggle:hover .card-view-chip { color: #e7f3c7; background: #274132; }
}
@media (prefers-reduced-motion: reduce) {
  .card-view-toggle:active .card-view-chip { transform: none; }
  #products .card-worn { transition: none; }
}
@media (max-width: 540px) {
  .catalog-tools { flex-direction: column; align-items: stretch; gap: 12px; }
  .catalog-currency { justify-items: start; }
  .catalog-options { width: 100%; justify-content: space-between; }
  .catalog-tools .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-tools .filters button { min-height: 44px; border-radius: 999px; }
  #products .card-media--studio { aspect-ratio: .95; }
  #products .card-info { align-items: center; gap: 4px 6px; }
  #products .card-text { display: contents; }
  #products :is(.card-category, .card-name) { grid-column: 1 / -1; }
  #products .card-name { margin: 0; font-size: clamp(1.27rem, 5.6vw, 1.6rem); }
  #products .card-add { width: 44px; height: 44px; margin: 0; }
  #products .card-view-toggle { inset: 3px 5px auto auto; }
  #products .card-view-chip { min-height: 30px; padding-inline: 8px; }
  #cart .cart-actions { display: grid; gap: 8px; }
  #cart .cart-actions button { min-height: 44px; border-radius: 999px; }
  #cart .cart-actions:has(#send:disabled) #copy {
    background: #d8e9b6;
    color: #172515;
  }
}
.private-entry { display: inline-flex; gap: 18px; margin-top: 16px; border: 1px solid #819679; }