/* ============================================================
   MASTER FLAVOURS — Website Scaffold v2
   Built from: Website Structure & Development Brief v1.0,
   UI Style Guide v1.0, UX Wireframe Guide v1.0.

   ONE DELIBERATE CORRECTION vs. the UI Style Guide, agreed with
   the brand owner: "Primary Color" is RED (#A01C17), matching
   the final approved logo and carton artwork — NOT the guide's
   "Deep Olive Green". Red is complementary to the green tone of
   most products (olives, peppers), so it makes the product photos
   pop instead of blending into a green UI. Everything else in the
   guide (grid, spacing, buttons, cards, typography family,
   animations, WordPress requirements) is followed as specified.
   Metallic gold/silver accents were added on top because the
   owner confirmed tin/silver and gold are also used across the
   real can/packaging line, alongside cream.
   Fonts: Manrope (as specified), self-hosted, free (SIL OFL) —
   no licence cost.
   ============================================================ */

@font-face{font-family:"Manrope";src:url("fonts/Manrope-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-Medium.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-Bold.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap;}

:root{
  /* Primary — corrected to brand red (was "Deep Olive Green" in the style guide) */
  --primary: #A01C17;
  --primary-dark: #7A1310;
  --primary-tint: #FBEAE8;

  /* Secondary — Warm Beige / Sand, as specified */
  --secondary: #EFE3CF;
  --secondary-soft: #FAF6EE;

  /* Metallic accents — added per packaging (gold + silver used on cans) */
  --gold: #A9803D;
  --gold-soft: #D9BE8C;
  --silver: #9CA3A6;
  --silver-soft: #D8DCDD;

  /* Neutrals, as specified */
  --white: #FFFFFF;
  --light-gray: #F3F1EC;
  --dark-gray: #6B675E;
  --charcoal: #221F1B;

  --line: rgba(34,31,27,0.12);
  --maxw: 1280px;
  --radius: 14px;
  --gap-bg: #FDF3E7;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--white);
  color:var(--charcoal);
  font-family:"Manrope",Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Manrope",Arial,sans-serif; font-weight:800; letter-spacing:-.01em; margin:0 0 .45em 0; color:var(--charcoal);}
h1{font-size:clamp(2.4rem,4.8vw,3.8rem); line-height:1.08;}
h2{font-size:clamp(1.8rem,3.2vw,2.5rem); line-height:1.15;}
h3{font-size:1.2rem; font-weight:700;}
p{margin:0 0 1em 0; color:var(--dark-gray); font-size:17px; text-align:left;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:15px 28px; font-size:.92rem; font-weight:700; border-radius:100px; transition:all .18s ease; border:2px solid transparent; cursor:pointer;}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(160,28,23,.5);}
.btn-secondary{background:#fff; color:var(--primary); border-color:var(--primary);}
.btn-secondary:hover{background:var(--primary); color:#fff;}
.btn-sm{padding:10px 20px; font-size:.82rem;}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .2s;}
.site-header .bar{max-width:var(--maxw); margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand img{height:38px; width:auto;}
.brand span{font-weight:800; font-size:1.05rem; letter-spacing:-.01em; color:var(--charcoal);}
nav.main-nav{display:flex; gap:30px; font-size:.9rem; font-weight:600;}
nav.main-nav a{text-decoration:none; color:var(--charcoal); padding-bottom:4px; border-bottom:2px solid transparent; opacity:.82;}
nav.main-nav a:hover, nav.main-nav a.active{border-color:var(--primary); opacity:1;}
.header-right{display:flex; align-items:center; gap:18px;}
.lang-switch{display:flex; gap:6px; font-size:.78rem; font-weight:700; color:var(--dark-gray);}
.lang-switch span{padding:4px 7px; border-radius:5px; cursor:default;}
.lang-switch span.active{background:var(--light-gray); color:var(--charcoal);}

/* ---------- hero ---------- */
.hero{position:relative; padding:0; background:linear-gradient(180deg,var(--secondary-soft) 0%, #fff 85%); border-bottom:1px solid var(--line);}
.hero .wrap{padding:42px 32px 64px; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.eyebrow-pill{display:inline-flex; align-items:center; gap:8px; background:var(--primary-tint); color:var(--primary); font-weight:700; font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; padding:8px 16px; border-radius:100px; margin-bottom:22px;}
.hero-copy p.lede{font-size:1.15rem; max-width:46ch;}
.hero-cta-row{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}
.hero-media img{border-radius:var(--radius); box-shadow:0 40px 70px -30px rgba(34,31,27,.35);}

/* ---------- sections ---------- */
section{padding:72px 0; scroll-margin-top:90px;}
section.tight{padding:52px 0; scroll-margin-top:90px;}
.jump-nav{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.jump-nav a{font-size:.82rem; font-weight:700; text-decoration:none; color:var(--charcoal); background:#fff; border:1px solid var(--line); padding:8px 16px; border-radius:100px;}
.jump-nav a:hover{border-color:var(--primary); color:var(--primary);}
.category-nav{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px;}
.category-nav a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--charcoal);background:#fff;border:1px solid var(--line);border-radius:100px;padding:10px 17px;font-size:.85rem;font-weight:700;line-height:1.3;}
.category-nav a::after{content:"↗";color:var(--primary);font-size:.9rem;}
.category-nav a:hover,.category-nav a:focus-visible{background:var(--primary-tint);border-color:var(--primary);color:var(--primary);}
.category-hint{font-size:.9rem;color:var(--dark-gray);margin:8px 0 0;}
.request-panel{margin-top:42px;padding:32px;background:var(--secondary-soft);border-radius:var(--radius);scroll-margin-top:100px;}
.request-panel h2{font-size:1.4rem;margin:0 0 8px;}
.request-panel p{margin:0 0 24px;max-width:66ch;}
.eyebrow{color:var(--primary); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px;}
.lede{font-size:1.06rem; max-width:62ch; color:var(--dark-gray);}
.section-head{margin-bottom:44px;}

/* ---------- about preview ---------- */
.about-preview{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
.about-preview img{border-radius:var(--radius);}

/* ---------- category / feature cards ---------- */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:28px; margin-top:20px;}
.cat-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; text-decoration:none; color:var(--charcoal); box-shadow:0 2px 10px -6px rgba(34,31,27,.08); transition:all .18s ease; display:flex; flex-direction:column; justify-content:space-between; min-height:220px;}
.cat-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(34,31,27,.25); border-color:transparent;}
.cat-card .tag{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--gold);}
.cat-card h3{margin:14px 0 8px 0;}
.cat-card .count{font-size:.85rem; color:var(--dark-gray);}
.cat-card .arrow{align-self:flex-end; font-size:1.3rem; color:var(--primary); margin-top:14px;}

/* ---------- icon feature grid (Why Master Flavours) ---------- */
.icon-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 32px; margin-top:20px;}
.icon-item{display:flex; gap:16px;}
.icon-item .ico{flex:none; width:48px; height:48px; border-radius:12px; background:var(--primary-tint); display:flex; align-items:center; justify-content:center; color:var(--primary);}
.icon-item .ico svg{width:24px; height:24px;}
.icon-item h4{margin:0 0 6px 0; font-size:1rem;}
.icon-item p{font-size:.92rem; margin:0;}
@media (max-width:900px){.icon-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.icon-grid{grid-template-columns:1fr;}}

/* ---------- packaging chips ---------- */
.pack-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; margin-top:24px;}
.pack-item{background:var(--secondary-soft); border-radius:var(--radius); padding:26px 16px; text-align:center;}
.pack-item .ico{width:42px; height:42px; margin:0 auto 14px auto; color:var(--primary);}
.pack-item h4{font-size:.9rem; margin:0;}
@media (max-width:900px){.pack-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.pack-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- badge row (certifications) ---------- */
.badge-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:26px;}
.badge{border:1px solid var(--line); background:#fff; padding:12px 20px; border-radius:100px; font-size:.85rem; font-weight:700; color:var(--charcoal); display:flex; align-items:center; gap:8px;}
.badge::before{content:"";width:8px; height:8px; border-radius:50%; background:var(--gold);}
.standard-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.standard-tile{display:flex;align-items:center;justify-content:center;min-width:132px;min-height:75px;padding:14px 20px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--charcoal);font-size:1.05rem;font-weight:800;letter-spacing:.01em;text-align:center;}
.standard-tile small{display:block;font-size:.62rem;font-weight:600;color:var(--dark-gray);letter-spacing:.04em;text-transform:uppercase;}
.quality-logos{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;}
.quality-logo{width:150px;height:132px;padding:12px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);}
.quality-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.quality-note{font-size:.85rem;color:var(--dark-gray);max-width:72ch;margin:14px 0 0;}

/* ---------- table (product specs) ---------- */
.sku-table{width:100%; border-collapse:collapse; margin-top:14px; font-size:.92rem;}
.sku-table th{text-align:left; font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--dark-gray); border-bottom:2px solid var(--charcoal); padding:10px;}
.sku-table td{padding:13px 10px; border-bottom:1px solid var(--line);}
.sku-table tr:hover td{background:var(--secondary-soft);}

/* ---------- two-col ---------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.tag-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.tag-list span{border:1px solid var(--line); padding:6px 14px; font-size:.8rem; border-radius:100px; color:var(--dark-gray); font-weight:600;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--charcoal); border-radius:24px; padding:64px 56px; text-align:center; color:#fff;}
.cta-band h2{color:#fff;}
.cta-band p{color:#C9C4B6; max-width:52ch; margin:0 auto 28px auto;}
.cta-band .btn-primary{background:var(--primary);}

/* ---------- page head (interior) ---------- */
.page-head{background:var(--secondary-soft); border-bottom:1px solid var(--line); padding:60px 0 46px 0;}
.breadcrumb{font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--dark-gray); margin-bottom:16px;}
.breadcrumb a{text-decoration:none; color:var(--dark-gray);}
.breadcrumb a:hover{color:var(--primary);}

