:root {
  color-scheme: light;
  --paper: #faf7ee;
  --ink: #242820;
  --muted: #59564b;
  --green: #394533;
  --gold: #7b5c29;
  --line: #dcd4c2;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid #866331; outline-offset: 5px; }
.wrap { width: min(1160px, calc(100% - 72px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.nav, nav, .footer-inner { display: flex; align-items: center; }
.nav, .footer-inner { justify-content: space-between; min-height: 74px; }
nav { gap: 28px; }
nav a { text-decoration: none; font-size: .9rem; font-weight: 650; }
nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.75rem; letter-spacing: -.055em; text-decoration: none; }
.brand span { color: var(--gold); }
.brand .brand-icon { font-size: .85em; margin-right: .15em; }
.hero { background: #eee8d7; }
.hero-grid { display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; min-height: 570px; }
.intro { padding: 56px 0; }
.overline { margin: 0 0 15px; color: var(--gold); font-size: .73rem; font-weight: 750; letter-spacing: .13em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.045em; }
h1 { font-size: clamp(3.5rem, 7.5vw, 7.3rem); line-height: .89; }
h2 { font-size: clamp(2.6rem, 5vw, 4.25rem); line-height: 1; }
h3 { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; }
.intro > p:not(.overline), .description > p:not(.overline), .section-heading > p, .notes p { color: var(--muted); line-height: 1.6; }
.intro > p:not(.overline) { max-width: 33ch; margin: 23px 0 25px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 18px; min-height: 46px; border-radius: 4px; font-weight: 700; font-size: .9rem; text-decoration: none; }
.primary { background: var(--green); color: white; }
.primary:hover { background: #283423; }
.showcase { position: relative; isolation: isolate; align-self: stretch; min-height: 370px; }
.arch { position: absolute; inset: 8% 2% 0 6%; background: linear-gradient(135deg, #e0d1ac, #eae0c8 70%); border-radius: 50% 50% 0 0 / 53% 53% 0 0; }
.showcase img { position: absolute; height: auto; }
.hero-colancio { width: min(45%, 240px); bottom: 5%; left: 14%; z-index: 1; }
.hero-collagen { width: min(40%, 196px); bottom: 7%; right: 6%; }
.products { padding-block: 62px 75px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 28px; }
.section-heading p { margin: 0; }
.catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.product { display: grid; grid-template-columns: minmax(110px, .78fr) 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pack { display: grid; place-items: center; min-height: 270px; background: #eae2ce; }
.pack img { width: min(85%, 120px); height: auto; }
.description { align-self: center; padding: 22px; }
.description .overline { font-size: .65rem; margin-bottom: 9px; }
.description > p:not(.overline) { font-size: .9rem; }
.notes { background: #f1ebde; padding-block: 55px; }
.notes-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; }
details { padding: 14px 0; border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 650; }
details p, .notice { margin: 10px 0 0; font-size: .88rem; }
footer { border-top: 1px solid var(--line); }
small { color: var(--muted); }
@media (max-width: 920px) {
  .product { grid-template-columns: 1fr; }
  .pack { min-height: 225px; }
  .pack img { width: min(85%, 100px); }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .nav { min-height: 61px; }
  nav { gap: 12px; }
  nav a { font-size: .77rem; }
  .brand { font-size: 1.55rem; }
  .hero-grid, .notes-grid { grid-template-columns: 1fr; }
  .hero-grid { min-height: auto; }
  .intro { padding: 38px 0 12px; }
  .showcase { min-height: 305px; }
  .hero-colancio { width: min(45%, 151px); }
  .hero-collagen { width: min(40%, 129px); }
  .section-heading { display: block; }
  .section-heading p { margin-top: 9px; }
  .products { padding-block: 42px 48px; }
  .catalog { grid-template-columns: 1fr; gap: 15px; }
  .product { grid-template-columns: minmax(100px, .75fr) 1fr; }
  .pack { min-height: 200px; }
  .pack img { width: min(85%, 88px); }
  .description { padding: 14px; }
  .notes-grid { gap: 15px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.bottle-colancio {
  clip-path: polygon(
    15.41% 3.19%, 19.35% 2.40%, 29.03% 1.60%, 43.37% 1.20%,
    60.22% 1.20%, 72.76% 1.60%, 81.36% 2.40%, 84.23% 3.19%,
    84.59% 5.79%, 83.15% 8.38%, 84.23% 10.58%, 84.23% 12.18%,
    86.38% 13.37%, 86.02% 15.17%, 83.87% 16.57%, 83.15% 19.16%,
    83.51% 20.76%, 87.10% 22.16%, 91.40% 23.55%, 94.62% 25.75%,
    96.06% 28.94%, 96.06% 88.82%, 95.34% 92.02%, 93.19% 94.41%,
    88.89% 96.21%, 82.08% 97.21%, 73.48% 97.60%, 23.30% 97.80%,
    16.13% 97.01%, 10.04% 95.81%, 6.09% 94.21%, 4.30% 91.42%,
    3.58% 88.22%, 3.23% 29.34%, 4.30% 26.95%, 7.17% 24.35%,
    11.83% 22.75%, 15.41% 21.76%, 16.85% 20.16%, 16.49% 16.77%,
    13.98% 16.17%, 12.90% 15.17%, 13.26% 13.77%, 15.05% 12.77%,
    14.70% 11.18%, 15.05% 9.58%, 16.13% 7.98%, 14.70% 5.99%
  );
}
.bottle-collagen {
  clip-path: polygon(
    16.21% 3.92%, 20.18% 3.16%, 27.83% 2.41%, 38.84% 1.96%,
    55.35% 1.81%, 66.97% 1.96%, 77.98% 2.41%, 84.10% 3.16%,
    85.93% 4.07%, 85.63% 6.17%, 84.71% 7.98%, 85.32% 9.79%,
    85.63% 11.75%, 87.77% 12.50%, 88.07% 13.40%, 86.24% 14.16%,
    86.85% 15.06%, 85.32% 16.27%, 84.40% 18.37%, 84.71% 19.88%,
    88.07% 21.23%, 92.05% 22.59%, 94.50% 24.25%, 95.41% 26.66%,
    95.41% 89.46%, 94.80% 92.17%, 92.97% 94.28%, 89.30% 95.93%,
    84.10% 96.99%, 76.76% 97.74%, 68.20% 98.04%, 27.22% 98.04%,
    18.96% 97.44%, 12.23% 96.39%, 7.95% 94.73%, 5.81% 92.62%,
    4.89% 89.91%, 4.59% 27.26%, 5.50% 25.30%, 7.34% 23.64%,
    10.70% 22.29%, 14.68% 21.23%, 16.82% 20.03%, 17.43% 18.07%,
    17.43% 16.27%, 14.68% 15.81%, 13.46% 14.76%, 14.98% 13.70%,
    13.15% 13.10%, 14.07% 12.50%, 15.60% 11.60%, 15.29% 9.94%,
    15.90% 8.73%, 15.29% 6.78%, 15.29% 4.82%
  );
}

.detail-hero { background: #eee8d7; padding-block: 26px 44px; }
.back-link { display: inline-block; margin-bottom: 20px; font-size: .9rem; font-weight: 650; text-underline-offset: 4px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 6vw, 85px); }
.detail-pack { display: grid; place-items: center; min-height: 410px; padding: 28px; border-radius: 12px; background: linear-gradient(145deg, #e1d1ab, #eae0c8 75%); }
.detail-pack img { width: auto; max-width: 100%; height: 350px; object-fit: contain; }
.detail-copy h1 { font-size: clamp(2.9rem, 6vw, 6rem); line-height: 1; }
.detail-lead { margin-block: 18px 24px; color: var(--muted); font-size: 1.12rem; line-height: 1.5; }
.detail-price { margin: 10px 0 0; color: var(--muted); font-size: .85rem; }
.detail-info { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; padding-block: 54px 30px; }
.detail-info p { color: var(--muted); font-size: .9rem; line-height: 1.65; }
.specs { margin: 0; border-top: 1px solid var(--line); }
.specs div { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.specs dt { font-weight: 650; }
.specs dd { margin: 0; }
.related-product { padding-block: 12px 42px; }
.related-product a { font-weight: 650; text-underline-offset: 4px; }

@media (max-width: 640px) {
  .detail-grid, .detail-info { grid-template-columns: 1fr; gap: 24px; }
  .detail-hero { padding-block: 20px 30px; }
  .detail-pack { min-height: 275px; padding: 18px; }
  .detail-pack img { height: 235px; }
  .detail-info { padding-top: 34px; }
}

button, input, textarea, select { font: inherit; }
button.button { cursor: pointer; border: 1px solid transparent; }
.button.secondary { color: var(--green); background: var(--paper); border: 1px solid var(--green); }
.button.secondary:hover { background: #eee8d7; }
.actions { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.marketplace { margin-top: 16px; }
.quantity { width: 6rem; }
.price { font-size: 1.45rem; font-weight: 750; margin: 10px 0; }
.footer-contact { display: grid; gap: 5px; text-align: right; padding-block: 14px; }
.footer-contact address { font-style: normal; }
.shop-page { padding-block: 45px 65px; }
.shop-page h1 { font-size: clamp(2.9rem, 6vw, 5.5rem); line-height: 1; margin-bottom: 24px; }
.shop-page h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); margin-bottom: 10px; }
.shop-grid, .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.panel { background: #f4efe4; border: 1px solid var(--line); border-radius: 10px; padding: clamp(16px, 3vw, 28px); }
.form-stack { display: grid; gap: 14px; }
.form-stack > .button { justify-self: start; }
.form-stack label, .quantity, .order-search label { display: grid; gap: 5px; font-size: .9rem; font-weight: 650; }
input, textarea, select { min-width: 0; width: 100%; padding: 10px; border: 1px solid #aaa18d; border-radius: 4px; background: #fffdf7; color: var(--ink); }
textarea { resize: vertical; }
label.check { display: flex; align-items: center; }
.check input { width: auto; }
.cart-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--line); padding-block: 12px; }
.cart-row p { margin: 6px 0 0; }
.muted { color: var(--muted); font-size: .9rem; }
.message { padding: 12px 14px; border: 1px solid var(--line); background: #fffdf7; border-radius: 5px; }
.order-status, .login-form { max-width: 38rem; }
.admin-bar, .admin-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.admin-bar { justify-content: space-between; margin-bottom: 20px; }
.admin-tabs a { padding: 8px 10px; }
.admin-tabs a[aria-current] { border-radius: 4px; background: var(--green); color: white; }
.admin-product, .admin-order { margin-bottom: 16px; }
.admin-order form { margin-top: 15px; }
.order-search { margin-bottom: 18px; }
.order-search > a { align-self: center; }
@media (max-width: 680px) {
  .shop-grid, .form-grid { grid-template-columns: 1fr; }
  .nav { flex-wrap: wrap; padding-block: 10px; row-gap: 8px; }
}
.showcase img.custom-bottle { max-height: 80%; object-fit: contain; }
.pack img.custom-bottle { max-height: 235px; object-fit: contain; }
@media (max-width: 640px) {
  .pack img.custom-bottle { max-height: 172px; }
}