/* compress using https://www.seomagnifier.com/best-css-minifier */
/* =========================================================
   DESIGN2606 SIMPLE ACCESS — SCHLUESSELBOX / KEYSAFE
   Full replacement stylesheet v2
   Keeps shared header/menu/catalogue/legacy styles.
   Removes old homepage classes and replaces them with sbox-* homepage layout.
   ========================================================= */

/* =========================================================
   THEME TOKENS
   ========================================================= */
:root{
   --bg:#ffffff;
   --ink:#0e1726;
   --text:var(--ink);
   --muted:#55657a;
   --line:#e6e8ec;
   --soft:#f6f8fb;

   --brand:#111827;
   --brand-2:#1f2937;
   --accent:#2563eb;

   --ok:#166534;
   --ok-bg:#ecfdf5;
   --warn:#92400e;
   --warn-bg:#fffbeb;
   --bad:#991b1b;
   --bad-bg:#fef2f2;

   --navy:#0b2d4d;
   --ocean:#0f5e74;
   --sand:#f3efe6;
   --cream:#ffffff;
   --coral:#d86b5a;
   --gold:#c9a227;

   --radius:18px;
   --radius-sm:10px;
   --radius2:26px;
   --shadow:0 10px 28px rgba(15,23,42,.14);
   --max:1180px;
   --page-pad:16px;

   --header-height:90px;
   --header-offset:90px;
}

@supports(padding:max(0px)){
   :root{
      --safe-l:env(safe-area-inset-left);
      --safe-r:env(safe-area-inset-right);
   }
}

@media (max-width:640px){
   :root{
      --header-height:120px;
      --header-offset:120px;
   }
}

/* =========================================================
   BASE / RESET
   ========================================================= */
*{
   box-sizing:border-box;
}

html,
body{
   margin:0;
   overflow-x:hidden;
   background:var(--bg);
   color:var(--ink);
}

body{
   font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
   line-height:1.5;
   scroll-padding-top:0;
   padding-top:0 !important;
   transition:background-color .5s;
}

a{
   color:inherit;
   text-decoration:none;
}

img{
   max-width:100%;
   height:auto;
}

body > div[align="center"],
#wrap,
#main_wrap{
   display:block !important;
   width:100% !important;
   max-width:none !important;
   margin:0 !important;
}

/* =========================================================
   SHARED WIDTHS
   ========================================================= */
#main_content,
.content_area{
   width:100%;
   max-width:none;
   margin:0 auto;
   padding-left:16px;
   padding-right:16px;
}

@media (min-width:1024px){
   #main_content,
   .content_area{
      max-width:1120px;
      padding-left:16px;
      padding-right:16px;
   }
}

.content_area a:link,
.content_area a:visited{
   text-decoration:none;
}

.wrap{
   max-width:1120px;
   margin:auto;
   padding:0 16px;
}

.container{
   max-width:1120px;
   margin:0 auto !important;
   padding:20px;
   padding-top:0 !important;
}

.grid{
   display:grid;
   gap:24px;
}

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

@media(max-width:1100px){
   .grid-4{ grid-template-columns:repeat(3,1fr); }
}

@media(max-width:840px){
   .grid-4{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:560px){
   .grid-4{ grid-template-columns:1fr; }
}

.soft{
   background:var(--soft);
}


/* =========================================================
   ANCHOR OFFSET
   ========================================================= */
[id]:target::before{
   content:"";
   display:block;
   height:var(--header-offset);
   margin-top:calc(-1 * var(--header-offset));
   visibility:hidden;
   pointer-events:none;
}

section[id]{
   scroll-margin-top:var(--header-offset);
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1{
   font-size:clamp(28px,4vw,40px);
   line-height:1.2;
   margin:0 0 8px;
}

h2{
   font-size:clamp(20px,2.6vw,28px);
   margin:0;
}

h3{
   font-size:20px;
   margin:0;
}

/* =========================================================
   SITE HEADER
   Desktop: menu left, brand centred, phone/language right
   Mobile: brand first row; menu, phone and language second row
   ========================================================= */

.site-header{
   background:#ffffff;
   border-bottom:1px solid #dde2ea;
   text-align:left;
   margin-bottom:6px;
}

.site-header .header-inner{
   width:90%;
   max-width:1100px;
   margin:0 auto;
   padding:.7rem 1rem;
   box-sizing:border-box;
   display:flex;
   align-items:center;
   justify-content:space-between;
   position:relative;
}

/* Menu button */
.menu-toggle,
#main span[onclick*="openNav"]{
   border:1px solid #c4ccd7;
   background:#ffffff;
   border-radius:999px;
   padding:.35rem .8rem;
   font-size:.85rem;
   cursor:pointer;
}

/* Centred brand */
.site-header .brand-block{
   position:absolute;
   left:50%;
   transform:translateX(-50%);
   display:flex;
   align-items:center;
   gap:.5rem;
   text-align:center;
   white-space:nowrap;
}

.site-header .flag-icon{
   flex:0 0 auto;
}

.site-header .flag-icon img{
   display:block;
   max-width:24px;
   max-height:24px;
}

.site-header .brand-text{
   line-height:1.2;
   text-align:center;
}

.site-header .brand-title{
   font-weight:600;
   font-size:.98rem;
}

.site-header .brand-subtitle{
   font-size:.8rem;
   color:#6c7684;
}

/* Phone and language on right */
.site-header .header-right{
   display:flex;
   flex-direction:column;
   align-items:flex-end;
   gap:.15rem;
}

.site-header .header-phone{
   color:#194a7a;
   font-size:.85rem;
   line-height:1.2;
   text-decoration:none;
   white-space:nowrap;
}

.site-header .header-phone:hover{
   text-decoration:underline;
}

.site-header .lang-select,
.site-header select[name="language_select"]{
   font-size:.8rem;
   padding:.25rem .4rem;
}

/* =========================================================
   MOBILE HEADER
   Row 1: brand centred
   Row 2: menu left | phone centred | language right
   ========================================================= */
@media (max-width:640px){

   .site-header{
      margin-bottom:10px;
   }

   .site-header .header-inner{
      width:100%;
      display:grid;
      grid-template-columns:minmax(72px,1fr) auto minmax(72px,1fr);
      grid-template-rows:auto auto;
      align-items:center;
      column-gap:8px;
      row-gap:6px;
      padding:.55rem .75rem;
   }

   /* Brand occupies the complete first row */
   .site-header .brand-block{
      position:static;
      left:auto;
      transform:none;
      grid-column:1 / -1;
      grid-row:1;
      justify-self:center;
      justify-content:center;
      width:auto;
      max-width:100%;
      margin:0;
      white-space:nowrap;
   }

   /* SideNavMenu output is the first direct child */
   .site-header .header-inner > *:first-child{
      grid-column:1;
      grid-row:2;
      justify-self:start;
      margin:0;
   }

   /*
      Remove the header-right wrapper from the mobile grid.
      This allows the phone and language selector to occupy
      different columns.
   */
   .site-header .header-right{
      display:contents;
   }

   /* Phone centred in the second row */
   .site-header .header-phone{
      grid-column:2;
      grid-row:2;
      justify-self:center;
      align-self:center;
      margin:0;
      font-size:.82rem;
      font-weight:600;
      text-align:center;
      white-space:nowrap;
   }

   /* Language selector on the right */
   .site-header .header-right > *:not(.header-phone){
      grid-column:3;
      grid-row:2;
      justify-self:end;
      align-self:center;
      margin:0;
   }

   .site-header .brand-title{
      font-size:.9rem;
   }

   .site-header .brand-subtitle{
      font-size:.75rem;
   }

   .site-header .flag-icon img{
      max-width:22px;
      max-height:22px;
   }

   .site-header .lang-select,
   .site-header select[name="language_select"]{
      max-width:76px;
      font-size:.78rem;
      padding:.25rem .35rem;
   }

   .site-header .menu-toggle,
   .site-header #main span[onclick*="openNav"]{
      padding:.32rem .68rem;
      font-size:.8rem;
      white-space:nowrap;
   }
}

