/* 1. Foundations */
:root {
   --ink: #17211b;
   --muted: #6b736e;
   --green: #28771c;
   --green-dark: #1c5c13;
   --green-pale: #f0f7eb;
   --line: #e2e7e0;
   --soft: #f5f6f3;
   --dark: #101612;
   --blue: #406de4;
   --radius: 10px;
   --shadow: 0 8px 30px #14231a0a;
   --font: Inter, "Helvetica Neue", Arial, sans-serif
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 24px
}

body {
   margin: 0;
   font-family: var(--font);
   color: var(--ink);
   background: #fff;
   font-size: 16px;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased
}

body.dialog-open {
   overflow: hidden
}

h1,
h2,
h3,
h4,
p {
   margin: 0
}

h1,
h2,
h3 {
   line-height: 1.2;
   letter-spacing: -.025em
}

button,
input,
select,
textarea {
   font: inherit;
   color: inherit
}

button {
   cursor: pointer
}

button:disabled {
   cursor: not-allowed;
   opacity: .45
}

button {
   border: 0;
   background: none
}

a {
   color: inherit;
   text-decoration: none
}

a,
button,
input,
select,
textarea {
   -webkit-tap-highlight-color: transparent;
   outline-offset: 4px
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
   outline: 2px solid var(--green)
}

img {
   display: block;
   max-width: 100%
}

svg.icon {
   width: 22px;
   height: 22px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.65;
   stroke-linecap: round;
   stroke-linejoin: round;
   flex-shrink: 0;
   vertical-align: middle
}

[hidden] {
   display: none !important
}

.icon-sprite {
   position: absolute;
   width: 0;
   height: 0;
   overflow: hidden
}

.sr-only,
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0
}

.skip-link {
   position: fixed;
   top: -80px;
   left: 20px;
   z-index: 100;
   background: #fff;
   padding: 12px 20px
}

.skip-link:focus {
   top: 10px
}

.container {
   width: min(1440px, calc(100% - 64px));
   margin-inline: auto
}

.eyebrow {
   display: block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .12em;
   color: var(--green);
   line-height: 1.6
}

.muted {
   color: var(--muted)
}

.small {
   font-size: 13px
}

.text-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 550;
   color: var(--green);
   padding: 0
}

.text-link:hover {
   text-decoration: underline;
   text-underline-offset: 4px
}

.text-button {
   padding: 0;
   font-size: 13px;
   text-decoration: underline;
   text-underline-offset: 3px;
   color: var(--muted)
}

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   min-height: 46px;
   padding: 12px 21px;
   border-radius: 6px;
   border: 1px solid transparent;
   font-size: 14px;
   font-weight: 650;
   line-height: 1.35;
   transition: background .2s, border-color .2s, transform .15s;
   text-align: center
}

.button svg.icon {
   width: 19px;
   height: 19px
}

.button-primary {
   background: var(--green);
   color: #fff;
   border-color: var(--green)
}

.button-primary:hover:not(:disabled) {
   background: var(--green-dark);
   border-color: var(--green-dark)
}

.button-outline {
   border-color: #cfd7ce;
   background: #fff
}

.button-outline:hover {
   border-color: var(--green);
   color: var(--green);
   background: #f8fbf6
}

.button-quiet {
   background: #f1f4ef;
   color: #44503f
}

.button-block {
   width: 100%
}

.button:active:not(:disabled) {
   transform: translateY(1px)
}

.button-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px
}

.icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border-radius: 6px;
   padding: 8px;
   flex-shrink: 0
}

.icon-button:hover {
   background: #91b58016
}

.panel {
   background: white;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 24px
}

.section-title {
   display: flex;
   justify-content: space-between;
   gap: 24px;
   align-items: end;
   margin-bottom: 24px
}

.section-title h2 {
   font-size: 28px;
   font-weight: 700;
   margin-top: 5px
}

.section-title p {
   font-size: 14px;
   color: var(--muted);
   margin-top: 9px
}

.section-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 20px
}

.section-heading h2 {
   font-size: 19px;
   display: flex;
   align-items: center;
   gap: 10px
}

.step-number {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   flex-shrink: 0;
   border-radius: 50%;
   font-size: 13px;
   background: var(--green-pale);
   color: var(--green);
   font-weight: 700
}

.sidebar-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 20px
}

.sidebar-heading h2 {
   font-size: 20px
}

.field-help {
   color: var(--muted);
   font-size: 12px;
   line-height: 1.6;
   margin-top: 12px
}

.demo-note,
.form-note {
   color: #808780;
   font-size: 12px;
   text-align: center;
   line-height: 1.6;
   margin-top: 12px
}

.inline-error,
.quantity-error {
   font-size: 13px;
   color: #a0382e;
   margin-top: 10px
}

.quantity-error {
   text-align: center
}

.check-list {
   list-style: none;
   padding: 0;
   display: grid;
   gap: 12px;
   margin: 22px 0;
   font-size: 14px
}

.check-list li {
   position: relative;
   padding-left: 24px
}

.check-list li:before {
   content: "";
   width: 6px;
   height: 12px;
   border-right: 2px solid var(--green);
   border-bottom: 2px solid var(--green);
   transform: rotate(42deg);
   position: absolute;
   left: 3px;
   top: 2px
}

.empty-state {
   text-align: center;
   padding: 70px 24px;
   grid-column: 1/-1;
   color: var(--muted)
}

.empty-state>.icon {
   width: 44px;
   height: 44px;
   color: #80a56f;
   margin-bottom: 18px
}

.empty-state h2,
.empty-state h3 {
   color: var(--ink);
   font-size: 24px;
   margin-bottom: 10px
}

.empty-state .button {
   margin-top: 22px
}

.empty-small {
   padding: 28px 0;
   color: var(--muted);
   font-size: 14px
}

.noscript {
   padding: 24px;
   background: #fff3d7;
   border: 1px solid #ffe0a0;
   text-align: center
}

/* 2. Shared storefront header and footer */
.store-header {
   background: var(--dark);
   color: white
}

.top-strip {
   background: #0c120e;
   border-bottom: 1px solid #ffffff14;
   font-size: 12px;
   color: #cbd2c7
}

.top-strip .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-block: 7px;
   gap: 16px
}

.top-strip-left {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   min-width: 0;
   white-space: nowrap
}

.top-strip-star {
   display: inline-flex;
   align-items: center;
   color: #8bc355
}

.top-strip-star .icon {
   width: 13px;
   height: 13px;
   fill: #8bc355;
   stroke: #8bc355
}

.top-strip-headline {
   color: #fff;
   font-weight: 700;
   font-size: 11.5px;
   letter-spacing: .025em;
   text-transform: uppercase
}

.top-strip-divider {
   color: #ffffff38;
   font-weight: 300;
   margin-inline: 2px
}

.top-strip-tagline {
   color: #a4afa0;
   font-weight: 400;
   font-size: 11.5px
}

.top-strip-right {
   display: inline-flex;
   align-items: center;
   gap: 22px;
   flex-shrink: 0
}

.top-strip-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   color: #cbd2c7;
   font-weight: 500;
   text-decoration: none;
   transition: color .15s
}

.top-strip-link .icon {
   width: 13px;
   height: 13px;
   stroke-width: 1.8;
   color: #9aa794;
   transition: color .15s
}

.top-strip-link:hover {
   color: #fff
}

.top-strip-link:hover .icon {
   color: #8bc355
}

.main-header {
   display: flex;
   align-items: center;
   gap: 34px;
   padding-block: 23px
}

.brand {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   line-height: 1.1
}

.brand strong {
   font-size: 32px;
   font-weight: 750;
   letter-spacing: -1.7px
}

.brand strong>span {
   color: #8bc355
}

.brand small {
   font-size: 12px;
   font-weight: 500;
   letter-spacing: .18em;
   margin-top: 8px;
   color: #b5beb1
}

.header-search {
   position: relative;
   flex: 1;
   min-width: 150px;
   max-width: 540px;
   display: flex;
   background: #fff;
   border-radius: 6px;
   overflow: hidden;
   color: var(--ink)
}

.header-search input {
   width: 100%;
   height: 46px;
   border: 0;
   background: #fff;
   padding: 0 48px 0 17px;
   font-size: 13px
}

.header-search button {
   position: absolute;
   right: 0;
   top: 0;
   width: 44px;
   height: 46px;
   display: grid;
   place-items: center
}

.header-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 25px;
   flex-shrink: 0;
   margin-left: auto
}

.desktop-action {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   color: #e1e6df;
   padding: 0
}

.desktop-action>.icon {
   width: 20px;
   height: 20px
}

.header-cart {
   display: flex;
   align-items: center;
   gap: 8px;
   color: white;
   font-size: 13px;
   padding: 0
}

.header-cart .icon {
   width: 23px;
   height: 23px
}

.cart-count {
   background: #73aa38;
   color: #fff;
   font-size: 12px;
   font-weight: 600;
   min-width: 21px;
   height: 21px;
   line-height: 21px;
   border-radius: 50%;
   display: inline-block;
   text-align: center;
   padding: 0 4px
}

.create-order {
   font-size: 13px;
   background: #5d962e;
   border-color: #5d962e;
   min-height: 44px;
   padding: 12px 17px
}

.category-nav {
   border-top: 1px solid #ffffff14
}

.category-nav>.container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding-block: 14px
}

.category-nav a {
   font-size: 12px;
   font-weight: 600;
   color: #e5e9e2
}

.category-nav a:hover {
   color: #98c566
}

.category-nav .sale-link {
   color: #c2e59f
}

.trust-strip {
   background: #f5f6f3;
   border-bottom: 1px solid var(--line)
}

.trust-strip>.container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   padding: 14px 0;
   gap: 20px
}

.trust-strip>.container>span,
.trust-strip>.container>button {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 13px;
   text-align: left;
   padding: 0
}

.trust-strip strong,
.trust-strip small {
   display: block
}

.trust-strip strong {
   font-size: 12px;
   font-weight: 650
}

.trust-strip small {
   font-size: 12px;
   color: var(--muted);
   margin-top: 2px
}

.trust-strip .icon {
   width: 26px;
   height: 26px;
   color: #4d5a47
}

.mobile-only {
   display: none
}

.store-footer {
   background: var(--dark);
   color: #dce4d8;
   border-top: 1px solid #ffffff14;
   margin-top: 55px;
   padding-top: 36px;
}

.footer-main {
   display: flex;
   flex-direction: column;
   gap: 24px;
   padding-bottom: 24px;
}

.footer-columns {
   display: grid;
   grid-template-columns: 1.15fr 1.15fr 1.2fr 1.35fr;
   gap: 28px;
}

.footer-heading {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   font-weight: 700;
   color: #ffffff;
   margin: 0 0 13px;
   letter-spacing: -0.01em;
}

.footer-heading .icon {
   width: 17px;
   height: 17px;
   color: #8fc963;
   flex-shrink: 0;
}

.footer-links {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 7px;
}

.footer-links li {
   font-size: 12.5px;
   line-height: 1.45;
}

.footer-links a,
.footer-links button {
   font-size: 12.5px;
   color: #a4b29e;
   background: transparent;
   border: none;
   padding: 0;
   text-align: left;
   cursor: pointer;
   transition: color .15s ease;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-weight: 450;
}

.footer-links a:hover,
.footer-links button:hover {
   color: #8fc963;
   text-decoration: underline;
}

.footer-contact-link,
.footer-contact-text {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 12.5px;
   color: #b8c6b2;
}

.footer-contact-link .icon,
.footer-contact-text .icon {
   width: 14px;
   height: 14px;
   color: #7d8d77;
   flex-shrink: 0;
}

.footer-contact-link:hover {
   color: #8fc963;
   text-decoration: underline;
}

.footer-support-box {
   background: #ffffff0a;
   border: 1px solid #ffffff1a;
   border-radius: 8px;
   padding: 13px 15px;
   box-shadow: 0 2px 6px #00000026;
}

.support-box-head {
   display: flex;
   gap: 10px;
   align-items: center;
   margin-bottom: 7px;
}

.support-icon {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #8fc9631f;
   color: #8fc963;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.support-icon .icon {
   width: 16px;
   height: 16px;
}

.support-box-head strong {
   display: block;
   font-size: 13px;
   font-weight: 650;
   color: #ffffff;
   line-height: 1.25;
}

.support-box-head small {
   display: block;
   font-size: 11.5px;
   color: #92a48c;
   margin-top: 1px;
}

.footer-support-box p {
   font-size: 12px;
   color: #a7b6a1;
   line-height: 1.45;
   margin: 0 0 10px;
}

.footer-support-box .button {
   font-size: 12px;
   font-weight: 600;
   padding: 7px 12px;
   min-height: 34px;
   border-color: #8fc96366;
   color: #e3eedb;
   background: #8fc96317;
   border-radius: 6px;
}

.footer-support-box .button:hover {
   background: #8fc963;
   color: #0c120e;
   border-color: #8fc963;
}

.footer-trust-grid {
   display: grid;
   grid-template-columns: 1.15fr 1.6fr 1.25fr;
   gap: 24px;
   padding-top: 18px;
   border-top: 1px solid #ffffff14;
   align-items: start;
}

.trust-cell-header {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: 13px;
   font-weight: 700;
   color: #ffffff;
   margin-bottom: 8px;
}

.trust-cell-header .icon {
   width: 17px;
   height: 17px;
   color: #8fc963;
   flex-shrink: 0;
}

.badge-row {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   align-items: center;
}

.badge-card {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 1px 3px #00000040;
   transition: transform .15s ease;
}

.badge-card:hover {
   transform: translateY(-1px);
}

.badge-card svg {
   display: block;
   height: 25px;
   width: auto;
}

.benefit-bullets {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.benefit-bullets li {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   color: #c4d0be;
   font-weight: 500;
}

.benefit-check {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: #8fc96324;
   color: #8fc963;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.benefit-check .icon {
   width: 9px;
   height: 9px;
}

.footer-bottom-bar {
   background: #090e0b;
   border-top: 1px solid #ffffff12;
   padding-block: 14px;
}

.footer-bottom-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
}

.footer-bottom-info {
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.footer-legal-nav {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 7px;
}

.footer-legal-nav button {
   background: none;
   border: none;
   padding: 0;
   font-size: 12px;
   color: #8b9985;
   cursor: pointer;
   text-decoration: none;
   font-weight: 500;
   transition: color .15s ease;
}

.footer-legal-nav button:hover {
   color: #8fc963;
   text-decoration: underline;
}

.legal-dot {
   color: #ffffff26;
   font-size: 11px;
   user-select: none;
}

.footer-credits-row {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 3px;
}

.footer-copy-text {
   font-size: 11px;
   color: #687762;
   margin: 0;
}

.footer-dev-credit {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   color: #7b8b76;
}

.dev-badge {
   display: inline-flex;
   align-items: center;
   line-height: 0;
   transition: opacity .15s ease, transform .15s ease;
   text-decoration: none;
}

.dev-badge:hover {
   opacity: 0.85;
   transform: translateY(-1px);
}

.dev-badge img {
   display: block;
   height: 30px;
   width: auto;
   filter: brightness(1.4) contrast(1.05);
}

.footer-bottom-logo {
   display: flex;
   align-items: center;
}

.footer-bottom-logo .brand-image {
   width: 160px;
   height: auto;
   display: block;
}

.footer-bottom-logo img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: contain;
}

@media(max-width:960px) {
   .footer-columns {
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
   }

   .footer-trust-grid {
      grid-template-columns: 1fr 1fr;
      gap: 18px;
   }

   .footer-trust-grid .trust-cell:last-child {
      grid-column: span 2;
   }
}

