/* compress using https://www.seomagnifier.com/best-css-minifier */
/* --------------------------------------------------
   Design 2512 – Consolidated stylesheet (DEDUPED)
   Includes: base + layout + hero + cards + blog accordion
   + hard overrides + fixed topbar + tight mobile header/nav
   + NEW: .brand .site-name (replaces .brand h1)
-------------------------------------------------- */

/* --------------------------------------------------
   Base / layout helpers
-------------------------------------------------- */

*{ box-sizing:border-box; }

#page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{ flex:1; }

/* --------------------------------------------------
   Root + typography
-------------------------------------------------- */

:root{
  --navy:#0b2d4d;
  --ocean:#0f5e74;
  --sand:#f3efe6;
  --cream:#ffffff;
  --coral:#d86b5a;
  --gold:#c9a227;
  --ink:#0e1726;
  --muted:#55657a;
  --line:#e6e8ec;
  --shadow: 0 10px 28px rgba(15, 23, 42, .14);
  --radius: 18px;
  --radius2: 26px;
  --max: 1180px;
  --page-pad: 16px;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--sand);
  line-height:1.35;
}
a{ color:inherit; }

/* =========================================================
   Background reset after main content
   ========================================================= */

.bg-reset-white{
  background:#ffffff;
  width:100%;
}

/* Ensure no inherited grey leaks through */
.bg-reset-white .section,
.bg-reset-white .section-alt,
.bg-reset-white #footer,
.bg-reset-white .footer_links{
  background:#ffffff;
}

/* --------------------------------------------------
   Shared max-width container
-------------------------------------------------- */

.topbar .wrap,
.nav .wrap,
.hero .wrap,
.trust .wrap,
footer .wrap{
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

/* --------------------------------------------------
   Header – Topbar (base styles)
-------------------------------------------------- */

.topbar{
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  align-items:left;
  gap:10px;
  min-width:200px;
}

/* NEW: site name (replaces .brand h1) */
.brand .site-name{
  font-size:14px;
  margin:0;
  letter-spacing:.2px;
  font-weight:700;
  line-height:1.15;
  display:block;
  text-decoration:none;
  color:inherit;
}

.brand small{
  display:block;
  color:var(--muted);
  font-weight:600;
}

/* Optional flag styling (your markup uses .flag-icon) */
.flag-icon img{
  display:block;
  width:30px;
  height:30px;
  border-radius:6px;
  box-shadow:0 0 0 1px rgba(148,163,184,.5);
}

.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.pill .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 3px rgba(216,107,90,.18);
}

select{
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  font-weight:700;
  background:#fff;
  color:var(--ink);
}

/* --------------------------------------------------
   Header – Nav (base styles)
-------------------------------------------------- */

.nav{
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.nav .wrap{
  padding:10px 16px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.navlinks{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}
.navlinks a{
  text-decoration:none;
  color:var(--muted);
  font-weight:800;
  font-size:14px;
  padding:8px 10px;
  border-radius:10px;
}
.navlinks a:hover{
  background:var(--sand);
  color:var(--ink);
}

.cta-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(11,45,77,.18);
  color:var(--navy);
  background:#fff;
  text-decoration:none;
  font-weight:900;
  white-space:nowrap;
}

/* --------------------------------------------------
   Side navigation
-------------------------------------------------- */

.sidenav{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #1b2d3e 0%, #14202b 100%);
  background-color: #0f2233;
  overflow-x: hidden;
  transition: .3s;
  padding-top: 60px;
}

.sidenav.is-open{
  width: 300px;
  max-width: 85vw;
}

.sidenav ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* tighter menu items */
.sidenav a{
  padding:4px 24px;   /* was 6px 24px */
  line-height:1.1;    /* slightly tighter */
  text-decoration:none;
  font-size:.90rem;   /* tiny reduction */
  color:#ffffff;
  display:block;
}

.sidenav a:hover{
  background-color:rgba(255,255,255,.08);
  color:#9fd3ff;
}

.sidenav .closebtn{
  position:absolute;
  top:12px;
  right:18px;
  font-size:32px;
}

#mySidenav hr{
  border-color: rgba(255,255,255,0.08);
}


/* --------------------------------------------------
   Hero
-------------------------------------------------- */

.hero{
  background:var(--navy);
  color:#fff;
}
.hero .wrap{
  padding:28px 16px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:stretch;
}
.hero-card{
  border-radius:var(--radius2);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 46px rgba(0,0,0,.22);
  padding:22px;
}

/* NOTE: You currently style hero headline as h2; if you later switch to h1,
   add: .hero h1{ ...same as h2... } and keep h2 for sections. */
.hero h1{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.08;
  letter-spacing:.2px;
}
.hero h2{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.08;
  letter-spacing:.2px;
}
.hero p{
  margin:0 0 14px;
  color:rgba(255,255,255,.86);
  font-size:16px;
  max-width:54ch;
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:12px 0 16px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
}
.chip .mark{
  width:20px;
  height:20px;
  border-radius:7px;
  background:var(--coral);
  display:grid;
  place-items:center;
  color:#fff;
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 16px rgba(216,107,90,.22);
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  font-weight:900;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn-primary{
  background:var(--coral);
  color:#fff;
  box-shadow:0 12px 26px rgba(216,107,90,.30);
}
.btn-primary:hover{ filter:brightness(.98); }

.btn-secondary{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.30);
}
.btn-secondary:hover{ background:rgba(255,255,255,.10); }

.hero-media{
  border-radius:var(--radius2);
  background:#fff;
  padding:14px;
  box-shadow:0 18px 46px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hero-media .frame{
  border-radius:20px;
  overflow:hidden;
  background:#f4f6f8;
  border:1px solid var(--line);
}
.hero-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:16/10;
}

/* Caption: stacked, full width */
.hero-media .caption{
  display:block;
  width:100%;
  padding:8px 8px 2px;
  color:var(--ink);
}
.hero-media .caption strong,
.hero-media .caption span{
  display:block;
  width:100%;
  text-align:left;
  margin:0;
}
.hero-media .caption strong{
  font-size:14px;
  font-weight:900;
  color:var(--ink);
  line-height:1.25;
  margin-bottom:2px;
}
.hero-media .caption span{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  line-height:1.3;
}

@media (max-width: 640px){
  .hero-media .caption{ text-align:center; }
  .hero-media .caption strong,
  .hero-media .caption span{ text-align:center; }
}

/* --------------------------------------------------
   Sections + cards
-------------------------------------------------- */

.section{
  max-width:var(--max);
  margin:0 auto;
  padding:26px 16px;
}

.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.section-title h3{
  margin:0;
  font-size:24px;
  letter-spacing:.2px;
}
.section-title p{
  margin:0;
  color:var(--muted);
  font-weight:650;
}

.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;

  /* equal-height alignment */
  align-items:stretch;
}

/* Wrapper that holds cards 4–5 */
.grid-row-center{
  grid-column: 1 / -1;         /* span the whole grid width */
  display:flex;
  justify-content:center;
  gap: 18px;
}

/* Make the two cards the same width as a normal grid column (3-col layout) */
.grid-row-center .card{
  width: calc((100% - (18px * 2)) / 3);
  max-width: 420px;            /* optional safety */
}

/* Responsive: when it becomes 2 columns or 1 column, don’t special-case */
@media (max-width: 980px){
  .grid-row-center{ display: contents; }   /* acts like wrapper isn't there */
  .grid-row-center .card{ width:auto; max-width:none; }
}

/* second row (2 cards) centred */
.grid--two{
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;      /* adjust if needed */
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px;
}

/* responsive: stack naturally */
@media (max-width: 980px){
  .grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--two{
    max-width: none;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px){
  .grid{
    grid-template-columns: 1fr;
  }
}


.card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;

  /* equal-height card layout */
  height:100%;
  display:flex;
  flex-direction:column;
}

.card .img{
  background:#f3f5f8;
  border-bottom:1px solid var(--line);
  position:relative;
}
.card .img img{
  width:100%;
  height:210px;
  object-fit:cover;
  display:block;
}

.tag{
  position:absolute;
  top:12px;
  left:12px;
  background:rgba(11,45,77,.92);
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.2px;
}
.tag.gold{ background:rgba(201,162,39,.96); color:#102a43; }

.card .body{
  padding:14px 14px 16px;

  /* allow footer/meta to pin */
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

.card h4{ margin:0 0 6px; font-size:18px; }
.card p{ margin:0 0 12px; color:var(--muted); font-weight:650; }

.meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

  /* pin to bottom */
  margin-top:auto;
  min-height:44px;
}

.price{
  font-weight:950;
  color:var(--navy);
  background:rgba(15,94,116,.10);
  border:1px solid rgba(15,94,116,.18);
  padding:8px 10px;
  border-radius:12px;
}

.btn-card{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:950;
  background:var(--ocean);
  color:#fff;
  border:1px solid rgba(0,0,0,.05);
}
.btn-card:hover{ filter:brightness(.98); }

/* --------------------------------------------------
   Trust strip 
-------------------------------------------------- */

.trust{
  background:var(--cream);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.trust .wrap{
  padding:18px 16px;
  display:block; /* IMPORTANT: stop the 4-col grid here */
}

.trust .section-title{
  display:block;
  text-align:center;
  margin:0 0 18px;
}

.trust .section-title h2,
.trust .section-title h3{
  margin:0 0 8px;
  font-size:24px;
  line-height:1.2;
}

.trust .section-title p{
  margin:0 auto;
  max-width:850px;
  color:var(--muted);
  font-weight:650;
}

/* Tiles grid */
.trust .trust-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4, 1fr);
  align-items:stretch;
}