/* ---------- footer ---------- */
footer{background:var(--charcoal); color:#E9E4D8; margin-top:60px;}
footer .wrap{padding:64px 32px 30px 32px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px;}
footer h4{font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; color:var(--gold-soft); margin:0 0 16px 0;}
footer a{color:#E9E4D8; text-decoration:none; font-size:.92rem;}
footer .col a{display:block; margin-bottom:10px; opacity:.85;}
footer .col a:hover{opacity:1; text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding:20px 32px; font-size:.78rem; color:#9C978A; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; max-width:var(--maxw); margin:0 auto;}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:700; color:var(--dark-gray);}
.field input, .field select, .field textarea{font-family:inherit; font-size:1rem; padding:14px 16px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--charcoal);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--primary);}

/* ---------- animations ---------- */
.fade-up{animation:fadeUp .5s ease both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
  .about-preview{grid-template-columns:1fr;}
  .icon-grid{grid-template-columns:repeat(2,1fr);}
  nav.main-nav{display:none;}
  footer .wrap{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  section{padding:60px 0;}
  .cta-band{padding:40px 24px;}
  footer .wrap{grid-template-columns:1fr;}
}


/* ============================================================
   v3 additions — real product range (Sept 2026)
   Product imagery, category cards with images, product grid,
   single product template, packaging photos, loading table.
   ============================================================ */
.cat-card.has-img{padding:0; overflow:hidden; min-height:0;}
.cat-card.has-img .ci{background:var(--secondary-soft); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);}
.cat-card.has-img .ci img{width:100%; height:100%; object-fit:contain;}
.cat-card.has-img .cb{padding:20px 22px 22px 22px; display:flex; flex-direction:column; gap:4px; flex:1;}
.cat-card.has-img h3{margin:6px 0 2px 0;}
.cat-card.has-img .arrow{margin-top:auto;}
.group-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:0 0 6px 0;}
.group-head .count{font-size:.85rem; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.05em;}
.group + .group{margin-top:72px;}

