/* ==========================================================
   Krishna Sales Corporation — Public Site
   Built on Bootstrap 5 (same version as the admin panel) for
   layout/grid/responsive behavior. This file only adds brand
   color, typography and component-level styling on top.
   ========================================================== */

:root{
  /* ----------------------------------------------------------
     Palette — taken directly from the supplied swatches.
       1 sand   #D4C3AF  |  2 mist #D9D9D9  |  5 sage #9D9580   -> surfaces
       3 blue   #97A3BD  |  4 ink  #000000                      -> text & buttons
     No green is used anywhere in this stylesheet.
     ---------------------------------------------------------- */
  --pub-ink:#000000;            /* 4 — primary text, dark sections, buttons */
  --pub-ink-soft:#1F1F1F;       /*     button hover                         */
  --pub-accent:#000000;         /*     primary action = ink                 */
  --pub-accent-hover:#1F1F1F;
  --pub-blue:#97A3BD;           /* 3 — secondary accent                     */
  --pub-blue-deep:#7A8AAB;
  --pub-blue-text:#5C6B88;      /*     darkened for readable link text      */
  --pub-sand:#D4C3AF;           /* 1                                        */
  --pub-sand-deep:#C4B09A;
  --pub-mist:#D9D9D9;           /* 2                                        */
  --pub-sage:#9D9580;           /* 5 — surfaces only                        */
  --pub-sage-text:#6E6857;      /*     darkened sage, readable as label text */
  --pub-cream:#F7F4EF;          /*     page background                      */
  --pub-white:#FFFFFF;
  --pub-text:#000000;
  --pub-muted:#6F6A62;
  --pub-border:#E3DCD2;

  /* Poppins (headings) + DM Sans (body) — widely used, highly legible,
     neutral corporate pairing, after
     earlier pairings were rejected. */
  --pub-font-display:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pub-font-body:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pub-radius:14px;
  --pub-radius-lg:20px;
  --pub-shadow:0 4px 20px -6px rgba(0,0,0,.14);
  --pub-shadow-md:0 16px 40px -12px rgba(0,0,0,.22);
  --pub-shadow-xs:0 1px 3px rgba(0,0,0,.08);

  /* Bootstrap overrides so its defaults never leak through */
  --bs-primary: var(--pub-ink);
  --bs-link-color: var(--pub-blue-text);
  --bs-link-hover-color: var(--pub-ink);
  --bs-body-color: var(--pub-text);
  --bs-body-bg: var(--pub-cream);
  --bs-body-font-family: var(--pub-font-body);
}

html{ scroll-behavior:smooth; }
/* Anchor targets need this or their heading lands hidden under the fixed navbar */
section[id]{ scroll-margin-top:80px; }

body{
  background:var(--pub-cream);
  padding-top:78px;
  font-weight:400;
  color:var(--pub-text);
  font-family:var(--pub-font-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--pub-font-display);
  color:var(--pub-ink);
  line-height:1.16;
  font-weight:600;
  letter-spacing:-.02em;
}

a, a:visited{ color:var(--pub-blue-text); }
a:hover{ color:var(--pub-ink); }
img{ max-width:100%; }

.pub-eyebrow{
  font-size:.78rem; font-weight:600; letter-spacing:.08em;
  color:var(--pub-accent); margin-bottom:.6rem; display:inline-block;
}
.pub-lede{ font-size:1.08rem; color:var(--pub-muted); }
.pub-section{ padding:4rem 0; }
.pub-section.is-beige{ background:var(--pub-sand); }
/* --pub-muted only reaches 3.12:1 on the sand background, under the 4.5
   needed for body text, so darken copy inside beige sections. */
.pub-section.is-beige .pub-lede,
.pub-section.is-beige p,
.pub-section.is-beige .text-muted{ color:#514C42 !important; }
.pub-section.is-dark{ background:var(--pub-ink); color:#F2EFEA; }
.pub-section.is-dark h2, .pub-section.is-dark h3{ color:#fff; }
.pub-section.is-dark p{ color:#CFCAC2; }

/* ---------- Buttons ---------- */
.pub-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.5rem; border-radius:999px; font-weight:600; font-size:.92rem;
  border:1.5px solid transparent; transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, background .18s ease;
}
.pub-btn-primary{ background:var(--pub-accent); color:#fff; }
.pub-btn-primary:hover{ background:var(--pub-accent-hover); color:#fff; transform:translateY(-1px); box-shadow:var(--pub-shadow); }
.pub-btn-outline{ background:transparent; border-color:var(--pub-ink); color:var(--pub-ink); }
.pub-btn-outline:hover{ background:var(--pub-ink); color:#fff; }
.pub-btn-light{ background:#fff; color:var(--pub-ink); }
.pub-btn-light:hover{ background:var(--pub-sand); color:var(--pub-ink); }
.pub-btn:active{ transform:scale(.97); }

/* ---------- Navbar (Bootstrap navbar + collapse, our styling) ---------- */
.pub-navbar{
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--pub-border);
  padding-top:.55rem; padding-bottom:.55rem;
  box-shadow:0 1px 16px -8px rgba(0,0,0,.18);
}
.pub-navbar .navbar-brand{ display:flex; align-items:center; gap:.55rem; }
/* The logo is a portrait mark (≈0.69 w/h). Fixing width AND height with
   object-fit:cover cropped it; height-only + auto width + contain shows it
   whole at any aspect ratio. */
.pub-navbar .navbar-brand img{ height:52px; width:auto; max-width:none; border-radius:0; object-fit:contain; display:block; }
.pub-navbar .navbar-brand span{ font-family:var(--pub-font-display); font-weight:600; font-size:1.05rem; color:var(--pub-ink); letter-spacing:-.01em; line-height:1.1; }
.pub-navbar .nav-link{ font-weight:500; font-size:.88rem; color:var(--pub-text) !important; padding:.5rem .15rem !important; position:relative; }
.pub-navbar .nav-link::after{ content:''; position:absolute; left:.15rem; right:.15rem; bottom:.15rem; height:1.5px; background:var(--pub-ink); transform:scaleX(0); transform-origin:left; transition:transform .25s cubic-bezier(.22,1,.36,1); }
.pub-navbar .nav-link:hover::after, .pub-navbar .nav-link.active::after{ transform:scaleX(1); }
.pub-navbar .nav-link.active{ font-weight:600; }
.pub-navbar .nav-link:hover{ color:var(--pub-accent) !important; }
.pub-navbar .navbar-toggler{ border:none; box-shadow:none !important; }
@media (max-width: 991.98px){
  .pub-navbar .navbar-collapse{ padding-top:1rem; }
  .pub-navbar .pub-header-cta{ margin-top:1rem; flex-direction:column; align-items:stretch !important; }
}

/* ---------- Hero ---------- */
.pub-hero{ padding:3.5rem 0 4rem; background:linear-gradient(180deg, var(--pub-cream) 0%, var(--pub-sand) 100%); overflow:hidden; }
.pub-hero h1{ font-size:clamp(2rem, 4.5vw, 3.1rem); letter-spacing:-.01em; }
.pub-hero-visual{
  position:relative; border-radius:var(--pub-radius-lg); background:var(--pub-ink);
  overflow:hidden; aspect-ratio:4/3; min-height:260px;
}
.pub-weave{
  position:absolute; inset:0; opacity:.5;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.09) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);
}
.pub-hero-swatch{ position:absolute; border-radius:16px; box-shadow:var(--pub-shadow-md); transition:transform .35s cubic-bezier(.22,1,.36,1); }
/* Sized as % of the visual's own box so they scale down safely on any viewport, instead of fixed px that can overflow a narrow container. */
.pub-hero-swatch.s1{ width:34%; aspect-ratio:1; background:var(--pub-blue); top:8%; right:6%; transform:rotate(-6deg); }
.pub-hero-swatch.s2{ width:30%; aspect-ratio:1; background:var(--pub-sand); bottom:8%; left:6%; transform:rotate(8deg); }
.pub-hero-swatch.s3{ width:24%; aspect-ratio:1; background:var(--pub-accent); bottom:22%; right:22%; transform:rotate(-3deg); }

@keyframes pubRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } }
.pub-hero .pub-eyebrow{ animation:pubRise .7s cubic-bezier(.22,1,.36,1) both; }
.pub-hero h1{ animation:pubRise .7s cubic-bezier(.22,1,.36,1) .12s both; }
.pub-hero .pub-lede{ animation:pubRise .7s cubic-bezier(.22,1,.36,1) .22s both; }
.pub-hero-actions{ animation:pubRise .7s cubic-bezier(.22,1,.36,1) .32s both; }
.pub-hero-visual{ animation:pubRise .8s cubic-bezier(.22,1,.36,1) .2s both; }
@media (prefers-reduced-motion: reduce){
  .pub-hero .pub-eyebrow, .pub-hero h1, .pub-hero .pub-lede, .pub-hero-actions, .pub-hero-visual{ animation:none; }
  .pub-hero-swatch{ transition:none; }
}

/* ---------- Trust bar ---------- */
.pub-trust{ background:var(--pub-white); border-top:1px solid var(--pub-border); border-bottom:1px solid var(--pub-border); padding:2rem 0; }
.pub-trust-item{ display:flex; gap:.85rem; align-items:flex-start; }
.pub-trust-icon{ width:42px; height:42px; border-radius:11px; flex-shrink:0; background:var(--pub-sand); color:var(--pub-accent); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.pub-trust-item h4{ font-family:var(--pub-font-body); font-size:.92rem; font-weight:700; color:var(--pub-text); margin:0 0 .15rem; }
.pub-trust-item p{ margin:0; font-size:.84rem; color:var(--pub-muted); }

/* ---------- Split media (About / New Range) ---------- */
/* Fallback background is a light tint, NOT ink. After the palette change to
   pure black, any panel without a photo rendered as a solid black box. */
.pub-split-media{ border-radius:var(--pub-radius-lg); overflow:hidden; min-height:260px; height:100%; background:var(--pub-sand); position:relative; }
.pub-split-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Category cards ---------- */
.pub-cat-card{
  background:var(--pub-white); border-radius:var(--pub-radius-lg); overflow:hidden;
  border:1px solid var(--pub-border); transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
  height:100%; display:flex; flex-direction:column; text-decoration:none;
}
.pub-cat-card:hover{ transform:translateY(-6px); box-shadow:var(--pub-shadow-md); border-color:var(--pub-accent); }
.pub-cat-swatch{ height:210px; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff; position:relative; overflow:hidden; }
.pub-cat-swatch img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.pub-cat-card:hover .pub-cat-swatch img{ transform:scale(1.07); }
.pub-cat-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 100%); }
.pub-cat-title{ position:absolute; left:1.15rem; right:1.15rem; bottom:.9rem; margin:0; color:#fff !important; font-size:1.15rem; z-index:2; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.pub-cat-body{ padding:1.1rem 1.2rem 1.3rem; flex:1; display:flex; flex-direction:column; }
.pub-cat-body p{ font-size:.86rem; color:var(--pub-muted); margin:0 0 .9rem; flex:1; }
.pub-cat-link{ font-size:.85rem; font-weight:600; color:var(--pub-accent); display:inline-flex; align-items:center; gap:.35rem; }
.pub-cat-link i{ transition:transform .25s ease; }
.pub-cat-card:hover .pub-cat-link i{ transform:translateX(3px); }

/* ---------- Product cards ---------- */
.pub-prod-card{ background:var(--pub-white); border:1px solid var(--pub-border); border-radius:var(--pub-radius-lg); overflow:hidden; height:100%; transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease; }
.pub-prod-card:hover{ transform:translateY(-5px); box-shadow:var(--pub-shadow-md); border-color:var(--pub-accent); }
.pub-prod-media{ height:190px; position:relative; overflow:hidden; background:var(--pub-sand); }
.pub-prod-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.pub-prod-card:hover .pub-prod-media img{ transform:scale(1.05); }
.pub-prod-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:#fff; position:relative; }
.pub-prod-fallback::after{ content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2px, transparent 2px 12px); }
.pub-prod-badge{ position:absolute; top:.6rem; left:.6rem; background:var(--pub-blue); color:var(--pub-ink); font-size:.68rem; font-weight:700; padding:.25em .6em; border-radius:999px; letter-spacing:.03em; z-index:2; }
.pub-prod-body{ padding:1rem 1.1rem 1.2rem; }
.pub-prod-cat{ font-size:.72rem; color:var(--pub-accent); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.pub-prod-body h4{ font-family:var(--pub-font-body); font-size:.96rem; font-weight:700; margin:.25rem 0 .4rem; color:var(--pub-text); }
.pub-prod-body p{ font-size:.82rem; color:var(--pub-muted); margin:0 0 .7rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Manufacturing steps ---------- */
/* Was var(--pub-blue) — #97A3BD on white is ~2.4:1 and reads as washed out.
   Ink keeps the numerals as the strong visual anchor they are meant to be. */
.pub-step-num{ font-family:var(--pub-font-display); font-size:1.75rem; font-weight:700; color:var(--pub-ink); margin-bottom:.5rem; letter-spacing:-.02em; }
.pub-step h4{ font-family:var(--pub-font-body); font-size:1rem; font-weight:700; color:var(--pub-text); margin:0 0 .4rem; }
.pub-step p{ font-size:.87rem; color:var(--pub-muted); margin:0; }

/* ---------- Why us ---------- */
.pub-why-card{ padding:1.5rem; background:var(--pub-white); border:1px solid var(--pub-border); border-radius:var(--pub-radius); height:100%; }
.pub-why-icon{ width:44px; height:44px; border-radius:12px; background:var(--pub-sand); color:var(--pub-accent); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:.85rem; }
.pub-why-card h4{ font-family:var(--pub-font-body); font-size:.96rem; font-weight:700; margin:0 0 .3rem; color:var(--pub-text); }
.pub-why-card p{ font-size:.84rem; color:var(--pub-muted); margin:0; }

/* ---------- Certifications ---------- */
.pub-cert-card{ background:var(--pub-white); border:1px solid var(--pub-border); border-radius:var(--pub-radius); padding:1.3rem; display:flex; gap:1rem; align-items:flex-start; height:100%; }
.pub-cert-mark{ width:50px; height:50px; border-radius:12px; background:var(--pub-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0; }
.pub-cert-card h4{ font-family:var(--pub-font-body); font-size:.96rem; font-weight:700; margin:0 0 .2rem; color:var(--pub-text); }
.pub-cert-card p{ font-size:.82rem; color:var(--pub-muted); margin:0; }

/* ---------- Packaging ---------- */
.pub-pack-card{ background:var(--pub-sand); border-radius:var(--pub-radius-lg); padding:1.7rem; height:100%; }
.pub-pack-card h4{ font-family:var(--pub-font-display); font-size:1.1rem; margin:0 0 .5rem; }
.pub-pack-card p{ font-size:.87rem; color:var(--pub-text); opacity:.75; margin:0; }

/* ---------- Global presence ---------- */
.pub-market-pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); font-size:.84rem; margin:.2rem; white-space:nowrap; }
.pub-market-pill.is-domestic{ background:var(--pub-blue); color:var(--pub-ink); border-color:transparent; font-weight:700; }
.pub-market-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pub-market-track{ display:flex; width:max-content; gap:.5rem; animation:pubMarquee 24s linear infinite; }
.pub-market-marquee:hover .pub-market-track{ animation-play-state:paused; }
@keyframes pubMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .pub-market-track{ animation:none; flex-wrap:wrap; width:auto; } }

/* ---------- Gallery ---------- */
.pub-gallery-tile{ border-radius:var(--pub-radius); overflow:hidden; position:relative; height:100%; min-height:150px; }
.pub-gallery-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1); display:block; }
.pub-gallery-tile:hover img{ transform:scale(1.06); }
.pub-gallery-fallback{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:#fff; font-size:1.5rem; position:relative; min-height:150px; }
.pub-gallery-fallback span{ font-size:.76rem; font-weight:600; font-family:var(--pub-font-body); }
.pub-gallery-fallback::after{ content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2px, transparent 2px 12px); }

