/* Active storefront styles. Legacy product concepts removed. */
* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  background:#faf8f2;
  color:#253c33;
  font-family:Arial,sans-serif;
  line-height:1.6;
}

.notice {
  text-align:center;
  background:#253c33;
  color:white;
  padding:8px;
  font-size:13px;
}

header, main, footer {
  max-width:1160px;
  margin:auto;
}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px;
}

a {
  color:inherit;
}

.brand {
  text-decoration:none;
  font-weight:800;
  font-size:24px;
}

.brand span {
  display:block;
  font-size:12px;
  font-weight:400;
}

header>a:last-child {
  font-size:14px;
}

main {
  padding:0 24px;
}

.hero {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:center;
  padding:65px 0 90px;
}

h1 {
  font-family:Georgia,serif;
  font-weight:400;
  font-size:clamp(38px,5vw,62px);
  line-height:1.12;
  margin:20px 0;
}

h2 {
  font-family:Georgia,serif;
  font-size:32px;
  font-weight:400;
  line-height:1.3;
}

h3 {
  font-size:22px;
  margin:12px 0;
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:11px;
  font-weight:bold;
}

.hero p:not(.eyebrow) {
  max-width:480px;
}

.button, button {
  display:inline-block;
  background:#253c33;
  border:0;
  color:white;
  padding:14px 20px;
  border-radius:6px;
  font:inherit;
  cursor:pointer;
  text-decoration:none;
}

button:disabled {
  opacity:.45;
  cursor:default;
}

button:hover:not(:disabled), .button:hover {
  background:#426451;
}

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:3px solid #ba6539;
  outline-offset:4px;
}

.muted {
  color:#627068;
  font-size:14px;
}

.products {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:30px 0 70px;
}

article {
  background:white;
  border:1px solid #e4e5db;
  border-radius:12px;
  overflow:hidden;
}

.product-art {
  height:180px;
  display:grid;
  place-items:center;
  font-size:150px;
  line-height:1;
}

.product-body {
  padding:24px;
}

.tag {
  font-size:11px;
  text-transform:uppercase;
  border:1px solid #c7d0c4;
  padding:4px 9px;
  border-radius:20px;
}

.buy {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:22px 0;
}

.buy strong {
  font-size:23px;
  white-space:nowrap;
}

small {
  display:block;
  font-size:11px;
  font-weight:normal;
}

.buy button {
  font-size:13px;
}

details {
  font-size:13px;
  color:#627068;
}

summary {
  cursor:pointer;
}

.basket {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  padding:35px;
  background:#ecefe5;
  border-radius:12px;
}

.basket ul {
  list-style:none;
  padding:0;
}

.basket li {
  border-bottom:1px solid #ced6c9;
  padding:14px 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.basket li span {
  flex:1;
  min-width:150px;
}

.basket li button {
  padding:4px 10px;
  font-size:13px;
}

.total {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #bcc9b9;
  padding-top:20px;
}

#status {
  font-size:14px;
}

.next {
  max-width:670px;
  padding:55px 0;
}

footer {
  padding:24px;
  border-top:1px solid #d9ddd2;
  font-size:12px;
}

@media(max-width:700px) {
  .hero, .products, .basket {
    grid-template-columns:1fr;
  }

  .hero {
    padding:35px 0 55px;
    gap:25px;
  }

  .buy {
    align-items:flex-start;
    flex-direction:column;
  }

  .basket {
    padding:22px;
  }

  .products {
    gap:20px;
  }

  .brand {
    font-size:20px;
  }
}