/* =========================================================
   BUTTONS / BADGES
   ========================================================= */
.btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:8px;
   padding:12px 16px;
   border-radius:12px;
   min-height:44px;
   font-weight:700;
   cursor:pointer;
   border:1px solid var(--line);
   background:#fff;
   color:var(--brand);
}

.btn.primary{
   background:var(--brand);
   color:#fff;
   border-color:var(--brand);
}

.btn.secondary{
   background:#fff;
   color:var(--brand);
   border:1px solid var(--line);
}

.btn.small{
   padding:8px 12px;
   font-size:14px;
}

.btn:focus,
:focus-visible{
   outline:3px solid #93c5fd;
   outline-offset:2px;
}

.badge{
   display:inline-flex;
   align-items:center;
   gap:8px;
   padding:6px 10px;
   border:1px solid var(--line);
   border-radius:999px;
   background:#fff;
   font-size:14px;
   color:#374151;
}

.pillrow{
   display:flex;
   flex-wrap:wrap;
   gap:16px;
   margin-top:16px;
   color:#374151;
   font-size:14px;
}

/* =========================================================
   NEW HOMEPAGE — SIMPLE ACCESS / FAMILY POSITIONING
   ========================================================= */
.sbox-page{
   --sbox-blue:#1f5c8d;
   --sbox-blue-dark:#123a5c;
   --sbox-orange:#f07812;
   --sbox-text:#111827;
   --sbox-muted:#5f6b7a;
   --sbox-soft:#f6f8fb;
   --sbox-card:#ffffff;
   --sbox-border:#e1e8f0;
   --sbox-shadow:0 18px 45px rgba(15,23,42,.08);
   color:var(--sbox-text);
   background:#fff;
   font-family:inherit;
}

.sbox-page a{
   color:var(--sbox-blue);
}

.sbox-wrap{
   width:min(1180px,94%);
   margin:0 auto;
}

.sbox-hero{
   background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
   padding:60px 0;
   border-top:1px solid #e2e8f0;
   border-bottom:1px solid #e2e8f0;
}

.sbox-hero-grid{
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:48px;
   align-items:center;
}

.sbox-eyebrow{
   display:inline-flex;
   align-items:center;
   gap:8px;
   margin-bottom:16px;
   font-size:12px;
   font-weight:800;
   letter-spacing:.06em;
   text-transform:uppercase;
   color:var(--sbox-blue);
}

.sbox-eyebrow span{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:22px;
   height:22px;
   border-radius:6px;
   background:#e31b23;
   color:#fff;
   font-size:16px;
   line-height:1;
}

.sbox-hero h1{
   margin:0;
   font-size:clamp(30px,3vw,44px);
   line-height:1.08;
   letter-spacing:-0.02em;
   color:#111827;
   max-width:650px;
}

.sbox-hero-text{
   margin:24px 0 0;
   max-width:610px;
   color:#2c3644;
   font-size:20px;
   line-height:1.55;
   font-weight:550;
}

.sbox-actions{
   display:flex;
   flex-wrap:wrap;
   gap:14px;
   margin-top:30px;
}

.sbox-btn{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:10px;
   min-height:48px;
   padding:0 24px;
   border-radius:14px;
   font-weight:850;
   text-decoration:none !important;
   border:1px solid transparent;
   box-shadow:0 10px 20px rgba(15,23,42,.08);
}

.sbox-btn-primary{
   background:var(--sbox-orange);
   color:#fff !important;
}

.sbox-btn-primary:hover{
   background:#d8670f;
}

.sbox-btn-secondary{
   background:#fff;
   color:#111827 !important;
   border-color:var(--sbox-border);
}