@media(max-width:640px) {
   .store-footer {
      margin-top: 36px;
      padding-top: 26px;
   }

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

   .footer-trust-grid {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .footer-trust-grid .trust-cell:last-child {
      grid-column: span 1;
   }

   .footer-bottom-flex {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
   }

   .footer-bottom-logo .brand-image {
      width: 140px;
   }
}

.breadcrumbs {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   padding: 22px 0;
   font-size: 12px;
   color: #85907f
}

.breadcrumbs a,
.breadcrumbs button {
   color: #63715e;
   font-size: 12px;
   padding: 0
}

.breadcrumbs span:last-child {
   color: #4a5545
}

.page-main {
   padding-bottom: 10px
}

.page-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px;
   margin: 15px 0 34px
}

.page-heading h1 {
   font-size: 40px;
   letter-spacing: -1.2px;
   margin: 6px 0 11px
}

.page-heading p {
   color: var(--muted);
   font-size: 15px
}

.sample-link {
   display: flex;
   gap: 10px;
   align-items: center;
   font-size: 13px;
   color: var(--green)
}

/* 3. Homepage and reusable product imagery */
.hero {
   background: #edf0eb;
   overflow: hidden
}

.hero-grid {
   display: grid;
   grid-template-columns: 1fr 1.06fr;
   align-items: center;
   min-height: 465px;
   gap: 38px
}

.hero-copy {
   padding-block: 40px;
   position: relative;
   z-index: 1
}

.hero h1 {
   font-size: 58px;
   line-height: 1.05;
   letter-spacing: -2.4px;
   margin: 16px 0 21px;
   max-width: 600px;
   font-weight: 750
}

.hero h1>span {
   color: var(--green)
}

.hero-copy>p {
   font-size: 16px;
   color: #646d60;
   line-height: 1.7;
   max-width: 475px;
   margin-bottom: 27px
}

.hero-checks {
   display: flex;
   align-items: center;
   gap: 18px;
   margin-top: 24px;
   font-size: 12px;
   color: #626e5c
}

.hero-checks>span {
   display: flex;
   align-items: center;
   gap: 5px
}

.hero-checks svg.icon {
   width: 15px;
   height: 15px;
   color: var(--green)
}

.hero-visual {
   position: relative;
   align-self: stretch;
   min-height: 490px
}

.hero-photo {
   width: calc(100% + 100px);
   height: 100%;
   object-fit: cover;
   max-width: none;
   position: absolute;
   top: 0;
   right: -45px;
   object-position: 50% center
}

.hero-visual:before {
   content: "";
   position: absolute;
   left: -60px;
   top: 0;
   width: 120px;
   height: 100%;
   z-index: 1;
   background: linear-gradient(90deg, #edf0eb, transparent);
   pointer-events: none
}

.hero-price-card {
   position: absolute;
   right: 0;
   bottom: 29px;
   background: #121a14ed;
   color: white;
   border: 1px solid #ffffff40;
   border-radius: 9px;
   padding: 19px 22px;
   width: 235px;
   z-index: 2;
   box-shadow: 0 8px 20px #0002
}

.hero-price-card h2 {
   font-size: 16px;
   line-height: 1.4;
   font-weight: 550;
   letter-spacing: 0;
   margin: 5px 0 12px
}

.offer-label {
   font-size: 12px;
   letter-spacing: .13em;
   color: #a5cc83;
   font-weight: 600
}

.hero-price-card dl {
   display: grid;
   gap: 8px;
   margin: 0 0 13px
}

.hero-price-card dl>div {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   font-size: 12px
}

.hero-price-card dt {
   color: #cbd2c4
}

.hero-price-card dd {
   margin: 0;
   font-weight: 600
}

.hero-price-card>small {
   display: block;
   font-size: 12px;
   color: #8e9b87;
   line-height: 1.5;
   border-top: 1px solid #ffffff22;
   padding-top: 11px
}

.hero-caption {
   position: absolute;
   bottom: 22px;
   left: 10px;
   font-size: 12px;
   letter-spacing: .12em;
   color: #52604a;
   z-index: 2
}

.feature-strip {
   border-bottom: 1px solid var(--line);
   background: #fff
}

.feature-strip .container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 18px;
   padding-block: 23px
}

.feature-strip .container>div,
.feature-strip button {
   display: flex;
   align-items: center;
   text-align: left;
   gap: 12px;
   padding: 0
}

.feature-strip .icon {
   width: 27px;
   height: 27px;
   color: #52604a
}

.feature-strip strong,
.feature-strip small {
   display: block
}

.feature-strip strong {
   font-size: 12px;
   font-weight: 650
}

.feature-strip small {
   font-size: 12px;
   color: #8b9485;
   margin-top: 4px
}

.home-section {
   padding-top: 38px
}

.home-section .eyebrow {
   font-size: 12px
}

.home-section .section-title {
   margin-bottom: 20px
}

.category-grid {
   display: grid;
   grid-template-columns: repeat(8, minmax(0, 1fr));
   gap: 12px
}

.category-card {
   border: 1px solid var(--line);
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 12px 6px 15px;
   background: #fff;
   transition: border-color .2s, box-shadow .2s
}

.category-card:hover {
   border-color: #94b580;
   box-shadow: var(--shadow)
}

.category-card .product-art {
   width: 92px;
   height: 92px;
   flex-shrink: 0;
   margin-bottom: 9px
}

.category-card strong {
   font-size: 12px;
   font-weight: 550;
   text-align: center;
   line-height: 1.3
}

.category-card>span:last-child {
   font-size: 12px;
   color: #8d9688;
   margin-top: 4px
}

.product-art {
   display: block;
   position: relative;
   aspect-ratio: 1;
   width: 100%;
   overflow: hidden
}

.product-art>img {
   height: 100%;
   width: 100%;
   object-fit: contain;
   display: block
}

.product-art .hoodie-art {
   filter: brightness(.34)
}

.sprite-art>img {
   position: absolute;
   width: 300%;
   height: 300%;
   max-width: none;
   left: calc(var(--col)*-100%);
   top: calc(var(--row)*-100%);
   object-fit: fill
}

.home-products {
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 16px
}

.product-card {
   border: 1px solid var(--line);
   border-radius: 9px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   min-width: 0;
   background: white;
   transition: border-color .2s, box-shadow .2s
}

.product-card:hover {
   border-color: #adbca3;
   box-shadow: 0 6px 20px #13230c07
}

.product-card-image {
   background: #f6f7f4;
   position: relative;
   padding: 12px 16px 5px
}

.product-card-image .product-art {
   max-width: 260px;
   margin: auto
}

.badge {
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   line-height: 1.5;
   background: #1d271f;
   color: white;
   border-radius: 4px;
   padding: 4px 7px
}

.badge-new {
   background: #edf5e5;
   color: #377225
}

.product-card .badge {
   position: absolute;
   top: 13px;
   left: 12px;
   z-index: 1
}

.wish-button {
   position: absolute;
   top: 8px;
   right: 8px;
   color: #6f786a;
   z-index: 1;
   background: #ffffff99;
   width: 32px;
   height: 32px;
   border-radius: 50%
}

.wish-button svg {
   width: 17px;
   height: 17px
}

.wish-button.saved {
   color: var(--green);
   background: #ecf5e4
}

.wish-button.saved svg {
   fill: #b9d9a5
}

.product-card-body {
   padding: 16px;
   display: flex;
   flex: 1;
   flex-direction: column
}

.card-category {
   color: #8d9687;
   font-size: 12px;
   display: block;
   margin-bottom: 5px
}

.product-card h3 {
   font-size: 14px;
   line-height: 1.4;
   letter-spacing: -.1px;
   min-height: 39px;
   font-weight: 650
}

.card-description {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.6;
   margin: 10px 0 12px
}

.card-price {
   font-size: 12px;
   color: #7a8474;
   margin-top: 9px
}

.card-price strong {
   font-size: 18px;
   letter-spacing: -.5px;
   color: var(--ink);
   margin-left: 2px
}

.card-meta {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-top: 13px;
   margin-bottom: 18px
}

.color-dots {
   display: flex;
   gap: 6px;
   align-items: center
}

.color-dots>span {
   width: 13px;
   height: 13px;
   border: 1px solid #0002;
   background: var(--dot);
   border-radius: 50%
}

.decoration-icons {
   display: flex;
   gap: 7px;
   color: #8b9783
}

.decoration-icons svg {
   width: 16px;
   height: 16px
}

.product-card-actions {
   display: flex;
   gap: 7px;
   margin-top: auto
}

.product-card-actions .button {
   flex: 1;
   padding: 10px 8px;
   min-height: 39px;
   font-size: 12px;
   white-space: nowrap
}

.home-products .product-card-body {
   padding: 13px
}

.home-products .card-category {
   display: none
}

.home-products .card-price strong {
   font-size: 16px
}

.home-products .product-card-image {
   padding: 12px 10px 3px
}

.home-products .card-meta {
   margin-block: 11px 15px
}

.home-products .product-card h3 {
   font-size: 13px
}

.assistance-banner {
   display: grid;
   grid-template-columns: 230px 1fr 300px;
   align-items: center;
   gap: 25px;
   background: #f0f5ec;
   border: 1px solid #dfe9d7;
   border-radius: 12px;
   padding: 30px 35px;
   margin-top: 50px
}

.assistance-art img {
   width: 220px
}

.assistance-copy h2 {
   font-size: 29px;
   line-height: 1.2;
   margin: 8px 0 13px
}

.assistance-copy p {
   font-size: 14px;
   color: #75816b;
   max-width: 470px;
   margin-bottom: 22px
}

.assistance-copy .eyebrow {
   font-size: 12px
}

.assistance-copy .button {
   font-size: 12px;
   min-height: 42px;
   padding: 11px 16px
}

.assistance-note {
   border-left: 1px solid #d5e1ca;
   padding-left: 30px;
   display: flex;
   flex-direction: column;
   gap: 17px
}

.assistance-note strong {
   font-size: 23px;
   font-weight: 550;
   line-height: 1.4;
   letter-spacing: -.5px;
   color: #405637
}

.assistance-note span {
   font-size: 12px;
   color: #839375
}

/* 4. Catalog and filters */
.catalog-layout {
   display: grid;
   grid-template-columns: 228px minmax(0, 1fr);
   gap: 32px
}

.catalog-sidebar {
   padding: 22px;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: white
}

.catalog-sidebar h2 {
   font-size: 18px
}

.catalog-sidebar fieldset {
   padding: 20px 0;
   border: 0;
   border-top: 1px solid var(--line);
   margin: 0
}

.catalog-sidebar legend {
   float: left;
   width: 100%;
   font-size: 14px;
   font-weight: 650;
   margin: 0 0 13px
}

.catalog-sidebar legend+* {
   clear: both
}

.filter-option {
   display: flex;
   align-items: center;
   gap: 9px;
   font-size: 13px;
   color: #636e5e;
   margin-bottom: 9px;
   cursor: pointer;
   line-height: 1.35
}

.filter-option input {
   accent-color: var(--green);
   width: 15px;
   height: 15px;
   flex-shrink: 0;
   margin: 0
}

.filter-dot {
   width: 12px;
   height: 12px;
   border: 1px solid #0002;
   border-radius: 50%
}

.filter-size-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 7px
}

.filter-size input {
   position: absolute;
   opacity: 0
}

.filter-size span {
   display: grid;
   place-items: center;
   padding: 8px 0;
   border: 1px solid var(--line);
   border-radius: 4px;
   font-size: 12px;
   cursor: pointer
}

.filter-size input:checked+span {
   background: var(--green-pale);
   border-color: var(--green);
   color: var(--green)
}

.filter-size input:focus-visible+span {
   outline: 2px solid var(--green);
   outline-offset: 2px
}

.range-label {
   display: flex;
   justify-content: space-between;
   font-size: 13px
}

.catalog-sidebar input[type=range] {
   accent-color: var(--green);
   width: 100%;
   margin-block: 15px
}

.sidebar-help {
   background: #f2f6ee;
   border-radius: 8px;
   padding: 21px;
   margin-top: 22px
}

.sidebar-help>.icon {
   color: var(--green);
   width: 28px;
   height: 28px;
   margin-bottom: 12px
}

.sidebar-help h3 {
   font-size: 16px;
   line-height: 1.35
}

.sidebar-help p {
   font-size: 12px;
   color: #7b8871;
   line-height: 1.7;
   margin: 10px 0 14px
}

.catalog-search {
   display: flex;
   align-items: center;
   gap: 10px;
   border: 1px solid var(--line);
   border-radius: 7px;
   padding: 0 15px;
   margin-bottom: 18px
}

.catalog-search .icon {
   width: 18px;
   color: #93a08a
}

.catalog-search input {
   padding: 12px 0;
   width: 100%;
   background: none;
   border: 0;
   font-size: 14px;
   outline: 0
}

.catalog-toolbar {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 20px;
   font-size: 13px
}

.catalog-toolbar>span {
   color: #798471
}

.catalog-sort {
   margin-left: auto;
   display: flex;
   align-items: center;
   gap: 9px
}

.catalog-sort label {
   font-size: 12px;
   color: #8e9887
}

.catalog-sort select {
   font-size: 12px;
   border: 1px solid var(--line);
   padding: 10px 26px 10px 10px;
   border-radius: 5px;
   background: #fff;
   max-width: 170px
}

.view-toggle {
   display: flex;
   gap: 3px
}

.view-toggle button {
   width: 34px;
   height: 34px;
   border: 1px solid transparent;
   color: #929d8b
}

.view-toggle button[aria-pressed=true] {
   border-color: #d9e3d1;
   color: var(--green);
   background: #f5f8f2
}

.view-toggle .icon {
   width: 17px;
   height: 17px
}

.catalog-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 24px
}

.catalog-grid .product-card h3 {
   font-size: 17px;
   min-height: 44px
}

.catalog-grid .product-card-image {
   padding: 24px 25px 10px
}

.catalog-grid .product-card-body {
   padding: 20px
}

.catalog-grid .card-price strong {
   font-size: 21px
}

.catalog-grid .product-card-actions .button {
   min-height: 43px;
   font-size: 13px
}

.catalog-grid.list-view {
   grid-template-columns: 1fr
}

.list-view .product-card {
   display: grid;
   grid-template-columns: 230px 1fr
}

.list-view .product-card h3 {
   min-height: 0
}

.list-view .product-card-body {
   justify-content: center
}

.list-view .product-card-actions {
   max-width: 350px;
   margin-top: 0
}

.list-view .card-description {
   margin: 5px 0
}

.list-view .card-meta {
   margin: 10px 0
}

.filters-trigger {
   display: none
}

.filter-dialog {
   padding: 0
}

.filter-dialog #filter-dialog-content {
   overflow-y: auto;
   flex: 1
}

.filter-dialog .catalog-sidebar {
   border: 0;
   border-radius: 0;
   display: block;
   padding: 0 24px 25px
}

.filter-dialog .catalog-sidebar>.sidebar-heading {
   display: none
}

.filter-dialog>#apply-filters {
   margin: 16px 24px;
   width: calc(100% - 48px)
}

/* 5. Product page and preserved Fabric workspace */
.product-page-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 25px;
   margin: 0 0 25px
}

.product-page-top h1 {
   font-size: 31px;
   letter-spacing: -1px;
   margin-top: 4px
}

.product-page-top .eyebrow {
   font-size: 12px
}

.product-top-actions {
   display: flex;
   gap: 20px
}

.product-top-actions .text-link {
   font-size: 12px
}

.product-categories-toggle {
   display: none
}