.pack-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.pack-chips span{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:100px; padding:6px 14px 6px 10px; font-size:.8rem; font-weight:700; color:var(--charcoal);}
.pack-chips svg{width:17px; height:17px; color:var(--primary);}

.prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:26px;}
.prod-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--charcoal); display:flex; flex-direction:column; transition:all .18s ease;}
.prod-card:hover{transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(34,31,27,.25);}
.prod-card .pi{background:var(--secondary-soft); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative;}
.prod-card .pi img{width:100%; height:100%; object-fit:contain;}
.prod-card .badge-live{position:absolute; left:14px; top:14px; background:var(--primary); color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:100px;}
.prod-card .pb{padding:18px 20px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1;}
.prod-card .sku{font-size:.72rem; font-weight:700; letter-spacing:.06em; color:var(--gold);}
.prod-card h3{margin:0; font-size:1.08rem;}
.prod-card p{font-size:.9rem; margin:0; line-height:1.55;}
.prod-card .more{margin-top:auto; padding-top:10px; font-size:.82rem; font-weight:800; color:var(--primary);}

.pdp{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.pdp .gallery .main{background:var(--secondary-soft); border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1;}
.pdp .gallery .main img{width:100%; height:100%; object-fit:contain;}
.pdp .gallery .thumbs{display:flex; gap:12px; margin-top:12px;}
.pdp .gallery .thumbs img{width:84px; height:84px; object-fit:contain; background:var(--secondary-soft); border-radius:10px; border:2px solid transparent; cursor:pointer;}
.pdp .gallery .thumbs img.on{border-color:var(--primary);}
.pdp .names{font-size:.9rem; color:var(--dark-gray); margin:-4px 0 18px 0;}
.pdp .names b{color:var(--charcoal); font-weight:700;}
.pdp .short{font-size:1.15rem; color:var(--charcoal); font-weight:600; line-height:1.5;}
.pdp h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--dark-gray); margin:28px 0 8px 0;}
.pdp .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}
.var-table td:first-child{font-weight:700;}
.var-table .muted{color:var(--dark-gray); font-size:.85rem;}