.sbox-btn-secondary:hover{
   border-color:#c7d5e3;
   background:#f9fbfd;
}

.sbox-trust-row{
   display:grid;
   grid-template-columns:repeat(4,minmax(0,1fr));
   gap:14px;
   margin-top:42px;
   max-width:650px;
}

.sbox-mini-trust{
   display:flex;
   gap:8px;
   align-items:flex-start;
   color:#38475a;
   font-size:13px;
   line-height:1.35;
   font-weight:750;
}

.sbox-mini-icon{
   flex:0 0 auto;
   color:var(--sbox-blue);
   font-size:20px;
   line-height:1;
}

.sbox-hero-visual{
   position:relative;
}

.sbox-hero-img{
   overflow:hidden;
   border-radius:22px;
   background:#e8eef5;
   box-shadow:var(--sbox-shadow);
   border:1px solid #dfe8f1;
}

.sbox-hero-img img{
   display:block;
   width:100%;
   height:520px;
   object-fit:cover;
}

.sbox-floating-proof{
   position:absolute;
   left:42px;
   right:42px;
   bottom:26px;
   background:rgba(255,255,255,.94);
   border:1px solid rgba(226,232,240,.9);
   border-radius:18px;
   padding:14px 18px;
   box-shadow:0 16px 34px rgba(15,23,42,.12);
   display:flex;
   align-items:center;
   gap:14px;
   color:#2c3644;
   font-weight:800;
   line-height:1.35;
}

.sbox-proof-icon{
   flex:0 0 auto;
   width:42px;
   height:42px;
   border-radius:50%;
   background:#e8f5e9;
   color:#2e7d32;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:20px;
   font-weight:900;
   line-height:1;
}

.sbox-section{
   padding:54px 0;
}

.sbox-section-soft{
   background:var(--sbox-soft);
}

.sbox-section-title{
   margin:0 0 32px;
   text-align:center;
   color:var(--sbox-blue);
   font-size:14px;
   text-transform:uppercase;
   letter-spacing:.08em;
   font-weight:900;
}

.sbox-card-grid{
   display:grid;
   grid-template-columns:repeat(4,minmax(0,1fr));
   gap:24px;
   align-items:stretch;
}