.product-columns {
   display: grid;
   grid-template-columns: 198px minmax(330px, 1fr) minmax(450px, 1.19fr);
   gap: 24px;
   align-items: start
}

.product-sidebar {
   position: sticky;
   top: 24px
}

.product-sidebar .panel {
   padding: 18px 13px
}

.product-sidebar h2 {
   font-size: 15px;
   margin: 2px 7px 17px
}

.product-sidebar nav {
   display: grid;
   gap: 5px
}

.product-category {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 5px;
   border: 1px solid transparent;
   border-radius: 6px;
   font-size: 12px
}

.product-category .product-art {
   width: 39px;
   flex-shrink: 0
}

.product-category.active {
   background: var(--green-pale);
   border-color: #8bbe6d;
   color: var(--green)
}

.product-category:hover {
   background: #f4f7f1
}

.product-sidebar .button {
   padding: 10px 4px;
   font-size: 12px;
   min-height: 40px;
   margin-top: 16px
}

.product-sidebar .sidebar-help {
   padding: 17px
}

.product-sidebar .sidebar-help h3 {
   font-size: 14px
}

.product-sidebar .sidebar-help p {
   font-size: 12px
}

.visual-column,
.ordering-column {
   min-width: 0
}

.visual-sticky {
   position: sticky;
   top: 24px
}

.preview-card {
   background: #f5f6f3;
   border: 1px solid var(--line);
   border-radius: 10px;
   overflow: hidden
}

.preview-top {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 15px 0;
   position: relative;
   z-index: 2
}

.preview-top .badge {
   font-size: 12px;
   letter-spacing: .08em;
   background: #fff;
   color: #748369;
   border: 1px solid #e1e8dc
}

.preview-top>span:nth-child(2) {
   font-size: 12px;
   letter-spacing: .08em;
   margin-left: auto;
   color: #8b9683
}

.preview-top .icon-button {
   width: 29px;
   height: 29px;
   color: #7d8c73
}

.preview-top .icon {
   width: 17px;
   height: 17px
}

.preview-top button[aria-pressed=false] {
   opacity: .4
}

.garment-stage {
   position: relative;
   overflow: hidden;
   background: radial-gradient(ellipse, #fcfdfb, #f2f4f0)
}

.canvas-host {
   position: relative;
   width: 100%;
   aspect-ratio: 1;
   max-width: 540px;
   margin: auto;
   touch-action: pan-y
}

.canvas-container {
   max-width: 100%;
   touch-action: none
}

.canvas-upload-hint {
   position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   color: #b4c6ff;
   background: transparent;
   font-size: 12px;
   font-weight: 500;
   line-height: 1.1;
   transform: translate(-50%, -50%);
   padding: 3px;
   z-index: 1
}

.canvas-upload-hint svg {
   width: 21px;
   height: 21px
}

.stage-loading {
   position: absolute;
   inset: 0;
   z-index: 3;
   background: #f4f6f1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 18px;
   font-size: 14px;
   color: var(--muted)
}

.spinner {
   width: 24px;
   height: 24px;
   border: 2px solid #d2e4c6;
   border-top-color: var(--green);
   border-radius: 50%;
   animation: spin .9s linear infinite
}

@keyframes spin {
   to {
      transform: rotate(360deg)
   }
}

.stage-bottom {
   position: absolute;
   bottom: 11px;
   left: 16px;
   right: 16px;
   display: flex;
   justify-content: space-between;
   pointer-events: none;
   color: #8d9884;
   font-size: 12px;
   letter-spacing: .025em
}

.stage-bottom>span:first-child {
   display: flex;
   gap: 5px;
   align-items: center
}

.mini-dash {
   display: inline-block;
   width: 10px;
   height: 10px;
   border: 1px dashed #849ddd
}

.side-tabs {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px;
   padding: 12px 13px;
   background: #fff
}

.side-tab {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   border: 1px solid var(--line);
   border-radius: 6px;
   padding: 7px 3px;
   background: #fff;
   font-size: 12px;
   color: #738169;
   min-width: 0
}

.side-tab.active {
   border-color: var(--green);
   background: #f4f9f0;
   color: var(--green)
}

.side-tab img {
   width: 50px;
   height: 46px;
   object-fit: contain;
   filter: brightness(.4)
}

.side-status {
   display: none;
   position: absolute;
   top: 6px;
   right: 6px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--green)
}

.side-tab.has-artwork .side-status {
   display: block
}

.studio-help {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: 6px;
   font-size: 12px;
   color: #8a9781;
   line-height: 1.5;
   padding: 0 15px 15px;
   background: #fff
}

.studio-help svg.icon {
   width: 13px;
   height: 13px;
   flex-shrink: 0;
   margin-top: 2px
}

.catalog-preview-note {
   padding: 0 16px 14px;
   margin: 0;
   background: #fff;
   font-size: 12px
}

.product-information {
   padding: 24px 1px 0
}

.product-name-row h2 {
   font-size: 23px;
   line-height: 1.25
}

.stock-status {
   color: var(--green);
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   margin-top: 10px
}

.stock-status .icon {
   width: 14px;
   height: 14px
}

.sku {
   font-size: 12px;
   letter-spacing: .06em;
   color: #909a89;
   margin-top: 8px
}

.detail-price {
   display: flex;
   gap: 10px;
   align-items: baseline;
   margin: 12px 0 14px
}

.detail-price strong {
   font-size: 27px;
   color: var(--green);
   letter-spacing: -.8px
}

.detail-price del {
   font-size: 14px;
   color: #92998d
}

.detail-price>span {
   font-size: 12px;
   color: #97a18f
}

.product-information>p:not(.sku):not(.preview-disclaimer) {
   font-size: 14px;
   color: #6e7a65;
   line-height: 1.75
}

.product-information .check-list {
   font-size: 12px;
   gap: 10px;
   line-height: 1.5;
   margin-block: 19px
}

.product-information .check-list li {
   padding-left: 20px
}

.product-information .check-list li:before {
   width: 4px;
   height: 9px;
   border-width: 1.5px;
   top: 3px
}

.product-description {
   font-size: 13px;
   border-top: 1px solid var(--line);
   padding-top: 16px
}

.product-description summary {
   cursor: pointer;
   color: #46583a;
   text-decoration: underline;
   text-underline-offset: 4px
}

.product-description p,
.product-description-content p {
   font-size: 13px;
   line-height: 1.7;
   color: #76846a;
   margin-top: 13px
}

.product-description-content p:first-child {
   margin-top: 10px;
}

.product-description-content ul,
.product-description-content ol {
   margin: 10px 0 12px 0;
   padding-left: 20px;
   color: #76846a;
   font-size: 13px;
   line-height: 1.6;
}

.product-description-content ul {
   list-style-type: disc;
}

.product-description-content ol {
   list-style-type: decimal;
}

.product-description-content li {
   margin-bottom: 6px;
}

.product-description-content strong,
.product-description-content b {
   color: #22272a;
   font-weight: 600;
}

.product-description-content h3,
.product-description-content h4,
.product-description-content h5 {
   color: #101712;
   margin-top: 14px;
   margin-bottom: 6px;
   font-size: 13.5px;
   font-weight: 600;
}

.product-description-content table {
   width: 100%;
   border-collapse: collapse;
   margin: 12px 0;
   font-size: 12.5px;
}

.product-description-content th,
.product-description-content td {
   border: 1px solid var(--line, #e2e8f0);
   padding: 6px 10px;
   text-align: left;
}

.product-description-content th {
   background: #f8fafc;
   font-weight: 600;
   color: #22272a;
}

.preview-disclaimer {
   font-size: 12px;
   color: #99a08f;
   margin-top: 18px;
   line-height: 1.6
}

.order-progress {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #fff;
   margin-bottom: 17px;
   padding: 15px 12px;
   gap: 7px
}

.order-progress a {
   display: flex;
   align-items: center;
   gap: 6px;
   color: #929c8b;
   font-size: 12px
}

.order-progress a>span {
   width: 22px;
   height: 22px;
   flex-shrink: 0;
   border: 1px solid #d5ddcf;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 12px
}

.order-progress a strong {
   font-weight: 500
}

.order-progress .active {
   color: var(--green)
}

.order-progress .active>span {
   background: var(--green);
   color: #fff;
   border-color: var(--green)
}

.order-progress .complete>span {
   background: var(--green-pale);
   border-color: #98be83;
   color: var(--green)
}

.order-step {
   padding: 23px;
   margin-bottom: 18px
}

.order-step .section-heading h2 {
   font-size: 17px;
   letter-spacing: -.4px
}

.selected-value {
   font-size: 12px;
   color: var(--green);
   white-space: nowrap
}

.color-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 14px;
   margin: 4px 0 22px;
   font-size: 12px;
   color: #88937f
}

.color-row strong {
   color: #505f46;
   font-weight: 550
}

.color-options {
   display: flex;
   gap: 11px;
   align-items: center;
   padding: 2px
}

.color-swatch {
   display: grid;
   place-items: center;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   background: var(--swatch);
   color: #fff;
   box-shadow: inset 0 0 0 1px #0002;
   position: relative;
   padding: 4px
}

.color-swatch:after {
   content: "";
   position: absolute;
   inset: -3px;
   border: 1px solid transparent;
   border-radius: 50%
}

.color-swatch.selected:after {
   border-color: var(--green)
}

.color-swatch .icon {
   width: 15px;
   height: 15px;
   visibility: hidden
}

.color-swatch.selected .icon {
   visibility: visible
}

.color-swatch.light {
   color: #5d6c52
}

.size-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 9px
}

.size-cell {
   border: 1px solid var(--line);
   border-radius: 7px;
   background: #fff;
   text-align: center;
   padding: 10px 8px
}

.size-cell>label {
   font-size: 12px;
   display: block;
   font-weight: 600;
   line-height: 1.4;
   margin-bottom: 6px
}

.quantity-input {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3px
}

.quantity-input button {
   font-size: 18px;
   width: 28px;
   height: 29px;
   background: #f7f8f5;
   border-radius: 4px;
   flex-shrink: 0;
   line-height: 1;
   padding: 0;
   color: #8c987f
}

.quantity-input input {
   width: 100%;
   min-width: 0;
   max-width: 42px;
   text-align: center;
   border: 0;
   background: transparent;
   appearance: textfield;
   -moz-appearance: textfield;
   font-size: 13px;
   height: 29px;
   padding: 0;
   outline-offset: 0
}

.quantity-input input::-webkit-inner-spin-button,
.quantity-input input::-webkit-outer-spin-button {
   appearance: none;
   margin: 0
}

.size-cell.has-quantity {
   border-color: var(--green);
   background: #f7fbf4;
   box-shadow: inset 0 0 0 .5px var(--green)
}

.size-cell.has-quantity>label {
   color: var(--green)
}

.size-cell.has-quantity button {
   background: #eff5e9;
   color: var(--green)
}

.order-assistance {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 16px 18px;
   border: 1px solid #c2d8ae;
   background: #f4faee;
   border-radius: 8px;
   margin-bottom: 18px
}

.phone-circle {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--green);
   color: white;
   flex-shrink: 0
}

.phone-circle .icon {
   width: 20px;
   height: 20px
}

.order-assistance strong {
   font-size: 12px;
   display: block
}

.order-assistance p {
   font-size: 12px;
   color: #849575;
   line-height: 1.6;
   margin-top: 3px
}

.order-assistance .button {
   font-size: 12px;
   padding: 9px 12px;
   min-height: 36px;
   white-space: nowrap;
   margin-left: auto
}

.step-description {
   font-size: 12px;
   color: #8a9681;
   line-height: 1.6;
   margin: -9px 0 17px
}

.side-pill {
   font-size: 12px;
   font-weight: 550;
   background: #edf4e7;
   color: var(--green);
   padding: 4px 7px;
   border-radius: 4px;
   white-space: nowrap
}

.upload-zone {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   gap: 9px;
   background: #fafcf8;
   border: 1px dashed #9dbb8b;
   border-radius: 8px;
   width: 100%;
   padding: 22px 15px;
   transition: background .2s, border-color .2s
}

.upload-zone:hover,
.upload-zone.dragover {
   background: #eef7e7;
   border-color: var(--green)
}

.upload-icon {
   color: var(--green);
   display: grid;
   place-items: center
}

.upload-icon .icon {
   width: 31px;
   height: 31px
}

.upload-zone strong {
   font-size: 14px;
   font-weight: 550;
   line-height: 1.6
}

.upload-zone strong span {
   color: var(--green);
   font-weight: 650
}

.upload-zone small {
   font-size: 12px;
   color: #9aa78f
}

.sample-prompt {
   text-align: center;
   font-size: 12px;
   color: #8e9a85;
   margin: 11px 0 21px
}

.sample-prompt button {
   font-size: 12px;
   color: var(--green);
   padding: 0;
   text-decoration: underline;
   text-underline-offset: 3px
}

.control-heading {
   font-size: 13px;
   letter-spacing: 0;
   margin: 18px 0 12px;
   font-weight: 650
}

.method-options {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 9px
}

.method-card {
   position: relative;
   display: flex;
   align-items: flex-start;
   gap: 8px;
   border: 1px solid var(--line);
   border-radius: 7px;
   padding: 13px 10px;
   cursor: pointer;
   min-width: 0
}

.method-card input {
   position: absolute;
   opacity: 0;
   width: 1px;
   height: 1px
}

.method-card:focus-within {
   outline: 2px solid var(--green);
   outline-offset: 2px
}

.method-card.selected {
   border-color: var(--green);
   background: #f7fbf3
}

.method-icon {
   color: #819574
}

.method-icon svg {
   width: 17px;
   height: 17px
}

.method-card strong {
   font-size: 12px;
   display: block;
   line-height: 1.4
}

.method-card small {
   font-size: 12px;
   display: block;
   color: #939e8b;
   margin: 5px 0 8px
}

.method-card b {
   font-size: 12px;
   color: #4c663d;
   font-weight: 600;
   display: block;
   white-space: nowrap
}

.method-card b span {
   font-size: 12px;
   color: #859c76;
   font-weight: 400
}

.radio-indicator {
   width: 12px;
   height: 12px;
   border: 1px solid #cfdbc6;
   border-radius: 50%;
   position: absolute;
   right: 8px;
   top: 10px;
   background: #fff
}

.selected .radio-indicator {
   border: 3px solid var(--green)
}

.method-card:has(input:disabled) {
   opacity: .4;
   cursor: not-allowed
}

.control-heading-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 3px;
   gap: 6px
}

.control-heading-row .small {
   font-size: 12px
}

.placement-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px
}

.placement-card {
   position: relative;
   border: 1px solid var(--line);
   border-radius: 6px;
   text-align: left;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 11px 7px 10px;
   gap: 5px;
   min-width: 0
}

.placement-card.selected {
   border-color: var(--green);
   background: #f7fbf3
}

.placement-card>strong {
   font-size: 12px;
   font-weight: 550;
   white-space: nowrap
}

.placement-card>small {
   font-size: 12px;
   color: #939f8a
}

.placement-card>b {
   font-size: 12px;
   color: #597546;
   font-weight: 550
}

.placement-card .placement-check {
   position: absolute;
   top: 6px;
   left: 6px;
   background: var(--green);
   color: #fff;
   border-radius: 50%;
   width: 13px;
   height: 13px;
   display: none;
   padding: 2px
}

.placement-card.selected .placement-check {
   display: block
}

.placement-card .placement-info {
   position: absolute;
   top: 6px;
   right: 6px;
   color: #9ca891;
   width: 12px;
   height: 12px
}

.placement-visual {
   position: relative;
   width: 45px;
   height: 42px;
   display: block;
   margin-bottom: 3px
}