/* Tile */
.trust .t{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background:var(--sand);
}
.trust .t strong{
  display:block;
  font-size:13px;
  margin-bottom:4px;
}
.trust .t span{
  display:block;
  color:var(--muted);
  font-weight:650;
  font-size:12px;
}

/* Footer link (full width, centered) */
.trust .section-footer{
  margin-top:14px;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap; /* allows clean wrap on small screens */
}
.trust .section-footer-text{
  margin:0;
}
.trust .section-footer-link{
  font-weight:800;
  text-decoration:underline;
}

/* Responsive */
@media (max-width: 980px){
  .trust .trust-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width: 560px){
  .trust .trust-grid{
    grid-template-columns:1fr;
  }
}


.spec{margin:10px 0 0;padding-left:18px;text-align:left;}
.spec li{margin:6px 0;}

  /* =========================================================
     RECOMMENDED: simplify + centre + remove list dots
     (traditional, clean layout)
     ========================================================= */

  /* Centre the recommended section title block (incl. multi-line H3) */
  #recommended .section-title{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    text-align:center;
    width:100%;
  }

  #recommended .section-title > div{
    width:100%;
    max-width: 980px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  #recommended .section-title h3{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  #recommended .section-title p{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }


  /* If you’re using the extra blocks, centre them too */
  #recommended .reco-notes,
  #recommended .reco-notes h4{
    text-align:center;
  }

  /* Remove bullet dots + default padding/margins */
  #recommended ul{
    list-style:none;
    margin:12px auto 0 auto;
    padding:0;
    max-width: 980px;
  }

  /* Make each “point” look like a clean centred line */
  #recommended ul li{
    margin:6px 0;
    padding:0;
  }

/* -------------------------------------------------
   Stop bullets on lists
   ------------------------------------------------- */

.no-bullets {
   list-style: none;
   padding-left: 0;
   margin-left: 0;
}
.no-bullets li {
   margin: 4px 0;
}
/* =========================================================
   DESIGN2602: Recommended cards — align price/button bottoms
   ========================================================= */

#recommended .reco-grid,
#recommended .recommended-grid,
#recommended .grid {
  align-items: stretch; /* make all grid items equal height */
}

/* Card as a vertical flex stack */
#recommended .reco-card,
#recommended .recommended-card,
#recommended .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Main content grows, footer row gets pushed down */
#recommended .reco-body,
#recommended .card-body,
#recommended .body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Price + button row at the bottom of every card */
#recommended .reco-actions,
#recommended .meta,
#recommended .card-actions {
  margin-top: auto;           /* key line: pushes this block down */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* If the price pill is shorter/taller, keep it consistent */
#recommended .reco-actions .price,
#recommended .meta .price {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Optional: keep “tag” from changing the content flow */
#recommended .tag {
  white-space: nowrap;
}


/* --------------------------------------------------
   Warranty buttons: tighter row so 3 items fit
-------------------------------------------------- */
#garantie .meta{
  gap:6px;
  flex-wrap:nowrap;
}
#garantie .price{
  padding:8px 11px;      /* ~20% bigger */
  border-radius:11px;
  font-size:14px;        /* ~20% bigger */
  line-height:1;
  white-space:nowrap;
}
#garantie .btn-card{
  padding:10px 12px;     /* ~20% bigger */
  border-radius:11px;
  font-size:14px;        /* ~20% bigger */
  line-height:1;
  white-space:nowrap;
}
@media (max-width: 420px){
  #garantie .meta{ flex-wrap:wrap; }
}

/* =========================================================
   FAQ (scoped)
   ========================================================= */

#faq.faq-grid-section{
  background:#f3f4f6;
  padding:40px 0;
}

#faq .faq-title{
  text-align:center;
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  margin-bottom:28px;
  color:var(--ink);
}

#faq .faq-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  max-width:1100px;
  margin:0 auto;
}

/* Use <details> as the card */
#faq .faq-item{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  padding:0;
  overflow:hidden;
}

/* Question row */
#faq .faq-item > summary{
  list-style:none;
  cursor:pointer;
  padding:16px 20px;
  font-size:16px;
  font-weight:500;
  color:var(--ink);
}

/* Remove default disclosure triangle */
#faq .faq-item > summary::-webkit-details-marker{ display:none; }
#faq .faq-item > summary::marker{ content:""; }

/* Answer */
#faq .faq-answer{
  border-top:1px solid var(--line);
  padding:12px 20px 16px;
  font-size:14px;
  color:var(--muted);
}

/* Hover / open effects */
#faq .faq-item:hover > summary{ background:#f9fafb; }

#faq .faq-item[open]{
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  border-color:#d1d5db;
}

@media (max-width:600px){
  #faq .faq-item > summary{ font-size:15px; padding:14px 16px; }
  #faq .faq-answer{ padding:10px 16px 14px; font-size:14px; }
}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */

footer{
  width:100%;
  margin-top:10px;
  padding:24px 0;
  background:var(--navy);
  color:#ffffff;
}

footer .wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 16px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.footer-brand-block{
  min-width:0;
}

.footer-brand-name{
  color:#ffffff;
  font-size:16px;
  line-height:1.25;
  font-weight:950;
}

.footer-service-line{
  margin-top:4px;
  color:rgba(255,255,255,.75);
  font-size:13px;
  line-height:1.3;
  font-weight:650;
}

.footer-contact-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
  white-space:nowrap;
}

.footer-email,
.footer-phone,
.footer-email:link,
.footer-phone:link,
.footer-email:visited,
.footer-phone:visited{
  display:inline;
  margin:0;
  padding:0;
  color:#ffffff !important;
  font-weight:850;
  text-decoration:none;
  white-space:nowrap;
}

.footer-email:hover,
.footer-phone:hover,
.footer-email:focus,
.footer-phone:focus,
.footer-email:active,
.footer-phone:active{
  color:#b8c2cf !important;
  font-weight:850 !important;
  text-decoration:underline;
}

.footer-contact-separator{
  flex:0 0 auto;
  color:rgba(255,255,255,.5);
}

.footer-copyright{
  flex-basis:100%;
  width:100%;
  margin-top:6px;
  text-align:center;
}

.footer-copyright small{
  color:rgba(255,255,255,.55);
  font-size:13px;
  line-height:1.35;
  font-weight:650;
}


/* =========================================================
   MOBILE FOOTER
   Address on one line
   Email and telephone on one line
   ========================================================= */

@media (max-width:640px){

  footer{
    padding:26px 0 28px;
  }

  footer .wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:13px;

    width:100%;
    max-width:100%;
    margin:0;
    padding:0 8px;
    text-align:center;
  }

  .footer-brand-block{
    width:100%;
    text-align:center;
  }

  .footer-brand-name{
    font-size:19px;
    line-height:1.2;
  }

  /*
    This line is deliberately small enough to fit:
    Vy d'Echallens 6 · 1040 Villars-le-Terroir · Swiss service
  */
  .footer-service-line{
    width:100%;
    margin-top:7px;
    font-size:11px;
    line-height:1.25;
    text-align:center;
    white-space:nowrap;
  }

  /*
    Keep email, separator and telephone together.
  */
  .footer-contact-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    width:100%;
    max-width:100%;
    margin:3px 0 0;
    padding:0;

    font-size:12px;
    line-height:1.25;
    white-space:nowrap;
  }

  .footer-email,
  .footer-phone,
  .footer-email:link,
  .footer-phone:link,
  .footer-email:visited,
  .footer-phone:visited{
    display:inline !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;

    color:#ffffff !important;
    font-size:12px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }

.footer-email:hover,
.footer-phone:hover,
.footer-email:focus,
.footer-phone:focus,
.footer-email:active,
.footer-phone:active{
  color:#b8c2cf !important;
  font-weight:800 !important;
}

  .footer-contact-separator{
    display:inline;
    flex:0 0 auto;
    margin:0;
    color:rgba(255,255,255,.5);
  }

  .footer-copyright{
    width:100%;
    margin-top:8px;
    text-align:center;
  }

  .footer-copyright small{
    display:block;
    width:100%;
    margin:0;
    padding:0;

    font-size:12px;
    line-height:1.35;
    text-align:center;
    white-space:normal;
  }
}

/* --------------------------------------------------
   Blog accordion – “single card list” style
-------------------------------------------------- */

.blog-wrap .page-build-id,
.blog-wrap [style*="text-align:center"]{
  text-align:center !important;
  font-size:.9rem;
  color:#6b7280;
  margin:0 0 12px;
}

.blog-wrap{
  max-width:900px;
  margin:0 auto;
  background:transparent;
  border:1px solid #e0e4ec;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,0.06);
  overflow:hidden;
}

.blog-wrap .blog_accordion{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:16px 18px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:#111827 !important;
  cursor:pointer;
  text-align:left;
  font-size:1rem;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid #eef2f7 !important;
}
.blog-wrap .blog_accordion:first-of-type{ border-top:0 !important; }
.blog-wrap .blog_accordion:hover{ background:transparent !important; }