.sbox-card{
   display:flex;
   flex-direction:column;
   height:100%;
   background:var(--sbox-card);
   border:1px solid var(--sbox-border);
   border-radius:20px;
   overflow:hidden;
   box-shadow:0 14px 30px rgba(15,23,42,.055);
   text-decoration:none !important;
   color:var(--sbox-text) !important;
   transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.sbox-card:hover{
   transform:translateY(-2px);
   box-shadow:0 18px 38px rgba(15,23,42,.09);
   border-color:#cbd9e8;
}

.sbox-card img{
   display:block;
   width:100%;
   height:155px;
   object-fit:cover;
   background:#edf2f7;
}

.sbox-card-body{
   display:flex;
   flex-direction:column;
   flex:1 1 auto;
   padding:22px 18px 20px;
   text-align:center;
}

.sbox-card h3{
   margin:0 0 12px;
   color:#111827;
   font-size:18px;
   line-height:1.25;
}

.sbox-card p{
   margin:0;
   color:#334155;
   line-height:1.55;
   font-size:15px;
   flex:1 1 auto;
}

.sbox-card-link{
   display:inline-flex;
   align-self:center;
   margin-top:18px;
   color:var(--sbox-blue);
   font-weight:900;
   font-size:14px;
}

.sbox-icon-circle{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   width:38px;
   height:38px;
   border-radius:999px;
   background:#e6f0fa;
   color:var(--sbox-blue);
   margin:0 auto 14px;
   font-size:22px;
}

.sbox-benefit-grid{
   display:grid;
   grid-template-columns:repeat(6,minmax(0,1fr));
   gap:18px;
   align-items:stretch;
}

.sbox-benefit{
   text-align:center;
   background:#fff;
   border:1px solid var(--sbox-border);
   border-radius:18px;
   padding:22px 14px;
   box-shadow:0 12px 26px rgba(15,23,42,.045);
   height:100%;
}

.sbox-benefit strong{
   display:block;
   margin:8px 0 6px;
   color:#111827;
   font-size:15px;
}

.sbox-benefit span{
   display:block;
   color:#475569;
   font-size:13px;
   line-height:1.35;
}

.sbox-install-row{
   display:grid;
   grid-template-columns:repeat(5,minmax(0,1fr));
   gap:16px;
}

.sbox-install-row img{
   width:100%;
   height:150px;
   object-fit:cover;
   border-radius:16px;
   border:1px solid var(--sbox-border);
   box-shadow:0 10px 22px rgba(15,23,42,.06);
   background:#edf2f7;
}

.sbox-center{
   text-align:center;
   margin-top:24px;
}

.sbox-guide-grid{
   display:grid;
   grid-template-columns:repeat(5,minmax(0,1fr));
   gap:18px;
   align-items:stretch;
}

.sbox-guide{
   display:flex;
   flex-direction:column;
   height:100%;
   background:#fff;
   border:1px solid var(--sbox-border);
   border-radius:18px;
   padding:24px 18px 22px;
   box-shadow:0 12px 26px rgba(15,23,42,.045);
   text-decoration:none !important;
   color:#111827 !important;
   text-align:center;
   transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.sbox-guide:hover{
   transform:translateY(-2px);
   border-color:#cbd9e8;
   box-shadow:0 18px 38px rgba(15,23,42,.08);
}

.sbox-guide h3{
   margin:0 0 12px;
   font-size:17px;
   line-height:1.2;
}

.sbox-guide p{
   margin:0 0 16px;
   color:#475569;
   font-size:14px;
   line-height:1.45;
   flex:1 1 auto;
}

.sbox-guide strong{
   display:block;
   margin-top:auto;
   color:#111827;
   font-weight:900;
}

.sbox-products-head{
   display:flex;
   align-items:flex-end;
   justify-content:space-between;
   gap:20px;
   margin-bottom:24px;
}

.sbox-products-head h2{
   margin:0 0 6px;
   font-size:32px;
   letter-spacing:-.02em;
}

.sbox-products-head p{
   margin:0;
   color:#475569;
}

.sbox-product-grid{
   display:grid;
   grid-template-columns:repeat(4,minmax(0,1fr));
   gap:22px;
   align-items:stretch;
}

.sbox-product{
   display:flex;
   flex-direction:column;
   height:100%;
   background:#fff;
   border:1px solid var(--sbox-border);
   border-radius:20px;
   overflow:hidden;
   box-shadow:0 14px 30px rgba(15,23,42,.055);
}

.sbox-product .imgwrap{
   position:relative;
   background:#f8fafc;
   height:230px;
   display:flex;
   align-items:center;
   justify-content:center;
   border-radius:0;
   overflow:hidden;
}

.sbox-product img{
   display:block;
   width:100%;
   height:100%;
   object-fit:contain;
   padding:12px;
}

.sbox-product-body{
   display:flex;
   flex-direction:column;
   flex:1 1 auto;
   padding:18px;
   text-align:center;
}

.sbox-product h3{
   margin:0 0 10px;
   font-size:18px;
   line-height:1.2;
   min-height:44px;
}

.sbox-price{
   font-size:18px;
   font-weight:950;
   color:#111827;
   margin:8px 0;
}

.sbox-price del{
   color:#94a3b8;
   font-weight:700;
   margin-right:6px;
}

.sbox-ship{
   color:#475569;
   line-height:1.35;
   font-size:14px;
   flex:1 1 auto;
   margin-bottom:16px;
}

.sbox-product-actions{
   display:flex;
   flex-direction:column;
   gap:10px;
   align-items:center;
   margin-top:auto;
}

.sbox-product-actions a{
   font-weight:850;
   text-decoration:none;
}

.sbox-product-actions .sbox-btn{
   min-width:150px;
}

.sbox-ribbon{
   position:absolute;
   top:12px;
   left:12px;
   background:#fff;
   color:var(--sbox-blue-dark);
   border:1px solid var(--sbox-border);
   border-radius:999px;
   padding:6px 10px;
   font-size:12px;
   font-weight:900;
   box-shadow:0 8px 18px rgba(15,23,42,.08);
}

.sbox-info-block{
   max-width:980px;
   margin:0 auto;
   color:#334155;
   font-size:17px;
   line-height:1.7;
   text-align:left;
}

.sbox-info-block h2{
   color:#111827;
   font-size:30px;
   letter-spacing:-.02em;
}

.sbox-info-block #faq,
.sbox-info-block .faq{
   max-width:900px;
   margin:0 auto;
   text-align:left;
}

.sbox-info-block #faq h2,
.sbox-info-block .faq h2,
.sbox-info-block .faq-title{
   text-align:center;
   margin-bottom:22px;
}

.sbox-info-block #faq details,
.sbox-info-block .faq details{
   background:#fff;
   border:1px solid var(--sbox-border);
   border-radius:16px;
   box-shadow:0 10px 22px rgba(15,23,42,.045);
   padding:0;
   margin:10px 0;
   overflow:hidden;
}

.sbox-info-block #faq summary,
.sbox-info-block .faq summary{
   min-height:52px;
   padding:14px 18px;
   display:flex;
   align-items:center;
   text-align:left;
   font-weight:850;
   color:#111827;
}

.sbox-info-block #faq details > *:not(summary),
.sbox-info-block .faq details > *:not(summary){
   padding:0 18px 16px;
   margin-top:0;
}

.sbox-footer-bar{
   background:#eef4fb;
   border:1px solid #dbe7f4;
   border-radius:18px;
   padding:18px;
   display:grid;
   grid-template-columns:repeat(4,minmax(0,1fr));
   gap:16px;
   color:#24435f;
   font-weight:850;
   text-align:center;
}

.sbox-footer-bar span{
   color:#526b82;
   font-size:13px;
   font-weight:650;
}

.sbox-advice-modal{
   position:fixed;
   inset:0;
   z-index:9999;
   background:rgba(15,23,42,.58);
   display:flex;
   align-items:center;
   justify-content:center;
   padding:18px;
}

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

.sbox-advice-dialog{
   width:min(860px,96vw);
   max-height:86vh;
   overflow:auto;
   background:#fff;
   border-radius:24px;
   padding:24px;
   box-shadow:0 28px 80px rgba(15,23,42,.30);
   position:relative;
}

.sbox-advice-close{
   position:absolute;
   top:14px;
   right:14px;
   width:38px;
   height:38px;
   border-radius:999px;
   border:1px solid var(--sbox-border);
   background:#fff;
   font-size:26px;
   cursor:pointer;
}

.sbox-advice-list{
   list-style:none;
   margin:22px 0 0;
   padding:0;
   display:grid;
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:14px;
}

.sbox-advice-card{
   display:grid;
   grid-template-columns:92px 1fr;
   gap:14px;
   align-items:center;
   border:1px solid var(--sbox-border);
   border-radius:16px;
   padding:12px;
   text-decoration:none !important;
   color:#111827 !important;
}

.sbox-advice-card:hover{
   border-color:#c7d5e3;
   background:#f9fbfd;
}

.sbox-advice-card img{
   width:92px;
   height:92px;
   object-fit:contain;
   background:#f8fafc;
   border-radius:12px;
}

.sbox-sticky-advice{
   position:fixed;
   right:22px;
   bottom:22px;
   z-index:1000;
}

@media (max-width:980px){
   .sbox-hero-grid,
   .sbox-card-grid,
   .sbox-product-grid{
      grid-template-columns:1fr 1fr;
   }

   .sbox-benefit-grid,
   .sbox-guide-grid{
      grid-template-columns:1fr 1fr 1fr;
   }

   .sbox-install-row{
      grid-template-columns:1fr 1fr;
   }

   .sbox-trust-row{
      grid-template-columns:1fr 1fr;
   }
}

@media (max-width:640px){
   .sbox-hero{
      padding:34px 0;
   }

   .sbox-hero-grid,
   .sbox-card-grid,
   .sbox-product-grid,
   .sbox-benefit-grid,
   .sbox-guide-grid,
   .sbox-footer-bar,
   .sbox-advice-list{
      grid-template-columns:1fr;
   }

   .sbox-hero h1{
      font-size:clamp(34px,11vw,46px);
      letter-spacing:-.04em;
   }

   .sbox-hero-text{
      font-size:17px;
   }

   .sbox-actions{
      flex-direction:column;
   }

   .sbox-actions .sbox-btn{
      width:100%;
   }

   .sbox-hero-img img{
      height:360px;
   }

   .sbox-floating-proof{
      position:static;
      margin-top:14px;
   }

   .sbox-products-head{
      display:block;
   }

   .sbox-products-head .sbox-btn{
      margin-top:16px;
      width:100%;
   }

   .sbox-product h3{
      min-height:0;
   }

   .sbox-product-actions .sbox-btn{
      width:100%;
   }

   .sbox-advice-card{
      grid-template-columns:76px 1fr;
   }

   .sbox-advice-card img{
      width:76px;
      height:76px;
   }

   .sbox-sticky-advice{
      left:14px;
      right:14px;
      bottom:14px;
   }

   .sbox-sticky-advice .sbox-btn{
      width:100%;
   }
}

/* =========================================================
   SHARED PRODUCT CARD / GRID — NON-HOMEPAGE LEGACY
   ========================================================= */
.cards{
   display:grid;
   gap:16px;
   grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}

@media (max-width:360px){
   .cards{ grid-template-columns:1fr; }
}

@media (min-width:700px){
   .cards{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width:1024px){
   .cards{ grid-template-columns:repeat(4,1fr); }
}

.card{
   border:1px solid var(--line);
   border-radius:var(--radius);
   padding:14px;
   box-shadow:var(--shadow);
   background:#fff;
   display:flex;
   flex-direction:column;
}

.cards .card{
   display:flex;
   flex-direction:column;
}

.cards .imgwrap{
   height:180px;
}

.cards .title{
   display:-webkit-box;
   -webkit-line-clamp:2;
   -webkit-box-orient:vertical;
   overflow:hidden;
   line-height:1.3;
   min-height:2.6em;
}

.cards .cta .btn{
   width:100%;
}

.imgwrap{
   position:relative;
   border-radius:12px;
   overflow:hidden;
   background:#f8fafc;
   height:210px;
   display:flex;
   align-items:center;
   justify-content:center;
}

.imgwrap img{
   max-height:100%;
   width:auto;
}

.ribbon{
   position:absolute;
   top:8px;
   left:8px;
   background:var(--brand);
   color:#fff;
   padding:4px 8px;
   border-radius:999px;
   font-size:12px;
}

.title{
   font-size:16px;
   font-weight:600;
   margin:10px 0 6px;
}

.price{
   font-size:28px;
   font-weight:800;
   margin:0 0 6px;
}

.price small{
   font-weight:500;
   color:var(--muted);
}

.reviews,
.ship,
.usp,
.pay{
   font-size:13px;
   color:var(--muted);
   margin:4px 0;
}

.stars{
   letter-spacing:2px;
}

.cta{
   margin-top:auto;
}

.catalog-link{
   display:block;
   text-align:center;
   margin:18px auto 8px;
   text-decoration:underline;
   color:var(--accent);
}

.responsive-image,
.responsive-image-100{
   max-width:100%;
   height:auto;
}

img.responsive-image{
   max-width:100%;
   height:auto;
   display:block;
   margin:0 auto;
}

@media (min-width:900px){
   img.responsive-image{
      max-width:180px;
   }
}

/* =========================================================
   MODERN SHARED CATALOGUE
   Shared responsive catalogue — 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;
   }
}
/* =========================================================
   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;
  }
}

/* =========================================================
   COMPATIBILITY / STATUS
   ========================================================= */
.seg{
   display:flex;
   gap:8px;
}

.seg button{
   flex:0 0 auto;
   padding:8px 12px;
   border-radius:12px;
   border:1px solid var(--line);
   background:#fff;
   cursor:pointer;
   min-height:44px;
}

.seg button.active{
   background:#000;
   color:#fff;
   border-color:#000;
}

.status{
   display:inline-flex;
   align-items:center;
   gap:8px;
   border:1px solid;
   border-radius:12px;
   padding:8px 12px;
   font-weight:600;
}

.ok{
   color:var(--ok);
   background:var(--ok-bg);
   border-color:#bbf7d0;
}

.warn{
   color:var(--warn);
   background:var(--warn-bg);
   border-color:#fde68a;
}

.bad{
   color:var(--bad);
   background:var(--bad-bg);
   border-color:#fecaca;
}

#compatibilite,
#compatibility{
   display:flow-root;
   position:relative;
}

#compatibilite .wrap,
#compatibility .wrap{
   padding-top:12px;
}

#compatibilite h2,
#compatibility h2{
   margin-top:12px;
   margin-bottom:8px;
   line-height:1.25;
   word-break:break-word;
}