.placement-visual img {
   width: 45px;
   height: 42px;
   object-fit: contain;
   opacity: .5
}

.placement-visual i {
   position: absolute;
   width: 8px;
   height: 5px;
   background: #447dde;
   left: var(--px, 50%);
   top: var(--py, 43%);
   transform: translateX(-50%);
   border-radius: 1px
}

.artwork-status {
   display: flex;
   justify-content: space-between;
   gap: 15px;
   margin-top: 18px;
   font-size: 12px;
   color: #798c6e
}

.artwork-status span:first-child {
   max-width: 75%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis
}

.design-controls {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   margin-top: 14px
}

.design-controls button {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   border: 1px solid var(--line);
   background: #fff;
   border-radius: 5px;
   font-size: 12px;
   padding: 9px 5px;
   min-height: 37px
}

.design-controls svg {
   width: 14px;
   height: 14px
}

.design-controls button:hover:not(:disabled) {
   border-color: #8fae7c;
   color: var(--green)
}

.transform-controls {
   margin-top: 17px;
   display: grid;
   gap: 10px
}

.transform-controls label {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 12px;
   color: #7f8e74
}

.transform-controls input {
   flex: 1;
   min-width: 0;
   accent-color: var(--blue);
   height: 22px
}

.transform-controls output {
   min-width: 32px;
   text-align: right;
   font-size: 12px;
   color: #839778
}

.info-note {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   background: #f2f6fe;
   border: 1px solid #dae3f4;
   border-radius: 6px;
   padding: 11px;
   margin-top: 18px;
   color: #7789a9
}

.info-note .icon {
   width: 15px;
   height: 15px;
   color: #5c7eb6;
   margin-top: 2px
}

.info-note p {
   font-size: 12px;
   line-height: 1.7
}

.order-summary {
   position: sticky;
   top: 24px;
   padding: 23px;
   background: #fbfcf9
}

.demo-tag {
   font-size: 12px;
   color: #8f9d84;
   border: 1px solid #dce4d6;
   padding: 3px 5px;
   border-radius: 4px;
   letter-spacing: .05em
}

.order-product {
   display: flex;
   align-items: center;
   gap: 13px;
   margin: 15px 0 20px
}

.order-product>div:first-child {
   width: 66px;
   flex-shrink: 0
}

.order-product .product-art,
.order-product img {
   width: 66px;
   height: 70px;
   object-fit: contain;
   border-radius: 6px;
   background: #f0f3ec
}

.order-product .sprite-art img {
   width: 300%;
   height: 300%
}

.order-product>div:last-child {
   display: flex;
   flex-direction: column;
   gap: 4px
}

.order-product strong {
   font-size: 13px;
   font-weight: 600;
   line-height: 1.4
}

.order-product span {
   font-size: 12px;
   color: #819474;
   text-transform: capitalize
}

.order-product small {
   font-size: 12px;
   color: #9aa78f;
   line-height: 1.6
}

.summary-lines {
   margin: 0;
   display: grid;
   gap: 10px
}

.summary-lines>div {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   font-size: 12px
}

.summary-lines dt {
   color: #8b9782
}

.summary-lines dd {
   margin: 0;
   font-weight: 500;
   text-align: right;
   color: #4e6240;
   font-variant-numeric: tabular-nums
}

.summary-lines small {
   font-size: 12px;
   color: #abb5a3;
   margin-left: 3px
}

.summary-side-names {
   color: #839875;
   font-size: 12px;
   text-align: right;
   margin-top: 7px
}

.review-previews {
   display: flex;
   gap: 8px;
   margin-top: 12px
}

.review-previews:empty {
   display: none
}

.review-previews figure {
   margin: 0;
   width: 65px
}

.review-previews img {
   width: 65px;
   border: 1px solid #e5eadf;
   border-radius: 5px
}

.review-previews figcaption {
   font-size: 12px;
   color: #829674;
   text-align: center;
   margin-top: 3px
}

.price-breakdown {
   border-top: 1px solid var(--line);
   padding-top: 17px;
   margin-top: 19px
}

.grand-total {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   border-top: 1px solid var(--line);
   margin-top: 17px;
   padding: 19px 0 21px
}

.grand-total>span {
   font-size: 14px;
   font-weight: 600
}

.grand-total small {
   display: block;
   font-size: 12px;
   font-weight: 400;
   color: #8f9e84;
   margin-top: 5px
}

.grand-total strong {
   font-size: 27px;
   letter-spacing: -1px;
   white-space: nowrap
}

.grand-total strong span {
   font-size: 14px;
   letter-spacing: 0
}

.order-dock {
   position: fixed;
   bottom: 18px;
   right: max(24px, calc((100vw - 1440px)/2));
   z-index: 8;
   background: #fff;
   border: 1px solid #d5e0cd;
   box-shadow: 0 6px 25px #13270c20;
   padding: 13px 16px;
   border-radius: 9px;
   display: flex;
   align-items: center;
   gap: 28px;
   transition: transform .2s, visibility .2s;
   min-width: 335px
}

.order-dock>div {
   display: flex;
   flex-direction: column
}

.order-dock small {
   font-size: 12px;
   color: #94a088
}

.order-dock small>span {
   display: none
}

.order-dock strong {
   font-size: 21px;
   letter-spacing: -.7px
}

.order-dock .button {
   min-height: 41px;
   font-size: 12px
}

.order-dock.dock-hidden {
   transform: translateY(140%);
   visibility: hidden
}

/* 6. Forms, dialogs and shared cart */
form label:not(.filter-option):not(.filter-size):not(.method-card):not(.choice-card) {
   display: block;
   font-size: 13px;
   font-weight: 550;
   margin-bottom: 16px
}

form label>span:not(.required) {
   color: #9aa491;
   font-size: 12px;
   font-weight: 400
}

.required {
   color: #b65142
}

form input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=file]),
form select,
form textarea {
   width: 100%;
   border: 1px solid #d8e0d0;
   border-radius: 6px;
   background: #fff;
   padding: 11px 12px;
   font-size: 14px;
   color: #455b38;
   margin-top: 7px;
   min-height: 44px
}

form input::placeholder,
form textarea::placeholder {
   color: #a1ab99
}

form textarea {
   resize: vertical;
   min-height: 92px
}

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

.header-search input {
   margin-top: 0 !important;
   border: 0 !important;
   border-radius: 0 !important;
   padding: 0 48px 0 17px !important;
   color: #475241 !important
}

.header-search {
   font-size: 13px
}

.header-search input::placeholder {
   color: #879180
}

.drawer {
   position: fixed;
   inset: 0 0 0 auto;
   height: 100dvh;
   max-height: 100dvh;
   width: min(490px, 100%);
   max-width: 100%;
   margin: 0;
   border: 0;
   padding: 0;
   border-left: 1px solid var(--line);
   box-shadow: -8px 0 40px #06110022;
   background: #fff;
   color: var(--ink)
}

.drawer[open] {
   display: flex;
   flex-direction: column;
   animation: slide-in .22s ease-out
}

@keyframes slide-in {
   from {
      transform: translateX(100%)
   }

   to {
      transform: translateX(0)
   }
}

dialog::backdrop {
   background: #0b150db3;
   backdrop-filter: blur(3px)
}

.dialog-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
   padding: 24px;
   border-bottom: 1px solid var(--line)
}

.dialog-heading h2 {
   font-size: 25px
}

.dialog-heading .eyebrow {
   font-size: 12px;
   margin-bottom: 6px
}

.dialog-heading h2 .cart-count {
   vertical-align: middle;
   margin-left: 6px;
   background: var(--green-pale);
   color: var(--green)
}

.dialog-heading>.icon-button {
   background: #f5f8f1;
   color: #7f9172
}

.dialog-close {
   position: absolute;
   right: 17px;
   top: 17px;
   z-index: 3;
   background: #ffffffd9;
   color: #647356
}

.help-dialog {
   width: min(1050px, calc(100% - 40px));
   max-width: 1050px;
   max-height: calc(100dvh - 50px);
   padding: 0;
   border: 0;
   border-radius: 14px;
   color: var(--ink);
   overflow-y: auto
}

.help-layout {
   display: grid;
   grid-template-columns: 1fr 1fr
}

.help-intro {
   padding: 42px;
   background: #f3f7ee;
   overflow: hidden
}

.help-intro .eyebrow {
   font-size: 12px
}

.help-intro h2 {
   font-size: 39px;
   letter-spacing: -1.3px;
   margin: 12px 0 18px;
   line-height: 1.14
}

.help-intro>p {
   font-size: 14px;
   color: #6d7f60;
   line-height: 1.7
}

.help-intro .check-list {
   font-size: 13px;
   margin: 23px 0 0;
   gap: 13px
}

.help-kit {
   width: 250px;
   height: 200px;
   object-fit: contain;
   margin: 8px auto
}

.help-benefits {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 8px
}

.help-benefits>span {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   text-align: center;
   font-size: 12px;
   color: #7f9072
}

.help-benefits .icon {
   width: 25px;
   height: 25px;
   color: #586f48
}

.help-form-panel {
   padding: 43px 37px
}

.help-form-panel h3 {
   font-size: 27px;
   margin-bottom: 11px
}

.help-form-panel form>p:not(.form-note) {
   color: #87977b;
   font-size: 13px;
   margin-bottom: 23px
}

.help-topics {
   border: 1px solid var(--line);
   border-radius: 7px;
   padding: 14px 15px;
   margin: 0 0 16px
}

.help-topics legend {
   font-size: 12px;
   font-weight: 550;
   padding: 0 5px;
   color: #637756
}

.help-topics label {
   display: flex !important;
   align-items: center;
   gap: 9px;
   font-size: 12px !important;
   font-weight: 400 !important;
   color: #7d9170;
   margin-bottom: 11px !important
}

.help-topics label:last-child {
   margin-bottom: 0 !important
}

.help-topics input {
   width: 15px;
   height: 15px;
   accent-color: var(--green);
   margin: 0
}

.help-form-panel textarea {
   margin: 0
}

.character-count {
   display: block;
   text-align: right;
   color: #8b9c7f;
   font-size: 12px;
   margin: 4px 0 17px
}

.help-form-panel .form-note {
   font-size: 12px
}

.success-panel {
   padding: 45px 28px;
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 400px
}

.success-panel>.icon,
.success-mark {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   color: var(--green);
   background: var(--green-pale);
   padding: 15px;
   margin-bottom: 22px
}

.success-panel h3 {
   margin: 0 0 16px
}

.success-panel p {
   font-size: 14px;
   color: #849577;
   line-height: 1.7;
   margin-bottom: 24px
}

.success-panel .button {
   margin-top: 12px
}

.quick-dialog {
   width: min(480px, calc(100% - 32px));
   border: 0;
   border-radius: 12px;
   padding: 0;
   max-height: 90dvh;
   color: var(--ink)
}

.quick-dialog .dialog-heading h2 {
   font-size: 20px
}

.quick-dialog form {
   padding: 24px
}

.quick-product {
   display: flex;
   gap: 18px;
   align-items: center;
   margin-bottom: 23px
}

.quick-product>.product-art {
   width: 110px;
   flex-shrink: 0;
   background: #f4f7f0;
   border-radius: 8px
}

.quick-product p {
   font-size: 13px;
   color: #8a9980;
   line-height: 1.6;
   margin: 7px 0
}

.quick-product strong {
   font-size: 22px;
   letter-spacing: -.5px
}

.quick-product small {
   font-size: 12px;
   font-weight: 400;
   color: #8f9c86
}

.quick-total {
   border-top: 1px solid var(--line);
   margin: 19px 0;
   padding-top: 17px;
   display: flex;
   gap: 20px;
   justify-content: space-between;
   align-items: center
}

.quick-total span {
   font-size: 12px;
   color: #8c9b82
}

.quick-total strong {
   font-size: 19px;
   white-space: nowrap
}

.quick-customize {
   font-size: 12px;
   display: block;
   text-align: center;
   margin-top: 16px
}

.cart-content {
   padding: 24px;
   overflow-y: auto;
   flex: 1
}

.cart-item {
   border-bottom: 1px solid var(--line);
   padding-bottom: 23px;
   margin-bottom: 23px
}

.cart-item:last-child {
   margin-bottom: 0
}

.cart-item-head {
   display: flex;
   align-items: flex-start;
   gap: 13px
}

.cart-item-head>.product-art,
.cart-preview-image {
   width: 72px;
   height: 82px;
   flex-shrink: 0;
   border-radius: 6px;
   background: #f3f6ef;
   object-fit: contain
}

.cart-item-head>div {
   flex: 1;
   min-width: 0;
   padding-top: 5px
}

.cart-item h3 {
   font-size: 14px;
   line-height: 1.4;
   letter-spacing: -.1px
}

.cart-item p {
   font-size: 12px;
   color: #8e9d85;
   margin-top: 5px;
   line-height: 1.6
}

.cart-item-head>.icon-button {
   width: 28px;
   height: 30px;
   color: #a4ae9c;
   padding: 6px
}

.cart-item-head>.icon-button .icon {
   width: 15px;
   height: 15px
}

.cart-decoration {
   display: flex;
   flex-direction: column;
   font-size: 12px;
   gap: 4px;
   color: #6b8659;
   margin: 15px 0
}

.cart-decoration small {
   font-size: 12px;
   color: #94a28b
}

.cart-breakdown {
   display: grid;
   gap: 5px;
   margin: 13px 0 0
}

.cart-breakdown>div {
   display: flex;
   justify-content: space-between;
   gap: 15px;
   font-size: 12px;
   color: #94a38a
}

.cart-breakdown dd {
   margin: 0;
   color: #607b4d;
   font-variant-numeric: tabular-nums
}

.cart-line-total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 12px;
   font-size: 12px
}

.cart-line-total>span {
   color: #6f8560
}

.cart-line-total>strong {
   font-size: 16px
}

.cart-previews {
   display: flex;
   gap: 8px;
   margin-top: 12px
}

.cart-previews figure {
   margin: 0;
   width: calc(25% - 6px);
   max-width: 88px
}

.cart-previews img {
   border-radius: 4px;
   display: block;
   width: 100%;
   background: #f4f6f1
}

.cart-previews figcaption {
   text-align: center;
   font-size: 12px;
   color: #8f9f86;
   margin-top: 4px
}

.cart-footer {
   padding: 22px 24px;
   background: #f7f9f4;
   border-top: 1px solid var(--line)
}

.cart-total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 17px 0 6px;
   font-size: 15px;
   font-weight: 600
}

.cart-total strong {
   font-size: 27px;
   letter-spacing: -.8px
}

.cart-footer>.small {
   font-size: 12px;
   margin-bottom: 17px
}

.continue-shopping {
   display: block;
   text-align: center;
   margin: 13px auto 0;
   font-size: 12px
}

.cart-footer .demo-note {
   font-size: 12px
}

.disabled-link {
   pointer-events: none;
   opacity: .4
}

.sample-cart-list {
   list-style: none;
   font-size: 12px;
   margin: 15px 0 0;
   padding: 0;
   display: grid;
   gap: 6px;
   color: #718967
}

.sample-cart-list li {
   display: flex;
   justify-content: space-between;
   gap: 10px
}

.sample-cart-list span {
   font-weight: 600
}

.mobile-nav nav {
   display: grid;
   padding: 20px;
   gap: 8px
}

.mobile-nav nav>* {
   display: block;
   padding: 13px 8px;
   border-bottom: 1px solid var(--line);
   font-size: 15px;
   text-align: left
}

