@import url("./fonts.css");
@import url("./tokens.css");
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px;scrollbar-gutter:stable}
body{margin:0;background:var(--crc-paper);color:var(--crc-ink);font-family:var(--font-body);font-size:16px;line-height:1.55}
h1,h2,h3,p{margin:0}
h1,h2,.serif{font-family:var(--font-heading);font-weight:700;line-height:1}
h1{font-size:clamp(38px,4.5vw,68px)}
h2{font-size:32px}
h3{font-size:17px;font-weight:600;line-height:1.3}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--crc-copper);outline-offset:4px}
.container{max-width:calc(var(--container) + 2 * var(--gutter));margin:auto;padding-inline:var(--gutter)}
.icon{width:24px;height:24px;flex-shrink:0;vertical-align:middle}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--touch);height:var(--touch);border:0;background:transparent;color:var(--crc-ink)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--touch);border:1px solid transparent;border-radius:var(--radius-control);padding:10px 20px;background:var(--crc-copper);color:var(--crc-paper);font-weight:500;line-height:1.4;text-align:center}
.button:hover:not(:disabled){filter:brightness(.94)}
.button.olive{background:var(--crc-olive)}
.button.outline{border-color:var(--crc-copper);background:transparent;color:var(--crc-copper)}
.button:disabled{background:var(--crc-disabled);color:var(--crc-paper);opacity:1}
.text-link{color:var(--crc-copper);display:inline-flex;align-items:center;gap:8px;text-decoration:underline;text-underline-offset:6px;min-height:44px}
.site-header{background:var(--crc-paper);border-bottom:1px solid var(--crc-border);position:relative;z-index:40;--brand-space:196px}
.header-main{display:grid;grid-template-columns:1fr var(--brand-space) 1fr;align-items:center;min-height:112px;position:relative}
.brand{position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--brand-space);height:174px;display:flex;align-items:center;justify-content:center;background:var(--crc-paper);z-index:2}
.brand img{width:174px;height:174px;object-fit:contain}
.header-search{max-width:280px;grid-column:1}
.search-field{display:flex;align-items:center;gap:12px}
.search-field input{width:100%;min-width:0;background:transparent;border:0;color:var(--crc-ink);min-height:44px;font-size:14px}
.search-field input::placeholder{color:var(--crc-ink);opacity:1}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;grid-column:3}
.currency{display:flex;align-items:center;gap:8px;font-size:14px}
.currency .icon{width:16px;height:16px}
.bag-link{position:relative}
.bag-count{position:absolute;top:0;right:0;background:var(--crc-copper);color:var(--crc-paper);font-size:12px;min-width:19px;height:19px;border-radius:50%;text-align:center}
.main-nav{border-top:1px solid var(--crc-border)}
.main-nav .container{display:grid;grid-template-columns:1fr var(--brand-space) 1fr;min-height:62px}
.nav-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.nav-group-left{grid-column:1;padding-right:20px}
.nav-group-right{grid-column:3;padding-left:20px}
.nav-group-left a:last-child,.nav-group-right a:first-child{justify-self:center}
.nav-group-left a:first-child{justify-self:start}
.nav-group-right a:last-child{justify-self:end}
.main-nav a{min-height:44px;display:flex;align-items:center;font-family:var(--font-heading);font-weight:700;font-size:20px;white-space:nowrap}
.main-nav a:hover{color:var(--crc-copper)}
.mobile-menu,.mobile-currency,.mobile-account-nav,.drawer-heading,.menu-backdrop{display:none}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.product-card{border:1px solid var(--crc-border);border-radius:var(--radius-card);overflow:hidden;background:var(--crc-paper)}
.product-photo{display:block;position:relative}
.product-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.stock-badge{position:absolute;top:12px;right:12px;background:var(--crc-disabled);color:var(--crc-paper);font-size:13px;border-radius:22px;padding:8px 12px}
.product-info{padding:14px}
.category-label{font-size:12px;color:var(--crc-copper);margin-bottom:3px}
.price{font-size:20px;font-weight:700;margin-top:3px}
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}
.card-actions .button{font-size:12px;padding:10px 12px}
.card-actions .text-link{font-size:13px}
.card-actions .icon{width:18px;height:18px}
.checkout-steps{display:flex;list-style:none;padding:0;margin:0;width:min(100%,420px)}
.checkout-steps li{position:relative;flex:1;display:flex;align-items:center;flex-direction:column;gap:8px;font-family:var(--font-heading);font-size:20px}
.checkout-steps li:not(:last-child)::after{content:"";height:1px;background:var(--crc-border);position:absolute;top:17px;left:calc(50% + 17px);width:calc(100% - 34px)}
.checkout-steps span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--crc-border);border-radius:50%;background:var(--crc-paper);font-size:20px}
.checkout-steps .active span{background:var(--crc-olive);color:var(--crc-paper);border-color:var(--crc-olive)}
.checkout-steps .active{font-weight:700}
.breadcrumb{display:flex;gap:12px;align-items:center;font-size:13px;margin-bottom:16px;flex-wrap:wrap}
.quantity{display:inline-flex;border:1px solid var(--crc-border);border-radius:4px;overflow:hidden}
.quantity button,.quantity output{width:44px;height:44px;background:transparent;border:0;display:flex;align-items:center;justify-content:center}
.quantity output{border-inline:1px solid var(--crc-border)}
.quantity button:disabled{color:var(--crc-muted)}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px}
.field input,.field select{border:1px solid var(--crc-border);background:var(--crc-paper);padding:10px 12px;min-height:44px;border-radius:4px;color:var(--crc-ink);width:100%}
.site-footer{background:linear-gradient(110deg,var(--crc-olive-deep),var(--crc-olive));color:var(--crc-paper);padding:28px 0;position:relative;overflow:hidden;text-align:center}
.site-footer .container{position:relative;z-index:1}
.footer-brand{font-family:var(--font-heading);font-size:36px;line-height:1.1}
.footer-enterprise{font-size:10px;letter-spacing:5px;margin:6px 0 18px}
.footer-credit{font-size:12px;margin-top:4px}
.footer-credit a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.site-footer nav{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-size:12px}
.site-footer nav a{display:flex;min-height:44px;align-items:center}
.copyright{font-size:11px;margin-top:12px}
.leaf{position:absolute;width:220px;height:220px;object-fit:contain;pointer-events:none}
.leaf-left{left:-45px;bottom:-30px;transform:rotate(-25deg)}
.leaf-right{right:-45px;bottom:-30px;transform:scaleX(-1) rotate(-25deg)}
@media(min-width:761px) and (max-width:1000px){
  .site-header{--brand-space:164px}
  .brand img{width:154px;height:154px}
  .nav-group-left{padding-right:12px}
  .nav-group-right{padding-left:12px}
  .main-nav a{font-size:18px}
}
@media(max-width:760px){
  .search-field input,.field input,.field select,.field textarea{font-size:16px}
  html{scroll-padding-top:164px;scrollbar-gutter:auto}
  .site-header{position:sticky;top:0;box-shadow:0 3px 12px #18202b0a}
  .header-main{grid-template-columns:44px 1fr 44px;min-height:148px;gap:0 8px;padding-bottom:12px}
  .mobile-menu{display:inline-flex}
  .brand{position:static;transform:none;grid-column:2;grid-row:1;justify-self:center;height:94px;width:110px}
  .brand img{width:94px;height:94px}
  .header-actions{grid-column:3;grid-row:1;gap:0}
  .header-actions .currency,.account-link{display:none}
  .header-search{grid-column:1/3;grid-row:2;width:100%;max-width:none}
  .search-field{border-radius:28px;background:#efeee9;padding:0 14px;gap:8px}
  .mobile-currency{display:flex;grid-column:3;grid-row:2;justify-content:center;font-size:12px;gap:2px}
  .mobile-currency .icon{width:12px}
  body.menu-open{overflow:hidden}
  .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100%;border:0;background:#18202b66;z-index:50;cursor:pointer}
  .main-nav{display:block;position:fixed;inset:0 auto 0 0;width:min(88vw,420px);height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--crc-paper);border:0;box-shadow:8px 0 32px #18202b22;z-index:60;transform:translateX(-100%);visibility:hidden;transition:transform 280ms ease,visibility 280ms;padding-bottom:env(safe-area-inset-bottom,0px)}
  .main-nav.is-open{transform:translateX(0);visibility:visible;transition:transform 280ms ease}
  .drawer-heading{display:flex;align-items:center;justify-content:space-between;padding:20px var(--gutter) 14px;border-bottom:1px solid var(--crc-border)}
  .drawer-heading>span{font-family:var(--font-heading);font-size:36px;color:var(--crc-olive-deep)}
  .main-nav .container{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-top:12px}
  .nav-group{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
  .main-nav a{border-bottom:1px solid var(--crc-border);min-height:58px;font-size:22px}
  .main-nav .mobile-account-nav{display:flex;gap:12px;margin-top:24px;color:var(--crc-olive);font-size:18px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .product-info{padding:10px}
  .product-card h3{font-size:14px}
  .category-label{font-size:10px}
  .price{font-size:18px}
  .card-actions{align-items:stretch;gap:4px}
  .card-actions .button{width:100%;font-size:11px;padding:8px}
  .card-actions .text-link{font-size:11px;gap:4px}
  .stock-badge{font-size:11px;right:6px;top:6px;padding:5px 8px}
  .compact-card{display:grid;grid-template-columns:46% 1fr}
  .compact-card .product-photo img{height:100%;min-height:130px}
  .site-footer nav{gap:4px 18px}
  .site-footer .leaf{width:145px;height:145px;opacity:.7}
  .footer-brand{font-size:30px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