@media (max-width:768px){
   .frame{
      margin-bottom:12px;
   }

   section{
      display:flow-root;
   }
}

/* =========================================================
   FAQ
   ========================================================= */
#faq.faq{
   margin:30px 0;
   text-align:left;
}

#faq.faq h2{
   font-size:22px;
   margin:0 0 8px;
}

#faq.faq details{
   background:#f2f2f2;
   border:1px solid var(--line);
   border-radius:16px;
   padding:12px;
   margin:8px 0;
   text-align:left;
}

#faq.faq summary{
   cursor:pointer;
   font-weight:600;
   min-height:44px;
   display:flex;
   align-items:center;
   justify-content:flex-start;
   text-align:left;
}

#faq.faq details p,
#faq.faq details ul,
#faq.faq details ol,
#faq.faq details li,
#faq.faq details div{
   text-align:left;
}

#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;
}

#faq .faq-item{
   background:#ffffff;
   border:1px solid var(--line);
   border-radius:18px;
   box-shadow:0 2px 6px rgba(0,0,0,.05);
   padding:0;
   overflow:hidden;
}

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

#faq .faq-item > summary::-webkit-details-marker{
   display:none;
}

#faq .faq-item > summary::marker{
   content:"";
}

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

/* =========================================================
   SIDENAV / MOBILE MENU
   ========================================================= */