.toast {
   position: fixed;
   bottom: 22px;
   left: 50%;
   transform: translate(-50%, 15px);
   background: #173116;
   color: #fff;
   padding: 13px 23px;
   border-radius: 8px;
   box-shadow: 0 5px 28px #0003;
   font-size: 13px;
   line-height: 1.5;
   max-width: calc(100% - 30px);
   z-index: 20;
   opacity: 0;
   pointer-events: none;
   transition: opacity .2s, transform .2s;
   text-align: center
}

.toast.visible {
   opacity: 1;
   transform: translate(-50%, 0)
}

/* 7. Sample kit and checkout */
.sample-hero {
   display: grid;
   grid-template-columns: 1.2fr .8fr .85fr;
   gap: 25px;
   align-items: center;
   padding: 20px 0 28px
}

.sample-hero h1 {
   font-size: 44px;
   letter-spacing: -1.5px;
   line-height: 1.1;
   margin: 12px 0 18px
}

.sample-hero h2 {
   font-size: 20px;
   line-height: 1.45;
   max-width: 420px;
   letter-spacing: -.3px
}

.sample-hero h2 strong {
   color: var(--green);
   white-space: nowrap
}

.sample-hero p {
   font-size: 14px;
   color: #88987b;
   line-height: 1.8;
   margin-top: 15px;
   max-width: 460px
}

.sample-hero>img {
   width: 100%;
   max-width: 330px;
   justify-self: center
}

.sample-checklist {
   border: 1px solid #e2ebda;
   background: #f5f9f1;
   border-radius: 10px;
   padding: 24px
}

.sample-checklist .check-list {
   font-size: 13px;
   margin: 0;
   gap: 17px;
   color: #6c865a
}

.journey-steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   margin: 10px 0 28px;
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 22px 35px;
   gap: 30px
}

.journey-steps a {
   display: flex;
   align-items: center;
   gap: 11px;
   font-size: 13px;
   color: #92a288
}

.journey-steps a>span {
   display: grid;
   place-items: center;
   border: 1px solid #d3e0c7;
   border-radius: 50%;
   width: 28px;
   height: 28px;
   font-size: 13px;
   color: #799367
}

.journey-steps .active {
   color: var(--green);
   font-weight: 550
}

.journey-steps .active>span {
   background: var(--green);
   color: #fff;
   border-color: var(--green)
}

.sample-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
   gap: 26px;
   align-items: start
}

.sample-layout .section-title h2 {
   font-size: 24px
}

.sample-product {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 18px;
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 16px;
   flex-wrap: wrap
}

.sample-product.is-selected {
   border-color: #c2d5b2;
   background: #fcfefa
}

.sample-product>.product-art {
   width: 92px;
   flex-shrink: 0
}

.sample-product-info {
   flex: 1;
   min-width: 170px
}

.sample-product-info h3 {
   font-size: 16px;
   line-height: 1.4
}

.sample-product-info p {
   font-size: 12px;
   color: #8b9f7c;
   line-height: 1.7;
   margin: 7px 0
}

.sample-product-info .text-link {
   font-size: 12px
}

.sample-size-area {
   width: 100%;
   padding-top: 13px;
   border-top: 1px solid #e7edde
}

.sample-size-area>div:first-child {
   display: flex;
   justify-content: space-between;
   gap: 15px;
   margin-bottom: 11px;
   font-size: 12px
}

.sample-size-area strong {
   font-weight: 550
}

.sample-size-area small {
   font-size: 12px;
   font-weight: 400;
   color: #8da17c
}

.sample-size-area .text-button {
   font-size: 12px
}

.sample-sizes {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.sample-sizes button {
   font-size: 12px;
   min-width: 48px;
   min-height: 39px;
   border: 1px solid #dce5d4;
   border-radius: 5px;
   background: #fff;
   padding: 9px
}

.sample-sizes button[aria-pressed=true] {
   border-color: var(--green);
   background: #eef7e6;
   color: var(--green);
   font-weight: 600
}

.sample-limit {
   border: 1px dashed #ccdcbf;
   border-radius: 6px;
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 17px;
   color: #8aa273;
   font-size: 12px
}

.sample-limit .icon {
   width: 17px;
   height: 17px
}

.sample-summary {
   position: sticky;
   top: 24px;
   background: #fafcf7
}

.mini-product {
   display: flex;
   align-items: center;
   gap: 12px;
   padding-block: 16px;
   border-bottom: 1px solid var(--line)
}

.mini-product>.product-art {
   width: 62px;
   flex-shrink: 0
}

.mini-product>div {
   flex: 1;
   min-width: 0
}

.mini-product strong {
   display: block;
   font-size: 13px;
   line-height: 1.4
}

.mini-product span:not(.product-art) {
   display: block;
   font-size: 12px;
   color: #87a174;
   margin-top: 6px
}

.mini-product .icon-button {
   width: 27px;
   height: 27px;
   color: #9baf8e
}

.mini-product .icon {
   width: 15px;
   height: 15px
}

.sample-total {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 15px;
   padding: 23px 0;
   font-size: 17px;
   font-weight: 600
}

.sample-total small {
   display: block;
   font-size: 12px;
   font-weight: 400;
   color: #8aa177;
   margin-top: 4px
}

.sample-total strong {
   font-size: 29px;
   letter-spacing: -1px
}

.how-card {
   border: 1px solid #d7e3c9;
   border-radius: 7px;
   background: #f3f8ed;
   padding: 18px;
   margin-top: 25px
}

.how-card h3 {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   color: #63864a
}

.how-card h3 .icon {
   width: 18px;
   height: 18px
}

.how-card ol {
   padding-left: 18px;
   font-size: 12px;
   line-height: 1.75;
   color: #8da279;
   display: grid;
   gap: 10px;
   margin-bottom: 0
}

.sample-features {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 25px;
   border-top: 1px solid var(--line);
   margin-top: 35px;
   padding-top: 29px
}

.sample-features>span {
   display: flex;
   align-items: center;
   gap: 14px
}

.sample-features .icon {
   width: 31px;
   height: 31px;
   color: #728e5f
}

.sample-features strong {
   font-size: 13px;
   font-weight: 600
}

.sample-features small {
   display: block;
   font-size: 12px;
   font-weight: 400;
   color: #96a888;
   margin-top: 5px
}

.checkout-page .page-heading h1 {
   font-size: 36px
}

.checkout-demo-badge {
   display: flex;
   align-items: center;
   gap: 7px;
   color: #8a9d79;
   font-size: 12px;
   background: #f4f8ee;
   border-radius: 5px;
   padding: 9px 12px
}

.checkout-demo-badge .icon {
   width: 17px;
   height: 17px
}

.checkout-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
   gap: 30px;
   align-items: start;
   max-width: 1220px;
   margin: auto
}

.checkout-section {
   margin-bottom: 19px;
   padding: 25px 28px
}

.checkout-section h2 {
   font-size: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 24px
}

.checkout-section label:last-child {
   margin-bottom: 0 !important
}

.checkout-section .form-row:last-child label {
   margin-bottom: 0 !important
}

.choice-cards {
   display: grid;
   gap: 10px
}

.choice-card {
   display: flex;
   align-items: center;
   gap: 11px;
   padding: 16px;
   border: 1px solid var(--line);
   border-radius: 6px;
   cursor: pointer;
   font-size: 13px
}

.choice-card input {
   accent-color: var(--green);
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   margin: 0
}

.choice-card>span {
   flex: 1
}

.choice-card strong {
   display: block;
   font-size: 13px;
   font-weight: 600
}

.choice-card small {
   display: block;
   font-size: 12px;
   color: #98a78d;
   margin-top: 4px;
   font-weight: 400
}

.choice-card.selected {
   border-color: var(--green);
   background: #f6fbf1
}

.choice-card b {
   font-size: 13px;
   font-weight: 550;
   white-space: nowrap
}

.payment-cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px
}

.payment-cards .choice-card {
   padding: 14px 10px;
   align-items: flex-start
}

.payment-cards input {
   margin-top: 2px
}

.payment-cards strong {
   font-size: 12px
}

.payment-cards small {
   font-size: 12px
}

.klarna-header-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 4px 10px;
   background: #fdf2f4;
   border: 1px solid #ffd4de;
   border-radius: 20px;
}

.klarna-pill-logo svg {
   display: block;
}

.klarna-secure-tag {
   font-size: 11.5px;
   color: #3b141d;
   font-weight: 700;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.payment-cards-vertical {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-top: 4px;
}

.payment-cards-vertical .choice-card {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #ffffff;
   cursor: pointer;
   transition: all 0.2s ease;
}

.payment-cards-vertical .choice-card:hover {
   border-color: #2b5134;
}

.payment-cards-vertical .choice-card.selected {
   border-color: #2b5134;
   background: #f7faf5;
   box-shadow: 0 0 0 1px #2b5134;
}

.payment-cards-vertical .choice-card-featured {
   border-color: #ffd0dc;
}

.payment-cards-vertical .choice-card-featured.selected {
   border-color: #2b5134;
   background: #f6fbf1;
}

.b2b-highlight-tag {
   display: inline-block;
   background: #ffb3c7;
   color: #101712;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   padding: 2px 7px;
   border-radius: 10px;
   margin-left: 6px;
   vertical-align: middle;
}

.choice-card-title-row {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 4px;
}

.choice-card-content {
   flex: 1;
}

.choice-card-content strong {
   font-size: 13.5px;
   font-weight: 700;
   color: #101712;
}

.choice-card-content small {
   display: block;
   font-size: 12px;
   color: #556851;
   margin-top: 3px;
   line-height: 1.4;
}

.payment-badge-logo {
   flex-shrink: 0;
}

.klarna-b2b-details-box {
   background: #f8faf6;
   border: 1px solid #d8e5d3;
   border-radius: 8px;
   padding: 16px 18px;
   margin-top: -2px;
   margin-bottom: 6px;
   transition: all 0.3s ease;
}

.klarna-b2b-note {
   font-size: 12px;
   color: #2b5134;
   font-weight: 600;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 6px;
}

.field-hint {
   display: block;
   font-size: 11px;
   color: #6b7c65;
   margin-top: 3px;
   font-weight: 400;
}

.checkout-summary {
   position: sticky;
   top: 22px;
   background: #fafcf6;
   padding: 25px
}

.checkout-summary .cart-item-head>.product-art,
.checkout-summary .cart-preview-image {
   width: 62px;
   height: 72px
}

.checkout-summary .cart-item {
   margin-bottom: 18px;
   padding-bottom: 18px
}

.checkout-summary .cart-breakdown {
   display: none
}

.checkout-summary .summary-lines {
   margin-top: 22px
}

.checkout-summary .grand-total {
   margin-top: 20px
}

.checkout-help {
   font-size: 12px;
   display: flex;
   justify-content: center;
   margin: 20px auto 0
}

.checkout-help .icon {
   width: 18px;
   height: 18px
}

.order-success-dialog {
   width: min(490px, calc(100% - 32px));
   border: 0;
   border-radius: 12px;
   padding: 0;
   max-height: 90dvh;
   color: var(--ink)
}

.order-success-dialog h2 {
   font-size: 28px;
   line-height: 1.2;
   margin: 13px 0 18px
}

.success-mark {
   padding: 0;
   display: grid;
   place-items: center
}

.success-mark .icon {
   width: 30px;
   height: 30px
}

.success-total {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   font-size: 13px;
   width: 100%;
   background: #f5f9ef;
   padding: 17px;
   border-radius: 6px;
   margin: 0 0 12px;
   color: #75965a
}

.success-total strong {
   font-size: 17px;
   color: #315a20
}

/* 8. Responsive layouts */
@media(min-width:1600px) {
   .catalog-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr))
   }

   .hero-grid {
      min-height: 500px
   }

   .hero h1 {
      font-size: 64px
   }

   .product-columns {
      grid-template-columns: 210px minmax(370px, 1fr) minmax(480px, 1.15fr)
   }

   .sample-product {
      flex-wrap: nowrap
   }

   .sample-size-area {
      width: 250px;
      border-top: 0;
      padding: 0
   }

   .sample-sizes {
      gap: 5px
   }

   .sample-sizes button {
      min-width: 35px;
      padding: 6px
   }

   .sample-product>.product-art {
      width: 75px
   }

   .sample-product-info {
      min-width: 170px
   }

   .sample-product-info h3 {
      font-size: 14px
   }
}

@media(max-width:1350px) {
   .container {
      width: calc(100% - 48px)
   }

   .main-header {
      gap: 25px
   }

   .header-actions {
      gap: 18px
   }

   .desktop-action span {
      display: none
   }

   .desktop-action .icon {
      width: 23px;
      height: 23px
   }

   .header-search {
      max-width: 520px
   }

   .header-cart .desktop-cart-label {
      display: none
   }

   .hero h1 {
      font-size: 53px
   }

   .hero-grid {
      gap: 20px
   }

   .hero-visual {
      min-height: 460px
   }

   .hero-copy .button {
      font-size: 12px;
      padding: 12px 15px
   }

   .hero-checks {
      gap: 10px;
      font-size: 12px
   }

   .hero-price-card {
      right: 0;
      bottom: 25px;
      width: 210px;
      padding: 17px
   }

   .hero-caption {
      font-size: 12px
   }

   .feature-strip strong {
      font-size: 12px
   }

   .feature-strip small {
      font-size: 12px
   }

   .feature-strip .icon {
      width: 24px;
      height: 24px
   }

   .feature-strip .container {
      gap: 13px
   }

   .home-products {
      gap: 11px
   }

   .home-products .product-card h3 {
      font-size: 12px
   }

   .home-products .product-card-body {
      padding: 11px
   }

   .home-products .product-card-actions .button {
      font-size: 12px
   }

   .assistance-banner {
      grid-template-columns: 180px 1fr 200px;
      padding: 26px;
      gap: 24px
   }

   .assistance-note strong {
      font-size: 21px
   }

   .assistance-copy h2 {
      font-size: 26px
   }

   .product-columns {
      grid-template-columns: 180px minmax(305px, 1fr) minmax(405px, 1.2fr);
      gap: 18px
   }

   .product-sidebar .panel {
      padding: 16px 10px
   }

   .product-category {
      font-size: 12px
   }

   .order-step,
   .order-summary {
      padding: 20px
   }

   .method-card {
      gap: 6px;
      padding: 13px 8px
   }

   .method-card small {
      font-size: 12px
   }

   .method-card strong {
      font-size: 12px
   }

   .method-card .method-icon {
      display: none
   }

   .placement-card {
      padding-inline: 4px
   }

   .placement-card strong {
      font-size: 12px
   }

   .product-information h2 {
      font-size: 22px
   }

   .footer-grid {
      gap: 30px
   }

   .footer-support {
      padding-left: 23px
   }
}