@font-face {
  font-family:Inter;
  src:url('fonts/inter-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:Inter;
  src:url('fonts/inter-600.woff2') format('woff2');
  font-weight:600;
  font-display:swap;
}

@font-face {
  font-family:Inter;
  src:url('fonts/inter-700.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}

@font-face {
  font-family:Manrope;
  src:url('fonts/manrope-400.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:Manrope;
  src:url('fonts/manrope-600.woff2') format('woff2');
  font-weight:600;
  font-display:swap;
}

@font-face {
  font-family:Manrope;
  src:url('fonts/manrope-700.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}

body {
  font-family:Inter,Arial,sans-serif;
}

h1, h2, h3, .brand {
  font-family:Manrope,Arial,sans-serif;
  font-weight:600;
  letter-spacing:-.035em;
}

h1 {
  font-size:clamp(38px,4.5vw,60px);
  line-height:1.15;
}

h2 {
  font-size:30px;
}

.cart-link {
  background:#e7ede2;
  border-radius:24px;
  padding:10px 16px;
  text-decoration:none;
}

.product-art {
  height:240px;
  position:relative;
  font-size:initial;
}

.product-art small {
  position:absolute;
  bottom:12px;
  font-size:11px;
  color:#4b594d;
}

.reassurance {
  margin-top:60px;
  max-width:760px;
}

.reassurance details {
  padding:16px 0;
  border-bottom:1px solid #d9ddd2;
  font-size:15px;
}

.reassurance summary {
  color:#253c33;
}

.basket li button {
  min-width:44px;
  min-height:44px;
}

.mobile-cart {
  display:none;
}

dialog {
  border:1px solid #d9ddd2;
  border-radius:18px;
  padding:32px;
  max-width:560px;
  width:calc(100% - 32px);
  max-height:90dvh;
  color:#253c33;
  background:#faf8f2;
}

dialog::backdrop {
  background:#152b24aa;
}

dialog h2 {
  font-size:28px;
}

dialog form label {
  display:grid;
  font-size:13px;
  gap:6px;
  margin:12px 0;
}

input {
  width:100%;
  min-width:0;
  border:1px solid #a7b6aa;
  border-radius:6px;
  padding:12px;
  font:inherit;
  font-size:16px;
  background:white;
  color:#253c33;
}

input:focus-visible {
  outline:2px solid #426451;
  outline-offset:2px;
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:16px;
}

.close {
  float:right;
  font-size:24px;
  padding:0;
  width:44px;
  height:44px;
  background:#e7ede2;
  color:#253c33;
}

.order-summary {
  display:flex;
  justify-content:space-between;
  padding:18px 0;
  border-block:1px solid #d9ddd2;
}

dialog form>button {
  width:100%;
}

#order-result {
  font-weight:600;
}

.basket {
  scroll-margin-top:20px;
}

@media(max-width:700px) {
  body {
    padding-bottom:85px;
  }

  .mobile-cart:not([hidden]) {
    display:flex;
    position:fixed;
    bottom:12px;
    left:16px;
    right:16px;
    background:#253c33;
    color:white;
    border-radius:12px;
    padding:16px;
    justify-content:space-between;
    gap:8px;
    text-decoration:none;
    z-index:10;
    box-shadow:0 4px 20px #0003;
    font-size:13px;
    padding-bottom:max(16px,env(safe-area-inset-bottom));
  }

  .buy {
    flex-direction:row;
    align-items:center;
  }

  .buy button {
    padding:12px;
    font-size:12px;
    min-height:48px;
  }

  .buy strong {
    font-size:21px;
  }

  .product-body {
    padding:20px;
  }

  dialog {
    padding:22px;
  }

  .brand {
    font-size:19px;
  }

  .cart-link {
    padding:8px 12px;
  }

  h2 {
    font-size:27px;
  }
}

button, .button, .cart-link {
  transition:background-color .2s,box-shadow .2s,transform .2s;
}

button:active:not(:disabled), .button:active {
  transform:scale(.98);
}

article {
  transition:box-shadow .3s,border-color .3s;
}

article:hover {
  border-color:#b8c5b5;
  box-shadow:0 14px 36px #253c3310;
}

.quick-view {
  position:absolute;
  top:14px;
  right:14px;
  padding:10px 14px;
  min-height:44px;
  background:#ffffffdf;
  color:#253c33;
  border:1px solid #ffffff;
  border-radius:24px;
  font-size:12px;
  backdrop-filter:blur(12px);
}

.quick-view:hover:not(:disabled) {
  background:#fff;
  box-shadow:0 4px 16px #253c3318;
}

.glass-dialog {
  background:#f5f7efed;
  border:1px solid #ffffff;
  border-radius:24px;
  box-shadow:0 24px 80px #142c2440;
  max-width:600px;
}

.glass-dialog::backdrop {
  background:#1d33294d;
  backdrop-filter:blur(8px);
}

@supports(backdrop-filter:blur(20px)) {
  .glass-dialog {
    background:#f5f7efdc;
    backdrop-filter:blur(24px);
  }
}

.glass-dialog[open] {
  animation:glass-in .24s ease-out;
}

@keyframes glass-in {
  from {
    opacity:0;
    transform:translateY(12px) scale(.98);
  }

  to {
    opacity:1;
    transform:none;
  }
}

.preview-art {
  height:180px;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,#dedfcf90,transparent 70%);
  clear:both;
}

.preview-note {
  text-align:center;
  font-size:11px;
}

#product-specs {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  font-size:13px;
  gap:12px;
  margin:24px 0;
}

#product-specs dt {
  font-weight:600;
}

#product-specs dd {
  margin:0;
  color:#536456;
}

fieldset {
  border:0;
  padding:0;
  margin:22px 0;
}

legend {
  font-size:12px;
  font-weight:600;
  margin-bottom:12px;
}

.product-dialog-buy {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid #cad2c3;
  padding-top:20px;
}

.product-dialog-buy strong {
  font-size:24px;
}

.product-dialog-buy strong small {
  font-size:11px;
}

.product-dialog-buy button {
  font-size:13px;
  min-height:48px;
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *, *:before, *:after {
    animation:none!important;
    transition:none!important;
  }
}

header {
  position:sticky;
  top:0;
  z-index:20;
  background:#faf8f2e8;
  backdrop-filter:blur(16px);
  border-bottom:1px solid #e4e5db80;
}

.brand .brand-title {
  display:block;
  font-size:24px;
  font-weight:700;
  letter-spacing:-.035em;
}

.brand-stage {
  height:220px;
  position:relative;
  padding-top:30px;
}

.moving-brand {
  display:inline-block;
  font-family:Manrope,Arial,sans-serif;
  font-size:clamp(42px,7.5vw,106px);
  font-weight:700;
  letter-spacing:-.055em;
  line-height:1.15;
  text-decoration:none;
  color:#253c33;
  white-space:nowrap;
  transform-origin:top left;
}

.moving-brand span {
  display:block;
  font:600 11px Inter,Arial,sans-serif;
  letter-spacing:3px;
  margin-top:18px;
  opacity:var(--brand-caption,1);
}

.brand-motion .moving-brand {
  position:fixed;
  top:0;
  left:0;
  z-index:25;
  will-change:transform;
}

.brand-motion header .brand {
  visibility:hidden;
}

.hero {
  padding-top:20px;
}

h3 a {
  text-decoration:none;
}

h3 a:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.full-product-link {
  display:inline-block;
  margin:0 0 20px;
  font-size:13px;
  font-weight:600;
  text-underline-offset:4px;
}

.product-art {
  perspective:850px;
  isolation:isolate;
}

.product-art .quick-view {
  z-index:2;
}

.product-art small {
  z-index:2;
  pointer-events:none;
}

.product-page-main {
  padding-top:35px;
}

.breadcrumb {
  font-size:13px;
  color:#627068;
}

.product-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
  margin:35px 0;
}

.product-layout .product-art {
  height:380px;
  border-radius:18px;
  position:sticky;
  top:120px;
}

.product-layout h1 {
  font-size:42px;
}

.product-layout .price {
  font-size:28px;
  font-weight:600;
}

.spec-list {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:16px;
  font-size:14px;
}

.spec-list dt {
  font-weight:600;
}

.spec-list dd {
  margin:0;
  color:#627068;
}

.product-text {
  max-width:760px;
  margin:55px 0;
}

.product-text h2 {
  font-size:26px;
}

.product-page-main footer {
  margin-top:50px;
}

@media(max-width:700px) {
  .brand .brand-title {
    font-size:19px;
  }

  .brand-stage {
    height:150px;
    padding-top:24px;
  }

  .moving-brand {
    font-size:clamp(28px,7.7vw,52px);
  }

  .moving-brand span {
    font-size:8px;
    letter-spacing:1.5px;
    margin-top:14px;
  }

  .product-layout {
    grid-template-columns:1fr;
    gap:18px;
  }

  .product-layout .product-art {
    position:relative;
    top:auto;
    height:260px;
  }

  .product-layout h1 {
    font-size:34px;
  }

  .product-dialog-buy {
    flex-wrap:wrap;
  }
}

@media(prefers-reduced-motion:reduce) {
  .moving-brand {
    position:static!important;
    transform:none!important;
  }
}

.brand-stage {
  height:0;
  padding:0;
  position:relative;
}

.moving-brand {
  width:calc(100vw - 64px);
  max-width:1600px;
  white-space:normal;
  line-height:1.05;
  font-size:clamp(56px,13.5vw,216px);
  text-align:center;
}

.moving-brand .brand-name {
  display:block;
  font:inherit;
  letter-spacing:-.06em;
  margin:0;
  opacity:1;
  line-height:1.05;
}

.moving-brand .brand-caption {
  font:600 clamp(12px,1.7vw,26px) Inter,Arial,sans-serif;
  letter-spacing:.14em;
  margin-top:30px;
  line-height:1.5;
}

.brand-motion header .brand {
  visibility:visible;
}

.brand-motion header {
  opacity:var(--header-opacity,0);
}

.brand-motion .notice, .brand-motion main, .brand-motion>footer {
  filter:blur(var(--intro-blur,0px));
}

.brand-motion:before {
  content:'';
  position:fixed;
  inset:0;
  z-index:21;
  background:#faf8f2;
  opacity:var(--intro-veil,0);
  pointer-events:none;
}

.brand-motion .moving-brand {
  z-index:25;
}

.intro-active .mobile-cart {
  visibility:hidden;
}

.brand-motion .hero {
  padding-top:45px;
}

.brand-stage:focus-within {
  z-index:26;
}

@media(max-width:700px) {
  .moving-brand {
    width:calc(100vw - 40px);
    font-size:24vw;
    max-width:500px;
  }

  .moving-brand .brand-caption {
    font-size:14px;
    letter-spacing:.09em;
    max-width:280px;
    margin:24px auto 0;
  }

  .brand-motion .hero {
    padding-top:25px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .brand-stage {
    height:auto;
    padding:35px 24px;
  }

  .moving-brand {
    display:block;
    margin:auto;
    font-size:clamp(42px,11vw,100px);
    width:100%;
    text-align:left;
  }

  .moving-brand .brand-caption {
    margin-left:0;
  }

  .brand-motion header {
    opacity:1;
  }

  .brand-motion main, .brand-motion .notice {
    filter:none;
  }

  .brand-motion:before {
    display:none;
  }
}

body:not(.brand-motion) .brand-stage {
  height:auto;
  padding:32px 24px;
}

body:not(.brand-motion) .moving-brand {
  display:block;
  margin:auto;
}

.intro-active main, .intro-active header {
  pointer-events:none;
}

.brand-motion .storefront-track {
  padding-bottom:0;
}

.brand-motion .storefront-track:after {
  content:"";
  display:block;
  height:var(--intro-distance,0px);
}

.brand-motion .storefront-track>main {
  position:sticky;
  top:var(--intro-top,0px);
  transform:none;
  margin-bottom:0;
}

@media(prefers-reduced-motion:reduce) {
  .brand-motion .storefront-track:after {
    display:none;
  }

  .brand-motion .storefront-track>main {
    position:static;
    transform:none;
    margin-bottom:0;
  }
}

.info-main {
  max-width:820px;
  padding:45px 24px 70px;
}

.info-main h1 {
  font-size:clamp(34px,5vw,50px);
}

.info-main section {
  margin:45px 0;
  scroll-margin-top:130px;
}

.info-main h2 {
  font-size:26px;
}

footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:20px 0;
}

footer .brand {
  font-size:20px;
}

footer a {
  text-underline-offset:4px;
}

.hero-photo {
  margin:0;
  position:relative;
}

.hero-photo img {
  display:block;
  width:100%;
  height:360px;
  object-fit:cover;
  border-radius:150px 150px 16px 16px;
}

.hero-photo figcaption {
  font-size:10px;
  text-align:center;
  color:#627068;
  margin-top:8px;
}

@media(max-width:700px) {
  .hero-photo img {
    height:260px;
  }

  .hero-photo img {
    border-radius:100px 100px 14px 14px;
  }
}

.brand span:not(.brand-title) {
  letter-spacing:normal;
  font-family:Inter,Arial,sans-serif;
  line-height:1.5;
}

.consent-banner {
  position:fixed;
  z-index:70;
  bottom:16px;
  left:16px;
  right:16px;
  max-width:1080px;
  margin:auto;
  background:#faf8f2;
  border:1px solid #b8c5b5;
  border-radius:16px;
  box-shadow:0 12px 48px #142c2433;
  padding:22px;
  display:flex;
  gap:24px;
  align-items:center;
  color:#253c33;
}

.consent-banner[hidden] {
  display:none;
}

.consent-banner p {
  font-size:13px;
  margin:8px 0;
}

.consent-banner a {
  font-size:12px;
}

.consent-actions {
  display:flex;
  gap:12px;
  flex-shrink:0;
}

.consent-actions button {
  font-size:13px;
  min-height:44px;
}

.privacy-settings {
  background:none;
  color:#253c33;
  border:1px solid #b8c5b5;
  padding:10px 14px;
  font-size:12px;
}

.privacy-settings:hover:not(:disabled) {
  background:#e7ede2;
  color:#253c33;
}

.consent-status:empty {
  display:none;
}

.consent-status {
  font-size:12px;
}

.consent-open .mobile-cart {
  bottom:270px;
}

@media(max-width:700px) {
  .consent-banner {
    padding:16px;
    flex-direction:column;
    gap:10px;
    align-items:stretch;
  }

  .consent-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .consent-actions button {
    padding:12px 8px;
  }

  .consent-open .mobile-cart {
    visibility:hidden;
  }
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:100;
  background:#253c33;
  color:white;
  padding:12px 18px;
  border-radius:8px;
  transform:translateY(-160%);
}

.skip-link:focus {
  transform:none;
}

.info-main .button+a {
  display:inline-block;
  margin:12px;
}

.stripe-test-box {
  border-top:1px solid #bcc9b9;
  margin-top:24px;
  padding-top:16px;
}

.stripe-test-box h3 {
  font-size:18px;
}

.stripe-test-box button {
  width:100%;
}

#stripe-status {
  font-size:13px;
}

.craft-art {
  background:#f0ebe2;
  overflow:hidden;
}

.craft-art>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.craft-art>small {
  position:absolute;
  bottom:10px;
  left:12px;
  background:#faf8f2e8;
  border-radius:12px;
  padding:4px 8px;
  font-size:10px;
}

.preview-art {
  height:220px;
}

.preview-art img {
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:16px;
}

.products {
  align-items:stretch;
}

.product-body>p {
  min-height:48px;
}

@media(hover:hover) {
  .craft-art:hover>img {
    transform:scale(1.09);
  }
}

@media(prefers-reduced-motion:reduce) {
  .craft-art:hover>img {
    transform:none;
  }
}