/* ---------- Quality statement ---------- */
.pub-statement{ text-align:center; padding:3rem 0; }
.pub-statement h2{ font-size:clamp(1.6rem, 3.5vw, 2.1rem); max-width:760px; margin:0 auto .9rem; }
.pub-statement p{ max-width:560px; margin:0 auto; color:var(--pub-muted); }

/* ---------- Catalogue CTA ---------- */
.pub-cta{ text-align:center; padding:3.25rem 0; }
.pub-cta h2{ color:#fff; font-size:clamp(1.6rem, 3.5vw, 2rem); }

/* ---------- Enquiry form ---------- */
.pub-label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:.35rem; color:var(--pub-text); }
.pub-input, .pub-textarea, .pub-select{
  width:100%; padding:.7rem .9rem; border-radius:10px; border:1.5px solid var(--pub-border);
  font-family:var(--pub-font-body); font-size:.92rem; background:#fff; color:var(--pub-text);
}
.pub-input:focus, .pub-textarea:focus, .pub-select:focus{ outline:none; border-color:var(--pub-accent); box-shadow:0 0 0 3px rgba(0,0,0,.12); }
.pub-contact-card{ background:var(--pub-white); border:1px solid var(--pub-border); border-radius:var(--pub-radius-lg); padding:1.8rem; height:100%; }
.pub-contact-row{ display:flex; gap:.8rem; margin-bottom:1.1rem; }
.pub-contact-row i{ color:var(--pub-accent); margin-top:.15rem; }
.pub-contact-row div{ font-size:.88rem; }
.pub-form-msg{ padding:.8rem 1rem; border-radius:10px; font-size:.88rem; margin-bottom:1rem; }
.pub-form-msg.ok{ background:#E8EBF1; color:var(--pub-blue-text); }
.pub-form-msg.err{ background:#FAE0DC; color:#A23A2E; }

/* ---------- Footer ---------- */
.pub-footer{ background:var(--pub-ink); color:#D9D9D9; padding:0 0 1.75rem; }
.pub-footer-top{
  padding:2.75rem 0; margin-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.pub-footer-cta-title{ font-family:var(--pub-font-display); color:#fff; font-size:clamp(1.3rem,2.5vw,1.75rem); margin:0 0 .35rem; }
.pub-footer-top p{ color:#B0AAA2; font-size:.92rem; }
.pub-footer-cols{ padding-bottom:.5rem; }
.pub-footer h5{ color:#fff; font-family:var(--pub-font-body); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 1.1rem; opacity:.95; }
.pub-footer ul{ list-style:none; padding:0; margin:0; }
.pub-footer li{ margin-bottom:.65rem; }
.pub-footer a, .pub-footer a:visited{ color:#D9D9D9; font-size:.88rem; transition:color .2s ease; }
.pub-footer a:hover{ color:#fff; }
.pub-footer-about{ font-size:.88rem; color:#B0AAA2; max-width:320px; line-height:1.65; }
.pub-footer-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.pub-footer-brand img{ height:46px; width:auto; max-width:none; border-radius:0; object-fit:contain; display:block; background:#fff; padding:3px; }
.pub-footer-brand span{ font-family:var(--pub-font-display); font-size:1.1rem; color:#fff; }
.pub-footer-contact li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.88rem; color:#D9D9D9; }
.pub-footer-contact i{ color:var(--pub-blue); margin-top:.15rem; flex-shrink:0; }
.pub-footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); margin-top:2.25rem; padding-top:1.4rem; font-size:.82rem; color:#9D9580;
}
.pub-footer-social{ display:flex; gap:.6rem; }
.pub-footer-social a{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .22s ease, transform .22s ease;
}
.pub-footer-social a:hover{ background:var(--pub-blue); color:var(--pub-ink); transform:translateY(-2px); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Catalogue modal ---------- */
.pub-modal-content{ border-radius:20px; border:none; }
.pub-modal-content .modal-header{ border-bottom:none; padding-bottom:0; }
.pub-modal-content .btn-close{ box-shadow:none; }

@media (max-width: 767.98px){
  .pub-section{ padding:3.25rem 0; }
  body{ padding-top:64px; }
}


/* ---------- Hero photo collage (real product photography) ---------- */
.pub-hero-collage{ position:absolute; inset:0; }
.pub-hero-tile{
  position:absolute; border-radius:16px; overflow:hidden;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.55);
  animation:heroFloat 7s ease-in-out infinite;
}
.pub-hero-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.pub-hero-tile.t1{ width:56%; height:62%; top:6%; right:5%; z-index:3; animation-delay:0s; }
.pub-hero-tile.t2{ width:44%; height:46%; bottom:7%; left:5%; z-index:2; animation-delay:-2.3s; }
.pub-hero-tile.t3{ width:36%; height:38%; bottom:14%; right:20%; z-index:4; animation-delay:-4.6s; }
@keyframes heroFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}
@media (prefers-reduced-motion: reduce){ .pub-hero-tile{ animation:none; } }
@media (max-width: 991.98px){
  .pub-hero-tile.t1{ width:54%; height:60%; }
  .pub-hero-tile.t3{ right:24%; }
}

/* ---------- Certification photos ---------- */
.pub-cert-mark.has-photo{ background:var(--pub-white); border:1px solid var(--pub-border); padding:4px; }
.pub-cert-mark.has-photo img{ width:100%; height:100%; object-fit:contain; border-radius:8px; }

/* ---------- Enquiry section (two-panel shell) ---------- */
.pub-enquiry-section{ background:var(--pub-sand); }
.pub-enquiry-shell{
  border-radius:24px; overflow:hidden; background:var(--pub-white);
  box-shadow:0 28px 70px -24px rgba(0,0,0,.30);
}
.pub-enquiry-aside{
  background:linear-gradient(160deg, var(--pub-ink) 0%, #000000 100%);
  color:#D9D9D9; padding:2.5rem 2.25rem; height:100%;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.pub-enquiry-aside::after{
  content:''; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 15px);
}
.pub-enquiry-aside > *{ position:relative; z-index:1; }
.pub-enquiry-aside h2{ color:#fff; font-size:1.75rem; margin-bottom:.7rem; }
.pub-enquiry-aside-lede{ color:#B0AAA2; font-size:.92rem; line-height:1.65; margin-bottom:1.75rem; }
.pub-enquiry-contact{ list-style:none; padding:0; margin:0 0 auto; }
.pub-enquiry-contact li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.89rem; margin-bottom:1rem; color:#D9D9D9; }
.pub-enquiry-contact i{ color:var(--pub-blue); margin-top:.15rem; flex-shrink:0; font-size:1rem; }
.pub-enquiry-aside-foot{ margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.16); }
.pub-enquiry-aside-foot span{ display:block; font-size:.82rem; color:#9D9580; margin-bottom:.7rem; }
.pub-enquiry-form-wrap{ padding:2.5rem 2.25rem; }

/* Floating-label fields */
.pub-field{ position:relative; }
.pub-field .pub-input, .pub-field .pub-textarea, .pub-field .pub-select{
  padding:1.35rem .9rem .5rem; border-radius:12px; border:1.5px solid var(--pub-border);
  background:var(--pub-cream); width:100%; font-size:.93rem; transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.pub-field .pub-textarea{ padding-top:1.5rem; resize:vertical; min-height:120px; }
.pub-field label{
  position:absolute; left:.95rem; top:.95rem; font-size:.92rem; color:var(--pub-muted);
  pointer-events:none; transition:all .18s cubic-bezier(.22,1,.36,1);
}
.pub-field label .req{ color:#A23A2E; }
.pub-field .pub-input:focus, .pub-field .pub-textarea:focus, .pub-field .pub-select:focus{
  border-color:var(--pub-accent); background:#fff;
  box-shadow:0 0 0 4px rgba(0,0,0,.10); outline:none;
}
.pub-field .pub-input:focus + label,
.pub-field .pub-input:not(:placeholder-shown) + label,
.pub-field .pub-textarea:focus + label,
.pub-field .pub-textarea:not(:placeholder-shown) + label,
.pub-field label.is-static{
  top:.42rem; font-size:.7rem; font-weight:600; letter-spacing:.03em;
  color:var(--pub-accent); text-transform:uppercase;
}
.pub-field-select .pub-select{ padding-top:1.45rem; appearance:none; cursor:pointer; }
.pub-field-select::after{
  content:'\F229'; font-family:'bootstrap-icons'; position:absolute; right:1rem; top:50%;
  transform:translateY(-25%); color:var(--pub-accent); pointer-events:none; font-size:.8rem;
}
.btn-sm-inline{ padding:.55rem 1.1rem; font-size:.85rem; }

@media (max-width: 991.98px){
  .pub-enquiry-aside, .pub-enquiry-form-wrap{ padding:2rem 1.5rem; }
  .pub-enquiry-shell{ border-radius:20px; }
}

/* ---------- Tablet/laptop refinements ---------- */
@media (min-width: 992px) and (max-width: 1199.98px){
  .pub-cat-swatch{ height:180px; }
  .pub-prod-media{ height:170px; }
}
@media (max-width: 575.98px){
  .pub-section{ padding:2.75rem 0; }
  .pub-hero{ padding:2.5rem 0 3rem; }
  .pub-cat-swatch{ height:165px; }
  .pub-cat-title{ font-size:1rem; }
  .pub-footer-top{ padding:2rem 0; margin-bottom:2rem; text-align:center; }
  .pub-footer-top .text-lg-end{ text-align:center !important; }
  .pub-footer-top .pub-btn{ margin:.3rem .15rem; }
  .pub-footer-social{ justify-content:flex-start; }
  .pub-statement h2{ font-size:1.5rem; }
}

/* ==========================================================
   Global Presence — world map
   ========================================================== */
.pub-map-section{ padding:3.5rem 0 4rem; position:relative; overflow:hidden; }
.pub-map-wrap{
  position:relative; width:100%; border-radius:var(--pub-radius-lg); overflow:hidden;
  background:radial-gradient(ellipse at 62% 48%, rgba(151,163,189,.10) 0%, rgba(255,255,255,.02) 55%);
  border:1px solid rgba(255,255,255,.10);
  padding:.5rem;
}
.pub-map{ width:100%; height:auto; display:block; }

/* --- Land --- */
.pub-country{
  fill:rgba(255,255,255,.07);
  stroke:rgba(255,255,255,.13);
  stroke-width:.4;
  vector-effect:non-scaling-stroke;
  transition:fill .28s ease, stroke .28s ease;
}
/* Market countries are filled, so the map reads at a glance */
.pub-country.is-market{
  fill:rgba(151,163,189,.34);
  stroke:rgba(169,181,204,.65);
  stroke-width:.7;
  cursor:pointer;
  outline:none;
}
.pub-country.is-origin{
  fill:rgba(255,255,255,.80);
  stroke:#fff;
  stroke-width:.9;
}
.pub-country.is-market:hover,
.pub-country.is-market:focus-visible,
.pub-country.is-selected{
  fill:rgba(169,181,204,.72);
  stroke:#fff;
  stroke-width:1.1;
}
.pub-country.is-origin:hover,
.pub-country.is-origin.is-selected{ fill:#fff; }

/* --- Arcs --- */
.pub-map-arc{
  fill:none; stroke:url(#arcGrad); stroke-width:1.5; stroke-linecap:round;
  vector-effect:non-scaling-stroke; opacity:.85;
}
.pub-map-arc.is-ready{
  stroke-dasharray:var(--len, 600); stroke-dashoffset:var(--len, 600);
  animation:arcDraw 1.5s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(.2s + var(--i) * .12s);
}
@keyframes arcDraw{ to{ stroke-dashoffset:0; } }
.pub-map-arc.is-dim{ opacity:.14; }
.pub-map-arc.is-hot{ opacity:1; stroke-width:2.4; }

/* Travelling spark along each arc */
.pub-map-spark{ fill:#E8EAF0; filter:url(#dotGlow); opacity:.95; }

/* --- Markers --- */
.pub-map-hit{ fill:transparent; cursor:pointer; }
.pub-map-dot{
  fill:#A9B5CC; stroke:#000000; stroke-width:1.1;
  vector-effect:non-scaling-stroke; transition:fill .2s ease, r .2s ease;
}
.pub-map-dot.is-origin{ fill:#fff; stroke:#97A3BD; stroke-width:2; }
.pub-map-pulse{
  fill:#A9B5CC; opacity:0; transform-origin:center;
  animation:dotPulse 2.8s ease-out infinite;
  animation-delay:calc(1s + var(--i) * .12s);
}
.pub-map-pulse.is-origin{ fill:#fff; animation-duration:2.2s; animation-delay:.5s; }
@keyframes dotPulse{
  0%{ opacity:.55; r:4; }
  70%{ opacity:0; r:19; }
  100%{ opacity:0; r:19; }
}
.pub-map-marker{ cursor:pointer; outline:none; }
.pub-map-marker:hover .pub-map-dot,
.pub-map-marker:focus-visible .pub-map-dot,
.pub-map-marker.is-selected .pub-map-dot{ fill:#fff; r:6.5; }

@media (prefers-reduced-motion: reduce){
  .pub-map-arc{ animation:none !important; stroke-dashoffset:0 !important; }
  .pub-map-pulse{ animation:none; opacity:0; }
  .pub-map-spark{ display:none; }
}

/* --- Detail panel --- */
.pub-map-panel{
  position:absolute; left:1.25rem; bottom:1.25rem; width:min(290px, calc(100% - 2.5rem));
  background:rgba(10,38,28,.93); backdrop-filter:blur(10px);
  border:1px solid rgba(169,181,204,.35); border-radius:16px;
  padding:1.15rem 1.25rem 1.25rem; color:#F2EFEA;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
  z-index:5;
}
.pub-map-panel.is-open{ opacity:1; transform:none; pointer-events:auto; }
.pub-map-panel-close{
  position:absolute; top:.5rem; right:.7rem; background:none; border:none;
  color:#A9B5CC; font-size:1.3rem; line-height:1; cursor:pointer; padding:.15rem;
}
.pub-map-panel-close:hover{ color:#fff; }
.pub-map-panel-kicker{
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:#A9B5CC; font-weight:700; display:block; margin-bottom:.3rem;
}
.pub-map-panel-title{ font-family:var(--pub-font-display); color:#fff; font-size:1.25rem; margin:0 0 .45rem; }
.pub-map-panel-text{ font-size:.85rem; color:#CFCAC2; margin:0 0 .9rem; line-height:1.55; }

.pub-map-hint{
  text-align:center; font-size:.78rem; color:#8C867D; margin:.75rem 0 0;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
}

/* --- Legend --- */
.pub-map-legend{ display:flex; gap:1.5rem; justify-content:flex-start; flex-wrap:wrap; }
.pub-map-legend span{ display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; color:#CFCAC2; }
.pub-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.pub-dot-origin{ background:#fff; box-shadow:0 0 0 3px rgba(151,163,189,.45); }
.pub-dot-export{ background:#A9B5CC; box-shadow:0 0 10px rgba(169,181,204,.7); }
@media (min-width: 992px){ .pub-map-legend{ justify-content:flex-end; } }

/* --- Country lists --- */
.pub-country-list{ list-style:none; padding:0; margin:0; }
.pub-country-list li{
  display:flex; align-items:center; gap:.6rem; padding:.62rem 0;
  border-bottom:1px solid var(--pub-border); font-size:.92rem; color:var(--pub-text);
  transition:color .2s ease, padding-left .2s ease;
}
.pub-country-list li:last-child{ border-bottom:none; }
.pub-country-list li i{ color:var(--pub-accent); font-size:.9rem; flex-shrink:0; }
.pub-country-list li.is-domestic{ font-weight:600; color:var(--pub-ink); }
.pub-country-list li[data-country]{ cursor:pointer; }
.pub-country-list li[data-country]:hover{ color:var(--pub-accent); padding-left:.35rem; }
.pub-country-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 2rem; }
@media (min-width: 768px){ .pub-country-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 575.98px){
  .pub-country-grid{ grid-template-columns:1fr; }
  .pub-map-section{ padding:2.5rem 0 3rem; }
  .pub-map-wrap{ padding:.25rem; }
  .pub-map-panel{ left:.6rem; right:.6rem; bottom:.6rem; width:auto; padding:.9rem 1rem 1rem; }
  .pub-map-panel-title{ font-size:1.05rem; }
}

/* ==========================================================
   About Us page components
   ========================================================== */

.pub-about-lead{
  font-family:var(--pub-font-display); font-size:clamp(1.05rem, 2vw, 1.3rem);
  line-height:1.65; color:var(--pub-ink);
}
.pub-about-lead p{ margin-bottom:0; }

/* ---------- Live stat strip ---------- */
.pub-stat-strip{
  margin-top:3rem; background:var(--pub-white);
  border:1px solid var(--pub-border); border-radius:var(--pub-radius-lg);
  box-shadow:var(--pub-shadow); overflow:hidden;
}
.pub-stat{ padding:1.75rem 1rem; text-align:center; position:relative; }
.pub-stat::after{
  content:''; position:absolute; right:0; top:22%; height:56%;
  width:1px; background:var(--pub-border);
}
.col-lg-3:last-child .pub-stat::after{ display:none; }
.pub-stat-num{
  font-family:var(--pub-font-display); font-weight:700;
  font-size:clamp(1.9rem, 4vw, 2.6rem); color:var(--pub-accent); line-height:1;
}
.pub-stat-label{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--pub-muted); margin-top:.5rem; font-weight:600;
}
@media (max-width: 991.98px){
  .pub-stat{ padding:1.4rem .75rem; }
  /* Only the 2nd item in each row of two should lose its divider */
  .col-6:nth-child(even) .pub-stat::after{ display:none; }
}

/* ---------- Info cards (capabilities / markets) ---------- */
.pub-info-card{
  background:var(--pub-white); border:1px solid var(--pub-border);
  border-radius:var(--pub-radius-lg); padding:1.75rem; height:100%;
  transition:box-shadow .25s ease, transform .25s ease;
}
.pub-info-card:hover{ box-shadow:var(--pub-shadow); transform:translateY(-3px); }
.pub-info-card-body{ font-size:.92rem; color:var(--pub-muted); line-height:1.65; }
.pub-info-card-body p{ margin-bottom:0; }

/* ---------- Two-photo offset collage ---------- */
.pub-photo-collage{ position:relative; aspect-ratio:4/3.2; min-height:280px; }
.pub-collage-tile{
  position:absolute; border-radius:var(--pub-radius-lg); overflow:hidden;
  box-shadow:var(--pub-shadow-md);
}
.pub-collage-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.pub-collage-tile:hover img{ transform:scale(1.06); }
.pub-collage-tile.c1{ width:72%; height:78%; top:0; left:0; z-index:1; }
.pub-collage-tile.c2{ width:52%; height:52%; bottom:0; right:0; z-index:2; border:5px solid var(--pub-sand); }
.pub-photo-collage.is-reverse .pub-collage-tile.c1{ left:auto; right:0; }
.pub-photo-collage.is-reverse .pub-collage-tile.c2{ right:auto; left:0; }
/* Single-photo fallback should still fill the area properly */
.pub-photo-collage .pub-split-media{ position:absolute; inset:0; }

/* ---------- Manufacturing timeline ---------- */
.pub-timeline{ list-style:none; padding:0; margin:0; position:relative; }
.pub-timeline::before{
  content:''; position:absolute; left:27px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(to bottom, var(--pub-blue), var(--pub-accent));
  opacity:.35;
}
.pub-timeline li{ display:flex; gap:1.5rem; padding-bottom:2.25rem; position:relative; }
.pub-timeline li:last-child{ padding-bottom:0; }
.pub-timeline-num{
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  background:var(--pub-white); border:2px solid var(--pub-accent);
  color:var(--pub-accent); font-family:var(--pub-font-display); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
  position:relative; z-index:1; transition:all .25s ease;
}
.pub-timeline li:hover .pub-timeline-num{ background:var(--pub-accent); color:#fff; transform:scale(1.06); }
.pub-timeline-body{ padding-top:.4rem; }
.pub-timeline-body h4{ font-family:var(--pub-font-body); font-size:1.05rem; font-weight:700; color:var(--pub-ink); margin:0 0 .4rem; }
.pub-timeline-body p{ font-size:.92rem; color:var(--pub-muted); margin:0; line-height:1.65; }

@media (max-width: 575.98px){
  .pub-timeline::before{ left:21px; }
  .pub-timeline li{ gap:1rem; padding-bottom:1.75rem; }
  .pub-timeline-num{ width:44px; height:44px; font-size:.9rem; }
  .pub-photo-collage{ min-height:230px; }
}

/* ==========================================================
   Inner-page components
   NOTE: kept at the end of this file deliberately. Two earlier
   edits replaced a range between two section markers and wiped
   this block as collateral; anything appended after the last
   marker can't be caught that way again.
   ========================================================== */
.pub-page-header{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--pub-ink) 0%, #000000 100%);
  color:#F2EFEA; padding:3.75rem 0 3.25rem;
}
.pub-page-header .pub-weave{ opacity:.4; }
.pub-page-header h1{ color:#fff; font-size:clamp(1.9rem, 4vw, 2.75rem); margin-bottom:0; }
.pub-page-header .container{ position:relative; z-index:2; }
.pub-page-header-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.pub-page-header-media img{ width:100%; height:100%; object-fit:cover; opacity:.30; display:block; }
.pub-page-header-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.86) 100%);
}
.pub-breadcrumb{ font-size:.8rem; color:#A9B5CC; margin-bottom:.7rem; }
.pub-breadcrumb a, .pub-breadcrumb a:visited{ color:#A9B5CC; text-decoration:none; }
.pub-breadcrumb a:hover{ color:#fff; }
.pub-breadcrumb .sep{ margin:0 .45rem; opacity:.55; }

.pub-filter-pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pub-filter-pill{
  display:inline-flex; align-items:center; padding:.55rem 1.15rem; border-radius:999px;
  font-size:.86rem; font-weight:600; border:1.5px solid var(--pub-border);
  background:var(--pub-white); color:var(--pub-text); transition:all .2s ease; text-decoration:none;
}
.pub-filter-pill:hover{ border-color:var(--pub-accent); color:var(--pub-accent); transform:translateY(-1px); }
.pub-filter-pill.is-active{ background:var(--pub-accent); border-color:var(--pub-accent); color:#fff; }

.pub-detail-media{ border-radius:var(--pub-radius-lg); overflow:hidden; background:var(--pub-sand); aspect-ratio:1; box-shadow:var(--pub-shadow); }
.pub-detail-media img{ width:100%; height:100%; object-fit:cover; }
.pub-detail-thumbs{ display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap; }
.pub-detail-thumb{ width:72px; height:72px; border-radius:10px; overflow:hidden; border:2px solid var(--pub-border); cursor:pointer; transition:border-color .2s ease; }
.pub-detail-thumb img{ width:100%; height:100%; object-fit:cover; }
.pub-detail-thumb:hover, .pub-detail-thumb.is-active{ border-color:var(--pub-accent); }
.pub-detail-price-note{ font-size:.85rem; color:var(--pub-muted); }

.pub-pagination .page-link{ color:var(--pub-accent); border-color:var(--pub-border); border-radius:8px; margin:0 .15rem; }
.pub-pagination .page-link:hover{ color:var(--pub-accent-hover); background:var(--pub-sand); border-color:var(--pub-border); }
.pub-pagination .page-item.active .page-link{ background:var(--pub-accent); border-color:var(--pub-accent); color:#fff; }
.pub-pagination .page-item.disabled .page-link{ color:#c3ccc6; }
.pub-pagination .page-link:focus{ box-shadow:0 0 0 .2rem rgba(0,0,0,.18); }

/* World map land (re-added — same collateral loss) */
.pub-country{
  fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.13); stroke-width:.4;
  vector-effect:non-scaling-stroke; transition:fill .28s ease, stroke .28s ease;
}
.pub-country.is-market{
  fill:rgba(151,163,189,.34); stroke:rgba(169,181,204,.65); stroke-width:.7; cursor:pointer; outline:none;
}
.pub-country.is-origin{ fill:rgba(255,255,255,.80); stroke:#fff; stroke-width:.9; }
.pub-country.is-market:hover, .pub-country.is-market:focus-visible, .pub-country.is-selected{
  fill:rgba(169,181,204,.72); stroke:#fff; stroke-width:1.1;
}
.pub-country.is-origin:hover, .pub-country.is-origin.is-selected{ fill:#fff; }

@media (max-width: 575.98px){ .pub-page-header{ padding:2.5rem 0 2.25rem; } }

/* ---------- Timeline scroll animation ----------
   The hidden starting state is scoped to html.has-js (set by a one-line
   script at the top of <body>). Previously `.pub-timeline li` was
   opacity:0 unconditionally and only JS could reveal it, so if the script
   failed to run for any reason the four manufacturing steps stayed
   permanently invisible — a tall blank gap in the middle of About Us.
   With the guard, no-JS and broken-JS both render the steps normally and
   the animation is a pure enhancement. */
.has-js .pub-timeline li{ opacity:0; transform:translateX(-24px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.has-js .pub-timeline li.is-in{ opacity:1; transform:none; }
.has-js .pub-timeline::before{ transform:scaleY(0); transform-origin:top; transition:transform 1.1s cubic-bezier(.22,1,.36,1); }
.has-js .pub-timeline.is-in::before{ transform:scaleY(1); }
.pub-timeline li .pub-timeline-num{ transition:all .3s cubic-bezier(.22,1,.36,1); }
.pub-timeline li.is-in .pub-timeline-num{ animation:numPop .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes numPop{ 0%{ transform:scale(.7); } 60%{ transform:scale(1.1); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){
  .has-js .pub-timeline li{ opacity:1; transform:none; transition:none; }
  .has-js .pub-timeline::before{ transform:scaleY(1); transition:none; }
  .pub-timeline li.is-in .pub-timeline-num{ animation:none; }
}

/* ==========================================================
   Contact page
   ========================================================== */
.pub-contact-route{
  background:var(--pub-white); border:1px solid var(--pub-border);
  border-radius:var(--pub-radius-lg); padding:1.75rem; height:100%; text-align:left;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pub-contact-route:hover{ transform:translateY(-4px); box-shadow:var(--pub-shadow-md); border-color:var(--pub-accent); }
.pub-contact-route h3{ font-family:var(--pub-font-body); font-weight:700; color:var(--pub-ink); margin:0 0 .4rem; }
.pub-contact-route p{ font-size:.87rem; color:var(--pub-muted); margin:0 0 .75rem; }
.pub-contact-route a{ font-size:.88rem; font-weight:600; word-break:break-word; }
.pub-contact-map{ height:420px; width:100%; overflow:hidden; }
.pub-contact-map iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.85); }
@media (max-width: 767.98px){ .pub-contact-map{ height:300px; } }

/* ==========================================================
   Gallery page — masonry + lightbox
   ========================================================== */
.pub-masonry{ column-count:4; column-gap:1rem; }
@media (max-width: 1199.98px){ .pub-masonry{ column-count:3; } }
@media (max-width: 767.98px){ .pub-masonry{ column-count:2; column-gap:.75rem; } }
@media (max-width: 420px){ .pub-masonry{ column-count:1; } }

.pub-masonry-item{
  break-inside:avoid; margin:0 0 1rem; position:relative; border-radius:var(--pub-radius);
  overflow:hidden; cursor:pointer; background:var(--pub-sand);
  box-shadow:var(--pub-shadow-xs, 0 1px 3px rgba(0,0,0,.08));
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  outline:none;
}
.pub-masonry-item img{ width:100%; height:auto; display:block; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.pub-masonry-item:hover, .pub-masonry-item:focus-visible{ transform:translateY(-4px); box-shadow:var(--pub-shadow-md); }
.pub-masonry-item:hover img{ transform:scale(1.05); }
.pub-masonry-item figcaption{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.3rem;
  opacity:0; transition:opacity .28s ease;
}
.pub-masonry-item:hover figcaption, .pub-masonry-item:focus-visible figcaption{ opacity:1; }

.pub-lightbox{
  position:fixed; inset:0; z-index:1200; background:rgba(8,26,19,.94);
  display:flex; align-items:center; justify-content:center; padding:2rem;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.pub-lightbox.is-open{ opacity:1; pointer-events:auto; }
.pub-lb-figure{ margin:0; max-width:92vw; max-height:86vh; text-align:center; }
.pub-lb-figure img{
  max-width:100%; max-height:78vh; object-fit:contain; border-radius:10px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
}
.pub-lb-figure figcaption{ color:#CFCAC2; font-size:.88rem; margin-top:.9rem; }
.pub-lb-close{
  position:absolute; top:1.1rem; right:1.4rem; background:none; border:none;
  color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; opacity:.75;
}
.pub-lb-close:hover{ opacity:1; }
.pub-lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08); color:#fff; font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease;
}
.pub-lb-nav:hover{ background:rgba(255,255,255,.2); }
.pub-lb-prev{ left:1.25rem; }
.pub-lb-next{ right:1.25rem; }
@media (max-width: 575.98px){
  .pub-lb-nav{ width:40px; height:40px; }
  .pub-lb-prev{ left:.4rem; } .pub-lb-next{ right:.4rem; }
  .pub-lightbox{ padding:1rem; }
}

/* ==========================================================
   Legal pages (privacy / terms)
   ========================================================== */
.pub-legal{ font-size:.96rem; line-height:1.8; color:var(--pub-text); }
.pub-legal h2{
  font-size:1.15rem; margin:2.25rem 0 .75rem; color:var(--pub-ink);
  font-family:var(--pub-font-display);
}
.pub-legal h2:first-of-type{ margin-top:0; }
.pub-legal p{ margin-bottom:1rem; color:var(--pub-muted); }
.pub-legal ul{ margin:0 0 1rem; padding-left:1.25rem; color:var(--pub-muted); }
.pub-legal li{ margin-bottom:.5rem; }
.pub-legal-updated{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--pub-accent); font-weight:600; margin-bottom:2rem !important;
}
.pub-legal-note{
  display:flex; gap:.85rem; align-items:flex-start; margin-top:2.5rem;
  background:var(--pub-sand); border-radius:var(--pub-radius); padding:1.1rem 1.25rem;
}
.pub-legal-note i{ color:var(--pub-accent); margin-top:.2rem; flex-shrink:0; }
.pub-legal-note p{ margin:0; font-size:.86rem; color:var(--pub-text); }

/* ==========================================================
   CSR / Sustainability page
   ========================================================== */
.pub-csr-metrics{
  margin-top:2.5rem; background:var(--pub-white);
  border:1px solid var(--pub-border); border-radius:var(--pub-radius-lg);
  box-shadow:var(--pub-shadow); overflow:hidden;
}
.pub-csr-metrics .pub-stat-num{ color:var(--pub-accent); }

.pub-csr-card{
  position:relative; overflow:hidden; height:100%;
  background:var(--pub-white); border:1px solid var(--pub-border);
  border-radius:var(--pub-radius-lg); padding:2rem 1.85rem;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.pub-csr-card:hover{ transform:translateY(-5px); box-shadow:var(--pub-shadow-md); border-color:var(--pub-accent); }
.pub-csr-icon{
  width:52px; height:52px; border-radius:14px; margin-bottom:1.1rem;
  background:var(--pub-sand); color:var(--pub-accent);
  display:flex; align-items:center; justify-content:center; font-size:1.35rem;
  transition:background .3s ease, color .3s ease;
}
.pub-csr-card:hover .pub-csr-icon{ background:var(--pub-accent); color:#fff; }
.pub-csr-kicker{
  display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pub-sage-text); font-weight:600; margin-bottom:.35rem;
}
.pub-csr-card h2{ margin-bottom:.6rem; }
.pub-csr-card p{ font-size:.92rem; color:var(--pub-muted); line-height:1.7; margin:0; }
.pub-csr-index{
  position:absolute; top:1.1rem; right:1.4rem;
  font-family:var(--pub-font-display); font-size:2.6rem; font-weight:600;
  color:var(--pub-border); line-height:1; pointer-events:none; user-select:none;
}

/* ---------- Story timeline ---------- */
.pub-story-timeline{ list-style:none; padding:0; margin:0; position:relative; }
.pub-story-timeline::before{
  content:''; position:absolute; left:64px; top:10px; bottom:10px; width:1px;
  background:linear-gradient(to bottom, transparent, var(--pub-sage), transparent);
  opacity:.5;
}
.pub-story-timeline li{ display:flex; gap:1.75rem; padding-bottom:2rem; position:relative; }
.pub-story-timeline li:last-child{ padding-bottom:0; }
.pub-story-year{
  flex-shrink:0; width:64px; text-align:right; padding-top:.1rem;
  font-family:var(--pub-font-display); font-size:1.25rem; font-weight:600;
  color:var(--pub-accent); position:relative;
}
.pub-story-year::after{
  content:''; position:absolute; right:-1.75rem; top:.65rem;
  width:9px; height:9px; border-radius:50%; background:var(--pub-accent);
  box-shadow:0 0 0 4px var(--pub-sand);
  transform:translateX(50%);
}
.pub-story-body{ padding-left:.5rem; }
.pub-story-body h3{ font-family:var(--pub-font-body); font-weight:600; color:var(--pub-ink); margin:0 0 .35rem; }
.pub-story-body p{ font-size:.92rem; color:var(--pub-muted); margin:0; line-height:1.7; }

.pub-story-note{
  display:flex; gap:1rem; align-items:flex-start; margin-top:2.5rem;
  background:var(--pub-white); border-left:3px solid var(--pub-accent);
  border-radius:var(--pub-radius); padding:1.35rem 1.5rem;
}
.pub-story-note i{ color:var(--pub-accent); font-size:1.2rem; margin-top:.15rem; flex-shrink:0; }
.pub-story-note p{ margin:0; font-size:.93rem; color:var(--pub-text); line-height:1.7; font-style:italic; }

@media (max-width: 575.98px){
  .pub-csr-card{ padding:1.6rem 1.35rem; }
  .pub-csr-index{ font-size:2rem; top:.9rem; right:1rem; }
  .pub-story-timeline::before{ left:46px; }
  .pub-story-timeline li{ gap:1.25rem; }
  .pub-story-year{ width:46px; font-size:1.05rem; }
  .pub-story-year::after{ right:-1.25rem; }
}

/* ==========================================================
   Polish layer — motion, depth and micro-interaction
   ========================================================== */

/* ---------- Buttons: sheen sweep + press feedback ---------- */
.pub-btn{ position:relative; overflow:hidden; isolation:isolate; }
.pub-btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.pub-btn:hover::before{ transform:translateX(120%); }
.pub-btn-primary:hover{ box-shadow:0 10px 24px -10px rgba(0,0,0,.55); }
.pub-btn-outline:hover{ box-shadow:0 8px 20px -10px rgba(0,0,0,.35); }
.pub-btn i{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
.pub-btn:hover i.bi-arrow-right{ transform:translateX(3px); }
.pub-btn:hover i.bi-download, .pub-btn:hover i.bi-file-earmark-pdf{ transform:translateY(2px); }
.pub-btn:hover i.bi-send{ transform:translate(2px,-2px); }

/* ---------- Eyebrow: small rule that draws in ---------- */
.pub-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; }
.pub-eyebrow::before{
  content:''; width:26px; height:1.5px; background:currentColor; opacity:.55;
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s cubic-bezier(.22,1,.36,1) .1s;
}
.is-visible .pub-eyebrow::before,
.pub-hero .pub-eyebrow::before,
.pub-page-header .pub-eyebrow::before{ transform:scaleX(1); }

/* ---------- Section headings: subtle entrance ---------- */
.pub-section h2{ position:relative; }

/* ---------- Cards: lift with a warmer, deeper shadow ---------- */
.pub-prod-card, .pub-cat-card, .pub-why-card, .pub-cert-card,
.pub-info-card, .pub-csr-card, .pub-contact-route, .pub-pack-card{
  will-change:transform;
}
.pub-why-card, .pub-cert-card, .pub-pack-card{
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.pub-why-card:hover, .pub-cert-card:hover, .pub-pack-card:hover{
  transform:translateY(-4px); box-shadow:var(--pub-shadow-md);
}
.pub-why-icon, .pub-csr-icon, .pub-cert-mark{
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.pub-why-card:hover .pub-why-icon{ transform:scale(1.08) rotate(-4deg); background:var(--pub-ink); color:#fff; }
.pub-cert-card:hover .pub-cert-mark{ transform:scale(1.06); }

/* ---------- Product cards: badge pop + image zoom already present ---------- */
.pub-prod-badge{ transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.pub-prod-card:hover .pub-prod-badge{ transform:scale(1.06); }
.pub-prod-body h4{ transition:color .25s ease; }
.pub-prod-card:hover .pub-prod-body h4{ color:var(--pub-blue-text); }

/* ---------- Trust bar: icons react on hover ---------- */
.pub-trust-item{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
.pub-trust-item:hover{ transform:translateY(-3px); }
.pub-trust-icon{ transition:background .3s ease, color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.pub-trust-item:hover .pub-trust-icon{ background:var(--pub-ink); color:#fff; transform:rotate(-6deg) scale(1.06); }

/* ---------- Stat numbers: gradient sheen ---------- */
.pub-stat{ transition:background .3s ease; }
.pub-stat:hover{ background:rgba(0,0,0,.02); }
.pub-stat-num{ transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.pub-stat:hover .pub-stat-num{ transform:scale(1.04); }

/* ---------- Form fields: focus lift ---------- */
.pub-field{ transition:transform .2s ease; }
.pub-field:focus-within{ transform:translateY(-1px); }

/* ---------- Footer links: slide on hover ---------- */
.pub-footer li a{ display:inline-block; transition:color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); }
.pub-footer li a:hover{ transform:translateX(4px); }

/* ---------- Staggered reveal for grid children ---------- */
.row > [class*="col"] > .pub-prod-card,
.row > [class*="col"] > .pub-cat-card,
.row > [class*="col"] > .pub-why-card,
.row > [class*="col"] > .pub-csr-card{ transition-delay:calc(var(--stagger, 0) * 60ms); }

/* ---------- Scroll progress bar ---------- */
.pub-progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:1100;
  background:transparent; pointer-events:none;
}
.pub-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--pub-ink), var(--pub-blue));
  transition:width .1s linear;
}

/* ---------- Back-to-top ---------- */
.pub-totop{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:1050;
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--pub-ink); color:#fff; font-size:1.05rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), background .25s ease;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
}
.pub-totop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.pub-totop:hover{ background:var(--pub-blue-deep); transform:translateY(-3px); }

/* ---------- Image placeholders shimmer while loading ---------- */
.pub-prod-media, .pub-cat-swatch, .pub-detail-media{ background:var(--pub-mist); }

@media (prefers-reduced-motion: reduce){
  .pub-btn::before{ display:none; }
  .pub-eyebrow::before{ transform:scaleX(1); transition:none; }
  .pub-totop{ transition:opacity .01s; }
  .pub-progress span{ transition:none; }
  .pub-why-card:hover, .pub-cert-card:hover, .pub-pack-card:hover,
  .pub-trust-item:hover, .pub-stat:hover .pub-stat-num{ transform:none; }
}


/* ==========================================================
   Fixes from client testing round
   ========================================================== */

/* ---------- Certification issuing-body logo ----------
   The issuer logo was being queried but never rendered, so an uploaded
   issuing-body image simply never appeared. */
.pub-cert-issuer{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pub-cert-issuer-logo{
  height:22px; width:auto; max-width:72px; object-fit:contain;
  flex-shrink:0; border-radius:3px;
}

/* ---------- Mobile header ----------
   With seven nav items plus a CTA the expanded menu could run taller than
   a short phone viewport, leaving the lower links unreachable because the
   fixed navbar itself does not scroll. Capping the height and allowing the
   menu to scroll internally fixes that. */
@media (max-width: 991.98px){
  .pub-navbar .navbar-collapse{
    max-height:calc(100vh - 92px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.75rem;
  }
  .pub-navbar .nav-link{ padding:.6rem .15rem !important; }
  .pub-header-cta{ margin-top:.5rem; }
  .pub-navbar .navbar-brand img{ height:44px; }
  /* Body offset must match the shorter mobile navbar, otherwise the first
     section sits under it (or leaves a visible gap). */
  body{ padding-top:70px; }
  section[id]{ scroll-margin-top:74px; }
}
@media (max-width: 575.98px){
  .pub-navbar .navbar-brand span{ font-size:.95rem; }
  .pub-navbar .navbar-brand img{ height:40px; }
  body{ padding-top:64px; }
  section[id]{ scroll-margin-top:68px; }
}


/* ==========================================================
   Round 2 fixes — header, certifications, new range
   ========================================================== */

/* ---------- Header: fixed without relying on Bootstrap's class ---------- */
.pub-navbar{
  position:fixed !important; top:0; left:0; right:0; z-index:1030;
  transition:box-shadow .3s ease, padding .3s ease, background .3s ease;
}
/* Slightly tighter + stronger shadow once the page is scrolled */
.pub-navbar.is-scrolled{
  padding-top:.35rem; padding-bottom:.35rem;
  box-shadow:0 4px 24px -10px rgba(0,0,0,.28);
}
.pub-navbar.is-scrolled .navbar-brand img{ height:44px; }
.pub-navbar .navbar-brand img{ transition:height .3s ease; }
.pub-navbar .navbar-toggler{ border:1px solid var(--pub-border); padding:.35rem .55rem; }
.pub-navbar .navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.pub-navbar .pub-btn{ padding:.6rem 1.25rem; font-size:.85rem; }

/* ---------- Certifications: gallery-style tiles ----------
   Previous version used small contained thumbnails inside a separate info
   box, which read as cramped. These are large square tiles with the image
   filling the frame and the detail overlaid, matching the gallery. */
.pub-cert-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1.5rem; }
@media (max-width: 991.98px){ .pub-cert-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:1.1rem; } }
@media (max-width: 575.98px){ .pub-cert-grid{ grid-template-columns:1fr; } }

.pub-cert-tile{
  position:relative; border-radius:var(--pub-radius-lg); overflow:hidden;
  background:var(--pub-white); border:1px solid var(--pub-border);
  aspect-ratio:1; display:block;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.pub-cert-tile:hover{ transform:translateY(-6px); box-shadow:var(--pub-shadow-md); border-color:var(--pub-ink); }

.pub-cert-figure{
  position:absolute; inset:0; margin:0; cursor:zoom-in; overflow:hidden;
  background:var(--pub-cream); display:flex; align-items:center; justify-content:center;
}
.pub-cert-figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.pub-cert-tile:hover .pub-cert-figure img{ transform:scale(1.06); }
.pub-cert-placeholder{ font-size:3.2rem; color:var(--pub-sage); }

/* Zoom affordance, same language as the gallery */
.pub-cert-zoom{
  position:absolute; top:.85rem; right:.85rem; z-index:3;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--pub-ink);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  opacity:0; transform:scale(.85);
  transition:opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1);
}
.pub-cert-tile:hover .pub-cert-zoom,
.pub-cert-figure:focus-visible .pub-cert-zoom{ opacity:1; transform:none; }

/* Detail overlaid on the image, not stacked beneath it */
.pub-cert-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:2.5rem 1.15rem 1.1rem;
  background:linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%);
  color:#fff; pointer-events:none;
}
.pub-cert-info h4{
  font-family:var(--pub-font-body); font-size:1.05rem; font-weight:700;
  color:#fff; margin:0 0 .35rem;
}
.pub-cert-meta{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:#E3DCD2; }
.pub-cert-meta img{
  height:24px; width:auto; max-width:64px; object-fit:contain; flex-shrink:0;
  background:#fff; border-radius:4px; padding:2px;
}
.pub-cert-valid{ display:block; font-size:.76rem; color:#B0AAA2; margin-top:.3rem; }

/* ---------- New Range: real product showcase ---------- */
.pub-newrange{ background:var(--pub-ink); color:#fff; }
.pub-newrange h2{ color:#fff; }
.pub-newrange .pub-lede{ color:#CFCAC2; }
.pub-newrange .pub-eyebrow{ color:var(--pub-blue); }
.pub-newrange-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; }
@media (max-width: 575.98px){ .pub-newrange-grid{ grid-template-columns:1fr; } }
.pub-newrange-card{
  position:relative; border-radius:var(--pub-radius-lg); overflow:hidden;
  aspect-ratio:1; background:rgba(255,255,255,.06); display:block; text-decoration:none;
}
.pub-newrange-card img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); }
.pub-newrange-card:hover img{ transform:scale(1.07); }
.pub-newrange-card figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.5rem 1rem .9rem;
  background:linear-gradient(to top, rgba(0,0,0,.85), transparent);
  color:#fff; font-size:.9rem; font-weight:600;
}
.pub-newrange-badge{
  position:absolute; top:.8rem; left:.8rem; z-index:2;
  background:var(--pub-blue); color:var(--pub-ink);
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px;
}

/* ---------- Global presence map: usable on small screens ----------
   A full world map squeezed into a 360px phone is unreadable. On narrow
   screens the SVG keeps a legible minimum width and the container scrolls
   horizontally instead, with a hint telling the user they can swipe. */
@media (max-width: 767.98px){
  .pub-map-wrap{ padding:0; border-radius:var(--pub-radius); overflow:hidden; }
  .pub-map-scroll{
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .pub-map{ min-width:720px; min-height:360px; }
  .pub-map-panel{
    position:static; width:auto; margin:.75rem 0 0;
    opacity:1; transform:none; pointer-events:auto; display:none;
  }
  .pub-map-panel.is-open{ display:block; }
  .pub-map-legend{ gap:1rem; font-size:.8rem; justify-content:flex-start; }
  .pub-map-hint{ font-size:.75rem; }
}
@media (max-width: 575.98px){
  .pub-map{ min-width:640px; min-height:320px; }
}

/* ==========================================================
   NO-CROP IMAGE POLICY  (Ksc_Change-2, Problem 6)

   Every product/photo surface previously used `object-fit: cover`, which
   fills the box by slicing off whatever does not fit. On a catalogue site
   that cut the edges off bathmats and rugs and pushed the subject out of
   frame — worst on phones, where the boxes are nearly square but the photos
   are not.

   These rules switch those surfaces to `object-fit: contain`, so the whole
   photograph is always visible. A soft tinted backdrop fills the leftover
   space so a portrait shot in a landscape box still looks deliberate rather
   than letterboxed by accident.

   Decorative/background imagery (page-header washes, the split panels behind
   text) deliberately keeps `cover` — nothing there is a product the buyer
   needs to inspect.
   ========================================================== */

/* ---- Product cards: catalogue grid, featured, related ---- */
.pub-prod-media{
  height:230px;
  background:var(--pub-cream);
  display:flex; align-items:center; justify-content:center;
  padding:.5rem;
}
.pub-prod-media img{
  width:100%; height:100%;
  object-fit:contain;          /* was cover — cropped the product */
  object-position:center;
}

/* ---- Product detail: main image + thumbnail strip ---- */
.pub-detail-media{
  background:var(--pub-cream);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.pub-detail-media img{ width:100%; height:100%; object-fit:contain; }

.pub-detail-thumb{
  width:78px; height:78px; padding:3px; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
.pub-detail-thumb img{ object-fit:contain; }

/* ---- Category cards ---- */
.pub-cat-swatch{ background:var(--pub-cream); }
.pub-cat-swatch img{ object-fit:contain; padding:.5rem; }
/* The title sits on a gradient over the image; with `contain` the image no
   longer reaches the edges, so the gradient needs its own backdrop to stay
   legible against a light product shot. */
.pub-cat-overlay{
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,0) 72%);
}

/* ---- Hero collage tiles ---- */
/* The hero panel was painted in dark ink because it originally held abstract
   colour swatches. It now holds three real product photographs on white
   tiles, and a near-black slab behind them reads as a hole in an otherwise
   cream page. A warm sand wash with a soft inner border keeps the white
   tiles distinct while sitting inside the palette. */
.pub-hero-visual{
  background:linear-gradient(145deg, var(--pub-sand) 0%, var(--pub-cream) 55%, var(--pub-sand) 100%);
  border:1px solid var(--pub-border);
}
/* The weave texture was drawn in translucent white for the dark panel; on a
   light background it disappeared into a milky haze, so it is restated in
   ink at low opacity to stay a texture rather than a fog. */
.pub-hero-visual .pub-weave{
  opacity:.28;
  background-image:
    repeating-linear-gradient(45deg, rgba(26,29,27,.07) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(26,29,27,.05) 0 2px, transparent 2px 14px);
}
.pub-hero-tile{ background:#fff; box-shadow:var(--pub-shadow-md); }
.pub-hero-tile img{ object-fit:contain; }

/* ---- New Range cards ---- */
.pub-newrange-card{ background:#fff; }
.pub-newrange-card img{ object-fit:contain; padding:.35rem; }

/* ---- About / Our Story photo collage ---- */
.pub-collage-tile{ background:var(--pub-cream); }
.pub-collage-tile img{ object-fit:contain; }

/* ---- Certificate tiles: a certificate must be readable, never trimmed ---- */
.pub-cert-figure img{ object-fit:contain; padding:.75rem; background:#fff; }

/* ---- Responsive heights: keep the whole subject visible on every width ---- */
@media (max-width: 1199.98px){
  .pub-prod-media{ height:215px; }
}
@media (max-width: 991.98px){
  .pub-prod-media{ height:235px; }
  .pub-cat-swatch{ height:195px; }
}
@media (max-width: 767.98px){
  /* Tablet/phone: a fixed pixel height is what forced the crop, so the
     product frame becomes a square ratio box that adapts to the column. */
  .pub-prod-media{ height:auto; aspect-ratio:1; }
  .pub-cat-swatch{ height:auto; aspect-ratio:4/3; }
  .pub-detail-media{ padding:.6rem; }
  .pub-detail-thumb{ width:64px; height:64px; }
}
@media (max-width: 575.98px){
  .pub-prod-media{ aspect-ratio:1; padding:.35rem; }
  .pub-cat-swatch{ aspect-ratio:3/2; }
  .pub-detail-thumb{ width:58px; height:58px; }
}

/* ==========================================================
   Sub-category UI  (Ksc_Change-2, Problem 9)
   ========================================================== */
.pub-subfilter{
  background:var(--pub-white); border:1px solid var(--pub-border);
  border-radius:var(--pub-radius); padding:.85rem 1rem;
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
}
.pub-subfilter-label{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--pub-sage-text); white-space:nowrap;
}
.pub-filter-pill-sm{ padding:.38rem .85rem; font-size:.8rem; }
.pub-pill-count{
  display:inline-block; margin-left:.3rem; padding:.02rem .36rem;
  border-radius:999px; background:var(--pub-sand); color:var(--pub-ink);
  font-size:.7rem; font-weight:700;
}
.pub-filter-pill.is-active .pub-pill-count{ background:rgba(255,255,255,.25); color:#fff; }

/* Sub-category chip shown next to the category on product cards */
.pub-prod-subcat::before{ content:'·'; margin:0 .35rem; opacity:.5; }
.pub-prod-subcat{ color:var(--pub-sage-text); }

@media (max-width: 575.98px){
  .pub-subfilter{ padding:.7rem .8rem; gap:.5rem; }
  .pub-subfilter-label{ width:100%; }
}

/* ==========================================================
   Brand lockup
   The supplied logo is a stacked mark + "KRISHNA" wordmark. At header size
   the wordmark renders about 8px tall and is unreadable, so the header uses
   the mark on its own with the company name set in type beside it. The full
   lockup is still used in the footer and for social preview images.
   ========================================================== */
.pub-navbar .navbar-brand{ gap:.65rem; }
.pub-navbar .navbar-brand img{ height:46px; }
.pub-navbar .navbar-brand span{
  display:flex; flex-direction:column; line-height:1.05;
  font-size:1rem; font-weight:700; letter-spacing:-.01em; color:var(--pub-ink);
}
.pub-navbar .navbar-brand span em{
  font-style:normal; font-weight:500; font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pub-sage-text);
}
.pub-navbar.is-scrolled .navbar-brand img{ height:40px; }

@media (max-width: 575.98px){
  .pub-navbar .navbar-brand img{ height:38px; }
  .pub-navbar .navbar-brand span{ font-size:.88rem; }
  .pub-navbar .navbar-brand span em{ font-size:.62rem; letter-spacing:.1em; }
}

/* ==========================================================
   Mobile horizontal-overflow fix

   Bootstrap's `g-5` gutter applies -1.5rem (24px) side margins to .row, but
   .container only carries 12px of padding at mobile widths. The row therefore
   hung 12px past the viewport on each side and the homepage scrolled
   sideways. Capping the gutter below the container's padding fixes the cause
   rather than masking it with overflow-x:hidden, which would also have
   broken the sticky header.
   ========================================================== */
@media (max-width: 767.98px){
  .pub-section .row.g-5,
  .pub-section .row.gy-5{
    --bs-gutter-x: 1.5rem;   /* 24px total -> 12px margins, matches container */
    --bs-gutter-y: 2rem;
  }
}

/* ==========================================================================
   Themed dropdown — public palette
   The component's own defaults are neutral; these bind it to the site's
   cream/ink scheme so an open dropdown matches the page instead of showing
   the operating system's blue menu.
   ========================================================================== */
:root{
  --ksc-sel-bg:            var(--pub-white, #fff);
  --ksc-sel-ink:           var(--pub-ink);
  --ksc-sel-muted:         var(--pub-muted);
  --ksc-sel-border:        var(--pub-border);
  --ksc-sel-radius:        10px;
  --ksc-sel-accent:        var(--pub-ink);
  --ksc-sel-accent-ink:    #fff;
  --ksc-sel-hover:         var(--pub-cream);
  --ksc-sel-panel-bg:      var(--pub-white, #fff);
  --ksc-sel-shadow:        0 16px 42px rgba(0,0,0,.16);
  --ksc-sel-focus-ring:    rgba(0,0,0,.16);
}
/* On the dark page headers and the contact panel, the control has to read
   against ink rather than cream. */
.pub-page-header .ksc-select-trigger,
.pub-contact-panel .ksc-select-trigger{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.22);
}
.pub-page-header .ksc-select-value.is-placeholder,
.pub-contact-panel .ksc-select-value.is-placeholder{ color:rgba(255,255,255,.6); }

/* ==========================================================================
   SHOP LAYOUT — products listing rebuilt as a catalogue browser
   --------------------------------------------------------------------------
   A filter rail beside a product grid, the arrangement every buyer already
   knows from shopping online. The previous single row of pills could only
   express one level of filtering and gave no sense of how much sat behind
   each one; the rail shows categories, their sub-categories and the seasonal
   themes together, each with a count, so the range is legible before a
   single click.
   ========================================================================== */

.pub-page-header-slim{ padding:2.75rem 0 2.25rem; }

.pub-shop{ padding-top:2.25rem; }

/* ---------- filter rail ---------- */
.pub-shop-rail{ position:sticky; top:96px; }
@media (max-width: 991.98px){
  .pub-shop-rail{ position:static; }
}

.pub-filter-toggle{
  display:flex; align-items:center; gap:.55rem;
  width:100%; margin-bottom:1rem;
  padding:.75rem 1rem;
  background:var(--pub-white); color:var(--pub-ink);
  border:1px solid var(--pub-border); border-radius:var(--pub-radius-lg);
  font-weight:600; font-size:.92rem;
  cursor:pointer;
}
.pub-filter-toggle:hover{ border-color:var(--pub-ink); }
.pub-filter-toggle-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--pub-blue); margin-left:auto;
}

.pub-facet{
  background:var(--pub-white);
  border:1px solid var(--pub-border);
  border-radius:var(--pub-radius-lg);
  padding:1.1rem 1.15rem;
  margin-bottom:1rem;
}
.pub-facet-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  margin-bottom:.65rem;
}
.pub-facet-title{
  font-family:var(--pub-font-body);
  font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--pub-muted); margin:0;
}
.pub-facet-clear{
  font-size:.76rem; font-weight:600; color:var(--pub-ink);
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
}

.pub-facet-list{ list-style:none; padding:0; margin:0; }
.pub-facet-item + .pub-facet-item{ margin-top:2px; }

.pub-facet-link,
.pub-facet-sublink{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .6rem;
  border-radius:9px;
  color:var(--pub-text);
  font-size:.9rem;
  text-decoration:none;
  transition:background-color .16s ease, color .16s ease;
}
.pub-facet-link:hover,
.pub-facet-sublink:hover{ background:var(--pub-cream); color:var(--pub-ink); }
.pub-facet-link.is-active{
  background:var(--pub-ink); color:#fff; font-weight:600;
}
.pub-facet-link.is-active .pub-facet-count{
  background:rgba(255,255,255,.18); color:#fff;
}
.pub-facet-count{
  flex:0 0 auto;
  min-width:1.6rem; text-align:center;
  padding:.1rem .4rem;
  background:var(--pub-cream);
  border-radius:999px;
  font-size:.72rem; font-weight:600; color:var(--pub-muted);
}
.pub-facet-now{
  display:inline-block; margin-left:.4rem;
  font-size:.66rem; font-style:normal; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--pub-sage-text);
}
.pub-facet-link.is-active .pub-facet-now{ color:rgba(255,255,255,.75); }

/* Sub-categories sit indented under their open parent, with a hairline
   connecting them so the hierarchy is visible rather than implied. */
.pub-facet-sublist{
  list-style:none;
  margin:.3rem 0 .5rem;
  padding:0 0 0 .65rem;
  border-left:1px solid var(--pub-border);
}
.pub-facet-sublink{ font-size:.85rem; color:var(--pub-muted); padding:.4rem .55rem; }
.pub-facet-sublink.is-active{ color:var(--pub-ink); font-weight:700; background:var(--pub-cream); }

.pub-facet-help p{
  font-size:.84rem; color:var(--pub-muted); margin:.1rem 0 .85rem; line-height:1.6;
}

/* ---------- toolbar ---------- */
.pub-shop-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.85rem;
  padding-bottom:.9rem; margin-bottom:1.1rem;
  border-bottom:1px solid var(--pub-border);
}
.pub-shop-count{ font-size:.9rem; color:var(--pub-muted); }
.pub-shop-count strong{ color:var(--pub-ink); font-weight:700; }
.pub-shop-sort{ display:flex; align-items:center; gap:.5rem; }
.pub-shop-sort label{
  font-size:.78rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--pub-muted); margin:0;
}
.pub-shop-sort .ksc-select,
.pub-shop-sort .form-select{ min-width:178px; }

/* ---------- active filter chips ---------- */
.pub-chip-row{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.1rem; }
.pub-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.32rem .7rem;
  background:var(--pub-cream); border:1px solid var(--pub-border);
  border-radius:999px;
  font-size:.8rem; font-weight:600; color:var(--pub-ink);
  text-decoration:none;
  transition:background-color .16s ease, border-color .16s ease;
}
.pub-chip:hover{ background:var(--pub-sand); border-color:var(--pub-ink); color:var(--pub-ink); }
.pub-chip i{ font-size:.65rem; opacity:.65; }

/* ---------- grid ---------- */
/* The whole card is the link, so the hit area is the tile rather than a
   small text link at the bottom. */
.pub-shop-grid .pub-prod-card{
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit; height:100%;
}
.pub-shop-grid .pub-prod-body{ display:flex; flex-direction:column; flex:1 1 auto; }

.pub-prod-flags{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:.3rem;
}
.pub-prod-flags .pub-prod-badge{ position:static; }
.pub-prod-theme{
  background:rgba(0,0,0,.78); color:#fff;
  font-size:.64rem; font-weight:700; letter-spacing:.04em;
  padding:.24em .6em; border-radius:999px;
}

/* A quiet affordance that appears on hover, so the card reads as clickable
   without adding permanent chrome to every tile. */
.pub-prod-view{
  position:absolute; left:0; right:0; bottom:0;
  padding:.55rem .75rem;
  background:linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  color:#fff; font-size:.78rem; font-weight:600;
  display:flex; align-items:center; gap:.35rem;
  opacity:0; transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
}
.pub-prod-card:hover .pub-prod-view,
.pub-prod-card:focus-visible .pub-prod-view{ opacity:1; transform:none; }
.pub-prod-card:focus-visible{ outline:2px solid var(--pub-ink); outline-offset:3px; }

/* ---------- empty state ---------- */
.pub-shop-empty{
  text-align:center; padding:3.5rem 1.5rem;
  background:var(--pub-white);
  border:1px dashed var(--pub-border);
  border-radius:var(--pub-radius-lg);
}
.pub-shop-empty i{ font-size:2.2rem; color:var(--pub-sand-deep); display:block; margin-bottom:.75rem; }
.pub-shop-empty h3{ font-family:var(--pub-font-body); font-size:1.05rem; font-weight:700; margin:0 0 .4rem; }
.pub-shop-empty p{ font-size:.9rem; color:var(--pub-muted); margin:0 0 1.1rem; }

@media (max-width: 575.98px){
  .pub-shop-toolbar{ align-items:stretch; }
  .pub-shop-sort{ width:100%; }
  .pub-shop-sort .ksc-select,
  .pub-shop-sort .form-select{ flex:1 1 auto; min-width:0; }
  .pub-prod-media{ height:170px; }
}
/* A category with nothing published is listed but inert — offering it would
   only lead to an empty results page. */
.pub-facet-link.is-empty{ color:var(--pub-muted); opacity:.5; cursor:default; }
.pub-facet-link.is-empty:hover{ background:transparent; }

/* ==========================================================================
   PRODUCT DETAIL — gallery + information column
   --------------------------------------------------------------------------
   The gallery cross-fades between up to four images on a timer. Slides are
   stacked in the same box rather than laid side by side, so the stage keeps
   one fixed height and the page never jumps as images of different
   proportions come round.
   ========================================================================== */

.pub-detail{ padding-top:1.75rem; }

.pub-gallery-stage{
  position:relative;
  aspect-ratio:4/3;
  background:var(--pub-cream);
  border:1px solid var(--pub-border);
  border-radius:var(--pub-radius-lg);
  overflow:hidden;
}
.pub-gallery-slide{
  position:absolute; inset:0;
  margin:0; padding:1.25rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .55s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.pub-gallery-slide.is-current{ opacity:1; pointer-events:auto; }
.pub-gallery-slide img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;              /* no cropping, per the no-crop policy */
}

/* ---- arrows ---- */
.pub-gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92);
  border:1px solid var(--pub-border);
  border-radius:50%;
  color:var(--pub-ink); font-size:1.05rem;
  cursor:pointer; z-index:3;
  opacity:0;
  transition:opacity .22s ease, background-color .18s ease, transform .18s ease;
}
.pub-gallery-nav.prev{ left:.75rem; }
.pub-gallery-nav.next{ right:.75rem; }
.pub-gallery-stage:hover .pub-gallery-nav,
.pub-gallery-nav:focus-visible{ opacity:1; }
.pub-gallery-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.06); }
.pub-gallery-nav:focus-visible{ outline:2px solid var(--pub-ink); outline-offset:2px; }

/* Touch has no hover, so the controls stay visible there. */
@media (hover: none){
  .pub-gallery-nav{ opacity:1; }
}

/* ---- play / pause ---- */
.pub-gallery-play{
  position:absolute; top:.75rem; right:.75rem;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); color:#fff;
  border:0; border-radius:50%;
  font-size:.9rem; cursor:pointer; z-index:3;
  opacity:0; transition:opacity .22s ease, background-color .18s ease;
}
.pub-gallery-stage:hover .pub-gallery-play,
.pub-gallery-play:focus-visible{ opacity:1; }
.pub-gallery-play:hover{ background:rgba(0,0,0,.78); }
.pub-gallery-play:focus-visible{ outline:2px solid #fff; outline-offset:2px; opacity:1; }
@media (hover: none){ .pub-gallery-play{ opacity:1; } }

/* ---- dots ---- */
.pub-gallery-dots{
  position:absolute; left:0; right:0; bottom:.75rem;
  display:flex; justify-content:center; gap:.4rem; z-index:3;
}
.pub-gallery-dot{
  width:8px; height:8px; padding:0;
  border:0; border-radius:50%;
  background:rgba(0,0,0,.25);
  cursor:pointer;
  transition:background-color .2s ease, width .2s ease;
}
.pub-gallery-dot.is-current{ background:var(--pub-ink); width:22px; border-radius:999px; }
.pub-gallery-dot:focus-visible{ outline:2px solid var(--pub-ink); outline-offset:2px; }

/* ---- thumbnails ---- */
.pub-gallery-thumbs{
  display:flex; gap:.55rem; margin-top:.75rem; flex-wrap:wrap;
}
.pub-gallery-thumb{
  width:76px; height:76px; padding:4px;
  background:var(--pub-cream);
  border:2px solid var(--pub-border);
  border-radius:10px;
  cursor:pointer; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.pub-gallery-thumb img{ width:100%; height:100%; object-fit:contain; }
.pub-gallery-thumb:hover{ border-color:var(--pub-sand-deep); transform:translateY(-2px); }
.pub-gallery-thumb.is-current{ border-color:var(--pub-ink); }
.pub-gallery-thumb:focus-visible{ outline:2px solid var(--pub-ink); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .pub-gallery-slide{ transition:none; }
  .pub-gallery-nav, .pub-gallery-thumb, .pub-gallery-dot{ transition:none; }
}

/* ---------- information column ---------- */
.pub-detail-info{ padding-top:.25rem; }

.pub-detail-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.85rem; }
.pub-detail-tag{
  display:inline-block;
  padding:.26em .7em;
  background:var(--pub-cream);
  border:1px solid var(--pub-border);
  border-radius:999px;
  font-size:.72rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--pub-muted); text-decoration:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
a.pub-detail-tag:hover{ background:var(--pub-sand); color:var(--pub-ink); border-color:var(--pub-ink); }
.pub-detail-tag.is-theme{ background:var(--pub-ink); color:#fff; border-color:var(--pub-ink); }
a.pub-detail-tag.is-theme:hover{ background:var(--pub-ink-soft); color:#fff; }
.pub-detail-tag.is-new{ background:var(--pub-blue); color:var(--pub-ink); border-color:var(--pub-blue); }

.pub-detail-title{
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  line-height:1.18; margin:0 0 .4rem;
}
.pub-detail-sku{
  font-size:.8rem; color:var(--pub-muted);
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 1rem;
}
.pub-detail-sku span{ color:var(--pub-ink); font-weight:600; }

.pub-detail-copy{ font-size:.95rem; line-height:1.72; color:var(--pub-text); }
.pub-detail-copy p:last-child{ margin-bottom:0; }

.pub-detail-specs{
  margin:1.35rem 0 0;
  border-top:1px solid var(--pub-border);
}
.pub-detail-specs > div{
  display:grid;
  grid-template-columns:minmax(7.5rem, 34%) 1fr;
  gap:.75rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--pub-border);
}
.pub-detail-specs dt{
  font-size:.74rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--pub-muted);
}
.pub-detail-specs dd{ margin:0; font-size:.9rem; color:var(--pub-text); }

.pub-detail-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }

.pub-detail-assurances{
  list-style:none; padding:0; margin:1.5rem 0 0;
  border-top:1px solid var(--pub-border); padding-top:1.1rem;
}
.pub-detail-assurances li{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.85rem; color:var(--pub-muted); line-height:1.55;
}
.pub-detail-assurances li + li{ margin-top:.6rem; }
.pub-detail-assurances i{ color:var(--pub-ink); font-size:.95rem; margin-top:.08rem; flex:0 0 auto; }

@media (max-width: 575.98px){
  .pub-gallery-thumb{ width:62px; height:62px; }
  .pub-detail-specs > div{ grid-template-columns:1fr; gap:.15rem; }
  .pub-detail-actions .pub-btn{ width:100%; justify-content:center; }
}

/* ==========================================================================
   FEATURED COLLECTION — seasonal theme tabs
   --------------------------------------------------------------------------
   The old section was an undifferentiated grid of eight products. The range
   is actually built to a seasonal calendar, so the section now leads with
   that: a row of theme tabs, the one in season today selected first, and the
   grid filtered to it.
   ========================================================================== */

.pub-featured-head{ margin-bottom:1.5rem; max-width:60ch; }

.pub-theme-tabs{
  display:flex; gap:.5rem;
  margin-bottom:1.75rem; padding-bottom:.35rem;
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.pub-theme-tabs::-webkit-scrollbar{ height:4px; }
.pub-theme-tabs::-webkit-scrollbar-thumb{ background:var(--pub-border); border-radius:999px; }

.pub-theme-tab{
  position:relative;
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:flex-start; gap:.1rem;
  padding:.6rem 1rem;
  background:var(--pub-white);
  border:1px solid var(--pub-border);
  border-radius:var(--pub-radius-lg);
  cursor:pointer; text-align:left;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.pub-theme-tab:hover{ border-color:var(--pub-ink); transform:translateY(-2px); }
.pub-theme-tab.is-active{
  background:var(--pub-ink); border-color:var(--pub-ink); color:#fff;
}
.pub-theme-tab-name{
  font-size:.92rem; font-weight:700; color:inherit; white-space:nowrap;
}
.pub-theme-tab-season{
  font-size:.7rem; letter-spacing:.03em;
  color:var(--pub-muted); white-space:nowrap;
}
.pub-theme-tab.is-active .pub-theme-tab-season{ color:rgba(255,255,255,.72); }

/* A small mark on whichever themes are running this month. */
.pub-theme-tab-dot{
  position:absolute; top:.5rem; right:.55rem;
  width:7px; height:7px; border-radius:50%;
  background:var(--pub-blue);
}
.pub-theme-tab.is-active .pub-theme-tab-dot{ background:#fff; }

.pub-featured-grid .pub-prod-card{
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit; height:100%;
}
.pub-featured-item[hidden]{ display:none !important; }

.pub-featured-actions{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  margin-top:2rem;
}

@media (max-width: 575.98px){
  .pub-theme-tab{ padding:.5rem .8rem; }
  .pub-theme-tab-name{ font-size:.85rem; }
  .pub-featured-actions .pub-btn{ width:100%; justify-content:center; }
}

/* The category line pairs "Bathmats" with its sub-category, separated by a
   CSS pseudo-element. That leaves no real whitespace between them, so the
   browser treated "BathmatsTufted Multi" as one unbreakable word and clipped
   it on narrow cards. Laying the two out as wrapping flex items gives the
   line somewhere legitimate to break. */
.pub-prod-cat{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:0;
  row-gap:.1rem;
  overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   Themed dropdown inside the site's floating-label fields
   The contact form uses .pub-field, where the label is absolutely positioned
   over the control and the wrapper draws its own caret. The replacement
   trigger has to leave the same room at the top for that label, and the
   wrapper's caret must give way to the component's own.
   -------------------------------------------------------------------------- */
.pub-field-select .ksc-select-trigger{
  min-height:56px;
  padding:1.45rem .95rem .5rem;
  background:var(--pub-white);
  border:1px solid var(--pub-border);
  border-radius:12px;
  font-size:.95rem;
}
.pub-field-select .ksc-select-trigger:hover{ border-color:var(--pub-ink); }
/* The wrapper's own caret would sit on top of the component's. */
.pub-field-select.ksc-has-select::after{ display:none; }
/* The label belongs above the chosen value, never across it — and it has to
   out-rank the control even while the list is open, or the lifted trigger
   paints over it and the field loses its caption mid-interaction. */
.pub-field-select .ksc-select + label,
.pub-field-select label.is-static{ z-index:1300; pointer-events:none; }
/* Lift the whole field while the list is open so the next field cannot paint
   over the options, and keep it still — the focus-within nudge would shift
   the panel as it opens. */
.pub-field.ksc-select-open{ position:relative; z-index:1200; transform:none; }

/* Without JavaScript nothing can advance the gallery, and the controls would
   be dead furniture. The slides stack instead, so all four images are
   reachable by scrolling rather than only the first.
   html.has-js is set by an inline script at the top of <body>. */
html:not(.has-js) .pub-gallery-stage{ aspect-ratio:auto; }
html:not(.has-js) .pub-gallery-slide{
  position:relative; inset:auto;
  opacity:1; pointer-events:auto;
  aspect-ratio:4/3;
}
html:not(.has-js) .pub-gallery-slide + .pub-gallery-slide{ border-top:1px solid var(--pub-border); }
html:not(.has-js) .pub-gallery-nav,
html:not(.has-js) .pub-gallery-play,
html:not(.has-js) .pub-gallery-dots,
html:not(.has-js) .pub-gallery-thumbs{ display:none; }