.blog-wrap .blog_accordion:after{
  content:"+";
  font-size:1.15rem;
  color:#6b7280;
  margin-left:auto;
  float:none !important;
  line-height:1;
}
.blog-wrap .blog_accordion.active:after{
  content:"–";
  color:#111827;
}

.blog-wrap .blog_panel{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#fff !important;
  padding:0 18px !important;
  color:#1f2937 !important;
  line-height:1.65;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}

.blog-wrap .blog_panel > *:first-child{ margin-top:12px; }
.blog-wrap .blog_panel > *:last-child{ margin-bottom:16px; }

.blog-wrap .blog_panel p{ margin:10px 0; }
.blog-wrap .blog_panel ul,
.blog-wrap .blog_panel ol{
  margin:10px 0 14px;
  padding-left:18px;
}
.blog-wrap .blog_panel li{ margin:6px 0; }

/* --------------------------------------------------
   Hard overrides to defeat legacy wrapper CSS
-------------------------------------------------- */

html, body{ height:100%; }

#wrap, #header_wrap, #main_wrap, #main_content, .content_area{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  width:auto !important;
  max-width:none !important;
}

center{ display:block; width:auto !important; }

/* Ensure hero is navy even if legacy CSS hits section/div globally */
section.hero, .hero{
  background:var(--navy) !important;
  color:#fff !important;
}

/* --------------------------------------------------
   Fixed topbar + tight mobile header/nav
   (single offset strategy; no double spacing)
-------------------------------------------------- */

.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:2000;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 20px rgba(15, 23, 42, .08);
}

/* Desktop: nav sits directly below fixed topbar */
.nav{
  margin-top:64px;
}

/* Anchor links should not hide under fixed topbar */
html{
  scroll-padding-top:74px;
}

/* Kill any old offsets */
body{ padding-top:0 !important; }
#header_wrap{ padding-top:0 !important; }
#main_wrap, #main_content, .content_area{
  padding-top:0 !important;
  margin-top:0 !important;
}
/* =========================================================
   SIZE GUIDE — 3 across, equal height PER ROW only
   (row 1 independent of row 2)
   ========================================================= */

#size-guide .grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;

  align-items:stretch;       /* equal height within each row */
  grid-auto-rows:auto !important;  /* CRITICAL: don't force rows to same height */
}

/* Cards stretch to the height of THEIR ROW (not other rows) */
#size-guide .card{
  height:100%;
}

/* Body: content grows, footer sits at bottom of the card */
#size-guide .card .body{
  height:100%;
  display:grid;
  grid-template-rows:1fr auto;
  gap:12px;
}

/* Footer styling */
#size-guide .card .meta{
  margin:0;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 980px){
  #size-guide .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  #size-guide .grid{ grid-template-columns:1fr; }
}

/* --------------------------------------------------
   Sticky Quick Buy (lock size on hover)
-------------------------------------------------- */

.sticky-quickbuy{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:4000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  background:var(--coral);
  color:#fff;
  text-decoration:none;
  font-weight:950;        /* keep */
  line-height:1;
  box-shadow:0 12px 26px rgba(216,107,90,.30);
  border:1px solid rgba(0,0,0,.06);
  box-sizing:border-box;
}

.sticky-quickbuy:hover{
  filter:brightness(.97);
  color:#000;             /* you asked for black text on hover */
  font-weight:950 !important;   /* defeats .content_area a:hover { font-weight:650; } */
}

.sticky-quickbuy:focus{
  outline:3px solid rgba(201,162,39,.45);
  outline-offset:3px;
  font-weight:950 !important;   /* same reason */
}

@media (max-width: 640px){
  .sticky-quickbuy{
    right:12px;
    bottom:12px;
    padding:11px 13px;
    font-size:14px;
  }
}

/* --------------------------------------------------
   Responsive
-------------------------------------------------- */