@media(max-width:1150px) {
   .header-actions {
      gap: 17px
   }

   .main-header {
      gap: 25px
   }

   .brand strong {
      font-size: 29px
   }

   .brand small {
      font-size: 7px
   }

   .create-order {
      font-size: 12px;
      padding-inline: 12px
   }

   .category-nav a {
      font-size: 12px
   }

   .trust-strip strong {
      font-size: 12px
   }

   .trust-strip small {
      font-size: 12px
   }

   .trust-strip .icon {
      width: 23px;
      height: 23px
   }

   .hero h1 {
      font-size: 47px
   }

   .hero-copy>p {
      font-size: 14px;
      max-width: 380px
   }

   .hero-grid {
      grid-template-columns: 1fr 1fr
   }

   .hero-checks {
      flex-wrap: wrap;
      gap: 10px 16px;
      max-width: 320px
   }

   .hero-price-card {
      width: 190px;
      padding: 15px
   }

   .hero-price-card h2 {
      font-size: 14px
   }

   .hero-price-card dl>div {
      font-size: 12px
   }

   .hero-caption {
      display: none
   }

   .hero-visual {
      min-height: 440px
   }

   .feature-strip .container {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
   }

   .feature-strip .container>div:nth-child(4),
   .feature-strip button {
      display: none
   }

   .category-grid {
      grid-template-columns: repeat(4, 1fr)
   }

   .category-card {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0 9px;
      padding: 10px
   }

   .category-card .product-art {
      width: 58px;
      height: 58px;
      margin: 0
   }

   .category-card strong {
      max-width: 105px;
      font-size: 12px;
      text-align: left;
      flex: 1
   }

   .category-card>span:last-child {
      display: none
   }

   .home-products {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px
   }

   .home-products .product-card-image .product-art {
      width: 180px
   }

   .home-products .product-card-body {
      padding: 17px
   }

   .home-products .product-card h3 {
      font-size: 15px;
      min-height: 0
   }

   .home-products .card-price strong {
      font-size: 19px
   }

   .home-products .product-card-actions .button {
      font-size: 12px;
      min-height: 42px
   }

   .assistance-banner {
      grid-template-columns: 180px 1fr
   }

   .assistance-note {
      display: none
   }

   .product-columns {
      grid-template-columns: minmax(320px, 1fr) minmax(400px, 1.2fr)
   }

   .product-sidebar {
      display: none;
      position: relative;
      top: auto
   }

   .product-sidebar.mobile-expanded {
      display: block;
      grid-column: 1/-1
   }

   .product-sidebar.mobile-expanded nav {
      grid-template-columns: repeat(4, 1fr)
   }

   .product-sidebar.mobile-expanded .sidebar-help {
      display: none
   }

   .product-sidebar.mobile-expanded .button {
      width: max-content;
      margin-left: auto
   }

   .product-categories-toggle {
      display: inline-flex;
      font-size: 12px;
      min-height: 38px
   }

   .catalog-layout {
      grid-template-columns: 205px 1fr;
      gap: 23px
   }

   .catalog-sidebar {
      padding: 18px
   }

   .catalog-grid {
      gap: 17px;
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .catalog-grid .product-card h3 {
      font-size: 16px;
      min-height: 40px
   }

   .catalog-grid .product-card-image {
      padding: 20px 25px 5px
   }

   .sample-hero {
      grid-template-columns: 1.2fr .8fr
   }

   .sample-checklist {
      grid-column: 1/-1;
      padding: 20px
   }

   .sample-checklist .check-list {
      grid-template-columns: repeat(3, 1fr);
      font-size: 12px;
      gap: 15px 20px
   }

   .sample-hero h1 {
      font-size: 40px
   }

   .sample-hero>img {
      width: 270px
   }

   .sample-layout {
      grid-template-columns: minmax(0, 1.4fr) minmax(310px, 1fr);
      gap: 20px
   }

   .sample-layout>.panel {
      padding: 20px
   }

   .sample-product {
      padding: 14px
   }

   .sample-product>.product-art {
      width: 74px
   }

   .sample-product-info {
      min-width: 155px
   }

   .sample-product-info h3 {
      font-size: 14px
   }

   .sample-product-info p {
      font-size: 12px
   }

   .sample-sizes button {
      min-width: 40px
   }

   .sample-features {
      gap: 18px
   }

   .sample-features small {
      font-size: 12px
   }

   .checkout-layout {
      grid-template-columns: minmax(0, 1.2fr) minmax(325px, 1fr);
      gap: 22px
   }

   .checkout-section {
      padding: 23px
   }

   .payment-cards {
      grid-template-columns: 1fr
   }

   .payment-cards .choice-card {
      padding: 13px
   }

   .footer-grid {
      grid-template-columns: 1.2fr 1fr 1fr
   }

   .footer-support {
      display: none
   }

   .help-intro {
      padding: 35px
   }

   .help-form-panel {
      padding: 38px 28px
   }

   .help-intro h2 {
      font-size: 34px
   }
}

@media(max-width:800px) {
   .container {
      width: calc(100% - 36px)
   }

   .top-strip {
      font-size: 12px
   }

   .top-strip-right {
      display: none
   }

   .top-strip-tagline,
   .top-strip-divider {
      display: none
   }

   .top-strip .container {
      justify-content: center;
      padding-block: 7px
   }

   .main-header {
      gap: 15px;
      flex-wrap: wrap;
      padding-block: 15px;
      position: relative
   }

   .mobile-only {
      display: inline-flex
   }

   .main-header>.icon-button {
      width: 28px;
      padding: 0
   }

   .brand strong {
      font-size: 28px
   }

   .brand small {
      font-size: 6px;
      letter-spacing: .17em;
      margin-top: 6px
   }

   .header-actions {
      gap: 13px
   }

   .header-actions .icon-button {
      width: 27px;
      padding: 0
   }

   .header-actions .icon {
      width: 22px;
      height: 22px
   }

   .desktop-action,
   .create-order,
   .category-nav {
      display: none
   }

   .header-cart {
      gap: 5px
   }

   .cart-count {
      width: 18px;
      min-width: 18px;
      height: 18px;
      line-height: 18px;
      font-size: 12px
   }

   .header-search {
      display: none;
      order: 4;
      flex-basis: 100%;
      max-width: none;
      margin-top: 5px
   }

   .header-search.expanded {
      display: flex
   }

   .header-search input {
      height: 44px !important;
      font-size: 14px !important
   }

   .trust-strip>.container {
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding-block: 12px
   }

   .trust-strip>.container>button {
      display: none
   }

   .trust-strip>.container>span {
      gap: 7px;
      justify-content: center
   }

   .trust-strip .icon {
      width: 20px;
      height: 20px
   }

   .trust-strip strong {
      font-size: 12px
   }

   .trust-strip small {
      font-size: 12px
   }

   .hero-grid {
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      min-height: 380px
   }

   .hero h1 {
      font-size: 36px;
      letter-spacing: -1.4px
   }

   .hero-copy {
      padding-block: 30px
   }

   .hero .eyebrow {
      font-size: 12px;
      max-width: 280px
   }

   .hero-copy>p {
      font-size: 12px;
      margin-bottom: 22px
   }

   .hero-copy .button-row {
      gap: 8px
   }

   .hero-copy .button {
      font-size: 12px;
      padding: 10px 13px;
      min-height: 39px
   }

   .hero-visual {
      min-height: 380px
   }

   .hero-photo {
      right: -20px;
      width: calc(100% + 60px);
      object-position: 47% center
   }

   .hero-price-card {
      width: 157px;
      padding: 12px;
      bottom: 20px;
      right: 0
   }

   .offer-label {
      font-size: 7px
   }

   .hero-price-card h2 {
      font-size: 12px;
      margin: 4px 0 10px
   }

   .hero-price-card dl {
      gap: 5px;
      margin-bottom: 8px
   }

   .hero-price-card dl>div {
      font-size: 12px
   }

   .hero-price-card>small {
      font-size: 7px;
      padding-top: 7px
   }

   .hero-checks {
      font-size: 12px;
      gap: 9px;
      margin-top: 17px
   }

   .hero-checks svg {
      width: 13px;
      height: 13px
   }

   .feature-strip .container {
      padding-block: 17px;
      gap: 16px
   }

   .feature-strip strong {
      font-size: 12px
   }

   .feature-strip small {
      font-size: 12px
   }

   .feature-strip .icon {
      width: 23px;
      height: 23px
   }

   .feature-strip .container>div {
      gap: 9px
   }

   .home-section {
      padding-top: 30px
   }

   .section-title h2 {
      font-size: 25px
   }

   .section-title .text-link {
      font-size: 12px
   }

   .home-section .eyebrow {
      font-size: 12px
   }

   .category-grid {
      gap: 9px
   }

   .category-card {
      flex-direction: column;
      padding: 12px 5px;
      gap: 7px;
      flex-wrap: nowrap
   }

   .category-card strong {
      text-align: center;
      font-size: 12px;
      max-width: none;
      flex: none
   }

   .category-card .product-art {
      width: 65px;
      height: 65px
   }

   .home-products {
      gap: 12px
   }

   .home-products .product-card-body {
      padding: 13px
   }

   .home-products .product-card h3 {
      font-size: 13px;
      min-height: 37px
   }

   .home-products .product-card-image .product-art {
      width: 150px;
      max-width: 100%
   }

   .home-products .card-price strong {
      font-size: 17px
   }

   .home-products .badge {
      font-size: 12px
   }

   .assistance-banner {
      grid-template-columns: 150px 1fr;
      padding: 25px;
      gap: 20px;
      margin-top: 35px
   }

   .assistance-copy h2 {
      font-size: 23px
   }

   .assistance-copy p {
      font-size: 12px
   }

   .assistance-copy .button {
      font-size: 12px
   }

   .store-footer {
      margin-top: 45px;
      padding-top: 32px
   }

   .footer-grid {
      gap: 30px 20px;
      grid-template-columns: 1.3fr 1fr 1fr
   }

   .footer-grid h3 {
      font-size: 12px
   }

   .footer-grid>div>a:not(.brand),
   .footer-grid>div>button:not(.button) {
      font-size: 12px
   }

   .footer-grid p {
      font-size: 12px
   }

   .footer-bottom {
      font-size: 12px;
      gap: 30px
   }

   .breadcrumbs {
      padding-block: 17px;
      font-size: 12px;
      gap: 8px
   }

   .breadcrumbs a,
   .breadcrumbs button {
      font-size: 12px
   }

   .page-heading {
      margin: 8px 0 25px;
      align-items: start
   }

   .page-heading h1 {
      font-size: 32px
   }

   .page-heading p {
      font-size: 13px
   }

   .sample-link {
      font-size: 12px;
      max-width: 200px
   }

   .page-heading .eyebrow {
      font-size: 12px
   }

   .catalog-layout {
      grid-template-columns: 1fr
   }

   .catalog-sidebar {
      display: none
   }

   #filter-home {
      display: none
   }

   .filters-trigger {
      display: inline-flex;
      font-size: 12px;
      padding: 9px 12px;
      min-height: 38px
   }

   .filters-trigger .icon {
      width: 16px;
      height: 16px
   }

   .catalog-toolbar {
      gap: 12px
   }

   .catalog-sort label {
      display: none
   }

   .catalog-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px
   }

   .catalog-grid .product-card-image {
      padding: 17px 12px 5px
   }

   .catalog-grid .product-card-body {
      padding: 14px
   }

   .catalog-grid .product-card h3 {
      font-size: 14px;
      min-height: 38px
   }

   .catalog-grid .card-description {
      font-size: 12px
   }

   .catalog-grid .product-card-actions {
      flex-direction: column
   }

   .catalog-grid .product-card-actions .button {
      font-size: 12px;
      min-height: 37px
   }

   .catalog-grid .card-price strong {
      font-size: 18px
   }

   .catalog-grid .card-category {
      font-size: 12px
   }

   .list-view .product-card {
      grid-template-columns: 190px 1fr
   }

   .list-view .product-card-actions {
      flex-direction: row
   }

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

   .product-sidebar.mobile-expanded {
      grid-column: 1
   }

   .product-sidebar.mobile-expanded nav {
      grid-template-columns: repeat(3, 1fr)
   }

   .product-page-top {
      align-items: start;
      margin-bottom: 20px
   }

   .product-page-top h1 {
      font-size: 27px
   }

   .product-top-actions {
      flex-direction: column;
      gap: 10px;
      align-items: flex-end
   }

   .product-top-actions .text-link {
      font-size: 12px
   }

   .product-categories-toggle {
      font-size: 12px;
      padding: 9px 12px;
      min-height: 36px
   }

   .visual-sticky {
      position: static;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(210px, .6fr);
      gap: 22px;
      align-items: start
   }

   .preview-top {
      padding: 10px 11px 0
   }

   .preview-top .badge {
      font-size: 7px
   }

   .preview-top>span:nth-child(2) {
      font-size: 12px
   }

   .product-information {
      padding-top: 0
   }

   .product-name-row h2 {
      font-size: 23px
   }

   .product-information>p:not(.sku):not(.preview-disclaimer) {
      font-size: 13px
   }

   .product-information .check-list {
      font-size: 12px
   }

   .detail-price strong {
      font-size: 25px
   }

   .detail-price {
      gap: 9px;
      flex-wrap: wrap
   }

   .detail-price del,
   .detail-price>span {
      font-size: 12px
   }

   .product-description {
      font-size: 12px
   }

   .product-description p {
      font-size: 12px
   }

   .preview-disclaimer {
      font-size: 12px
   }

   .ordering-column {
      max-width: 680px;
      width: 100%;
      margin: auto
   }

   .order-progress {
      padding: 17px 20px;
      margin-bottom: 20px
   }

   .order-progress a {
      font-size: 12px;
      gap: 9px
   }

   .order-progress a>span {
      width: 25px;
      height: 25px;
      font-size: 12px
   }

   .order-step,
   .order-summary {
      padding: 25px
   }

   .order-step .section-heading h2 {
      font-size: 20px
   }

   .color-row {
      font-size: 14px
   }

   .color-swatch {
      width: 30px;
      height: 30px
   }

   .size-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px
   }

   .size-cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 11px 12px
   }

   .size-cell>label {
      margin: 0;
      font-size: 14px;
      min-width: 35px
   }

   .quantity-input {
      gap: 4px
   }

   .quantity-input button {
      width: 35px;
      height: 35px
   }

   .quantity-input input {
      font-size: 15px;
      width: 35px;
      max-width: 40px
   }

   .order-assistance strong {
      font-size: 14px
   }

   .order-assistance p {
      font-size: 12px
   }

   .order-assistance .button {
      font-size: 13px;
      min-height: 42px;
      padding: 10px 17px
   }

   .phone-circle {
      width: 44px;
      height: 44px
   }

   .step-description {
      font-size: 13px
   }

   .upload-zone {
      padding: 27px
   }

   .upload-zone strong {
      font-size: 16px
   }

   .upload-zone small {
      font-size: 12px
   }

   .sample-prompt,
   .sample-prompt button {
      font-size: 13px
   }

   .control-heading {
      font-size: 15px
   }

   .method-card {
      padding: 16px 13px
   }

   .method-card strong {
      font-size: 14px
   }

   .method-card small {
      font-size: 12px
   }

   .method-card b {
      font-size: 15px
   }

   .method-card b span {
      font-size: 12px
   }

   .method-card .method-icon {
      display: block
   }

   .method-icon svg {
      width: 21px;
      height: 21px
   }

   .method-card {
      gap: 10px
   }

   .radio-indicator {
      width: 14px;
      height: 14px;
      right: 10px;
      top: 13px
   }

   .placement-grid {
      gap: 12px
   }

   .placement-card {
      padding: 14px 9px
   }

   .placement-card strong {
      font-size: 13px
   }

   .placement-card small {
      font-size: 12px
   }

   .placement-card b {
      font-size: 13px
   }

   .placement-visual {
      width: 60px;
      height: 57px
   }

   .placement-visual img {
      width: 60px;
      height: 57px
   }

   .placement-visual i {
      width: 11px;
      height: 6px
   }

   .control-heading-row .small {
      font-size: 12px
   }

   .placement-card .placement-check {
      width: 16px;
      height: 16px
   }

   .placement-card .placement-info {
      width: 14px;
      height: 14px
   }

   .design-controls button {
      font-size: 14px;
      min-height: 44px
   }

   .design-controls svg {
      width: 16px;
      height: 16px
   }

   .transform-controls label {
      font-size: 14px
   }

   .transform-controls input {
      height: 32px
   }

   .info-note p {
      font-size: 12px
   }

   .info-note {
      padding: 14px
   }

   .info-note .icon {
      width: 18px;
      height: 18px
   }

   .artwork-status {
      font-size: 12px
   }

   .order-summary {
      position: static
   }

   .order-summary .section-heading h2 {
      font-size: 22px
   }

   .order-product strong {
      font-size: 16px
   }

   .order-product span {
      font-size: 13px
   }

   .order-product small {
      font-size: 12px
   }

   .summary-lines>div {
      font-size: 14px
   }

   .summary-lines small {
      font-size: 12px
   }

   .summary-side-names {
      font-size: 12px
   }

   .grand-total>span {
      font-size: 17px
   }

   .grand-total strong {
      font-size: 30px
   }

   .grand-total small {
      font-size: 12px
   }

   .order-dock {
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 0;
      border: 0;
      border-top: 1px solid #d6e2cc;
      padding: 12px 20px;
      justify-content: space-between;
      min-width: 0;
      gap: 18px;
      background: #fffffff7
   }

   .order-dock strong {
      font-size: 22px
   }

   .order-dock small {
      font-size: 12px
   }

   .order-dock .button {
      min-height: 45px;
      padding-inline: 27px;
      font-size: 14px
   }

   .product-page~#site-footer .footer-bottom {
      padding-bottom: 95px
   }

   .help-dialog {
      width: calc(100% - 28px);
      max-height: calc(100dvh - 28px)
   }

   .help-intro {
      padding: 32px 25px
   }

   .help-intro h2 {
      font-size: 29px
   }

   .help-intro>p {
      font-size: 12px
   }

   .help-intro .check-list {
      font-size: 12px;
      gap: 12px
   }

   .help-form-panel {
      padding: 38px 24px
   }

   .help-form-panel h3 {
      font-size: 24px
   }

   .help-form-panel .form-row {
      grid-template-columns: 1fr;
      gap: 0
   }

   .help-kit {
      height: 200px;
      margin-top: 20px
   }

   .help-benefits {
      grid-template-columns: 1fr 1fr;
      gap: 17px
   }

   .help-form-panel form input {
      font-size: 14px
   }

   .sample-hero h1 {
      font-size: 37px
   }

   .sample-hero h2 {
      font-size: 18px
   }

   .sample-hero p {
      font-size: 13px
   }

   .sample-hero .eyebrow {
      font-size: 12px
   }

   .sample-hero>img {
      width: 260px
   }

   .sample-checklist .check-list {
      grid-template-columns: 1fr 1fr
   }

   .journey-steps {
      padding: 19px;
      gap: 15px
   }

   .journey-steps a {
      font-size: 12px;
      gap: 8px
   }

   .sample-layout {
      grid-template-columns: 1fr
   }

   .sample-product {
      flex-wrap: nowrap;
      gap: 18px
   }

   .sample-size-area {
      width: 220px;
      border-top: 0;
      padding: 0
   }

   .sample-product-info {
      min-width: 180px
   }

   .sample-sizes {
      gap: 6px
   }

   .sample-sizes button {
      min-width: 34px;
      padding: 7px
   }

   .sample-summary {
      position: static
   }

   .sample-summary .mini-product strong {
      font-size: 15px
   }

   .sample-summary .mini-product span:not(.product-art) {
      font-size: 12px
   }

   .sample-features {
      grid-template-columns: 1fr 1fr;
      gap: 22px
   }

   .checkout-page .page-heading h1 {
      font-size: 29px
   }

   .checkout-demo-badge {
      font-size: 12px;
      max-width: 200px
   }

   .checkout-layout {
      grid-template-columns: 1fr;
      max-width: 680px
   }

   .checkout-summary {
      position: static
   }

   .payment-cards {
      grid-template-columns: repeat(3, 1fr)
   }

   .checkout-section h2 {
      font-size: 20px
   }

   .checkout-summary .summary-lines>div {
      font-size: 14px
   }

   .checkout-summary .cart-item h3 {
      font-size: 16px
   }

   .checkout-summary .cart-item p {
      font-size: 12px
   }

   .checkout-summary .cart-item-head>.product-art,
   .checkout-summary .cart-preview-image {
      width: 75px;
      height: 90px
   }

   .checkout-summary .cart-decoration {
      font-size: 13px
   }

   .checkout-summary .cart-decoration small {
      font-size: 12px
   }

   .checkout-summary .cart-item .cart-line-total {
      font-size: 13px
   }

   .checkout-summary .cart-line-total strong {
      font-size: 19px
   }

   .checkout-summary .demo-note {
      font-size: 12px
   }
}

