/* shop.everydaymotivation.org – the same tokens, fonts and chrome as the home page (prototype/living-garden), plus the shop's own
   pieces: the garden hero with the products laid out on its edge, cards, the product page, the bag, the zoom view. */

.sh-root{ --ground:#FFF9EE; --ground-2:#F6EFDF; --paper:#FFFDF8; --ink:#2F2A22; --ink-2:#5A5044; --ink-3:#6F6354; --meadow:#2F6B45; --meadow-2:#245536; --honey:#E39A33; --honey-ink:#9A5A0C; --sun:#F2B544; --stream:#1F6F7A; --blossom:#F2A7BF; --line:rgba(47,42,34,.1);
  --font-display:'Fraunces','Lora',Georgia,serif; --font-body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  --shadow-1:0 1px 2px rgba(74,56,24,.06), 0 10px 30px rgba(74,56,24,.08); --shadow-2:0 2px 4px rgba(74,56,24,.08), 0 24px 60px rgba(74,56,24,.16);
  margin:0; background:var(--ground); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; min-height:100vh; }
.sh-root.is-ko{ --font-display:'Gowun Batang','Nanum Myeongjo',serif; --font-body:'Gowun Dodum','Apple SD Gothic Neo','Malgun Gothic',sans-serif; word-break:keep-all; overflow-wrap:break-word; }
.sh-root *, .sh-root *::before, .sh-root *::after{ box-sizing:border-box; }
.sh-root a{ color:var(--meadow); } .sh-root a:hover{ color:var(--meadow-2); }
.sh-root button, .sh-root input, .sh-root select{ font-family:inherit; font-size:inherit; color:inherit; }
.sh-root :focus-visible{ outline:3px solid rgba(47,107,69,.55); outline-offset:3px; border-radius:12px; }
.sh-root img{ max-width:100%; }
.sh-root [hidden]{ display:none !important; }
.sh-disp{ font-family:var(--font-display); font-variation-settings:"SOFT" 100; font-optical-sizing:auto; font-weight:600; letter-spacing:-.01em; }
.sh-wrap{ max-width:1200px; margin:0 auto; padding-inline:clamp(16px,4vw,40px); }
.sh-wrap-narrow{ max-width:760px; }
.sh-h2{ margin:0 0 10px; font-size:clamp(26px,3vw,34px); line-height:1.15; }
.sh-noscroll{ overflow:hidden; }
.sh-link{ padding:0; border:0; background:none; color:var(--meadow); font-weight:800; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.sh-link:hover{ color:var(--meadow-2); }

/* buttons and chips */
.sh-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 22px; border-radius:14px; border:1.5px solid transparent; font:800 16px/1.2 var(--font-body); text-decoration:none; cursor:pointer; transition:transform .15s ease, background-color .25s, border-color .25s, color .25s, box-shadow .25s; }
.sh-btn:active{ transform:translateY(1px); }
.sh-btn small{ font-weight:700; opacity:.8; font-size:13px; }
.sh-root .sh-btn-primary{ background:var(--meadow); color:#FFFDF8; box-shadow:0 8px 20px rgba(47,107,69,.22); }
.sh-root .sh-btn-primary:hover{ background:var(--meadow-2); color:#FFFDF8; }
.sh-root .sh-btn-soft{ background:rgba(255,253,248,.85); border-color:rgba(47,107,69,.28); color:var(--meadow); }
.sh-root .sh-btn-soft:hover{ border-color:rgba(47,107,69,.55); color:var(--meadow-2); }
.sh-btn[disabled]{ opacity:.55; cursor:default; box-shadow:none; }
.sh-btn.is-busy{ cursor:wait; }
.sh-btn-sm{ min-height:40px; padding:0 16px; font-size:14px; }
.sh-root .sh-chip{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; border:1.5px solid rgba(47,107,69,.26); background:rgba(255,253,248,.84); color:var(--meadow); font:800 14px/1 var(--font-body); cursor:pointer; white-space:nowrap; text-decoration:none; transition:background-color .25s, color .25s, border-color .25s; }
.sh-root .sh-chip:hover{ border-color:rgba(47,107,69,.5); color:var(--meadow); }
.sh-root .sh-chip.is-on{ background:var(--meadow); border-color:var(--meadow); color:#FFFDF8; }
.sh-root .sh-chip-icon{ width:40px; padding:0; justify-content:center; }
.sh-chip svg{ flex:none; }

/* header – the home page's header, with the shop tag and the bag */
.sh-header{ position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top,0px); background:rgba(255,249,238,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:background-color .35s ease, box-shadow .35s ease; }
.sh-header.is-solid{ background:rgba(255,249,238,.93); box-shadow:0 1px 0 rgba(47,42,34,.08), 0 10px 30px rgba(74,56,24,.06); }
.sh-header-in{ max-width:1440px; margin:0 auto; height:64px; display:flex; align-items:center; gap:14px; padding-inline:clamp(14px,3vw,32px); }
.sh-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); min-width:0; flex:none; }
.sh-brand svg{ flex:none; width:34px; height:34px; }
.sh-brand-word{ font-family:var(--font-display); font-variation-settings:"SOFT" 100; font-weight:600; font-size:18px; letter-spacing:-.01em; white-space:nowrap; color:var(--ink); }
.sh-brand-word b{ font-weight:600; color:var(--meadow); }
.sh-brand-word i{ font-style:normal; color:var(--honey-ink); font-size:.8em; }
.sh-brand-tag{ margin-left:4px; padding:3px 9px; border-radius:999px; background:var(--honey); color:var(--ink); font:800 12px/1.4 var(--font-body); letter-spacing:.02em; }
.sh-nav{ display:flex; gap:2px; margin-left:8px; }
.sh-root .sh-nav a{ color:var(--ink-2); text-decoration:none; font-weight:700; font-size:15px; padding:8px 9px; border-radius:10px; white-space:nowrap; }
.sh-root .sh-nav a:hover, .sh-root .sh-nav a[aria-current]{ background:rgba(47,107,69,.08); color:var(--meadow); }
.sh-tools{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.sh-lang{ position:relative; }
.sh-lang-pop{ position:absolute; right:0; top:48px; z-index:45; width:236px; padding:8px; border-radius:18px; background:var(--paper); box-shadow:0 1px 2px rgba(74,56,24,.08), 0 18px 40px rgba(74,56,24,.16); display:flex; flex-direction:column; gap:2px; }
.sh-root .sh-lang-pop a{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:12px; color:var(--ink); font:700 15px/1.2 var(--font-body); text-decoration:none; }
.sh-root .sh-lang-pop a:hover{ background:rgba(47,107,69,.08); }
.sh-root .sh-lang-pop a.is-cur{ color:var(--meadow); background:rgba(47,107,69,.1); }
.sh-lang-pop small{ font-size:12px; color:var(--ink-3); font-weight:700; letter-spacing:.05em; }
.sh-cart-count{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--honey); color:var(--ink); font-size:12px; line-height:20px; text-align:center; }
.sh-root .sh-cart-btn.is-on .sh-cart-count{ background:var(--sun); }
.sh-garden span, .sh-cart-label{ display:inline; }

/* hero: the painted garden with the pieces laid out on its edge */
.sh-hero{ position:relative; overflow:visible; isolation:isolate; margin-top:-64px; padding-top:64px; background:var(--ground); }
.sh-hero-art{ position:absolute; inset:0 0 var(--hero-cut,120px); z-index:-1; background:#F6ECDD url(/img/garden-hero.jpg) 93% 18% / 138% auto no-repeat; -webkit-mask-image:linear-gradient(#000 72%, transparent 100%); mask-image:linear-gradient(#000 72%, transparent 100%); }
.sh-hero-art::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,249,238,.9) 0%, rgba(255,249,238,.84) 26%, rgba(255,249,238,.5) 40%, rgba(255,249,238,.08) 50%, rgba(255,249,238,0) 60%); }
@media (min-width:1700px){ .sh-hero-art{ background-size:cover; background-position:70% 24%; } }
.sh-hero-in{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:24px; min-height:560px; padding-block:48px 24px; }
.sh-hero-copy{ max-width:470px; padding-right:8px; }
.sh-hero-eyebrow{ margin:0 0 14px; display:none; }
.sh-hero h1{ margin:0 0 18px; font-size:clamp(40px,5vw,64px); line-height:1.02; letter-spacing:-.02em; text-wrap:balance; }
.sh-hero-sub{ margin:0 0 26px; max-width:40ch; font-size:18px; color:var(--ink-2); }
.sh-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.sh-hero-table{ position:relative; height:520px; }
.sh-hero-card{ position:absolute; display:block; width:var(--w); aspect-ratio:4 / 5; border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--shadow-2); transform:rotate(var(--r)); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.sh-hero-card img{ display:block; width:100%; height:100%; object-fit:cover; }
.sh-hero-card:hover{ transform:rotate(var(--r)) translateY(-6px) scale(1.02); }
.sh-hero-card-0{ --w:50%; --r:-3deg; left:22%; top:4%; z-index:2; }
.sh-hero-card-1{ --w:46%; --r:4deg; right:-2%; top:0; z-index:1; }
.sh-hero-card-2{ --w:38%; --r:2deg; right:9%; bottom:0; z-index:3; }