@media (max-width: 980px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
  .hero h2{ font-size:28px; }
  .grid{ grid-template-columns:1fr 1fr; }
  .trust .wrap{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px){

  /*
    SCHLUESSELSAFE MOBILE HEADER

    Row 1:
    Swiss flag + site title + subtitle

    Row 2:
    Menu | Home | phone | language
  */
  .topbar .wrap{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    grid-template-areas:
      "brand brand brand brand"
      "menu home phone language";
    align-items:center;
    width:100%;
    max-width:100%;
    gap:9px 8px;
    padding:9px 12px 12px;
  }

  /* Brand contains the flag, title and subtitle */
  .topbar .brand{
    grid-area:brand;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-width:0;
    margin:0;
    text-align:left;
  }

  .topbar .flag-icon{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
  }

  .topbar .flag-icon img{
    width:30px;
    height:30px;
  }

  .topbar .brand > div{
    min-width:0;
  }

  .topbar .brand .site-name{
    display:block;
    margin:0;
    font-size:14px;
    line-height:1.15;
    font-weight:700;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  .topbar .brand small{
    display:block;
    margin-top:2px;
    font-size:12px;
    line-height:1.2;
    font-weight:650;
  }

  /* Menu button: row 2, left */
  .topbar .menu-left{
    grid-area:menu;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
    margin:0;
  }

  .topbar .menu-left .menu-toggle,
  .topbar .menu-left span[onclick*="openNav"]{
    margin:0;
    padding:8px 10px;
    font-size:14px;
    line-height:1;
    white-space:nowrap;
  }

  /*
    Let each item inside .top-actions take its own grid position.
    This retains the Home icon rather than hiding it.
  */
  .topbar .top-actions{
    display:contents;
    margin:0;
    padding:0;
  }

  /* Home icon: row 2, immediately after Menu */
  .topbar .top-actions a.pill[href^="/?wcm=MENU"]{
    grid-area:home;
    justify-self:start;
    margin:0;
    padding:7px 9px;
    font-size:18px !important;
    line-height:1;
  }

  /* Phone: row 2, centred in the available middle space */
  .topbar .top-actions a.pill[href^="tel:"]{
    grid-area:phone;
    justify-self:center;
    margin:0;
    padding:8px 10px;
    font-size:14px;
    line-height:1;
    white-space:nowrap;
  }

  /* Language selector: row 2, right */
  .topbar .top-actions select,
  .topbar #language_select{
    grid-area:language;
    justify-self:end;
    width:auto;
    max-width:108px;
    margin:0;
    padding:7px 8px;
    font-size:14px;
    line-height:1.1;
    border-radius:12px;
  }

  /*
    The fixed topbar is taller on mobile.
    Give the secondary navigation enough clearance and breathing room.
  */
  .nav{
    margin-top:122px;
  }

  html{
    scroll-padding-top:164px;
  }

  .nav .wrap{
    padding:10px 12px 11px;
    gap:8px;
    align-items:center;
  }

  .navlinks{
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
  }

  .navlinks a{
    padding:6px 8px;
    font-size:13px;
    line-height:1.1;
    white-space:nowrap;
  }

  .cta-mini{
    padding:7px 10px;
    font-size:13px;
    border-radius:12px;
  }

  .grid{ grid-template-columns:1fr; }
  .trust .wrap{ grid-template-columns:1fr; }
  .hero-card{ padding:18px; }
  .hero-media img{ aspect-ratio:16/11; }
  .hero h1{ font-size:28px; }
  .hero h2{ font-size:22px; }
}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* ===================================================================
   LEGACY CATALOGUE COMPAT (tables + old classes) + WHITE BACKGROUND
   =================================================================== */

/* 1) Force white background on legacy pages */
html, body { background: #fff !important; }

#wrap, #main_wrap, #main_content, .content_area,
.bg-reset-white, #footer, .footer_links {
  background: #fff !important;
}

/* Some legacy pages use TD background="...gif" – neutralise it */
td[background]{
  background: none !important;
  background-color: #fff !important;
}

.request_heading {
   text-decoration:none;
   font-weight:600;
   padding-left:0.25rem;
   padding-right:0.25rem;
}
.request_text {
   text-decoration:none;
   font-weight:normal;
   padding-left:0.25rem;
   padding-right:0.25rem;
   padding-top:0.25rem;
   padding-bottom:0.25rem;	
}
.request_text_medium {
   font-size:0.85rem;
   line-height:0.75rem;	   
   text-decoration:none;
   font-weight:normal;
   padding-left:0.25rem;
   padding-right:0.25rem;
   padding-top:0.25rem;
   padding-bottom:0.25rem;	
}	  
.request_commander {
   font-size:0.85rem;
   color:#29088A;
   font-weight:650;	   
   padding-left:0.40rem;
   padding-right:0.40rem;
   padding-top:0.40rem;
   padding-bottom:0.40rem;	
}	   
.request_commander  a{	
   font-size:0.85rem;
   color:#29088A;
   font-weight:650;	   
   padding-left:0.25rem;
   padding-right:0.25rem;
   padding-top:0.25rem;
   padding-bottom:0.25rem;	
}
.request_commander  a:hover {
   color:#000000;
   font-weight:850;
}	

.order_screen {
   font-size: 0.85rem;
   font-weight: normal;
}

.order_screen_text {
   font-size:0.85rem;
   line-height:0.75rem;	   
   text-decoration:none;
   font-weight:normal;
}	   
.order_screen_offer_text {
   font-size:0.85rem;
   line-height:0.75rem;	   
   text-decoration:italic;
   font-weight:normal;
}		  
.order_screen_heading {
   font-size:0.85rem;
   text-decoration:none;
   color:blue;
   font-weight:bold;
   padding-left:5px;
   padding-right:5px;
   padding-top:1px;
   padding-bottom:1px;		   
}
.content_area a:link, a:visited  {
   text-decoration:none;
}
.content_area a:hover {
   color: #000000;
   text-decoration:none;
}

.buybutton, .soldoutbutton, .infobutton {
   font-size:1.2rem !important ;
   padding-left:0.3rem;
   padding-right:0.3rem;
   padding-top:0.2rem;
   padding-bottom:0.2rem;
   background: #f3bb01;
   color: black !important;
   /* dont let the button be split acrosss multiple lines */
   white-space: nowrap;
   margin-bottom:0.5rem;
   /* specify the border */
   border:2px;
   border-style:solid;
   border-color:#847e83;
   webkit-border-radius: 10px; /* Safari prototype */
   moz-border-radius: 10px; /* Gecko browsers */
   border-radius: 10px; /* Everything else - limited support at the moment */
}
.buybutton:hover {
   background: #53760D;
}

.soldoutbutton {
   background: #cd5c5c;
   color: black;
   border-color:#847e83;
}
 .soldoutbutton:hover {
   background: #cd5c5c;
}
	
.infobutton {
   background: #f3bb01;
   color: black;
   border-color:#847e83;
		 
}
.infobutton:hover {
   background: #53760D;
}

/* Mobile: prevent tables from forcing horizontal scroll */
@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* Let layout tables shrink */
  table { 
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Give tables a “scroll container” only when needed */
  .table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Images must never overflow */
  img, .responsive-image {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Add comfortable side padding on mobile */
  .content_area, #main_content, .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

a.pill.buy-now-btn{
  background:var(--coral);
  color:#fff;
  border:1px solid rgba(0,0,0,.06);
}
a.pill.buy-now-btn:hover{ 
  color:#000;              /* turn text black */
  filter:brightness(.97);  /* keep subtle hover effect */
}
a.pill.buy-now-btn:focus{
  outline:3px solid rgba(201,162,39,.45);
  outline-offset:3px;
}

.intro{
  max-width: var(--max);   /* comfortable reading width */
  margin: 0 auto;     /* center it */
  padding: 0 14px;    /* breathing room on phones */
}

/* ===========================
   MOBILE MENU: clickability + scroll
   =========================== */
.sidenav{
  z-index: 2000;                 /* sit above header */
  overflow-y: auto;              /* allow scrolling for many links */
  -webkit-overflow-scrolling: touch;
}

.sidenav.is-open{
  width: min(320px, 86vw);       /* good on phones */
}

.sidenav ul li a{
  display: block;                /* make whole row clickable */
  padding:7px 16px;
}

/* Header alignment */
.menu-left{
  display:flex;
  align-items:center;
  margin-right:4px;
}

.top-actions{
  margin-left:auto;
}

.brand{
  min-width:0;
}

/* FIX: sidenav hover text turning black due to .content_area a:hover */
.sidenav a,
.sidenav a:link,
.sidenav a:visited{
  color:#ffffff !important;
}

.sidenav a:hover,
.sidenav a:focus,
.sidenav a:active{
  color:#9fd3ff !important;
  font-weight:800 !important;
}

  #catalogue .grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }

  /* Mobile: stack */
  @media (max-width: 820px){
    #catalogue .grid{
      grid-template-columns:1fr;
    }
  }

  /* GROUP / CATALOGUE CARD IMAGE FRAME */
  .grid .card .img{
    position: relative;
    padding: 18px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: #fff;
  }

  .grid .card .img img{
    width: 100%;
    height: 180px;          /* tune: 160–220 */
    object-fit: contain;     /* IMPORTANT: no cropping */
    display: block;
    border-radius: 14px;
    background: #f5f7fa;     /* photo frame */
    padding: 10px;           /* breathing room */
  }

  .grid .card .img .tag{
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
  }

  /* BODY TIGHTENING */
  .grid .card .body{
    padding: 18px;
  }

  .grid .card .body h4{
    margin: 6px 0 10px 0;
  }

  /* META ROW: make "From" look like the screenshot pill */
  .grid .card .meta{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
  }

  .grid .card .meta .price{
    display: inline-block;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 800;
    background: #eef3f7;
  }


/* =========================================================
   "Our advice" floating button + modal (overlay + cards)
   ========================================================= */

/* Full-screen overlay */
.advice-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;

  /* start just below the header, both desktop & mobile */
  padding:calc(var(--header-offset) + 20px) 16px 24px;

  background:rgba(15,23,42,.45);

  /* above the fixed header (which is z-index:2500) */
  z-index:3000;

  overflow-y:auto;
}

.advice-modal[hidden]{ display:none; }

/* White dialog card */
.advice-dialog{
  position:relative;
  max-width:840px;
  width:100%;
  max-height:calc(100vh - 80px);
  background:#ffffff;
  border-radius:24px;
  padding:42px 22px 20px;        /* top padding leaves room for close button */
  box-shadow:0 24px 70px rgba(15,23,42,.35);
  text-align:center;
  overflow-y:auto;
}
.advice-dialog h2{
  margin:0 0 .75rem;
  font-size:1.35rem;
}

/* Close button */
.advice-close{
  position:absolute;
  top:10px;
  right:12px;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
  z-index:999;
}

/* Grid of cards */
.advice-list{
  list-style:none;
  margin:.6rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  align-items: stretch;
}
.advice-item {
  margin:0;
  display: flex;          /* grid item becomes a flex container */
  height: 100%;           /* let the card stretch inside */
}
.advice-card{
  display:flex;
  flex-direction:column;
  height: 100%;
  background:#f9fafb;
  border-radius:20px;
  padding:8px 10px 10px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(15,23,42,.12);
  color:#111827;
  text-decoration:none;
  font-size:.9rem;
  text-align:left;
  transition:box-shadow .15s ease, transform .15s ease;
}
.advice-card:hover{
  box-shadow:0 14px 40px rgba(15,23,42,.2);
  transform:translateY(-1px);
  text-decoration:none;
}

/* Image area */
.advice-image{
  flex: 0 0 auto;
  max-width:150px;
  margin:0 auto 0.5rem;
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
}
.advice-image img{
  display:block;
  width:100%;
  height:auto;
}

/* Text inside card */
.advice-body{
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}

/* Advantage pill */
.advice-tag{
  display:inline-flex;
  align-items:center;
  padding:0.18rem 0.7rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:#020617;   /* deep navy */
  color:#f9fafb;        /* white text */
}

/* Name + price + CTA text */
.advice-name{
  font-size:.9rem;
  font-weight:600;
}
.advice-price{
  margin-top:0.15rem;
  font-weight:700;
  font-size:.9rem;
}
.advice-cta-text{
  margin-top: auto;
  align-self: flex-start; 
  display:inline-flex;
  align-items:center;
  padding:.2rem .6rem;
  border-radius:999px;
  border:1px solid #020617;
  font-size:.76rem;
  font-weight:600;
}

/* Fixed bottom-right advice button */
.advice-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:2800; /* below modal 3000, above normal content */

  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;

  background:var(--coral);
  color:#ffffff;
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
  line-height:1.2;

  box-shadow:0 10px 30px rgba(15,23,42,.25);
  transition:transform .15s ease, box-shadow .15s ease;
}

.advice-fab:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 40px rgba(15,23,42,.35);
  text-decoration:none;
}

@media (max-width:640px){
  .advice-fab{
    right:12px;
    bottom:12px;
    padding:10px 14px;
    font-size:.85rem;
  }
}

/* Mobile tweak */
@media (max-width:640px){
  .advice-dialog{
    max-width:100%;
    padding:36px 14px 16px;
    border-radius:18px;
  }
}



/* =========================================================
   LEGACY COMPATIBILITY LAYER (imported from keysafe-design2511)
   Purpose: keep older table-based / header_menu layouts working
   without changing the new 2602 design system.
   ========================================================= */

/* Inner menu: same width as sections below */
#header_menu{
  max-width:1120px !important;            /* match section width */
  width:100% !important;
  margin:0 auto !important;               /* center inside full-bleed bar */
  padding:10px 16px;
  padding-left:max(16px,var(--safe-l));
  padding-right:max(16px,var(--safe-r));
  line-height:1.1;
}

/* Keep table layout but ensure it fills the row */
#header_menu table{
  width:100% !important;
  table-layout:fixed;
  border-collapse:collapse;
}

#header_menu td{
  padding:0 6px;
  vertical-align:middle;
  white-space:nowrap;
}

#header_menu img{
  max-width:100%;
  height:auto;
  display:inline-block;
}

#header_menu select{ max-width:100%; }

.brand-full{ display:inline; }

.brand-short{ display:none; }


/* =========================================================
   MOBILE HEADER LAYOUT (cleaned, balanced braces)
   ========================================================= */
@media (max-width: 900px) {
  .brand-full { display: none !important; }
  .brand-compact { display: inline-flex !important; }
  .header-right .cta-phone { font-size: 14px; padding: 8px 10px; }
  .header-right select { font-size: 14px; padding: 8px 10px; }
}