@media(max-width:560px) {
   .container {
      width: calc(100% - 32px)
   }

   .hero-grid {
      grid-template-columns: 1fr;
      gap: 0
   }

   .hero-copy {
      padding: 31px 0 24px
   }

   .hero h1 {
      font-size: 43px;
      letter-spacing: -1.7px;
      line-height: 1.05;
      margin-top: 12px;
      max-width: 360px
   }

   .hero h1 br:last-of-type {
      display: none
   }

   .hero .eyebrow {
      font-size: 12px;
      max-width: none
   }

   .hero-copy>p {
      font-size: 14px;
      line-height: 1.7;
      max-width: 390px;
      margin: 0 0 22px
   }

   .hero-copy .button {
      font-size: 12px;
      min-height: 42px;
      padding: 11px 15px
   }

   .hero-checks {
      font-size: 12px;
      max-width: 100%;
      gap: 12px
   }

   .hero-visual {
      min-height: 285px;
      margin-inline: -16px
   }

   .hero-photo {
      width: 100%;
      right: 0;
      object-position: 50% 43%
   }

   .hero-visual:before {
      display: none
   }

   .hero-price-card {
      width: 170px;
      bottom: 17px;
      right: 17px;
      padding: 15px
   }

   .hero-price-card h2 {
      font-size: 13px
   }

   .hero-price-card dl>div {
      font-size: 12px
   }

   .hero-price-card>small {
      font-size: 12px
   }

   .hero-price-card .offer-label {
      font-size: 12px
   }

   .feature-strip .container {
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      padding-block: 19px
   }

   .feature-strip .container>div:nth-child(3) {
      display: none
   }

   .feature-strip strong {
      font-size: 12px
   }

   .feature-strip small {
      font-size: 12px
   }

   .feature-strip .container>div {
      gap: 8px
   }

   .section-title {
      gap: 15px
   }

   .section-title h2 {
      font-size: 23px
   }

   .section-title .text-link {
      font-size: 12px;
      white-space: nowrap
   }

   .section-title .eyebrow {
      font-size: 12px
   }

   .category-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 7px
   }

   .category-card {
      padding: 10px 4px;
      gap: 5px;
      min-height: 104px
   }

   .category-card .product-art {
      width: 56px;
      height: 56px
   }

   .category-card strong {
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: -.1px
   }

   .home-products {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 13px
   }

   .home-products .product-card-image .product-art {
      width: 150px
   }

   .home-products .product-card-body {
      padding: 12px
   }

   .home-products .product-card h3 {
      font-size: 13px;
      min-height: 37px
   }

   .home-products .card-price {
      font-size: 12px
   }

   .home-products .card-price strong {
      font-size: 17px
   }

   .home-products .product-card-actions .button {
      font-size: 12px;
      min-height: 39px
   }

   .product-card .badge {
      left: 8px;
      top: 9px;
      font-size: 12px
   }

   .product-card .wish-button {
      top: 5px;
      right: 5px;
      width: 28px;
      height: 28px;
      padding: 6px
   }

   .assistance-banner {
      grid-template-columns: 1fr;
      padding: 25px;
      gap: 0;
      margin-top: 32px
   }

   .assistance-art {
      display: none
   }

   .assistance-copy h2 {
      font-size: 25px;
      margin-top: 9px
   }

   .assistance-copy p {
      font-size: 13px
   }

   .assistance-copy .button-row {
      gap: 9px
   }

   .assistance-copy .button {
      font-size: 12px;
      padding: 11px;
      min-height: 42px
   }

   .assistance-copy .eyebrow {
      font-size: 12px
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 24px 20px
   }

   .footer-grid>div:first-child {
      grid-column: 1/-1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px
   }

   .footer-grid>div:first-child .brand strong {
      font-size: 29px
   }

   .footer-grid>div:first-child .brand small {
      font-size: 6px
   }

   .footer-grid p {
      margin: 0;
      font-size: 12px;
      max-width: 175px
   }

   .footer-grid h3 {
      font-size: 13px;
      margin-bottom: 15px
   }

   .footer-grid>div>a:not(.brand),
   .footer-grid>div>button:not(.button) {
      font-size: 12px;
      margin-bottom: 11px
   }

   .footer-bottom {
      flex-direction: column;
      gap: 10px;
      font-size: 12px
   }

   .footer-bottom span:last-child {
      text-align: left
   }

   .breadcrumbs {
      font-size: 12px;
      gap: 7px
   }

   .breadcrumbs a,
   .breadcrumbs button {
      font-size: 12px
   }

   .page-heading {
      display: block;
      margin-top: 5px
   }

   .page-heading h1 {
      font-size: 32px
   }

   .sample-link {
      margin-top: 16px;
      max-width: none;
      font-size: 12px
   }

   .catalog-toolbar {
      flex-wrap: wrap;
      gap: 10px
   }

   .catalog-toolbar>span {
      font-size: 12px
   }

   .catalog-sort {
      margin-left: auto
   }

   .catalog-sort select {
      font-size: 12px;
      max-width: 150px;
      padding: 9px
   }

   .view-toggle {
      display: none
   }

   .catalog-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px
   }

   .catalog-grid .product-card-image {
      padding: 16px 9px 4px
   }

   .catalog-grid .product-card-body {
      padding: 12px
   }

   .catalog-grid .product-card h3 {
      font-size: 13px;
      min-height: 36px
   }

   .catalog-grid .card-description {
      font-size: 12px;
      line-height: 1.6;
      margin: 7px 0
   }

   .catalog-grid .card-category {
      font-size: 12px
   }

   .catalog-grid .card-price {
      font-size: 12px
   }

   .catalog-grid .card-price strong {
      font-size: 17px
   }

   .catalog-grid .card-meta {
      gap: 6px;
      margin-top: 12px;
      margin-bottom: 14px
   }

   .color-dots {
      gap: 5px
   }

   .color-dots>span {
      width: 11px;
      height: 11px
   }

   .decoration-icons {
      gap: 4px
   }

   .decoration-icons .icon {
      width: 13px;
      height: 13px
   }

   .catalog-grid .product-card-actions .button {
      font-size: 12px;
      min-height: 37px
   }

   .catalog-grid.list-view {
      grid-template-columns: 1fr
   }

   .list-view .product-card {
      grid-template-columns: 125px 1fr
   }

   .list-view .product-card .product-card-actions {
      flex-direction: row
   }

   .list-view .product-card h3 {
      min-height: 0
   }

   .product-page-top h1 {
      font-size: 25px
   }

   .product-page-top .eyebrow {
      font-size: 12px
   }

   .product-top-actions {
      gap: 0
   }

   .product-top-actions>.text-link {
      display: none
   }

   .product-categories-toggle {
      font-size: 12px;
      padding: 8px;
      min-height: 33px;
      gap: 5px
   }

   .product-categories-toggle .icon {
      width: 14px;
      height: 14px
   }

   .product-sidebar.mobile-expanded nav {
      grid-template-columns: 1fr 1fr
   }

   .visual-sticky {
      display: block
   }

   .preview-top {
      padding: 10px 14px 0
   }

   .preview-top .badge {
      font-size: 12px
   }

   .preview-top>span:nth-child(2) {
      font-size: 12px
   }

   .canvas-host {
      max-width: 420px
   }

   .side-tabs {
      display: flex;
      overflow-x: auto;
      padding: 11px 12px;
      gap: 8px
   }

   .side-tab {
      flex: 1 0 69px;
      font-size: 12px
   }

   .side-tab img {
      height: 48px;
      width: 53px
   }

   .studio-help {
      font-size: 12px;
      line-height: 1.6
   }

   .stage-bottom {
      font-size: 12px
   }

   .product-information {
      padding-top: 22px
   }

   .product-name-row {
      display: flex;
      gap: 18px;
      align-items: start;
      justify-content: space-between
   }

   .product-name-row h2 {
      font-size: 25px;
      max-width: 290px
   }

   .stock-status {
      white-space: nowrap;
      font-size: 12px;
      margin-top: 6px
   }

   .detail-price strong {
      font-size: 28px
   }

   .product-information>p:not(.sku):not(.preview-disclaimer) {
      font-size: 14px
   }

   .product-information .check-list {
      font-size: 12px;
      gap: 9px
   }

   .product-description {
      font-size: 12px
   }

   .product-description p {
      font-size: 12px
   }

   .preview-disclaimer {
      font-size: 12px
   }

   .order-progress {
      padding: 16px 12px;
      gap: 7px
   }

   .order-progress a {
      font-size: 12px;
      gap: 6px
   }

   .order-progress a>span {
      width: 21px;
      height: 21px;
      font-size: 12px
   }

   .order-step,
   .order-summary {
      padding: 20px
   }

   .order-step .section-heading h2 {
      font-size: 17px
   }

   .step-number {
      width: 25px;
      height: 25px;
      font-size: 12px
   }

   .selected-value {
      font-size: 12px
   }

   .color-row {
      font-size: 12px
   }

   .color-swatch {
      width: 28px;
      height: 28px
   }

   .color-options {
      gap: 10px
   }

   .size-grid {
      gap: 9px
   }

   .size-cell {
      padding: 9px
   }

   .size-cell>label {
      font-size: 12px;
      min-width: 27px
   }

   .quantity-input {
      gap: 0
   }

   .quantity-input button {
      width: 29px;
      height: 35px;
      font-size: 19px
   }

   .quantity-input input {
      font-size: 14px;
      width: 30px
   }

   .order-assistance {
      padding: 15px 14px;
      gap: 11px;
      flex-wrap: wrap
   }

   .order-assistance>div {
      flex: 1;
      min-width: 170px
   }

   .order-assistance strong {
      font-size: 13px
   }

   .order-assistance p {
      font-size: 12px
   }

   .phone-circle {
      width: 36px;
      height: 36px
   }

   .order-assistance .button {
      margin-left: 47px;
      font-size: 12px;
      min-height: 37px;
      width: calc(100% - 47px)
   }

   .step-description {
      font-size: 12px
   }

   .upload-zone {
      padding: 22px 10px
   }

   .upload-zone strong {
      font-size: 14px
   }

   .upload-zone small {
      font-size: 12px
   }

   .sample-prompt,
   .sample-prompt button {
      font-size: 12px
   }

   .method-options {
      gap: 9px
   }

   .method-card .method-icon {
      display: none
   }

   .method-card {
      padding: 15px 11px
   }

   .method-card strong {
      font-size: 13px
   }

   .method-card small {
      font-size: 12px;
      line-height: 1.5
   }

   .method-card b {
      font-size: 13px
   }

   .method-card b span {
      font-size: 12px
   }

   .radio-indicator {
      right: 8px;
      top: 14px;
      width: 12px;
      height: 12px
   }

   .control-heading-row {
      align-items: flex-end;
      margin-bottom: 12px;
      gap: 12px
   }

   .control-heading-row .control-heading {
      margin-bottom: 0
   }

   .control-heading-row .small {
      font-size: 12px;
      max-width: 116px;
      text-align: right
   }

   .placement-grid {
      grid-template-columns: 1fr 1fr;
      gap: 9px
   }

   .placement-card {
      padding: 14px 9px;
      display: grid;
      grid-template-columns: 43px 1fr;
      gap: 4px 9px;
      text-align: left;
      align-items: center
   }

   .placement-visual {
      grid-row: 1/4;
      width: 43px;
      height: 53px;
      margin: 0
   }

   .placement-visual img {
      width: 43px;
      height: 53px
   }

   .placement-card>strong {
      font-size: 12px;
      margin-top: 3px
   }

   .placement-card>small {
      font-size: 12px
   }

   .placement-card>b {
      font-size: 12px
   }

   .placement-card .placement-check {
      width: 12px;
      height: 12px;
      top: 5px;
      left: 5px
   }

   .placement-card .placement-info {
      width: 10px;
      height: 10px;
      right: 5px;
      top: 5px
   }

   .placement-visual i {
      width: 9px;
      height: 5px
   }

   .design-controls button {
      font-size: 12px;
      min-height: 42px
   }

   .transform-controls label {
      font-size: 12px
   }

   .info-note p {
      font-size: 12px
   }

   .order-summary .section-heading h2 {
      font-size: 20px
   }

   .order-product strong {
      font-size: 14px
   }

   .order-product span {
      font-size: 12px
   }

   .order-product small {
      font-size: 12px
   }

   .summary-lines>div {
      font-size: 13px
   }

   .summary-lines small {
      font-size: 12px
   }

   .grand-total strong {
      font-size: 28px
   }

   .grand-total>span {
      font-size: 16px
   }

   .grand-total small {
      font-size: 12px
   }

   .order-dock {
      padding: 11px 16px
   }

   .order-dock .button {
      font-size: 13px;
      min-height: 43px;
      padding-inline: 23px
   }

   .order-dock strong {
      font-size: 22px
   }

   .order-dock small {
      font-size: 12px
   }

   .help-layout {
      grid-template-columns: 1fr
   }

   .help-dialog {
      width: calc(100% - 22px);
      max-height: calc(100dvh - 22px);
      border-radius: 10px
   }

   .dialog-close {
      position: sticky;
      right: 12px;
      top: 10px;
      float: right;
      margin-bottom: -40px;
      z-index: 5
   }

   .help-intro {
      padding: 31px 25px 25px
   }

   .help-intro h2 {
      font-size: 33px;
      margin-top: 11px;
      max-width: 280px
   }

   .help-intro>p {
      font-size: 13px
   }

   .help-intro .check-list {
      font-size: 12px;
      gap: 11px
   }

   .help-kit {
      display: none
   }

   .help-benefits {
      grid-template-columns: repeat(4, 1fr);
      gap: 9px;
      margin-top: 25px
   }

   .help-benefits>span {
      font-size: 12px
   }

   .help-benefits .icon {
      width: 23px;
      height: 23px
   }

   .help-form-panel {
      padding: 28px 25px
   }

   .help-form-panel h3 {
      font-size: 25px
   }

   .help-form-panel .form-row {
      grid-template-columns: 1fr;
      gap: 0
   }

   .help-form-panel form input,
   .help-form-panel form textarea {
      font-size: 16px
   }

   .help-form-panel form label {
      font-size: 13px
   }

   .help-form-panel form>.form-note {
      font-size: 12px
   }

   .drawer {
      width: 100%
   }

   .cart-footer {
      padding: 18px 21px
   }

   .cart-content {
      padding: 21px
   }

   .cart-footer .summary-lines>div {
      font-size: 12px
   }

   .cart-footer .demo-note {
      font-size: 12px
   }

   .dialog-heading {
      padding: 22px
   }

   .dialog-heading h2 {
      font-size: 25px
   }

   .cart-item h3 {
      font-size: 14px
   }

   .cart-item p {
      font-size: 12px
   }

   .quick-dialog .form-row {
      gap: 12px
   }

   .quick-dialog input,
   .quick-dialog select {
      font-size: 16px !important
   }

   .sample-hero {
      grid-template-columns: 1fr;
      padding: 7px 0 22px;
      gap: 0
   }

   .sample-hero h1 {
      font-size: 39px;
      margin: 10px 0 16px
   }

   .sample-hero h1 br {
      display: none
   }

   .sample-hero h2 {
      font-size: 20px;
      max-width: 320px
   }

   .sample-hero p {
      font-size: 14px;
      max-width: 100%
   }

   .sample-hero>img {
      width: 260px;
      max-height: 225px;
      object-fit: contain;
      grid-column: 1;
      margin: 0 auto
   }

   .sample-checklist {
      padding: 20px
   }

   .sample-checklist .check-list {
      grid-template-columns: 1fr;
      gap: 13px;
      font-size: 13px
   }

   .journey-steps {
      padding: 16px 12px;
      gap: 10px;
      margin: 5px 0 22px
   }

   .journey-steps a {
      font-size: 12px;
      line-height: 1.45;
      gap: 6px;
      align-items: start;
      flex-direction: column
   }

   .journey-steps a>span {
      width: 24px;
      height: 24px;
      font-size: 12px;
      margin-bottom: 5px
   }

   .sample-layout .section-title h2 {
      font-size: 22px
   }

   .sample-layout .section-title p {
      font-size: 12px
   }

   .sample-product {
      flex-wrap: wrap;
      padding: 14px;
      gap: 12px
   }

   .sample-product>.product-art {
      width: 74px
   }

   .sample-product-info {
      min-width: 160px
   }

   .sample-product-info h3 {
      font-size: 14px
   }

   .sample-product-info p {
      font-size: 12px
   }

   .sample-size-area {
      width: 100%;
      border-top: 1px solid var(--line);
      padding-top: 13px
   }

   .sample-sizes {
      justify-content: space-between;
      gap: 7px
   }

   .sample-sizes button {
      min-width: 36px;
      min-height: 40px;
      padding: 8px 6px;
      font-size: 12px;
      flex: 1
   }

   .sample-size-area>div:first-child {
      font-size: 12px
   }

   .sample-summary .mini-product strong {
      font-size: 13px
   }

   .sample-summary .mini-product span:not(.product-art) {
      font-size: 12px
   }

   .sample-features {
      gap: 24px 17px
   }

   .sample-features>span {
      align-items: flex-start;
      gap: 9px
   }

   .sample-features strong {
      font-size: 12px
   }

   .sample-features small {
      font-size: 12px;
      line-height: 1.6;
      max-width: 110px
   }

   .sample-features .icon {
      width: 25px;
      height: 25px
   }

   .checkout-page .page-heading h1 {
      font-size: 31px;
      max-width: 300px
   }

   .checkout-demo-badge {
      display: inline-flex;
      max-width: none;
      margin-top: 18px;
      font-size: 12px
   }

   .checkout-section {
      padding: 22px
   }

   .checkout-section h2 {
      font-size: 18px;
      margin-bottom: 21px
   }

   .checkout-section .form-row {
      grid-template-columns: 1fr;
      gap: 0
   }

   .checkout-section input:not([type=radio]),
   .checkout-section select,
   .checkout-section textarea {
      font-size: 16px
   }

   .checkout-section label {
      font-size: 13px
   }

   .checkout-section .form-row:last-child label:not(:last-child) {
      margin-bottom: 16px !important
   }

   .choice-card {
      padding: 14px;
      gap: 9px
   }

   .choice-card strong {
      font-size: 12px
   }

   .choice-card small {
      font-size: 12px
   }

   .choice-card b {
      font-size: 12px
   }

   .payment-cards {
      grid-template-columns: 1fr
   }

   .payment-cards .choice-card {
      padding: 13px 14px
   }

   .payment-cards strong {
      font-size: 13px
   }

   .payment-cards small {
      font-size: 12px
   }

   .checkout-summary {
      padding: 22px
   }

   .checkout-summary .cart-item h3 {
      font-size: 14px
   }

   .checkout-summary .cart-item p {
      font-size: 12px
   }

   .checkout-summary .cart-item-head>.product-art,
   .checkout-summary .cart-preview-image {
      width: 63px;
      height: 78px
   }

   .checkout-summary .summary-lines>div {
      font-size: 13px
   }

   .order-success-dialog h2 {
      font-size: 27px
   }

   .success-panel {
      padding: 35px 25px
   }

   .toast {
      font-size: 12px;
      padding: 12px 18px;
      width: max-content;
      max-width: calc(100% - 30px)
   }

   body[data-page=product]>.toast {
      bottom: 86px
   }
}

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

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