/* the supporter line */
.sh-perk{ background:var(--ground-2); border-top:1px solid rgba(227,154,51,.25); border-bottom:1px solid rgba(227,154,51,.25); }
.sh-perk-in{ display:flex; align-items:flex-start; gap:10px; padding-block:12px; color:var(--honey-ink); font-size:14.5px; font-weight:700; line-height:1.45; }
.sh-perk svg{ flex:none; margin-top:2px; }
.sh-perk p{ margin:0; }
.sh-perk a{ color:var(--meadow); font-weight:800; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

/* the story behind the collection */
.sh-pieces{ padding-block:40px 64px; }
.sh-story-in{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px 28px; margin-bottom:26px; }
.sh-story-kicker{ grid-column:1 / -1; margin:0; color:var(--ink-3); font-weight:700; font-size:15px; }
.sh-story-kicker b{ color:var(--ink); }
.sh-story-line{ margin:0; font-style:italic; font-weight:500; font-size:clamp(24px,2.6vw,32px); line-height:1.25; max-width:24ch; }
.sh-story-watch{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px 10px 12px; border-radius:999px; border:1.5px solid rgba(47,107,69,.26); background:rgba(255,253,248,.85); color:var(--meadow); font-weight:800; font-size:15px; text-decoration:none; white-space:nowrap; }
.sh-story-watch small{ font-weight:700; color:var(--ink-3); }
.sh-story-watch:hover{ border-color:rgba(47,107,69,.55); }

/* the toolbar */
.sh-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; margin:0 0 20px; padding:0 0 16px; border-bottom:1px solid var(--line); }
.sh-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sh-root .sh-filter{ height:38px; padding:0 15px; border-radius:999px; border:1.5px solid rgba(47,42,34,.14); background:transparent; color:var(--ink-2); font:800 14px/1 var(--font-body); cursor:pointer; transition:background-color .2s, color .2s, border-color .2s; }
.sh-root .sh-filter:hover{ border-color:rgba(47,107,69,.45); color:var(--meadow); }
.sh-root .sh-filter.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.sh-toolbar-right{ display:flex; flex-wrap:wrap; gap:10px; }
.sh-select{ position:relative; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 34px 0 14px; border-radius:999px; border:1.5px solid rgba(47,42,34,.14); background:var(--paper); font-weight:700; font-size:14px; color:var(--ink-2); }
.sh-select > span{ white-space:nowrap; }
.sh-select select{ appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:0; font-weight:800; color:var(--ink); cursor:pointer; max-width:220px; text-overflow:ellipsis; }
.sh-select > svg{ position:absolute; right:12px; pointer-events:none; color:var(--ink-3); }
.sh-select:focus-within{ border-color:rgba(47,107,69,.55); }