@media (max-width: 640px) {
  /* Two-row header on phones: brand centred row 1, actions row 2 */
  #header_menu table { width: 100%; border-collapse: separate; }
  #header_menu tr { display: flex; flex-wrap: wrap; align-items: center; }
  #header_menu td { display: flex; align-items: center; }
  /* Centre cell (brand) – first row */
  #header_menu td:nth-child(2) {
    order: 1;
    flex: 1 0 100%;
    justify-content: center;
    text-align: center;
    padding-bottom: 4px;
  }
  /* Menu cell – second row, left */
  #header_menu td:first-child { order: 2; flex: 0 0 auto; }
  /* Phone + language – second row, right */
  #header_menu td:nth-child(3) {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
    text-align: right;
  }
  #cta_phone_fab.sticky-phone {
    position: fixed !important;
    bottom: 18px !important;
    right: 18px !important;
    z-index: 2400 !important;
    display: inline-flex !important;
  }
}

/* =========================================================
   LEGACY PRODUCT/DETAIL PAGES: constrain width (tables are width=100%)
   ========================================================= */
:root {
  --legacy-max: 1200px;
}

/* Target the legacy output wrapper inside main_content */
#main_content > .content_area {
  width: 100% !important;
  max-width: var(--legacy-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

#main_content > .content_area > table {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#main_content td,
#main_content th {
  box-sizing: border-box;
}

@media (max-width: 900px) {

  /* Do NOT make the outer product tables horizontal scroll boxes */
  #main_content > .content_area > table{
    display:table !important;
    width:100% !important;
    max-width:100% !important;
    table-layout:fixed;
    overflow:visible !important;
    margin:0 0 16px 0 !important;
  }

  /* Stack each product into a full-width card */
  #main_content > .content_area > table > tbody > tr > td{
    display:block;
    width:100% !important;
    box-sizing:border-box;
  }

  /* Top image/order panel */
  #main_content > .content_area > table > tbody > tr > td:first-child{
    border-right:0 !important;
    border-bottom:1px solid #d8dde6 !important;
    padding:12px 10px !important;
    text-align:center !important;
  }

  /* Main content panel */
  #main_content > .content_area > table > tbody > tr > td:last-child{
    padding:0 !important;
  }

  /* Inner detail table must stay inside the card */
  #main_content > .content_area > table > tbody > tr > td:last-child > table{
    width:100% !important;
    table-layout:fixed;
    border-collapse:collapse;
  }

  /* Product image sizing on phone */
  #main_content > .content_area > table img.responsive-image{
    max-width:180px !important;
    max-height:180px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain;
    display:block;
    margin:0 auto;
  }

  /* Better text breathing room */
  .request_heading,
  .request_text,
  .request_text_small{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  /* Price / stock row should still sit side by side */
  #main_content > .content_area > table > tbody > tr > td:last-child > table > tbody > tr:nth-child(2) > td{
    display:table-cell !important;
    width:50% !important;
  }

  /* Ratings table: keep inside width */
  #main_content > .content_area > table > tbody > tr > td:last-child table table{
    width:100% !important;
    table-layout:fixed;
  }

  /* Long text should wrap, not force overflow */
  #main_content td,
  #main_content div,
  #main_content li{
    word-wrap:break-word;
    overflow-wrap:break-word;
  }
}

/* =========================================================
Legacy STORE catalogue: normalise product thumbnail sizes
========================================================= */

/* Keep legacy product images from rendering at full native size */
#main_content table img.responsive-image {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 190px;     /* fits inside TD width=210 comfortably */
  height: auto;
  max-height: 190px;    /* prevents very tall images */
  object-fit: contain;  /* keep full image visible, no cropping */
}

/* Optional: slightly smaller on phones */
@media (max-width: 600px) {
  #main_content table img.responsive-image {
    max-width: 160px;
    max-height: 160px;
  }
}
@media (min-width: 1200px) {
  #main_wrap,
  #main_content,
  #main_content > .content_area {
    max-width: 1000px;
  }
}
.hero-actions .btn,
.hero-actions .btn:hover,
.hero-actions .btn:focus{
  font-weight: 900 !important;
}
/* Legacy pages: remove UL bullets (no dots, no dashes) */
#wrap #main_content ul,
#wrap .blog_panel ul,
#wrap .request_text ul,
#wrap .request_text_small ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* IMPORTANT: if you previously added a dash marker, remove it */
#wrap #main_content ul > li::before,
#wrap .blog_panel ul > li::before,
#wrap .request_text ul > li::before,
#wrap .request_text_small ul > li::before {
  content: none !important;
}

.build-marker { font-size: 11px; opacity: .35; }

/* ===============================
   HISTORIC / LEGACY PAGE WIDTH
   =============================== */

#main_wrap,
#main_content{
  max-width:none !important;
}

#main_content > .content_area{
  width:90% !important;
  max-width:1120px !important;
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

/* Keep hero full width only when an actual hero block exists */
.hero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* =========================================================
   RECOMMENDATION PAGE LAYOUT
   ========================================================= */

.recommendation-shortcuts{
  max-width:1120px;
  margin:18px auto 28px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}

.recommendation-shortcut-card{
  display:block;
  text-decoration:none;
  background:#ffffff;
  border:1px solid #d9e1e8;
  border-radius:16px;
  padding:14px 14px 12px;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  min-height:92px;
}

.recommendation-shortcut-card:hover{
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.shortcut-label{
  display:block;
  font-size:13px;
  line-height:1.35;
  color:#5a6a7f;
  font-weight:700;
  margin-bottom:6px;
}

.shortcut-product{
  display:block;
  font-size:17px;
  line-height:1.25;
  font-weight:900;
  color:var(--ink);
}

.recommendation-list{
  max-width:1120px;
  margin:0 auto 30px;
}

.recommendation-card{
  background:#ffffff;
  border:1px solid #d9e1e8;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  padding:22px;
  margin:0 0 22px;
}

.recommendation-card-top{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:24px;
  align-items:start;
  margin-bottom:18px;
}

.recommendation-media{
  text-align:center;
}

.recommendation-image{
  display:block;
  width:100%;
  max-width:200px;
  height:auto;
  margin:0 auto;
  border-radius:14px;
  background:#f6f8fb;
  padding:10px;
  border:1px solid #e2e8ef;
}

.recommendation-main{
  text-align:left;
}

.recommendation-ref{
  font-size:14px;
  line-height:1.35;
  color:#617186;
  font-weight:700;
  margin-bottom:8px;
}

.recommendation-title{
  margin:0 0 8px;
  font-size:24px;
  line-height:1.2;
}

.recommendation-title a{
  text-decoration:none;
  color:var(--ink);
}

.recommendation-subtitle{
  font-size:18px;
  line-height:1.35;
  color:#334155;
  font-weight:700;
  margin-bottom:14px;
}

.recommendation-price-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.recommendation-price-old{
  font-size:20px;
  line-height:1;
  color:#8b97a8;
  text-decoration:line-through;
  font-weight:700;
}

.recommendation-price-new{
  font-size:28px;
  line-height:1;
  color:var(--navy);
  font-weight:900;
}

.recommendation-cta-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.recommendation-ratings{
  border-top:1px solid #e8edf2;
  border-bottom:1px solid #e8edf2;
  padding:18px 0;
  margin:0 0 18px;
}

.recommendation-score-box{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.recommendation-score-label{
  font-size:14px;
  color:#617186;
  font-weight:700;
}

.recommendation-score-value{
  font-size:22px;
  color:var(--ink);
  font-weight:900;
}

.recommendation-rating-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 18px;
}

.recommendation-rating-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid #f0f3f6;
}

.recommendation-rating-label{
  font-size:15px;
  line-height:1.35;
  color:#334155;
  font-weight:700;
}

.recommendation-rating-stars{
  font-size:18px;
  line-height:1;
  color:#f2b01e;
  white-space:nowrap;
}

.recommendation-text{
  text-align:left;
  font-size:16px;
  line-height:1.7;
  color:#1f2937;
}

.recommendation-text p{
  margin:0 0 12px;
}

.recommendation-text ul{
  margin:10px 0 0;
  padding-left:0;
  list-style:none;
}

/* =========================================================
   RECOMMENDATION PAGE MOBILE
   ========================================================= */