.fmt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.fmt-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.fmt-card .fi{aspect-ratio:4/3; background:var(--secondary-soft) center/cover no-repeat;}
.fmt-card .fi img{display:block;width:100%;height:100%;object-fit:contain;}
.fmt-grid.home-formats{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
.fmt-grid.home-formats .fi{aspect-ratio:1/1;}
.fmt-grid.home-formats .fb{padding:12px 14px;}
.fmt-grid.home-formats h3{font-size:.92rem;}
@media (max-width:980px){.fmt-grid.home-formats{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:560px){.fmt-grid.home-formats{grid-template-columns:repeat(2,minmax(0,1fr));}}
.fmt-card .fb{padding:20px 22px 22px 22px;}
.fmt-card h3{margin:0 0 2px 0;}
.fmt-card p{font-size:.92rem; margin:6px 0 0 0;}
.size-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.size-chips span{background:var(--secondary-soft); border:1px solid var(--line); font-size:.76rem; font-weight:700; padding:4px 10px; border-radius:6px;}
.matrix td,.matrix th{text-align:center;}
.matrix td:first-child,.matrix th:first-child{text-align:left;}
.matrix .y{color:var(--primary); font-size:1.1rem;}
.matrix .n{color:var(--silver);}
.note-list{margin:18px 0 0 0; padding:0; list-style:none; display:grid; gap:10px;}
.note-list li{display:flex; gap:12px; font-size:.95rem; color:var(--dark-gray);}
.note-list li::before{content:""; flex:0 0 8px; height:8px; margin-top:9px; background:var(--primary); transform:rotate(45deg);}

.chain{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.chain .st{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.chain .st .si{aspect-ratio:4/3; background:var(--secondary-soft) center/cover no-repeat; position:relative;}
.chain .st .si .n{position:absolute; left:14px; top:14px; background:var(--primary); color:#fff; font-weight:800; font-size:.75rem; padding:4px 10px; border-radius:100px;}
.chain .st .si.dark{background:var(--charcoal); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.chain .st .si.dark b{font-size:2.2rem; line-height:1; font-weight:800;}
.chain .st .si.dark span{font-size:.8rem; color:#C9C4B6; margin-bottom:10px;}
.chain .st .sb{padding:18px 20px;}
.chain .st h3{margin:0 0 8px 0; font-size:1.05rem;}
.chain dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0; font-size:.88rem;}
.chain dt{color:var(--dark-gray);} .chain dd{margin:0; font-weight:700; text-align:right;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.load-table{min-width:880px;}
.load-table th{white-space:nowrap;}
.load-table td{white-space:nowrap;}
.load-table tr.grp td{background:var(--charcoal); color:#fff; font-weight:800; font-size:.75rem; letter-spacing:.08em; padding:8px 10px;}
.load-table tr.ok td{background:#EEF4EC;}
.load-table td.num{text-align:right;}
.legend{font-size:.82rem; color:var(--dark-gray); margin-top:12px;}

.dl-card{display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-decoration:none; color:var(--charcoal);}
.dl-card .ic{flex:none; width:46px; height:46px; border-radius:12px; background:var(--primary-tint); color:var(--primary); display:flex; align-items:center; justify-content:center;}
.dl-card .ic svg{width:22px; height:22px;}
.dl-card h3{font-size:1.02rem; margin:0 0 4px 0;}
.dl-card p{font-size:.88rem; margin:0;}
.dl-card .meta{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-top:8px;}

footer .wrap{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;}
.two-col > div{min-width:0;}
@media (min-width:981px){.card-grid.c3{grid-template-columns:repeat(3,1fr);}}
@media (max-width:980px){
  footer .wrap{grid-template-columns:1fr 1fr;}
  .pdp{grid-template-columns:1fr; gap:36px;}
  .fmt-grid{grid-template-columns:repeat(2,1fr);}
  .chain{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .fmt-grid,.chain{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:1fr 1fr; gap:14px;}
  .prod-card .pb{padding:14px;}
  .prod-card p{display:none;}
}