/* the grid and its cards */
.sh-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:22px 18px; margin:0; padding:0; list-style:none; }
.sh-grid-more{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.sh-card{ display:flex; flex-direction:column; gap:6px; padding:12px 12px 16px; border-radius:22px; background:var(--paper); box-shadow:var(--shadow-1); transition:transform .25s ease, box-shadow .25s ease; }
@media (hover:hover){ .sh-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); } }
.sh-card-pic{ position:relative; display:block; aspect-ratio:4 / 5; margin:0 0 8px; border-radius:16px; overflow:hidden; background:#fff; box-shadow:inset 0 0 0 1px rgba(47,42,34,.06); }
.sh-card-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .45s ease; }
.sh-card-b{ opacity:0; }
@media (hover:hover){ .sh-card-pic:hover .sh-card-b{ opacity:1; } .sh-card-pic:hover .sh-side-a{ display:none; } .sh-card-pic:hover .sh-side-b{ display:inline; } }
.sh-card-side{ position:absolute; left:10px; top:10px; padding:4px 10px; border-radius:999px; background:rgba(246,239,223,.92); color:var(--ink-2); font:700 12px/1.4 var(--font-body); letter-spacing:.02em; pointer-events:none; }
.sh-side-b{ display:none; }
.sh-card-colours{ display:flex; align-items:center; gap:7px; padding:2px 2px 4px; }
.sh-root .sh-swatch{ width:22px; height:22px; padding:0; border-radius:50%; border:0; background:var(--sw); cursor:pointer; box-shadow:inset 0 0 0 1px rgba(47,42,34,.18); transition:box-shadow .2s, transform .2s; }
.sh-root .sh-swatch.is-light{ box-shadow:inset 0 0 0 1px rgba(47,42,34,.3); }
.sh-root .sh-swatch:hover{ transform:scale(1.12); }
.sh-root .sh-swatch.is-on{ box-shadow:inset 0 0 0 1px rgba(47,42,34,.22), 0 0 0 2px var(--paper), 0 0 0 4px var(--honey); }
.sh-root .sh-swatch-lg{ width:30px; height:30px; }
.sh-card-text{ display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink); padding:0 2px; }
.sh-card-text b{ font-size:19px; line-height:1.25; }
.sh-card-text span{ color:var(--ink-3); font-weight:700; font-size:14.5px; }
.sh-empty{ padding:40px 0; text-align:center; color:var(--ink-2); }
.sh-empty p{ margin:0 0 14px; }