@media (max-width: 900px){

  .recommendation-shortcuts{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  .recommendation-card{
    padding:18px 16px;
  }

  .recommendation-card-top{
    grid-template-columns:1fr;
    gap:16px;
  }

  .recommendation-media{
    text-align:center;
  }

  .recommendation-image{
    max-width:220px;
  }

  .recommendation-main{
    text-align:center;
  }

  .recommendation-price-row,
  .recommendation-cta-row,
  .recommendation-score-box{
    justify-content:center;
  }

  .recommendation-rating-grid{
    grid-template-columns:1fr;
    width:100% !important;
    border-collapse:collapse;
    table-layout:fixed;
  }

  .recommendation-rating-item{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }

  .recommendation-text{
    text-align:left;
  }
}

@media (max-width: 640px){

  .recommendation-shortcuts{
    grid-template-columns:1fr;
  }

  .recommendation-shortcut-card{
    min-height:auto;
  }

  .recommendation-title{
    font-size:22px;
  }

  .recommendation-subtitle{
    font-size:16px;
  }

  .recommendation-price-new{
    font-size:24px;
  }

  .recommendation-price-old{
    font-size:18px;
  }

  .recommendation-cta-row{
    flex-direction:column;
    align-items:stretch;
  }

  .recommendation-cta-row .buybutton,
  .recommendation-cta-row .infobutton,
  .recommendation-cta-row .soldoutbutton{
    display:block;
    width:100%;
    text-align:center;
    margin:0;
  }
}

/* =========================================================
   MODERN SHARED CATALOGUE
   Shared responsive standard — desktop + mobile
   Ratings remain visible.
   Full product description is expandable on all screen sizes.

   Replace the complete existing catalogue CSS section with
   this block in each KeySafe stylesheet.
   ========================================================= */

/* =========================================================
   CATALOGUE LIST
   ========================================================= */

.catalogue-list{
   width:100%;
   max-width:1120px;
   margin:0 auto 36px;
   display:grid;
   gap:18px;
}

/* =========================================================
   PRODUCT CARD
   ========================================================= */

.catalogue-card{
   width:100%;
   margin:0;
   padding:22px;
   background:#ffffff;
   border:1px solid #e1e7ef;
   border-radius:20px;
   box-shadow:0 8px 24px rgba(15,23,42,.07);
   overflow:hidden;
}

.catalogue-card-top{
   display:grid;
   grid-template-columns:230px minmax(0,1fr);
   gap:26px;
   align-items:start;
   margin:0;
}

/* =========================================================
   PRODUCT IMAGE AND COLOURS
   ========================================================= */

.catalogue-media{
   min-width:0;
   text-align:center;
}

.catalogue-media > a{
   display:block;
   border-radius:16px;
}

.catalogue-image{
   display:block;
   width:100%;
   max-width:220px;
   aspect-ratio:1 / 1;
   object-fit:contain;
   margin:0 auto;
   padding:12px;
   background:#f7f9fc;
   border:1px solid #e3e8ef;
   border-radius:16px;
}

.catalogue-colours{
   display:flex;
   flex-wrap:wrap;
   justify-content:center;
   gap:8px;
   margin:10px 0 0;
}

.catalogue-colours-label{
   flex:1 0 100%;
   display:block;
   margin:0 0 2px;
   color:#4a596b;
   font-size:13px;
   line-height:1.35;
   font-weight:750;
   text-align:center;
}

.catalogue-colour{
   position:relative;
   top:auto !important;
   display:inline-flex;
   flex-direction:column;
   align-items:center;
   gap:4px;
   margin:0 !important;
   color:#596779;
   font-size:11px;
   line-height:1.2;
   font-weight:650;
}

.catalogue-colour img{
   width:38px;
   height:38px;
   display:block;
   object-fit:cover;
   border:1px solid #d4dbe4;
   border-radius:50%;
   box-shadow:0 2px 5px rgba(15,23,42,.08);
}

/* =========================================================
   PRODUCT SUMMARY
   ========================================================= */

.catalogue-main{
   min-width:0;
   display:flex;
   flex-direction:column;
   align-items:flex-start;
}

.catalogue-ref{
   margin:0 0 5px;
   color:#647184;
   font-size:13px;
   line-height:1.35;
   font-weight:700;
}

.catalogue-title{
   margin:0 0 7px !important;
   color:#111827;
   font-size:clamp(22px,2.2vw,29px);
   line-height:1.16;
   font-weight:850;
   letter-spacing:-.015em;
}

.catalogue-title a{
   color:inherit;
   text-decoration:none;
}

.catalogue-title a:hover{
   text-decoration:underline;
   text-underline-offset:3px;
}

.catalogue-subtitle{
   margin:0 0 10px;
   color:#536174;
   font-size:16px;
   line-height:1.48;
   font-weight:600;
}

/* =========================================================
   PRICE
   ========================================================= */

.catalogue-price-row{
   display:flex;
   align-items:baseline;
   flex-wrap:wrap;
   gap:8px 12px;
   margin:3px 0 2px;
}

.catalogue-price-old{
   color:#7a8492;
   font-size:16px;
   font-weight:650;
   text-decoration:line-through;
}

.catalogue-price-new{
   color:#123f67;
   font-size:clamp(26px,3vw,34px);
   line-height:1;
   font-weight:900;
   letter-spacing:-.025em;
}

/* =========================================================
   BUY AND INFORMATION BUTTONS
   ========================================================= */

.catalogue-cta-row{
   width:100%;
   display:flex;
   flex-wrap:wrap;
   align-items:center;
   gap:10px;
   margin:14px 0 9px;
}

.catalogue-cta-row .buybutton,
.catalogue-cta-row .infobutton,
.catalogue-cta-row .soldoutbutton{
   min-height:46px;
   min-width:150px;
   margin:0 !important;
   padding:11px 18px !important;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   border:1px solid transparent !important;
   border-radius:12px !important;
   box-shadow:none;
   font-family:inherit;
   font-size:16px !important;
   line-height:1.2;
   font-weight:850 !important;
   text-align:center;
   text-decoration:none !important;
   white-space:normal;
}

.catalogue-cta-row .buybutton{
   background:#ea7a1f !important;
   border-color:#d66811 !important;
   color:#ffffff !important;
}

.catalogue-cta-row .buybutton:hover{
   background:#cf640f !important;
   color:#ffffff !important;
}

.catalogue-cta-row .infobutton{
   background:#ffffff !important;
   border-color:#b9c5d2 !important;
   color:#173f63 !important;
}

.catalogue-cta-row .infobutton:hover{
   background:#f3f7fb !important;
   border-color:#8fa2b7 !important;
}

.catalogue-cta-row .soldoutbutton{
   background:#f5e6e6 !important;
   border-color:#ddb7b7 !important;
   color:#8f1f1f !important;
}

/* PayPal-generated controls */
.catalogue-cta-row form{
   margin:0;
}

.catalogue-cta-row input[type="image"]{
   display:block;
   max-width:190px;
   height:auto;
   margin:0;
}

/* =========================================================
   RATINGS — ALWAYS VISIBLE
   ========================================================= */

.catalogue-ratings{
   width:100%;
   margin:18px 0 0;
   padding:16px 0;
   border-top:1px solid #e5eaf0;
   border-bottom:1px solid #e5eaf0;
   color:#172033;
   font-size:16px;
   line-height:1.45;
}

.catalogue-ratings table{
   width:100% !important;
   max-width:100% !important;
   table-layout:fixed;
   border-collapse:collapse;
}

.catalogue-ratings td,
.catalogue-ratings th{
   padding:8px 10px;
   vertical-align:middle;
}

.catalogue-rating-grid{
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:10px 18px;
}

/* =========================================================
   EXPANDABLE PRODUCT DESCRIPTION
   ========================================================= */

.catalogue-details{
   width:100%;
   margin:0;
   border-bottom:1px solid #e5eaf0;
}

.catalogue-details-summary{
   width:100%;
   min-height:52px;
   padding:14px 2px;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:14px;
   color:#173f63;
   cursor:pointer;
   list-style:none;
   font-size:16px;
   line-height:1.3;
   font-weight:800;
   user-select:none;
}

.catalogue-details-summary::-webkit-details-marker{
   display:none;
}

.catalogue-details-summary::marker{
   content:"";
}

.catalogue-details-summary:hover{
   color:#0d2f4d;
}

.catalogue-details-summary:focus-visible{
   outline:3px solid #93c5fd;
   outline-offset:4px;
   border-radius:6px;
}

.catalogue-details-icon{
   position:relative;
   flex:0 0 28px;
   width:28px;
   height:28px;
   border:1px solid #cad4df;
   border-radius:50%;
   background:#f7f9fc;
}

.catalogue-details-icon::before,
.catalogue-details-icon::after{
   content:"";
   position:absolute;
   top:50%;
   left:50%;
   width:12px;
   height:2px;
   border-radius:2px;
   background:#173f63;
   transform:translate(-50%,-50%);
}

.catalogue-details-icon::after{
   transform:translate(-50%,-50%) rotate(90deg);
   transition:transform .18s ease;
}

.catalogue-details[open] .catalogue-details-icon::after{
   transform:translate(-50%,-50%) rotate(0);
}

.catalogue-details-content{
   padding:4px 0 18px;
   color:#273445;
   font-size:16px;
   line-height:1.62;
}

.catalogue-text{
   margin:0;
   padding:0;
}

.catalogue-text p{
   margin:0 0 12px;
}

.catalogue-text ul,
.catalogue-text ol{
   margin:10px 0 14px;
   padding-left:20px;
}

.catalogue-text li{
   margin:6px 0;
}

.catalogue-text table{
   width:100% !important;
   max-width:100% !important;
   table-layout:fixed;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:820px){

   .catalogue-card{
      padding:20px;
   }

   .catalogue-card-top{
      grid-template-columns:190px minmax(0,1fr);
      gap:20px;
   }

   .catalogue-image{
      max-width:180px;
   }

   .catalogue-rating-grid{
      grid-template-columns:1fr;
   }
}

/* =========================================================
   MOBILE CATALOGUE
   Full-width cards, readable type, prominent purchase action
   ========================================================= */

@media (max-width:640px){

   .catalogue-list{
      position:relative;
      left:50%;
      width:100vw;
      max-width:none;
      margin-left:-50vw;
      margin-right:-50vw;
      margin-bottom:24px;
      gap:10px;
      padding:10px 0;
      background:#f2f5f8;
   }

   .catalogue-card{
      width:100%;
      padding:18px 16px;
      border-left:0;
      border-right:0;
      border-radius:0;
      box-shadow:none;
   }

   .catalogue-card-top{
      display:grid;
      grid-template-columns:112px minmax(0,1fr);
      gap:14px;
      align-items:start;
   }

   .catalogue-media{
      width:112px;
   }

   .catalogue-image{
      width:112px;
      max-width:112px;
      padding:7px;
      border-radius:13px;
   }

   .catalogue-colours{
      gap:5px;
      margin-top:7px;
   }

   .catalogue-colours-label{
      font-size:12px;
   }

   .catalogue-colour{
      font-size:0;
      gap:0;
   }

   .catalogue-colour img{
      width:29px;
      height:29px;
   }

   .catalogue-ref{
      margin-bottom:3px;
      font-size:12px;
   }

   .catalogue-title{
      margin-bottom:5px !important;
      font-size:22px;
      line-height:1.14;
   }

   .catalogue-subtitle{
      margin-bottom:7px;
      font-size:16px;
      line-height:1.42;
   }

   .catalogue-price-row{
      margin-top:2px;
   }

   .catalogue-price-old{
      font-size:14px;
   }

   .catalogue-price-new{
      font-size:28px;
   }

   .catalogue-cta-row{
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:1fr;
      gap:9px;
      margin:14px 0 7px;
   }

   .catalogue-cta-row .buybutton,
   .catalogue-cta-row .infobutton,
   .catalogue-cta-row .soldoutbutton,
   .catalogue-cta-row form{
      width:100%;
      max-width:none;
   }

   .catalogue-cta-row .buybutton,
   .catalogue-cta-row .infobutton,
   .catalogue-cta-row .soldoutbutton{
      min-height:48px;
      font-size:16px !important;
   }

   .catalogue-cta-row input[type="image"]{
      width:auto;
      max-width:100%;
      margin:0 auto;
   }

   .catalogue-ratings{
      width:100% !important;
      max-width:100% !important;
      margin-top:14px;
      padding:13px 0;
      overflow:hidden !important;
   }

   .catalogue-ratings table{
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      table-layout:fixed !important;
      border-collapse:collapse !important;
   }

   .catalogue-ratings col,
   .catalogue-ratings td,
   .catalogue-ratings th{
      width:25% !important;
      max-width:25% !important;
   }

   .catalogue-ratings td,
   .catalogue-ratings th{
      padding:7px 4px !important;
      overflow:hidden;
      overflow-wrap:anywhere;
      white-space:normal !important;
      font-size:13px !important;
      line-height:1.22 !important;
      text-align:center !important;
      vertical-align:middle !important;
   }

   .catalogue-ratings td:nth-child(even),
   .catalogue-ratings th:nth-child(even){
      font-size:12px !important;
      letter-spacing:0 !important;
   }

   .catalogue-ratings td span,
   .catalogue-ratings th span{
      max-width:100%;
      white-space:normal !important;
   }

   .catalogue-details-summary{
      min-height:52px;
      padding:14px 2px;
      font-size:16px;
   }

   .catalogue-details-content{
      padding:4px 0 18px;
      font-size:16px;
      line-height:1.65;
   }

   .catalogue-rating-grid{
      grid-template-columns:1fr;
      gap:8px;
   }
}

/* =========================================================
   VERY NARROW PHONES
   ========================================================= */

@media (max-width:390px){

   .catalogue-card-top{
      grid-template-columns:1fr;
   }

   .catalogue-media{
      width:100%;
   }

   .catalogue-image{
      width:150px;
      max-width:150px;
   }

   .catalogue-main{
      width:100%;
   }

   .catalogue-title,
   .catalogue-subtitle,
   .catalogue-ref,
   .catalogue-price-row{
      width:100%;
      text-align:center;
      justify-content:center;
   }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

   .catalogue-details-icon::after{
      transition:none;
   }
}

/* =========================================================
   RESPONSIVE GRID
   ========================================================= */

@media (max-width:1050px){
   .purchase-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
   }
}