.sidenav{
   position:fixed;
   top:0;
   left:0;
   height:100vh;
   width:300px;
   max-width:90vw;
   background:#000000;
   color:#f1f1f1;
   padding:20px 0 40px;
   overflow-y:auto;
   -webkit-overflow-scrolling:touch;
   z-index:3000;
   transform:translateX(-100%);
   transition:transform .35s ease;
}

.sidenav.is-open{
   transform:translateX(0);
}

.sidenav .closebtn{
   position:absolute;
   top:10px;
   right:14px;
   padding:6px 8px;
   line-height:1;
   cursor:pointer;
   color:#f1f1f1;
}

.sidenav a{
   display:block;
   padding:8px 12px 8px 14px;
   color:#f1f1f1;
   text-decoration:none;
   transition:color .2s ease;
}

.sidenav a:hover{
   color:gold;
}

.sidenav h3{
   margin:8px 14px;
   color:#5d6d7e;
   font-size:1.1rem;
}

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

.sidenav li{
   margin:5px 0;
}

.sidenav-backdrop{
   position:fixed;
   inset:0;
   background:rgba(0,0,0,.35);
   z-index:2900;
   opacity:0;
   pointer-events:none;
   transition:opacity .35s ease;
}

.sidenav.is-open + .sidenav-backdrop{
   opacity:1;
   pointer-events:auto;
}

/* =========================================================
   BUY / INFO BUTTONS
   ========================================================= */
.buybutton,
.soldoutbutton,
.infobutton{
   font-size:1.2rem !important;
   padding:.2rem .3rem;
   background:#f3bb01;
   color:black !important;
   white-space:nowrap;
   border:2px solid #847e83;
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   border-radius:10px;
}

.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;
}

/* =========================================================
   BLOG ACCORDION
   ========================================================= */
.blog_accordion{
   font-size:.90rem;
   padding:.35rem .60rem;
   cursor:pointer;
   border:none;
   text-align:center;
   outline:none;
   transition:.2s;
   background-color:#fff;
   color:#444;
   width:100%;
   display:block;
   margin:2px 0;
   line-height:1.2;
   box-sizing:border-box;
}

.blog_accordion:hover{
   background-color:#f2f2f2;
}

.blog_accordion.active{
   background-color:#fafafa;
}

.blog_accordion:after{
   content:'\02795';
   font-size:13px;
   color:#333;
   float:right;
   margin-left:8px;
}

.blog_accordion.active:after{
   content:"\2796";
   color:#111;
}

.blog_accordion h2,
.blog_accordion h3,
.blog_accordion h4,
.blog_accordion h5,
.blog_accordion h6{
   font-size:.90rem;
   color:#444;
   text-align:center;
   font-weight:normal;
   margin:0;
}

.accordion-heading{
   margin:0 !important;
   padding:0 !important;
}

.blog_panel{
   max-height:0;
   width:100%;
   overflow:hidden;
   transition:max-height .2s ease-out;
   text-align:left;
   background-color:#fff;
   margin:0;
   padding:0 .60rem;
   box-sizing:border-box;
}

.blog_panel p,
.blog_panel ul,
.blog_panel ol{
   margin:.5rem 0;
}

/* =========================================================
   BUSINESS CARD
   ========================================================= */
.bizcard{
   max-width:420px;
   margin:16px auto;
   border-radius:20px;
   border:1px solid var(--line);
   box-shadow:0 1px 2px rgba(0,0,0,.04);
   padding:16px;
}

.bizcard-header{
   display:flex;
   gap:12px;
   align-items:center;
   justify-content:center;
}

.bizcard-logo{
   width:64px;
   height:64px;
   object-fit:contain;
   border-radius:12px;
   border:1px solid var(--line);
   background:#fff;
   display:block;
}

.bizcard-title{
   font-weight:800;
   font-size:18px;
   line-height:1.2;
   text-align:center;
}

.bizcard-tagline{
   color:#374151;
   font-size:14px;
   margin-top:2px;
   text-align:center;
}

.bizcard-perks{
   color:var(--muted);
   font-size:12px;
   margin-top:4px;
   text-align:center;
}

.bizcard-body{
   display:grid;
   gap:12px;
   margin-top:12px;
   grid-template-columns:1fr;
   justify-items:center;
}

@media (min-width:460px){
   .bizcard-body{
      grid-template-columns:1fr 1fr;
   }
}

.bizcard-col{
   font-size:14px;
   color:var(--ink);
   text-align:center;
}

.bizcard-name{
   font-weight:600;
}

.bizcard-line{
   display:flex;
   align-items:center;
   gap:8px;
   margin:4px 0;
   justify-content:center;
}

.bizcard-actions{
   display:flex;
   gap:8px;
   margin-top:12px;
   justify-content:center;
}

.bizcard-hours{
   margin-top:12px;
   font-size:12px;
   color:#374151;
   background:var(--soft);
   border:1px solid var(--line);
   border-radius:12px;
   padding:8px 10px;
   text-align:center;
}