/* how it reaches you */
.sh-how{ padding-block:48px 72px; background:var(--ground-2); }
.sh-how-steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin:18px 0 0; padding:0; list-style:none; }
.sh-how-steps li{ padding:20px 22px 22px; border-radius:20px; background:var(--paper); box-shadow:var(--shadow-1); }
.sh-how-ic{ display:inline-grid; place-items:center; width:44px; height:44px; margin-bottom:10px; border-radius:14px; background:rgba(47,107,69,.1); color:var(--meadow); }
.sh-how-steps b{ display:block; margin-bottom:4px; font-size:17px; }
.sh-how-steps p{ margin:0; color:var(--ink-2); font-size:15.5px; }

/* product page */
.sh-crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:18px 0 14px; font-size:14px; font-weight:700; color:var(--ink-3); }
.sh-crumbs a{ text-decoration:none; }
.sh-crumbs svg{ color:rgba(47,42,34,.35); }
.sh-product{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:40px; align-items:start; padding-bottom:40px; }
.sh-product-gallery{ position:sticky; top:84px; }
.sh-gallery-main{ position:relative; display:block; width:100%; aspect-ratio:4 / 5; padding:0; border:0; border-radius:24px; overflow:hidden; background:#fff; box-shadow:var(--shadow-1); cursor:zoom-in; }
.sh-g-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease; }
.sh-g-img.is-on{ opacity:1; }
.sh-prod-zoomic{ position:absolute; right:12px; top:12px; display:grid; place-items:center; width:32px; height:32px; border-radius:999px; background:rgba(246,239,223,.92); color:var(--ink-2); }
.sh-gallery-thumbs{ display:flex; gap:10px; margin-top:12px; }
.sh-root .sh-thumb{ display:flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border:1.5px solid rgba(47,42,34,.12); border-radius:14px; background:var(--paper); cursor:pointer; font:700 13.5px/1 var(--font-body); color:var(--ink-2); }
.sh-thumb img{ width:44px; height:55px; object-fit:cover; border-radius:9px; display:block; }
.sh-root .sh-thumb.is-on{ border-color:var(--honey); box-shadow:0 0 0 2px rgba(227,154,51,.25); color:var(--ink); }
.sh-gallery-note{ margin:10px 2px 0; font-size:13.5px; color:var(--ink-3); }
.sh-product-kicker{ margin:0 0 6px; color:var(--ink-3); font-weight:700; font-size:14.5px; }
.sh-product-title{ margin:0 0 10px; font-size:clamp(30px,3.4vw,42px); line-height:1.08; }
.sh-product-line{ margin:0 0 12px; font-style:italic; font-weight:500; font-size:20px; line-height:1.35; color:var(--ink-2); }
.sh-product-blurb{ margin:0 0 22px; color:var(--ink-2); font-size:16px; }
.sh-price{ display:flex; align-items:baseline; gap:10px; margin:0 0 18px; }
.sh-price b{ font-size:34px; line-height:1; }
.sh-price small{ color:var(--ink-3); font-weight:700; font-size:13px; }
.sh-opt{ margin:0 0 18px; }
.sh-opt-label{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; font-weight:700; font-size:14.5px; color:var(--ink-2); }
.sh-opt-label b{ color:var(--ink); }
.sh-swatches{ display:flex; flex-wrap:wrap; gap:10px; padding:2px; }
.sh-sizes{ display:flex; flex-wrap:wrap; gap:8px; }
.sh-root .sh-size{ min-width:52px; height:42px; padding:0 14px; border-radius:12px; border:1.5px solid rgba(47,42,34,.16); background:var(--paper); font:800 14px/1 var(--font-body); color:var(--ink); cursor:pointer; transition:border-color .2s, background-color .2s, color .2s; }
.sh-root .sh-size:hover{ border-color:rgba(47,107,69,.5); }
.sh-root .sh-size.is-on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.sh-root .sh-size[disabled]{ opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.sh-sizes.is-shake{ animation:sh-shake .4s ease; }
.sh-opt-note{ margin:8px 0 0; font-size:13px; color:var(--ink-3); }
.sh-root .sh-add{ width:100%; min-height:54px; font-size:17px; margin-top:4px; }
.sh-root .sh-add.is-done{ background:var(--meadow-2); }
.sh-add-note{ min-height:1.4em; margin:10px 0 0; font-size:14.5px; font-weight:700; color:var(--meadow); }
.sh-add-note.is-warn{ color:var(--honey-ink); }
.sh-pay-with{ margin:6px 0 0; font-size:13px; color:var(--ink-3); }
.sh-delivery{ margin:22px 0 0; padding:16px 18px; border-radius:18px; background:var(--ground-2); }
.sh-delivery-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; color:var(--ink-2); font-weight:700; font-size:15px; }
.sh-delivery-head svg{ color:var(--meadow); }
.sh-select-inline{ height:34px; padding-left:12px; padding-right:30px; }
.sh-delivery-line{ margin:10px 0 4px; font-weight:800; font-size:16px; color:var(--ink); }
.sh-delivery-line.is-loading{ color:var(--ink-3); }
.sh-delivery-line small{ color:var(--ink-3); font-weight:700; }
.sh-delivery-fine{ margin:4px 0 0; font-size:13.5px; color:var(--ink-3); }
.sh-details{ margin:20px 0 0; border-top:1px solid var(--line); }
.sh-details summary{ display:flex; align-items:center; justify-content:space-between; padding:14px 2px; font-weight:800; cursor:pointer; list-style:none; }
.sh-details summary::-webkit-details-marker{ display:none; }
.sh-details[open] summary svg{ transform:rotate(180deg); }
.sh-details ul{ margin:0 0 14px; padding-left:20px; color:var(--ink-2); font-size:15px; }
.sh-details li{ margin:4px 0; }