@media (max-width:700px){

   .purchase-catalogue{
      position:relative;
      left:50%;
      width:100vw;
      max-width:none;
      margin-left:-50vw;
      margin-right:-50vw;
      margin-bottom:26px;
      padding:10px 0;
      background:#f1f4f7;
   }

   .purchase-group{
      margin:0 0 14px;
   }

   .purchase-group:last-child{
      margin-bottom:0;
   }

   .purchase-group-heading{
      margin:0;
      padding:14px 16px;
      border-radius:0;
      box-shadow:none;
   }

   .purchase-group-heading h2{
      font-size:22px !important;
      text-align:center !important;
   }

   .purchase-grid{
      grid-template-columns:1fr;
      gap:10px;
   }

   .purchase-card{
      display:grid;
      grid-template-columns:132px minmax(0,1fr);
      border-left:0;
      border-right:0;
      border-radius:0;
      box-shadow:none;
      transform:none !important;
   }

   .purchase-image-link{
      padding:16px 0 16px 14px;
   }

   .purchase-image-window{
      height:150px;
      border-radius:13px;
   }

   .purchase-image{
      max-width:90%;
      max-height:134px;
   }

   .purchase-card-body{
      padding:15px 14px 16px;
      align-items:flex-start;
      text-align:left;
   }

   .purchase-card-ref{
      margin-bottom:3px;
      font-size:11px;
   }

   .purchase-card-title{
      width:100%;
      margin-bottom:4px !important;
      font-size:20px !important;
      line-height:1.18;
      text-align:left !important;
   }

   .purchase-card-subtitle{
      min-height:0;
      margin-bottom:8px;
      font-size:15px;
      line-height:1.38;
   }

   .purchase-price-block{
      justify-content:flex-start;
      margin-top:2px;
   }

   .purchase-price-current{
      font-size:27px;
   }

   .purchase-tax-note{
      margin-bottom:8px;
      font-size:12px;
   }

   .purchase-delivery{
      min-height:0;
      margin-bottom:8px;
      font-size:14px;
   }

   .purchase-stock-status{
      margin-bottom:10px;
   }

   .purchase-colours{
      justify-content:flex-start;
      margin-bottom:10px;
   }

   .purchase-colours-label{
      text-align:left;
   }

   .purchase-colour span{
      display:none;
   }

   .purchase-colour img{
      width:30px;
      height:30px;
   }

   .purchase-actions{
      grid-column:1 / -1;
      width:calc(100% + 146px);
      margin-left:-146px;
      padding-top:5px;
   }

   .purchase-order-button,
   .purchase-sold-out{
      min-height:50px;
      font-size:17px !important;
   }
}

/* Extremely narrow screens: image above product information */
@media (max-width:390px){

   .purchase-card{
      display:flex;
   }

   .purchase-image-link{
      padding:16px 16px 0;
   }

   .purchase-image-window{
      width:160px;
      height:160px;
      margin:0 auto;
   }

   .purchase-card-body{
      align-items:center;
      padding:14px 16px 18px;
      text-align:center;
   }

   .purchase-card-title{
      text-align:center !important;
   }

   .purchase-price-block,
   .purchase-colours{
      justify-content:center;
   }

   .purchase-colours-label{
      text-align:center;
   }

   .purchase-actions{
      width:100%;
      margin-left:0;
   }
}

@media (prefers-reduced-motion:reduce){
   .purchase-card,
   .purchase-image{
      transition:none;
   }
}

/* =========================================================
   FINAL MOBILE CATALOGUE RATINGS
   ========================================================= */

@media (max-width:640px){

   .catalogue-ratings{
      width:100% !important;
      max-width:100% !important;
      overflow:hidden !important;
   }

   .catalogue-ratings table{
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      table-layout:fixed !important;
      border-collapse:collapse !important;
   }

   .catalogue-ratings col,
   .catalogue-ratings td,
   .catalogue-ratings th{
      width:25% !important;
      max-width:25% !important;
   }

   .catalogue-ratings td,
   .catalogue-ratings th{
      padding:7px 4px !important;
      overflow:hidden;
      overflow-wrap:anywhere;
      white-space:normal !important;
      font-size:13px !important;
      line-height:1.22 !important;
      text-align:center !important;
      vertical-align:middle !important;
   }

   .catalogue-ratings td:nth-child(even),
   .catalogue-ratings th:nth-child(even){
      font-size:12px !important;
      letter-spacing:0 !important;
   }
}

@media (max-width:390px){

   .catalogue-ratings td,
   .catalogue-ratings th{
      padding:6px 2px !important;
      font-size:12px !important;
   }

   .catalogue-ratings td:nth-child(even),
   .catalogue-ratings th:nth-child(even){
      font-size:11px !important;
   }
}

/* =========================================================
   COMPACT MOBILE RECOMMENDATION CARDS
   Ratings remain visible; long text stays expandable.
   ========================================================= */