.bizcard-col > div > div{
   justify-content:center;
}

/* =========================================================
   SEO / CONTENT BLOCKS
   ========================================================= */
.category-intro,
.seo-footer{
   max-width:1120px;
   margin:28px auto;
   padding:0 16px;
   text-align:left;
}

.category-intro h2,
.seo-footer h2{
   margin:0 0 12px;
   font-size:clamp(22px,3vw,30px);
   line-height:1.2;
}

.category-intro p,
.seo-footer p{
   color:#334155;
   line-height:1.7;
}

.seo-footer-box,
.seo-content-box{
   background:#1b4f7a;
   color:#ffffff;
   padding:2rem 1.2rem;
   margin:2rem 0 0;
}

.seo-footer-box .seo-footer,
.seo-content-box .seo-content{
   max-width:1120px;
   margin:0 auto;
   padding:0;
}

.seo-footer-box h2,
.seo-content-box h2,
.seo-footer-box h3,
.seo-content-box h3{
   color:#ffffff;
}

.seo-footer-box p,
.seo-content-box p{
   color:#f8fafc;
}

.seo-footer-box a,
.seo-content-box a{
   color:#ffe48a;
   text-decoration:none;
   font-weight:600;
}

.seo-footer-box a:hover,
.seo-content-box a:hover{
   text-decoration:underline;
}

.no-bullets{
   list-style:none;
   padding-left:0;
   margin-left:0;
}

.no-bullets li{
   margin:4px 0;
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
   border-top:1px solid var(--line);
   padding:20px 16px;
   color:var(--muted);
   font-size:14px;
   text-align:center;
}

footer .wrap{
   padding:40px 16px;
}

.footgrid{
   display:grid;
   gap:24px;
}

@media (min-width:768px){
   .footgrid{
      grid-template-columns:1fr 1fr 1fr;
   }
}

/* =========================================================
   STICKY RECOMMENDATION CTA
   ========================================================= */

.sticky-phone,
.sbox-sticky-advice,
#cta_phone_fab{
   position:fixed !important;
   right:18px !important;
   bottom:18px !important;
   z-index:2400 !important;
}

/* Keep the visible button orange in every browser state */
#cta_phone_fab,
#cta_phone_fab:link,
#cta_phone_fab:visited,
#cta_phone_fab:hover,
#cta_phone_fab:focus,
#cta_phone_fab:active,
.sbox-sticky-advice#cta_phone_fab{
   display:inline-flex !important;
   align-items:center !important;
   justify-content:center !important;

   min-height:52px !important;
   padding:12px 24px !important;

   background:#e66f00 !important;
   color:#ffffff !important;
   border:1px solid #c85f0f !important;
   border-radius:18px !important;
   box-shadow:0 8px 22px rgba(0,0,0,.25) !important;

   font-weight:850 !important;
   text-align:center !important;
   text-decoration:none !important;
   opacity:1 !important;

   -webkit-appearance:none;
   appearance:none;
}

/* Also cover an inner button/link if the homepage uses one */
#cta_phone_fab .sbox-btn,
#cta_phone_fab .sbox-btn:link,
#cta_phone_fab .sbox-btn:visited,
#cta_phone_fab .sbox-btn:hover,
#cta_phone_fab .sbox-btn:focus,
#cta_phone_fab .sbox-btn:active{
   width:100% !important;
   background:#e66f00 !important;
   color:#ffffff !important;
   border-color:#c85f0f !important;
   box-shadow:none !important;
   text-decoration:none !important;
   opacity:1 !important;
}

/* Slightly darker while pressed */
#cta_phone_fab:active,
#cta_phone_fab:hover,
#cta_phone_fab .sbox-btn:active,
#cta_phone_fab .sbox-btn:hover{
   background:#c85f0f !important;
   color:#ffffff !important;
}

@media (max-width:640px){

   #cta_phone_fab,
   .sbox-sticky-advice#cta_phone_fab{
      left:14px !important;
      right:14px !important;
      bottom:14px !important;
      width:auto !important;
      max-width:none !important;
   }
}

/* =========================================================
   LEGACY SCREEN HELPERS
   ========================================================= */
.request_heading{
   text-decoration:none;
   font-weight:600;
   padding-left:.25rem;
   padding-right:.25rem;
}

.request_text{
   text-decoration:none;
   font-weight:normal;
   padding:.25rem;
}

.request_text_medium{
   font-size:.85rem;
   line-height:.75rem;
   text-decoration:none;
   font-weight:normal;
   padding:.25rem;
}

.request_commander{
   font-size:.85rem;
   color:#29088A;
   font-weight:650;
   padding:.40rem;
}

.request_commander a{
   font-size:.85rem;
   color:#29088A;
   font-weight:650;
   padding:.25rem;
}

.request_commander a:hover{
   color:#000000;
   font-weight:850;
}

@media (min-width:768px){
   table[align="center"] > tr > td[width="210"]{
      width:210px;
      max-width:210px;
   }
}

/* =========================================================
   LEGACY DEVICE TYPOGRAPHY
   ========================================================= */
@media screen and (max-device-width:320px) and (orientation:portrait){
   html{ font-size:16px; line-height:16px; }
   #header_menu{ font-size:1.15rem; line-height:1.3rem; }
   h1{ font-size:1.05rem; line-height:1.1rem; }
}

@media screen and (max-device-width:320px) and (orientation:landscape){
   #header_menu{ font-size:1.2rem; line-height:1.2rem; }
   h1{ font-size:1.2rem; line-height:1.3rem; }
}

@media screen and (min-device-width:321px) and (max-device-width:400px) and (orientation:portrait){
   #header_menu{ font-size:1.2rem; line-height:1.8rem; }
   h1{ font-size:1.1rem; line-height:1.2rem; }
}

@media screen and (min-device-width:321px) and (max-device-width:400px) and (orientation:landscape){
   #header_menu{ font-size:1.2rem; line-height:1.8rem; }
   h1{ font-size:1.2rem; line-height:1.3rem; }
}

