:root{font-family:Arial,Helvetica,sans-serif;color:#171914;background:#fff;font-synthesis:none;--sand:#eee6d8;--mustard:#dcaa23;--muted:#70716a}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:15px}
body{margin:0;min-width:0}
button,select,input{font:inherit}
button,a,select{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible+.swatch{outline:3px solid #3157ff;outline-offset:4px}
button{cursor:pointer}
.skip-link{position:fixed;top:8px;left:8px;padding:10px;background:#171914;color:#fff;z-index:10;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
.demo-disclosure{padding:9px 16px;margin:0;background:#f4f4ef;text-align:center;font-size:10px;line-height:1.5;color:#62645c;letter-spacing:.01em}
.demo-disclosure a{white-space:nowrap}
.shop-header{max-width:1200px;margin:auto;min-height:94px;padding:25px 24px;display:flex;align-items:center;justify-content:space-between;gap:28px;position:relative}
.shop-brand{text-decoration:none;font-weight:800;font-size:18px;letter-spacing:.16em;white-space:nowrap;line-height:1.2;position:relative}
.brand-mark{font-size:9px;letter-spacing:0;position:relative;top:-7px;margin-left:4px}
.shop-nav{display:flex;align-items:center;gap:28px;font-size:13px;line-height:1.3;white-space:nowrap}
.shop-nav a{text-decoration:none;min-height:30px;display:inline-flex;align-items:center}
.shop-nav a:hover{text-decoration:underline}
.bag-link{gap:6px}
#bag-count{display:inline-flex;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 4px;border:1px solid #d4d7cd;border-radius:50%;font-size:10px}
.product{width:calc(100% - 48px);max-width:1152px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:clamp(28px,5vw,78px)}
.product-photo{margin:0;position:relative;background:var(--sand);overflow:hidden}
.product-photo img{width:100%;height:100%;aspect-ratio:1/1.12;object-fit:cover;display:block}
.product-photo figcaption{position:absolute;left:20px;bottom:17px;background:#faf8eddb;padding:6px 9px;font-size:8px;letter-spacing:.12em;color:#504a3e}
.product-copy{padding:42px 0 12px;min-width:0}
.product-kicker{font-size:9px;letter-spacing:.14em;color:var(--muted);margin:0 0 20px}
h1{font-size:clamp(30px,3vw,42px);line-height:1.08;letter-spacing:-.045em;margin:0 0 10px}
.tagline{font-size:15px;line-height:1.5;color:#66695f;margin:0 0 18px}
.price{font-size:25px;line-height:1.2;letter-spacing:-.035em;margin:0 0 27px}
.price span{font-size:9px;letter-spacing:0;color:#7b7d72;margin-left:9px}
.colour-picker{border:0;padding:0;margin:0;display:flex;gap:11px;min-width:0}
.colour-picker legend{font-size:11px;line-height:1.5;padding:0;margin-bottom:11px;color:#64675e}
.colour-picker legend>span:first-child{padding-inline:5px;color:#b2b4aa}
.colour-picker label{position:relative;cursor:pointer}
.colour-picker input{position:absolute;opacity:0;width:1px;height:1px}
.swatch{display:block;width:27px;height:27px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px transparent}
.swatch-moss{background:var(--mustard)}
.swatch-ink{background:#292c29}
.colour-picker input:checked+.swatch{box-shadow:0 0 0 1px #1d241b}
.colour-note{font-size:9px;line-height:1.5;color:#7b7d72;margin:10px 0 23px}
.purchase-actions{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:end;gap:13px;width:100%}
.quantity-label{font-size:10px;display:flex;flex-direction:column;gap:7px;color:#55594e}
select{display:block;min-width:0;width:100%;height:47px;background:#fff;color:#20251c;border:1px solid #d9dcd2;border-radius:3px;padding:0 10px;font-size:12px}
.add-button{height:47px;border:0;background:var(--mustard);color:#11170a;border-radius:3px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:600;width:100%;min-width:0;padding:0 12px;white-space:nowrap;transition:background-color .15s}
.add-button:hover{background:#e4b535}
.add-button:active{background:#c99819}
.local-note{font-size:9px;color:#7b7d72;margin:11px 0 0;line-height:1.5}
.bag-feedback{font-size:11px;color:#46553b;line-height:1.5;min-height:33px;margin:15px 0 0}
.product-details,.demo-bag{width:calc(100% - 48px);max-width:1152px;margin:36px auto 0;padding:25px 0 0;border-top:1px solid #e3e5dc}
.detail-marker{font-size:8px;letter-spacing:.14em;color:#8a8d7f;margin:0 0 12px}
.product-details h2,.demo-bag h2{font-size:18px;letter-spacing:-.025em;line-height:1.3;font-weight:500;margin:0 0 10px}
.product-details>p:last-child,.demo-bag p{font-size:12px;color:#73776b;line-height:1.7;max-width:600px;margin:0}
.demo-bag h2 span{font-size:11px;color:#717666;padding-left:5px}
.demo-bag button{border:1px solid #d2d7c8;border-radius:3px;background:white;font-size:11px;color:#303729;padding:9px 14px;margin-top:15px}
.demo-bag button:disabled{opacity:.5;cursor:default}
.shop-footer{width:calc(100% - 48px);max-width:1152px;margin:34px auto 0;padding:20px 0;display:flex;gap:18px;justify-content:space-between;color:#868a7d;font-size:8px;line-height:1.6;letter-spacing:.06em}
.shop-footer a{letter-spacing:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:899px){
  .shop-header{height:110px;min-height:110px;padding:18px 20px;flex-direction:column;align-items:stretch;gap:12px;justify-content:center}
  .shop-brand{font-size:17px}
  .shop-nav{justify-content:space-between;gap:16px;font-size:12px}
  .product{width:calc(100% - 40px);gap:25px;grid-template-columns:minmax(0,1fr)}
  .product-photo img{aspect-ratio:1.25/1;object-position:center 54%}
  .product-photo figcaption{font-size:7px;left:12px;bottom:12px;padding:5px 7px}
  .product-copy{padding:0}
  .product-kicker{font-size:8px;margin:0 0 9px}
  h1{font-size:29px;margin-bottom:7px}
  .tagline{font-size:13px;margin-bottom:12px}
  .price{font-size:23px;margin-bottom:17px}
  .colour-picker legend{margin-bottom:9px}
  .colour-note{margin-bottom:17px}
  .purchase-actions{grid-template-columns:64px minmax(0,1fr);gap:11px}
  .product-details,.demo-bag{width:calc(100% - 40px);margin-top:26px;padding-top:22px}
  .shop-footer{width:calc(100% - 40px)}

  /* Ошибка 1: мобильная товарная область с ошибочной фиксированной шириной. */
  [data-mode="before"] .product{width:460px;max-width:none;margin-left:20px;margin-right:20px}
  /* Ошибка 2: абсолютная навигация занимает место названия бренда. */
  [data-mode="before"] .shop-header .shop-brand{position:absolute;left:20px;top:27px}
  [data-mode="before"] .shop-header .shop-nav{position:absolute;left:125px;top:21px;width:245px;justify-content:space-between}
  /* Ошибка 3: минимальная ширина действия не учитывает ширину контейнера. */
  [data-mode="before"] .add-button{min-width:490px}
}
@media(min-width:600px) and (max-width:899px){
  .product{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .product-photo img{aspect-ratio:1/1.15}
  .product-copy{padding:8px 0 0}
  [data-mode="before"] .product{width:900px}
}
@media(max-width:360px){.add-button{font-size:10px;gap:6px;padding:0 8px}.product{gap:20px}.shop-footer{flex-direction:column;gap:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}