/* Keep dense controls readable without clipping translated or enlarged labels. */
.placement-card>strong {
   white-space: normal;
   text-align: center
}

.product-columns>* {
   min-width: 0
}

.placement-visual i {
   background: var(--green)
}

.order-dock small {
   max-width: 60vw
}

.product-category {
   min-height: 48px
}

.size-cell button {
   min-height: 36px
}

/* SharkSpeed polish: preserve the supplied PNG and crop only its empty canvas
   in CSS. Image pixels keep their original aspect ratio. */
.brand-image {
   display: block;
   position: relative;
   width: 230px;
   max-width: 100%;
   aspect-ratio: 1380/265;
   overflow: hidden
}

.brand-image img {
   position: absolute;
   width: 104.9275%;
   max-width: none;
   height: auto;
   left: -2.89855%;
   top: -160.377%;
   object-fit: contain
}

.store-footer .brand-image {
   width: 220px
}

.top-strip .container {
   padding-block: 5px
}

.main-header {
   padding-block: 15px;
   gap: 24px
}

.category-nav>.container {
   padding-block: 10px
}

.trust-strip>.container {
   padding-block: 10px
}

.hero-grid {
   min-height: 420px
}

.hero-visual {
   min-height: 420px
}

.hero-copy {
   padding-block: 30px
}

.hero h1 {
   margin-block: 12px 16px
}

.hero-copy>p {
   margin-bottom: 20px
}

.hero-checks {
   margin-top: 18px
}

.category-card {
   padding-block: 9px 12px
}

.category-card .product-art {
   height: 78px;
   width: 78px
}

.product-card-body,
.home-products .product-card-body {
   padding: 13px
}

.product-card .card-meta {
   margin-block: 9px 12px
}

.store-footer {
   margin-top: 48px;
   padding-top: 32px
}

.footer-grid {
   padding-bottom: 24px;
   gap: 32px
}

.footer-grid p {
   margin-top: 12px
}

.footer-bottom {
   padding-block: 15px
}

.footer-grid h3 {
   margin-bottom: 12px
}

.checkout-section {
   padding: 22px 24px;
   margin-bottom: 14px
}

.checkout-section h2 {
   margin-bottom: 18px
}

.checkout-layout {
   gap: 24px
}

.product-page-top {
   margin-bottom: 18px
}

.product-columns {
   gap: 20px
}

.order-step,
.order-summary {
   padding: 20px
}

.product-information {
   padding-top: 18px
}

.canvas-host {
   max-width: 500px
}

.preview-top {
   gap: 10px
}

.preview-top #view-label {
   font-size: 12px;
   text-align: right;
   line-height: 1.4
}

.preview-top .badge {
   flex-shrink: 0
}

.canvas-upload-hint {
   color: #f3fff0;
   min-width: 0;
   font-size: 12px;
   text-shadow: 0 1px 3px #000;
   background: #1a421e24;
   border: 1px dashed transparent;
   border-radius: 2px;
   gap: 2px
}

.canvas-upload-hint:hover {
   border-color: #b5d796;
   background: #1a421e60
}

.canvas-upload-hint span {
   white-space: nowrap
}

.canvas-upload-hint svg {
   width: 16px;
   height: 16px;
   flex-shrink: 0
}

.product-category.active {
   border-color: var(--green);
   background: var(--green-pale);
   font-weight: 650
}

.product-category.active:after {
   content: '✓';
   margin-left: auto;
   color: var(--green)
}

.color-swatch.selected {
   outline: 2px solid var(--green);
   outline-offset: 3px
}

.side-tab.active {
   border: 2px solid var(--green);
   background: var(--green-pale)
}

.placement-card.selected {
   border: 2px solid var(--green);
   background: var(--green-pale)
}

.placement-card .placement-check {
   width: 19px;
   height: 19px;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   color: #fff;
   background: var(--green);
   padding: 0
}

.placement-card.selected .placement-check {
   display: flex
}

.placement-card .placement-visual {
   width: 56px;
   height: 56px
}

.placement-visual .product-art {
   width: 56px;
   height: 56px;
   position: relative
}

.placement-visual .product-art img {
   opacity: .75
}

.placement-visual i {
   min-width: 3px;
   min-height: 3px;
   border: 1px solid #28771c;
   background: #a6ce7355
}

.method-card.selected {
   border: 2px solid var(--green);
   background: var(--green-pale)
}

.method-card.selected .radio-indicator {
   background: var(--green);
   border-color: var(--green);
   box-shadow: inset 0 0 0 3px white
}

.upload-zone {
   border-color: #79a763;
   background: #f5faf1;
   padding: 19px 14px
}

.studio-help {
   line-height: 1.5
}

.placement-grid {
   gap: 8px
}

.placement-card {
   padding-block: 10px
}

@media(max-width:1100px) {

   .top-strip-tagline,
   .top-strip-divider {
      display: none
   }

   .main-header {
      gap: 17px
   }

   .brand-image {
      width: 205px
   }

   .hero-grid,
   .hero-visual {
      min-height: 390px
   }

   .product-columns {
      gap: 17px
   }
}

@media(max-width:800px) {
   .main-header {
      padding-block: 12px;
      gap: 12px
   }

   .brand-image {
      width: 170px
   }

   .hero-grid,
   .hero-visual {
      min-height: 350px
   }

   .store-footer .brand-image {
      width: 210px
   }

   .checkout-section,
   .order-step,
   .order-summary {
      padding: 18px
   }

   .trust-strip>.container {
      padding-block: 9px
   }

   .canvas-host {
      max-width: 470px
   }
}

@media(max-width:540px) {
   .top-strip-headline {
      font-size: 10px
   }

   .brand-image {
      width: clamp(120px, 40vw, 170px)
   }

   .main-header {
      gap: 8px
   }

   .main-header .header-actions {
      gap: 5px;
      margin-left: auto
   }

   .hero-grid {
      min-height: 0
   }

   .hero-visual {
      min-height: 335px
   }

   .hero-copy {
      padding-block: 28px
   }

   .home-section {
      padding-top: 32px
   }

   .category-card .product-art {
      width: 52px;
      height: 52px
   }

   .category-card {
      min-height: 98px
   }

   .product-card-body,
   .home-products .product-card-body {
      padding: 12px
   }

   .store-footer {
      padding-top: 28px;
      margin-top: 36px
   }

   .footer-grid {
      gap: 24px
   }

   .checkout-section,
   .order-step,
   .order-summary {
      padding: 17px
   }

   .product-columns {
      gap: 18px
   }

   .placement-card .placement-visual,
   .placement-visual .product-art {
      width: 43px;
      height: 48px
   }

   .canvas-upload-hint {
      font-size: 12px
   }

   .canvas-upload-hint svg {
      width: 13px;
      height: 13px
   }

   .preview-top {
      flex-wrap: wrap
   }

   .preview-top #view-label {
      flex: 1;
      min-width: 130px
   }

   .hero-price-card>small {
      font-size: 12px
   }
}

.canvas-upload-hint.compact-guide span {
   position: absolute;
   top: calc(100% + 5px);
   left: 50%;
   transform: translateX(-50%);
   color: #24451d;
   background: #f5faf1e8;
   padding: 3px 5px;
   border-radius: 3px;
   text-shadow: none;
   font-size: 12px
}

.canvas-upload-hint.compact-guide {
   flex-direction: row
}

.canvas-upload-hint.compact-guide svg {
   margin: 0
}

.placement-visual>img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   opacity: .8
}