@media screen and (min-device-width:401px) and (max-device-width:640px) and (orientation:portrait){
   #header_menu{ font-size:1.2rem; line-height:1.8rem; }
   h1{ font-size:1.1rem; line-height:1.2rem; }
}

@media screen and (min-device-width:401px) and (max-device-width:767px) and (orientation:landscape){
   #header_menu{ font-size:1.2rem; line-height:1.8rem; }
   h1{ font-size:1.2rem; line-height:1.3rem; }
}

@media screen and (min-device-width:768px) and (max-device-width:1024px){
   #header_menu{ font-size:1.2rem; line-height:1.8rem; }
   h1{ font-size:1.2rem; line-height:1.3rem; }
}

/* =========================================================
   ACCESSIBILITY / UTILITIES
   ========================================================= */
.chip img{
   vertical-align:middle;
   margin-right:8px;
}

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

@media (prefers-reduced-motion:reduce){
   *{
      scroll-behavior:auto;
      animation:none !important;
      transition:none !important;
   }

   .sidenav,
   .sidenav-backdrop{
      transition:none !important;
   }
}

/* =========================================================
   RECOMMENDATION CARDS
   Ratings remain visible; long text is expandable.
   ========================================================= */

.recommendation-list{
   width:100%;
   max-width:1120px;
   margin:24px auto 38px;
   padding:0 16px;
   display:grid;
   gap:16px;
   box-sizing:border-box;
}

.recommendation-card{
   width:100%;
   min-width:0;
   margin:0;
   padding:20px;
   background:#fff;
   border:1px solid #dfe7ef;
   border-radius:18px;
   box-shadow:0 8px 24px rgba(15,23,42,.07);
   overflow:hidden;
}

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

.recommendation-ratings{
   margin-top:17px;
   padding:16px 0;
   border-top:1px solid #e5eaf0;
   border-bottom:1px solid #e5eaf0;
}

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

.recommendation-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:850;
   user-select:none;
}

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

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

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

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

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

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

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

.recommendation-details-content{
   padding:3px 0 18px;
}

.recommendation-text{
   color:#273445;
   font-size:16px;
   line-height:1.65;
   text-align:left;
}

@media (max-width:760px){

   .recommendation-list{
      position:relative;
      left:50%;
      width:100vw;
      max-width:none;
      margin-left:-50vw;
      margin-right:-50vw;
      margin-top:16px;
      padding:10px 0 24px;
      gap:10px;
      background:#f1f4f7;
   }

   .recommendation-card{
      padding:16px 14px;
      border-left:0;
      border-right:0;
      border-radius:0;
      box-shadow:none;
   }

   .recommendation-card-top{
      grid-template-columns:112px minmax(0,1fr);
      gap:13px;
   }

   .recommendation-image{
      width:112px !important;
      max-width:112px !important;
      height:112px !important;
      padding:6px;
      object-fit:contain;
   }

   .recommendation-title{
      display:-webkit-box;
      overflow:hidden;
      font-size:20px !important;
      line-height:1.17;
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
   }

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

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

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

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

   .recommendation-ratings{
      margin-top:13px;
      padding:13px 0;
   }

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

   .recommendation-details-summary{
      min-height:50px;
      padding:13px 2px;
      font-size:16px;
   }

   .recommendation-details-content{
      padding-bottom:16px;
   }

   .recommendation-text{
      font-size:16px;
      line-height:1.6;
   }
}

@media (max-width:390px){

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

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

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

   .recommendation-price-row{
      justify-content:center;
   }

   .recommendation-cta-row{
      width:100%;
      margin-left:0;
   }

   .recommendation-rating-grid{
      grid-template-columns:1fr !important;
   }
}

@media (prefers-reduced-motion:reduce){
   .recommendation-details-icon::after{
      transition:none;
   }
}

/* =========================================================
   FINAL WIDTH CORRECTIONS
   Advisory recommendation list and mobile rating tables.
   ========================================================= */

/*
   The recommendation function is called after the advisory-page
   wrapper closes. This dedicated wrapper therefore breaks the
   generated product list out of any older centred page container.
*/
.recommendation-page-fullwidth{
   position:relative !important;
   left:50% !important;
   width:100vw !important;
   max-width:none !important;
   margin-left:-50vw !important;
   margin-right:-50vw !important;
   padding:0 !important;
   box-sizing:border-box !important;
}

.recommendation-page-fullwidth,
.recommendation-page-fullwidth *{
   box-sizing:border-box;
}

.recommendation-page-fullwidth .recommendation-list{
   width:100% !important;
   max-width:1120px !important;
   margin:24px auto 38px !important;
   padding:0 16px !important;
}

.recommendation-page-fullwidth .recommendation-card{
   width:100% !important;
   max-width:none !important;
   min-width:0 !important;
}

/*
   Catalogue rating table:
   remove the former 560px mobile minimum width.
   All four cells now share the available device width.
*/
@media (max-width:640px){

   .recommendation-page-fullwidth .recommendation-list{
      width:100vw !important;
      max-width:none !important;
      margin:16px 0 0 !important;
      padding:10px 0 24px !important;
   }

   .recommendation-page-fullwidth .recommendation-card{
      width:100% !important;
      max-width:none !important;
      margin:0 !important;
   }

   .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;
      word-break:normal;
      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;
   }
}

/*
   On very narrow phones, keep the same table rather than creating
   horizontal scrolling. Labels can wrap onto two or three lines.
*/
@media (max-width:390px){

   .recommendation-page-fullwidth .recommendation-list{
      padding-left:0 !important;
      padding-right:0 !important;
   }

   .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 explanation 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;
   }

   .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-score-label{
      font-size:12px !important;
   }

   .recommendation-score-value{
      font-size:18px !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{
      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 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;
   }
}