@font-face{font-family:MixDisplay;src:url('../assets-v16/bevan.woff2') format('woff2');font-display:swap}
@font-face{font-family:MixBody;src:url('../assets-v16/open-sans.woff2') format('woff2');font-display:swap}
@font-face{font-family:MixCondensed;src:url('../assets-v16/oswald.woff2') format('woff2');font-display:swap}

:root{
  --red:#ed1b24;
  --red-deep:#b5070d;
  --yellow:#ffd21f;
  --cream:#fff3d8;
  --white:#fffdf7;
  --ink:#111;
  --muted:#6d6457;
  --display:MixDisplay,Impact,sans-serif;
  --body:MixBody,Arial,sans-serif;
  --mono:MixCondensed,Arial,sans-serif;
  --ease:cubic-bezier(.22,.72,.18,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
img{display:block;max-width:100%}

.skip-link{position:fixed;z-index:2000;left:16px;top:12px;padding:12px 16px;border-radius:10px;background:var(--yellow);color:var(--ink);font-weight:800;transform:translateY(-160%)}
.skip-link:focus{transform:none}

.catalog-header{position:sticky;z-index:1000;top:0;min-height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:10px clamp(18px,4vw,64px);border-bottom:1px solid rgba(255,243,216,.32);background:rgba(237,27,36,.94);color:var(--cream);backdrop-filter:blur(14px)}
.catalog-brand{justify-self:start}
.catalog-brand img{width:125px;height:auto}
.back-categories{justify-self:center;display:inline-flex;align-items:center;gap:11px;min-height:45px;padding:0 18px;border:1px solid currentColor;border-radius:999px;font:800 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s}
.back-categories:hover,.back-categories:focus-visible{background:var(--yellow);color:var(--ink);transform:translateY(-2px)}
.header-unit{justify-self:end;display:flex;flex-direction:column;text-align:right}
.header-unit span{font:800 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.header-unit strong{margin-top:5px;font-size:13px}

.catalog-hero{position:relative;min-height:78svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.62fr);align-items:center;gap:7vw;padding:clamp(100px,11vw,170px) clamp(20px,6vw,96px) clamp(80px,9vw,130px);overflow:hidden;background:var(--red);color:var(--cream)}
.catalog-hero::after{content:"";position:absolute;right:-9vw;bottom:-22vw;width:56vw;height:56vw;border-radius:50%;background:var(--yellow);opacity:.96}
.catalog-hero-pattern{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-around;overflow:hidden;pointer-events:none}
.catalog-hero-pattern span{width:max-content;font:700 clamp(150px,24vw,410px)/.62 var(--display);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1.4px rgba(255,243,216,.18);white-space:nowrap;transform:translateX(-4vw)}
.catalog-hero-pattern span:nth-child(2){align-self:flex-end;transform:translateX(8vw)}
.catalog-hero-copy,.catalog-unit-panel{position:relative;z-index:2}
.eyebrow{display:block;font:800 9px/1.35 var(--mono);letter-spacing:.13em;text-transform:uppercase}
.catalog-hero-copy h1{margin:18px 0 28px;font:700 clamp(76px,10vw,160px)/.72 var(--display);letter-spacing:-.07em;text-transform:uppercase}
.catalog-hero-copy h1 em{display:block;color:var(--yellow);font-style:normal}
.catalog-hero-copy p{max-width:600px;margin:0;font-size:clamp(17px,1.5vw,23px);line-height:1.55}

.catalog-unit-panel{padding:30px;border:1px solid var(--ink);border-radius:28px;background:var(--cream);color:var(--ink);box-shadow:12px 14px 0 var(--ink);transform:rotate(1deg)}
.catalog-unit-panel label{display:block;margin-bottom:12px;font:800 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.catalog-unit-panel select{width:100%;min-height:62px;padding:0 18px;border:2px solid var(--ink);border-radius:15px;background:var(--white);color:var(--ink);font-weight:800;outline:0}
.catalog-unit-panel select:focus-visible{border-color:var(--red);box-shadow:0 0 0 5px rgba(237,27,36,.15)}
.catalog-unit-panel>p{margin:10px 0 25px;color:var(--muted);font-size:12px}
.unit-summary{display:flex;justify-content:space-between;align-items:center;gap:22px;padding-top:22px;border-top:1px solid var(--ink)}
.unit-summary>div{display:flex;flex-direction:column}
.unit-summary span{font:800 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.unit-summary strong{margin-top:6px;font-size:16px}
.unit-summary>b{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:var(--yellow);font:800 18px/1 var(--body)}

.catalog-browser{padding:clamp(90px,10vw,145px) clamp(18px,5vw,80px);background:var(--cream)}
.catalog-toolbar{display:grid;grid-template-columns:1fr minmax(320px,.5fr);gap:8vw;align-items:end}
.catalog-heading h2{margin:14px 0 8px;font:700 clamp(64px,8vw,125px)/.75 var(--display);letter-spacing:-.06em;text-transform:uppercase}
.catalog-heading>p{margin:0;color:var(--muted);font-size:14px}
.catalog-search{display:flex;flex-direction:column;gap:10px}
.catalog-search label{font:800 9px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.catalog-search input{min-height:58px;padding:0 18px;border:1.5px solid var(--ink);border-radius:15px;background:var(--white);outline:0}
.catalog-search input:focus-visible{border-color:var(--red);box-shadow:0 0 0 5px rgba(237,27,36,.14)}

.catalog-filters{display:flex;gap:9px;overflow-x:auto;scroll-snap-type:x proximity;padding:40px 2px 18px;scrollbar-width:thin;scrollbar-color:var(--red) rgba(17,17,17,.12)}
.catalog-filter{flex:0 0 auto;min-height:48px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;font:800 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;scroll-snap-align:start;transition:background .2s,color .2s,transform .2s}
.catalog-filter small{margin-left:7px;opacity:.65}
.catalog-filter:hover,.catalog-filter:focus-visible,.catalog-filter.is-active{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.catalog-filter.is-active{background:var(--red)}

.category-unavailable,.catalog-empty{margin:24px 0;padding:28px;border:1px solid var(--ink);border-radius:22px;background:var(--yellow);box-shadow:8px 8px 0 var(--ink)}
.category-unavailable strong,.catalog-empty strong{font:700 clamp(28px,3vw,44px)/.95 var(--display);text-transform:uppercase}
.category-unavailable p,.catalog-empty p{margin:10px 0 0}

.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,350px);gap:32px;align-items:start;margin-top:24px}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.product-card{min-width:0;display:flex;flex-direction:column;min-height:505px;border:1px solid var(--ink);border-radius:25px;background:var(--white);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.product-card:hover{transform:translateY(-6px);box-shadow:9px 11px 0 var(--ink)}
.product-visual{position:relative;aspect-ratio:1.12/1;overflow:hidden;background:var(--yellow)}
.product-visual img{width:100%;height:100%;object-fit:contain;padding:14px}
.product-visual.has-crop img{object-fit:cover;padding:0}
.product-placeholder{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:20px;overflow:hidden;background:var(--category-color,var(--yellow));color:var(--ink)}
.product-placeholder::before{content:"ESFIHA MIX";position:absolute;left:-7%;top:38%;font:700 72px/.7 var(--display);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(17,17,17,.28);white-space:nowrap;transform:rotate(-8deg)}
.product-placeholder span,.product-placeholder b{position:relative;z-index:2}
.product-placeholder span{font:800 8px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.product-placeholder b{max-width:92%;font:700 clamp(26px,2.3vw,38px)/.9 var(--display);text-transform:uppercase}
.product-body{display:flex;flex:1;flex-direction:column;padding:22px}
.product-body>small{font:800 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.product-body h3{margin:10px 0 12px;font:700 clamp(27px,2.2vw,39px)/.9 var(--display);text-transform:uppercase}
.product-body p{display:-webkit-box;min-height:3.9em;margin:0;color:var(--muted);font-size:13px;line-height:1.5;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.product-bottom{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-top:auto;padding-top:22px}
.product-price{font:800 16px/1 var(--body)}
.product-order-link{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border:1px solid var(--ink);border-radius:999px;background:var(--yellow);font:800 8px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;transition:background .2s,color .2s}
.product-order-link:hover,.product-order-link:focus-visible{background:var(--red);color:var(--cream)}

.order-panel{position:sticky;top:106px;padding:28px;border:1px solid var(--ink);border-radius:26px;background:var(--red);color:var(--cream);box-shadow:10px 12px 0 var(--ink)}
.order-panel h2{margin:18px 0;font:700 clamp(42px,4vw,62px)/.82 var(--display);text-transform:uppercase}
.order-panel p{font-size:14px;line-height:1.6}
.order-primary,.order-secondary{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;margin-top:12px;padding:0 18px;border:1px solid var(--ink);border-radius:999px;text-align:center;font:800 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.order-primary{background:var(--yellow);color:var(--ink)}
.order-secondary{border-color:var(--cream);background:transparent;color:var(--cream)}
.order-primary:hover,.order-primary:focus-visible{background:var(--cream)}
.order-secondary:hover,.order-secondary:focus-visible{background:var(--cream);color:var(--red)}
.order-panel small{display:block;margin-top:18px;line-height:1.45;opacity:.74}

.load-more-wrap{display:flex;justify-content:center;margin:48px 0 0}
.load-more{min-height:58px;padding:0 28px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--cream);cursor:pointer;font:800 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;transition:background .2s,color .2s,transform .2s}
.load-more:hover,.load-more:focus-visible{background:var(--yellow);color:var(--ink);transform:translateY(-3px)}
.load-more[hidden]{display:none}
.catalog-disclaimer{max-width:850px;margin:45px auto 0;color:var(--muted);font-size:12px;line-height:1.6;text-align:center}

.catalog-footer{min-height:280px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding:60px clamp(20px,6vw,96px);background:var(--ink);color:var(--cream)}
.catalog-footer img{width:132px;height:auto}
.catalog-footer p{margin:0;text-align:center;font:700 clamp(25px,3vw,42px)/.9 var(--display);text-transform:uppercase}
.catalog-footer a{justify-self:end;padding-bottom:5px;border-bottom:1px solid currentColor;font:800 9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}

:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}

@media(max-width:1180px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-layout{grid-template-columns:minmax(0,1fr) 300px}
}

@media(max-width:900px){
  .catalog-header{grid-template-columns:auto 1fr}.back-categories{justify-self:end}.header-unit{display:none}
  .catalog-hero{grid-template-columns:1fr;min-height:auto}
  .catalog-hero::after{right:-24vw;bottom:-30vw;width:80vw;height:80vw}
  .catalog-unit-panel{max-width:620px}
  .catalog-toolbar{grid-template-columns:1fr}
  .catalog-layout{grid-template-columns:1fr}
  .order-panel{position:relative;top:auto;grid-row:1}
}

@media(max-width:620px){
  .catalog-header{min-height:72px;padding-inline:14px}.catalog-brand img{width:92px}.back-categories{min-height:42px;padding-inline:13px;font-size:8px}
  .catalog-hero{padding:105px 18px 78px}.catalog-hero-copy h1{font-size:clamp(68px,20vw,100px)}
  .catalog-unit-panel{padding:21px;border-radius:22px;box-shadow:8px 9px 0 var(--ink)}
  .catalog-browser{padding-inline:16px}
  .catalog-heading h2{font-size:58px}
  .product-grid{grid-template-columns:1fr}
  .product-card{min-height:480px}
  .product-body h3{font-size:34px}
  .catalog-footer{grid-template-columns:1fr;text-align:center}.catalog-footer img,.catalog-footer a{justify-self:center}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}