/* the story card and "more from this story" */
.sh-story-card{ padding-block:44px; background:var(--ground-2); }
.sh-story-card-in{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:32px; align-items:center; }
.sh-story-poster{ position:relative; display:block; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-2); aspect-ratio:16 / 9; background:#F6ECDD; }
.sh-story-poster img{ display:block; width:100%; height:100%; object-fit:cover; }
.sh-story-play{ position:absolute; left:50%; top:50%; display:grid; place-items:center; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; background:rgba(255,253,248,.92); color:var(--meadow); box-shadow:var(--shadow-1); }
.sh-story-play svg{ width:24px; height:24px; margin-left:3px; }
.sh-story-text .sh-story-kicker{ margin-bottom:6px; }
.sh-story-text .sh-story-line{ margin:0 0 12px; max-width:none; font-size:22px; }
.sh-story-text p{ color:var(--ink-2); margin:0 0 18px; }
.sh-more{ padding-block:44px 64px; }

/* drawers (the bag, the size guide) and the zoom view */
.sh-drawer{ position:fixed; inset:0; z-index:60; background:rgba(30,26,20,0); transition:background-color .25s ease; }
.sh-drawer.is-open{ background:rgba(30,26,20,.45); }
.sh-drawer-card{ position:absolute; top:0; right:0; bottom:0; width:min(480px, 100%); display:flex; flex-direction:column; background:var(--ground); box-shadow:-20px 0 60px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .26s cubic-bezier(.2,.7,.2,1); }
.sh-drawer.is-open .sh-drawer-card{ transform:none; }
.sh-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 12px 22px; }
.sh-drawer-head h2{ margin:0; font-size:24px; }
.sh-drawer-body{ flex:1; overflow:auto; padding:4px 22px 28px; -webkit-overflow-scrolling:touch; }
.sh-bag-empty{ padding:40px 0; text-align:center; color:var(--ink-2); }
.sh-bag-empty p{ margin:14px 0 18px; }
.sh-bag-list{ margin:0; padding:0; list-style:none; }
.sh-bag-item{ display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:start; padding:12px 0; border-bottom:1px solid var(--line); }
.sh-bag-pic img{ display:block; width:72px; height:90px; object-fit:cover; border-radius:12px; background:#fff; }
.sh-bag-text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.sh-bag-text b{ font-size:17px; line-height:1.2; }
.sh-bag-text span{ font-size:13.5px; color:var(--ink-3); font-weight:700; }
.sh-bag-price{ font-size:17px; }
.sh-qty{ display:flex; align-items:center; gap:4px; margin-top:8px; }
.sh-root .sh-qty button{ display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:999px; border:1.5px solid rgba(47,42,34,.16); background:var(--paper); cursor:pointer; color:var(--ink-2); }
.sh-root .sh-qty button:hover{ border-color:rgba(47,107,69,.5); color:var(--meadow); }
.sh-qty > span{ min-width:26px; text-align:center; font-weight:800; }
.sh-root .sh-bag-remove{ margin-left:6px; }
.sh-bag-form{ display:grid; gap:12px; padding:16px 0 6px; }
.sh-field{ display:flex; flex-direction:column; gap:5px; font-weight:700; font-size:13.5px; color:var(--ink-2); }
.sh-field .sh-select{ width:100%; height:44px; border-radius:14px; }
.sh-field .sh-select select{ width:100%; max-width:none; }
.sh-field input{ height:44px; padding:0 14px; border-radius:14px; border:1.5px solid rgba(47,42,34,.14); background:var(--paper); font-weight:700; }
.sh-field input:focus{ outline:0; border-color:rgba(47,107,69,.55); box-shadow:0 0 0 3px rgba(47,107,69,.15); }
.sh-field small{ font-weight:600; color:var(--ink-3); line-height:1.4; }
.sh-bag-perk{ display:flex; gap:8px; align-items:flex-start; margin:0; padding:10px 14px; border-radius:14px; background:rgba(255,253,248,.72); box-shadow:inset 0 0 0 1.5px rgba(227,154,51,.35); color:var(--honey-ink); font-size:14px; font-weight:700; line-height:1.4; }
.sh-bag-perk svg{ flex:none; margin-top:1px; }
.sh-bag-sum{ padding:12px 0 6px; border-top:1px solid var(--line); }
.sh-bag-sum p{ display:flex; justify-content:space-between; gap:12px; margin:6px 0; font-size:15px; color:var(--ink-2); }
.sh-bag-sum p b{ color:var(--ink); }
.sh-bag-sum .is-perk b{ color:var(--honey-ink); }
.sh-bag-cta{ position:sticky; bottom:-28px; margin:0 -22px -28px; padding:10px 22px 24px; background:var(--ground); box-shadow:0 -12px 24px rgba(255,249,238,.95); }
.sh-bag-cta .sh-bag-total{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 10px; padding-top:10px; border-top:1px dashed rgba(47,42,34,.2); font-size:17px; color:var(--ink-2); }
.sh-bag-total b{ font-size:22px; }
.sh-bag-fine, .sh-bag-note{ font-size:13px !important; color:var(--ink-3) !important; }
.sh-bag-note{ margin:10px 0 0; text-align:center; }
.sh-bag-gap{ font-size:13.5px !important; color:var(--honey-ink) !important; font-weight:700; }
.sh-rates{ display:grid; gap:8px; margin:8px 0; }
.sh-rate{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; border:1.5px solid rgba(47,42,34,.14); background:var(--paper); cursor:pointer; font-size:14.5px; font-weight:700; }
.sh-rate.is-on{ border-color:var(--meadow); box-shadow:0 0 0 2px rgba(47,107,69,.15); }
.sh-rate input{ accent-color:var(--meadow); margin:0; }
.sh-root .sh-pay{ width:100%; min-height:54px; font-size:17px; margin-top:4px; }
.sh-bag .sh-pay-with{ text-align:center; }
.sh-zoom{ position:fixed; inset:0; z-index:66; display:grid; place-items:center; padding:14px; background:rgba(30,26,20,0); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background-color .25s; }
.sh-zoom.is-open{ background:rgba(30,26,20,.62); }
.sh-zoom-card{ position:relative; display:flex; flex-direction:column; max-width:100%; max-height:calc(100dvh - 28px); border-radius:24px; background:var(--paper); box-shadow:0 30px 80px rgba(0,0,0,.35); overflow:hidden; transform:scale(.96); opacity:0; transition:transform .25s, opacity .25s; }
.sh-zoom.is-open .sh-zoom-card{ transform:none; opacity:1; }
.sh-zoom-head{ display:flex; align-items:center; gap:12px; padding:12px 14px 12px 20px; max-width:min(calc(100vw - 28px), 760px); }
.sh-zoom-head b{ font-size:20px; line-height:1.2; }
.sh-zoom-head span{ flex:1; color:var(--ink-3); font-weight:700; font-size:14.5px; }
.sh-zoom-stage{ position:relative; flex:none; width:min(calc(100vw - 28px), calc((100dvh - 160px) * .8), 760px); aspect-ratio:4 / 5; overflow:hidden; background:#fff; cursor:zoom-in; touch-action:pinch-zoom; }
.sh-zoom-stage img{ display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.sh-zoom-stage.is-zoomed{ overflow:auto; cursor:zoom-out; }
.sh-zoom-stage.is-zoomed img{ width:250%; height:auto; max-width:none; object-fit:initial; }
.sh-zoom-foot{ display:flex; align-items:center; gap:10px; padding:10px 14px 12px; max-width:min(calc(100vw - 28px), 760px); }
.sh-zoom-foot > div{ display:flex; gap:8px; }
.sh-root .sh-zoom-thumb{ flex:none; width:54px; height:54px; padding:0; border:0; border-radius:12px; overflow:hidden; background:#fff; cursor:pointer; opacity:.6; box-shadow:0 0 0 2px transparent; transition:opacity .2s, box-shadow .2s; }
.sh-root .sh-zoom-thumb.is-on{ opacity:1; box-shadow:0 0 0 2.5px var(--honey); }
.sh-zoom-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sh-zoom-hint{ flex:1; margin:0; color:var(--ink-3); font-size:13.5px; line-height:1.35; }
.sh-size-img{ display:block; max-width:260px; margin:0 auto 14px; }
.sh-table-wrap{ overflow:auto; margin:8px 0 18px; }
.sh-root table{ border-collapse:collapse; width:100%; font-size:14px; }
.sh-root th, .sh-root td{ padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.sh-root th{ font-weight:800; color:var(--ink-2); }
.sh-root thead th{ background:var(--ground-2); }
.sh-drawer-body h3{ margin:8px 0 4px; font-size:16px; }

/* thank-you, articles, 404 */
.sh-thanks{ padding:48px 0 64px; text-align:center; }
.sh-thanks h1{ margin:14px 0 10px; font-size:clamp(32px,4vw,46px); line-height:1.1; }
.sh-thanks-sub{ max-width:52ch; margin:0 auto 26px; color:var(--ink-2); }
.sh-thanks-wait{ padding:80px 0; text-align:center; color:var(--ink-2); }
.sh-thanks-wait p{ margin:0 0 16px; font-size:24px; }
.sh-spinner{ display:inline-block; width:28px; height:28px; border-radius:50%; border:3px solid rgba(47,107,69,.2); border-top-color:var(--meadow); animation:sh-spin 1s linear infinite; }
.sh-order{ text-align:left; margin:0 auto; padding:18px 22px; border-radius:22px; background:var(--paper); box-shadow:var(--shadow-1); }
.sh-order-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 8px; font-weight:800; }
.sh-status{ padding:4px 10px; border-radius:999px; background:rgba(47,107,69,.12); color:var(--meadow); font-size:13px; }
.sh-status-failed, .sh-status-canceled{ background:rgba(227,154,51,.18); color:var(--honey-ink); }
.sh-status-shipped, .sh-status-fulfilled{ background:var(--meadow); color:#FFFDF8; }
.sh-order-items{ margin:0; padding:0; list-style:none; }
.sh-order-items li{ display:grid; grid-template-columns:48px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.sh-order-items img{ width:48px; height:60px; object-fit:cover; border-radius:10px; background:#fff; }
.sh-order-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0; font-size:15px; color:var(--ink-2); }
.sh-order-row b{ color:var(--ink); text-align:right; }
.sh-order-total{ padding-top:8px; border-top:1px dashed rgba(47,42,34,.2); font-size:17px; }
.sh-thanks-fine{ margin:18px 0 0; color:var(--ink-3); font-size:14px; }
.sh-thanks-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:22px 0 0; }
.sh-article{ padding:28px 0 72px; }
.sh-article h1{ margin:0 0 6px; font-size:clamp(32px,4vw,44px); line-height:1.1; }
.sh-article-date{ margin:0 0 20px; color:var(--ink-3); font-size:14px; font-weight:700; }
.sh-article-note{ padding:10px 14px; border-radius:14px; background:var(--ground-2); color:var(--ink-2); font-size:14.5px; }
.sh-article h2{ margin:28px 0 8px; font-size:24px; }
.sh-article p, .sh-article li{ color:var(--ink-2); font-size:16.5px; }
.sh-article ul{ padding-left:22px; }
.sh-404{ padding:80px 0; text-align:center; }
.sh-404 h1{ margin:12px 0 6px; }
.sh-404 p{ margin:0 0 20px; color:var(--ink-2); }

/* footer */
.sh-footer{ padding:44px 0 56px; border-top:1px solid var(--line); background:var(--ground); }
.sh-footer-in{ display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:28px 40px; }
.sh-foot-brand{ display:flex; gap:14px; align-items:flex-start; }
.sh-foot-brand b{ font-family:var(--font-display); font-variation-settings:"SOFT" 100; font-weight:600; font-size:20px; }
.sh-foot-brand p{ margin:4px 0 0; color:var(--ink-2); font-size:15px; }
.sh-foot-slogan{ font-style:italic; font-weight:500; font-size:17px !important; color:var(--ink) !important; }
.sh-foot-links{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 18px; margin:0; padding:0; list-style:none; }
.sh-foot-links a{ font-weight:700; text-decoration:none; font-size:15px; }
.sh-foot-links a:hover{ text-decoration:underline; }
.sh-foot-fine{ grid-column:1 / -1; margin:8px 0 0; color:var(--ink-3); font-size:13.5px; }

@keyframes sh-spin{ to{ transform:rotate(360deg); } }
@keyframes sh-shake{ 0%,100%{ transform:none; } 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }

/* responsive */
@media (max-width:1100px){
  .sh-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .sh-hero-table{ height:460px; }
}
@media (max-width:960px){
  .sh-nav{ display:none; }
  .sh-garden span{ display:none; }
  .sh-root .sh-garden{ width:40px; padding:0; justify-content:center; }
  .sh-product{ grid-template-columns:1fr; gap:24px; }
  .sh-product-gallery{ position:static; }
  .sh-story-card-in{ grid-template-columns:1fr; }
  .sh-how-steps{ grid-template-columns:1fr; }
  .sh-footer-in{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .sh-hero-art{ inset:0 0 auto; height:360px; background-position:center 25%; -webkit-mask-image:linear-gradient(#000 55%, transparent 100%); mask-image:linear-gradient(#000 55%, transparent 100%); }
  .sh-hero-art::after{ background:linear-gradient(180deg, rgba(255,249,238,.2) 0%, rgba(255,249,238,0) 40%, rgba(255,249,238,.9) 100%); }
  .sh-hero-in{ grid-template-columns:1fr; min-height:0; padding-top:232px; gap:16px; }
  .sh-hero-copy{ max-width:none; }
  .sh-hero h1{ font-size:clamp(34px,8.5vw,46px); }
  .sh-hero-table{ height:auto; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 4px 18px; margin-inline:-4px; }
  .sh-hero-card{ position:static; flex:none; width:44%; transform:none; scroll-snap-align:start; }
  .sh-hero-card:hover{ transform:none; }
  .sh-story-in{ grid-template-columns:1fr; align-items:start; }
  .sh-grid, .sh-grid-more{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 12px; }
  .sh-card{ padding:9px 9px 12px; border-radius:18px; }
  .sh-card-text b{ font-size:17px; }
  .sh-toolbar{ align-items:flex-start; }
}
@media (max-width:560px){
  .sh-header-in{ gap:8px; }
  .sh-brand-word{ font-size:16px; }
  .sh-cart-label, .sh-root .sh-garden, .sh-lang .sh-chip > span{ display:none; }
  .sh-root .sh-cart-btn, .sh-root .sh-lang .sh-chip{ padding:0 11px; }
  .sh-card-colours{ flex-wrap:wrap; }
  .sh-hero-card{ width:60%; }
  .sh-price b{ font-size:30px; }
  .sh-drawer-card{ width:100%; }
  .sh-bag-item{ grid-template-columns:60px 1fr; }
  .sh-bag-item .sh-bag-price{ grid-column:2; }
  .sh-foot-links{ grid-template-columns:1fr; }
}
@media (max-width:400px){
  .sh-brand-word i, .sh-brand-tag{ display:none; }
  .sh-header-in{ padding-inline:12px; }
}
@media (prefers-reduced-motion:reduce){
  .sh-root *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}