@media (max-width:760px){

   .recommendation-page-fullwidth .recommendation-list{
      width:100vw !important;
      max-width:none !important;
      margin:12px 0 0 !important;
      padding:8px 0 20px !important;
      gap:8px !important;
      background:#f1f4f7 !important;
   }

   .recommendation-page-fullwidth .recommendation-card{
      width:100% !important;
      max-width:none !important;
      margin:0 !important;
      padding:13px 12px !important;
      border-left:0 !important;
      border-right:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
   }

   .recommendation-card-top{
      display:grid !important;
      grid-template-columns:96px minmax(0,1fr) !important;
      gap:11px !important;
      align-items:start !important;
      margin-bottom:0 !important;
      padding:0 !important;
   }

   .recommendation-media{
      width:96px !important;
      min-width:96px !important;
      text-align:left !important;
   }

   .recommendation-image{
      display:block !important;
      width:96px !important;
      max-width:96px !important;
      height:96px !important;
      margin:0 !important;
      padding:5px !important;
      object-fit:contain !important;
      border-radius:11px !important;
   }

   .recommendation-main{
      min-width:0 !important;
      text-align:left !important;
   }

   .recommendation-ref{
      margin:0 0 2px !important;
      font-size:11px !important;
      line-height:1.2 !important;
   }

   .recommendation-title{
      display:-webkit-box !important;
      margin:0 0 4px !important;
      overflow:hidden !important;
      font-size:19px !important;
      line-height:1.15 !important;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
   }

   .recommendation-subtitle{
      display:-webkit-box !important;
      margin:0 0 5px !important;
      overflow:hidden !important;
      font-size:14px !important;
      line-height:1.3 !important;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
   }

   .recommendation-price-row{
      justify-content:flex-start !important;
      gap:5px 8px !important;
      margin:5px 0 6px !important;
   }

   .recommendation-price-old{
      font-size:13px !important;
   }

   .recommendation-price-new{
      font-size:23px !important;
   }

   .recommendation-cta-row{
      grid-column:1 / -1 !important;
      width:calc(100% + 107px) !important;
      margin:5px 0 0 -107px !important;
      display:grid !important;
      grid-template-columns:1fr 1fr !important;
      gap:7px !important;
   }

   .recommendation-cta-row .buybutton,
   .recommendation-cta-row .infobutton,
   .recommendation-cta-row .soldoutbutton{
      width:100% !important;
      min-width:0 !important;
      min-height:43px !important;
      margin:0 !important;
      padding:9px 7px !important;
      font-size:15px !important;
      line-height:1.2 !important;
      white-space:normal !important;
   }

   .recommendation-cta-row form{
      width:100% !important;
      max-width:none !important;
      margin:0 !important;
   }

   .recommendation-ratings{
      margin:10px 0 0 !important;
      padding:10px 0 !important;
   }

   .recommendation-score-box{
      margin-bottom:7px !important;
      padding:7px 8px !important;
   }

   .recommendation-rating-grid{
      display:grid !important;
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:6px !important;
   }

   .recommendation-rating-item{
      display:flex !important;
      flex-direction:column !important;
      align-items:flex-start !important;
      gap:4px !important;
      min-width:0 !important;
      padding:7px !important;
   }

   .recommendation-rating-label{
      font-size:11px !important;
      line-height:1.2 !important;
   }

   .recommendation-rating-stars{
      font-size:14px !important;
      line-height:1 !important;
      letter-spacing:0 !important;
      white-space:nowrap !important;
   }

   .recommendation-details-summary{
      min-height:45px !important;
      padding:10px 2px !important;
      font-size:15px !important;
   }

   .recommendation-details-icon{
      width:25px !important;
      height:25px !important;
      flex-basis:25px !important;
   }

   .recommendation-details-content{
      padding:2px 0 13px !important;
   }

   .recommendation-text{
      padding:0 !important;
      font-size:15px !important;
      line-height:1.52 !important;
   }
}

@media (max-width:390px){

   .recommendation-card-top{
      grid-template-columns:86px minmax(0,1fr) !important;
      gap:9px !important;
   }

   .recommendation-media{
      width:86px !important;
      min-width:86px !important;
   }

   .recommendation-image{
      width:86px !important;
      max-width:86px !important;
      height:86px !important;
   }

   .recommendation-title{
      font-size:18px !important;
   }

   .recommendation-price-new{
      font-size:21px !important;
   }

   .recommendation-cta-row{
      width:calc(100% + 95px) !important;
      margin-left:-95px !important;
      grid-template-columns:1fr !important;
   }
}

/* =========================================================
   CATALOGUE RATINGS — FINAL MOBILE OVERRIDE
   Prevent older legacy table rules from changing the modern
   catalogue rating table into an oversized or clipped table.
   ========================================================= */

@media (max-width:640px){

   #main_content .catalogue-card,
   #main_content .catalogue-ratings,
   .catalogue-card,
   .catalogue-ratings{
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
   }

   #main_content .catalogue-ratings{
      display:block !important;
      overflow:hidden !important;
   }

   #main_content .catalogue-ratings table,
   .catalogue-ratings table{
      display:table !important;
      width:100% !important;
      max-width:100% !important;
      min-width:0 !important;
      margin:0 !important;
      table-layout:fixed !important;
      border-collapse:collapse !important;
      overflow:visible !important;
   }

   #main_content .catalogue-ratings tbody{
      display:table-row-group !important;
      width:100% !important;
   }

   #main_content .catalogue-ratings tr{
      display:table-row !important;
      width:100% !important;
   }

   #main_content .catalogue-ratings col,
   #main_content .catalogue-ratings td,
   #main_content .catalogue-ratings th,
   .catalogue-ratings col,
   .catalogue-ratings td,
   .catalogue-ratings th{
      display:table-cell !important;
      width:25% !important;
      max-width:25% !important;
      min-width:0 !important;
      box-sizing:border-box !important;
   }

   #main_content .catalogue-ratings td,
   #main_content .catalogue-ratings th,
   .catalogue-ratings td,
   .catalogue-ratings th{
      padding:7px 4px !important;
      overflow:hidden !important;
      overflow-wrap:anywhere !important;
      word-break:normal !important;
      white-space:normal !important;
      font-size:13px !important;
      line-height:1.22 !important;
      text-align:center !important;
      vertical-align:middle !important;
   }

   #main_content .catalogue-ratings td:nth-child(even),
   #main_content .catalogue-ratings th:nth-child(even),
   .catalogue-ratings td:nth-child(even),
   .catalogue-ratings th:nth-child(even){
      font-size:12px !important;
      letter-spacing:0 !important;
   }

   #main_content .catalogue-ratings td *,
   #main_content .catalogue-ratings th *,
   .catalogue-ratings td *,
   .catalogue-ratings th *{
      max-width:100% !important;
      white-space:normal !important;
   }
}

@media (max-width:390px){

   #main_content .catalogue-ratings td,
   #main_content .catalogue-ratings th,
   .catalogue-ratings td,
   .catalogue-ratings th{
      padding:6px 2px !important;
      font-size:12px !important;
   }

   #main_content .catalogue-ratings td:nth-child(even),
   #main_content .catalogue-ratings th:nth-child(even),
   .catalogue-ratings td:nth-child(even),
   .catalogue-ratings th:nth-child(even){
      font-size:11px !important;
   }
}

/* =========================================================
   COMPACT USE-CASE NAVIGATION
   Replaces the large beige mobile tiles with quick scan rows.
   ========================================================= */

#use-cases .section-title{
  display:block;
  text-align:center;
}

#use-cases .section-title h2,
#use-cases .section-title p{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

#use-cases .section-title p{
  max-width:760px;
}

#use-cases .usecase-list{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  width:100%;
}

#use-cases .usecase-link{
  position:relative;
  display:flex;
  min-width:0;
  min-height:112px;
  align-items:center;
  padding:15px 38px 15px 15px;
  overflow:hidden;
  color:var(--ink);
  background:var(--sand);
  border:1px solid var(--line);
  border-radius:16px;
  text-align:left;
  text-decoration:none;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}

#use-cases .usecase-link:hover,
#use-cases .usecase-link:focus{
  background:#ffffff;
  border-color:rgba(15,94,116,.42);
  transform:translateY(-1px);
}

#use-cases .usecase-copy{
  display:block;
  min-width:0;
}

#use-cases .usecase-copy strong{
  display:block;
  margin:0;
  color:var(--ink);
  font-size:16px;
  font-weight:900;
  line-height:1.25;
}

#use-cases .usecase-copy span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
  font-weight:650;
  line-height:1.35;
}

#use-cases .usecase-arrow{
  position:absolute;
  top:50%;
  right:13px;
  color:var(--navy);
  font-size:27px;
  font-weight:800;
  line-height:1;
  transform:translateY(-50%);
}

@media (max-width:980px){
  #use-cases .usecase-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  #use-cases .wrap{
    padding-top:14px;
    padding-bottom:14px;
  }

  #use-cases .usecase-list{
    grid-template-columns:1fr;
    gap:8px;
  }

  #use-cases .usecase-link{
    min-height:72px;
    padding:11px 42px 11px 14px;
    border-radius:12px;
  }

  #use-cases .usecase-copy strong{
    font-size:17px;
    line-height:1.22;
  }

  #use-cases .usecase-copy span{
    margin-top:3px;
    font-size:14px;
    line-height:1.3;
  }

  #use-cases .usecase-arrow{
    right:14px;
    font-size:28px;
  }
}