/* =========================================================
   THEME TOKENS (Dog-bed version)
   ========================================================= */
:root{
  --bg:#ffffff;
  --ink:#111827;
  --text:var(--ink);
  --muted:#6b7280;
  --line:#e5e7eb;
  --soft:#f5f5f5;

  /* Dog / nature leaning palette */
  --brand:#166534;   /* deep green */
  --brand-2:#15803d; /* lighter green */
  --accent:#22c55e;  /* bright accent green */

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

  --radius:16px; 
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(15,23,42,.11);

  --header-height:64px;
  --header-offset:80px;
  --anchor-offset:20px;
}

@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:80px;
    --header-offset:80px;
    --anchor-offset:60px;
  }
}

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

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.5;
  scroll-padding-top:var(--header-offset);
  padding-top:var(--header-height);
}

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

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

/* =========================================================
   CONTENT WIDTHS
   ========================================================= */
.wrap,
.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 16px;
}

section{
  padding:32px 0;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4{
  margin:0 0 8px;
  font-weight:700;
  color:var(--ink);
}

h1{
  font-size:clamp(28px,4vw,40px);
  line-height:1.15;
}
h2{
  font-size:clamp(22px,3vw,30px);
  line-height:1.25;
}
h3{
  font-size:20px;
  line-height:1.3;
}

p{
  margin:0 0 10px;
  color:var(--text);
}
p.lead{
  font-size:18px;
  color:var(--muted);
}

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

.catalogue-page h1 {
    font-size: 34px;
    line-height: 1.15;
}

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

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

/* =========================================================
   BUTTONS
   ========================================================= */
.btn,
.btn-primary,
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  border:1px solid transparent;
  text-decoration:none !important;
  transition:
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .08s ease,
    border-color .15s ease;
}

.btn-primary{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
  box-shadow:0 8px 20px rgba(22,101,52,.35);
}
.btn-primary:hover{
  background:var(--brand-2);
  border-color:var(--brand-2);
  box-shadow:0 12px 26px rgba(22,101,52,.4);
  transform:translateY(-1px);
}
.btn-primary:active{
  transform:translateY(0);
  box-shadow:0 4px 14px rgba(22,101,52,.35);
}

.btn-outline{
  background:#fff;
  color:var(--brand);
  border-color:var(--line);
}
.btn-outline:hover{
  border-color:var(--brand);
  background:#f0fdf4;
}

.btn-large{
  padding:12px 24px;
  font-size:16px;
}

/* =========================================
   Legacy order pages – constrain width on desktop
   ========================================= */

/* The old pages wrap content like:
   <div id="main_wrap">
     <div id="main_content">
       <div class="content_area"> ... */

#main_wrap #main_content .content_area{
  width:100%;
  max-width:1120px;   /* or 900px if you want it narrower */
  margin:0 auto 32px; /* center + some bottom spacing */
  padding:0 16px;     /* same side padding as .container */
}

/* legacy buy / info buttons mapped to new visual style */
.buybutton,
.soldoutbutton,
.infobutton{
  font-size:1rem !important;
  padding:.35rem .7rem;
  border-radius:999px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff !important;
  cursor:pointer;
  text-decoration:none !important;
}
.buybutton:hover,
.infobutton:hover{
  background:var(--brand-2);
  border-color:var(--brand-2);
}
.soldoutbutton{
  background:#f97373;
  border-color:#f97373;
}

/* Focus */
:focus-visible{
  outline:3px solid #93c5fd;
  outline-offset:2px;
}

/* =========================================================
   STANDARD SIDE NAVIGATION MENU
   Used by SideNavMenu_2025()
   ========================================================= */

/* Menu holder in header */
.menu-left{
   display:flex;
   align-items:center;
   gap:10px;
   min-width:52px;
}


/* Standard pill used by SideNavMenu_2025 burger button */
.pill{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:8px;
   padding:8px 10px;
   border:1px solid #e5e7eb;
   border-radius:999px;
   background:#ffffff;
   font-weight:700;
   color:#111827;
   text-decoration:none;
   white-space:nowrap;
}

.pill:hover{
   text-decoration:none;
   background:#f3f4f6;
}


/* ---------------------------------------------------------
   OFF-CANVAS SIDE MENU
   --------------------------------------------------------- */

.sidenav{
   height:100%;
   width:0;
   position:fixed;
   z-index:9999;
   top:0;
   left:0;

   background:linear-gradient(
      180deg,
      #1b2d3e 0%,
      #14202b 100%
   );

   overflow-x:hidden;
   transition:.3s;
   padding-top:60px;
}


/* SideNavMenu_2025 adds this class */
.sidenav.is-open{
   width:300px;
   max-width:85vw;
}


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


.sidenav a{
   padding:4px 24px;
   line-height:1.1;
   text-decoration:none;
   font-size:.90rem;
   color:#ffffff;
   display:block;
}


.sidenav a:hover,
.sidenav a:focus,
.sidenav a:focus-visible{
   background-color:rgba(255,255,255,.08);
   color:#f3bb01 !important;
   text-decoration:none;
}


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


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


/* ---------------------------------------------------------
   BURGER BUTTON
   --------------------------------------------------------- */

.menu-toggle{
   flex:0 0 auto;
}


/* =========================================================
   MOBILE HEADER
   ========================================================= */

@media (max-width:900px){

   /*
    * Existing desktop menu is already hidden by the
    * petshop stylesheet at this width.
    */

   .menu-left{
      display:flex !important;
      align-items:center;
      justify-content:flex-start;
      flex:0 0 auto;
   }

}


@media (max-width:600px){

   /*
    * Existing petshop header becomes two rows at this width.
    * Put burger at the left of the first row.
    */

   .menu-left{
      order:0;
      width:auto;
      min-width:40px;
   }

   .brand-block{
      order:1;
      width:auto;
      flex:1 1 auto;
      justify-content:center;
   }

   .header-right{
      order:2;
      width:100%;
      justify-content:center;
   }

   .menu-toggle{
      width:40px !important;
      height:40px !important;
      min-width:40px !important;
      max-width:40px !important;
      padding:0 !important;
   }

}

/* =========================================================
   HEADER – Swiss flag, brand center, phone right
   ========================================================= */

.site-header{
  position:fixed;              /* keep sticky header; remove if you really want fully static */
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
}

body{
  padding-top:32px;            /* match header height; adjust if you change it */
}

.header-inner{
  max-width:1120px;
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:16px;
}

/* NAV (left) */
.main-nav{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  white-space:nowrap;
  flex:1 1 0;
}
.main-nav a{
  color:#6b7280;
  text-decoration:none;
  padding:4px 0;
}
.main-nav a:hover{
  color:#111827;
}

/* BRAND (center) */
.brand-block{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex:0 0 auto;
}

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

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.brand-title{
  font-size:15px;
  font-weight:700;
  color:#111827;
}
.brand-subtitle{
  font-size:12px;
  color:#6b7280;
}

/* RIGHT SIDE (phone + language) */
.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:1 1 0;
  white-space:nowrap;
}

.header-phone{
  font-weight:600;
  font-size:14px;
  color:#111827;
  text-decoration:none;
}
.header-phone:hover{
  text-decoration:underline;
}

/* Make the language select (PHP output) visually match */
.header-right select{
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}

/* RESPONSIVE HEADER */
@media (max-width:900px){
  .header-inner{
    gap:8px;
  }
  .main-nav{
    display:none;        /* hide top nav; hero buttons / in-page links do the job on mobile */
  }
  .brand-block{
    flex:1 1 auto;
    justify-content:flex-start;
  }
}

@media (max-width:600px){
  body{
    padding-top:72px;
  }
  .header-inner{
    flex-wrap:wrap;
  }
  .brand-block{
    order:1;
    width:100%;
    justify-content:center;
  }
  .header-right{
    order:2;
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   HERO – blue rounded panel similar to key-safe site
   ========================================================= */

.hero{
  background:none;
  padding:0;  
}

.hero-inner{
  max-width:1120px;
  margin:0 auto;
  padding:20px 20px 24px;
  background:linear-gradient(135deg,#194a7a 0%,#275e96 45%,#2f6fae 100%);
  color:#ffffff;
  border-radius:32px;
  box-shadow:0 18px 50px rgba(15,23,42,.25);
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr);
  gap:24px;
  align-items:stretch;
}

.hero-content h1{
  margin-bottom:8px;
  font-size:clamp(26px,3.4vw,34px);
  color:white;
}
.hero-content p{
  color:#e5e7eb;
}

.hero-benefits{
  list-style:none;
  margin:12px 0 16px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* pills similar to the buttons in your keysafe hero */
.hero-benefits li{
  border-radius:999px;
  padding:6px 12px;
  background:rgba(15,23,42,.22);
  border:1px solid rgba(148,163,184,.65);
  font-size:13px;
}

/* CTAs inside the blue hero */
.hero-cta-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.hero .btn-primary{
  background:#ffffff;
  background:linear-gradient(135deg,#194a7a 0%,#275e96 45%,#2f6fae 100%);
  border-color:#ffffff;
  box-shadow:0 8px 20px rgba(15,23,42,.35);
}
.hero .btn-primary:hover{
  background:#e5e7eb;
  border-color:#e5e7eb;
}
.hero .btn-outline{
  background:transparent;
  color:#ffffff;
  border-color:rgba(191,219,254,.8);
}
.hero .btn-outline:hover{
  background:rgba(15,23,42,.18);
}

/* right side – white image card */
.hero-image{
    background:#ffffff;
    color:#111827;
    border-radius:28px;
    padding:18px;
    box-shadow:0 16px 40px rgba(15,23,42,.35);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.hero-image img{
    display:block;
    max-width:100%;
    height:auto;
    border-radius:20px;
    box-shadow:none;              /* card already has shadow */
}

/* You can put text instead of image in hero-image; ensure text is styled: */
.hero-image h2,
.hero-image h3{
  margin-bottom:6px;
}
.hero-image p{
  font-size:14px;
  color:#4b5563;
}

/* hero responsive */
@media (max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
    padding:18px 14px 20px;
    border-radius:24px;
  }
  .hero-image{
    margin-top:8px;
  }
}
@media (max-width:600px){
  .hero{
    padding:12px 0 18px;
  }
  .hero-inner{
    padding:16px 12px 18px;
  }
}

/*Main page section heading */
.home-card-heading {
    margin:0 0 12px;
    font-size:20px;
    line-height:1.25;
    font-weight:700;
    color:#2f73b9;
    text-align:center;
}

/* =========================================================
   GENERIC SECTION LAYOUTS
   ========================================================= */
.section{
  padding:32px 0;
}
.section-header{
  margin-bottom:20px;
}
.section-header p{
  max-width:640px;
  color:var(--muted);
}

/* Simple grid helpers */
.card-grid{
  display:grid;
  gap:18px;
}
@media (min-width:768px){
  .card-grid.cols-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .card-grid.cols-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .card-grid.cols-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* =========================================================
   SIZE CARDS
   ========================================================= */
.section-sizes{
  background:#fff;
}

.sizes-grid{
  display:grid;
  gap:18px;
}
@media (min-width:768px){
  .sizes-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (min-width:1024px){
  .sizes-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

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

.size-card h3{
  margin-bottom:4px;
}
.size-dimensions{
  font-size:14px;
  color:var(--muted);
  margin-bottom:8px;
}
.size-card img{
  border-radius:12px;
  width:100%;
  height:auto;
  margin:4px 0 10px;
}
.size-desc{
  font-size:14px;
}
.size-colors{
  font-size:14px;
  color:var(--muted);
}
.size-price{
  font-size:18px;
  font-weight:700;
  margin-top:6px;
}
.size-card .btn-primary{
  margin-top:auto;
  width:100%;
  justify-content:center;
}

.sizes-note{
  margin-top:16px;
  font-size:13px;
  color:var(--muted);
}

/* Make each card a vertical flex container */
.card.size-card{
  display:flex;
  flex-direction:column;
}

/* Let the description stretch to fill available space */
.size-card .size-desc{
  flex-grow:1;           /* this pushes what follows to the bottom */
}

/* Optional: keep images consistent for nicer alignment */
.size-card img{
  display:block;
  width:100%;
  height:auto;
  max-height:220px;      /* tweak for your design */
  object-fit:cover;
}

/*//////////////////////////////////*/
/* Swatch Settings from CoolarooUSA */
/*//////////////////////////////////*/
.swatch {
   height: 40px;
   width:  40px;
   margin: 5px;
   overflow: hidden;
   border-radius: 50%;
   display: inline-block;
   cursor: pointer;
   border-style:solid;
   background-color:#ffffff;
   border-color:#333333;
}
.swatch img {
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.swatch::after {
   content: '\f00e';
   font-weight: 600;
   position: absolute;
   z-index: 9999;
   color: #fff;
   opacity: 0;
   transition: all 0.5s ease;
}
.swatch:hover::after {
   opacity: 1;
   transition: all 0.5s ease;
}
.swatch.zoomed::after {
   content: '\f00d';
}

/*//////////
/* =========================================================
   BENEFITS
   ========================================================= */
.section-benefits{
  background:#f9fafb;
}

.benefits-grid{
  display:grid;
  gap:16px;
}
@media (min-width:768px){
  .benefits-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (min-width:1024px){
  .benefits-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

.benefit-card{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#ffffff;
  padding:14px 14px 16px;
}
.benefit-card h3{
  margin-bottom:6px;
}
.benefit-card p{
  font-size:14px;
  color:var(--muted);
}

/* =========================================================
   REVIEWS
   ========================================================= */
.section-reviews{
  background:#fff;
}

.reviews-grid{
  display:grid;
  gap:18px;
}
@media (min-width:768px){
  .reviews-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
.review{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#f9fafb;
  padding:14px 14px 16px;
}
.review-text{
  font-size:14px;
}
.review-author{
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
}

/* =========================================================
   SHIPPING / GARANTIE
   ========================================================= */
.section-shipping{
  background:#f9fafb;
}

.shipping-grid{
  display:grid;
  gap:18px;
}
@media (min-width:768px){
  .shipping-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
.section-shipping article{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#ffffff;
  padding:14px 14px 16px;
}
.section-shipping h3{
  margin-bottom:6px;
}
.section-shipping p{
  font-size:14px;
  color:var(--muted);
}

/* =========================================================
   ORDER SECTION
   ========================================================= */
.section-order{
  text-align:center;
  background:#ecfdf5;
}
.section-order p{
  color:var(--muted);
}
.section-order .btn-primary{
  margin-top:12px;
}
.order-note{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}

/* ================================
   FAQ GRID – expandable cards
   ================================ */

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

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

.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-item{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  padding:0; /* summary + answer handle their own padding */
  overflow:hidden;
}

/* Question row (looks like your pill buttons) */
.faq-item > summary{
  list-style:none;
  cursor:pointer;
  padding:16px 20px;
  font-size:16px;
  font-weight:500;
  color:#111827;
}

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

/* Answer text */
.faq-answer{
  border-top:1px solid #e5e7eb;
  padding:12px 20px 16px;
  font-size:14px;
  color:#4b5563;
}

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

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

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

/* SEO FOOTER BLOCK */
.seo-footer {
  margin-top: 60px;
  padding: 0 20px; /* spacing around the rounded box */
}

.seo-footer-inner {
  background: linear-gradient(135deg,#194a7a 0%,#275e96 45%,#2f6fae 100%);
  color: #ffffff;
  border-radius: 22px;  /* rounded like hero section */
  padding: 50px 40px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* subtle depth */
}

.seo-footer h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  margin-bottom: 20px;
  color: #ffffff;          /* force white */
}

.seo-footer p {
  margin-bottom: 18px;
  line-height: 1.65;
  font-size: 16px;
  color: #ffffff;          /* force white */
  opacity: 0.97;           /* soft and readable */
}

@media (max-width: 600px) {
  .seo-footer-inner {
    padding: 35px 22px;
    border-radius: 18px;
  }
  .seo-footer p {
    font-size: 15px;
  }
}



/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  border-top:1px solid var(--line);
  background:#ffffff;
  padding:24px 0;
  font-size:14px;
  color:var(--muted);
}

.footer-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 16px;
  display:grid;
  gap:20px;
}
@media (min-width:768px){
  .footer-inner{
    grid-template-columns:1.5fr 1fr 1fr;
  }
}

.footer-contact p,
.footer-links ul,
.footer-links li{
  margin:0 0 4px;
}
.footer-links ul{
  list-style:none;
  padding:0;
}
.footer-links a{
  color:var(--muted);
}
.footer-links a:hover{
  color:var(--brand);
}

.footer-copy{
  grid-column:1/-1;
  font-size:13px;
  margin-top:6px;
}

/* =========================================================
   STICKY CTA (MOBILE)
   ========================================================= */
.sticky-cta-mobile{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:8px 12px;
  background:rgba(15,23,42,.92);
  z-index:900;
  display:none;
}
.sticky-cta-mobile .btn-primary{
  width:100%;
  justify-content:center;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}

@media (max-width:768px){
  .sticky-cta-mobile{
    display:block;
  }
}

/* =========================================
   PETSHOP FOOTER (base, from earlier)
   ========================================= */
.pet-footer{
  margin-top:40px;
  padding:32px 0 20px;
  background:#ffffff;
  border-top:1px solid #e5e7eb;
  font-size:14px;
  color:#111827;
}

.pet-footer-inner{
  max-width:1040px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  gap:20px;
}

@media (min-width:768px){
  .pet-footer-inner{
    grid-template-columns:repeat(3,minmax(0,1fr));
    align-items:flex-start;
  }
}

.pet-footer-col{
  text-align:center;
}

.pet-footer-title{
  font-weight:700;
  margin-bottom:6px;
}

.pet-footer-text{
  margin:0;
  color:#4b5563;
  line-height:1.5;
}

.pet-footer-links{
  list-style:none;
  margin:6px 0 0;
  padding:0;
}

.pet-footer-links li{
  margin:2px 0;
}

.pet-footer-links a{
  color:#111827;
  text-decoration:none;
}

.pet-footer-links a:hover{
  text-decoration:underline;
}

/* bottom line */
.pet-footer-bottom{
  margin-top:28px;
  border-top:1px solid #e5e7eb;
  padding-top:10px;
  text-align:center;
  font-size:13px;
  color:#6b7280;
  padding-left:20px;
  padding-right:20px;
}

/* =========================================
   BUSINESS CARD BLOCK (cleaned)
   ========================================= */
.pet-footer-card-wrap{
  margin-top:30px;
  padding:0 16px;
  max-width:1120px;         /* same as .container */
  margin-left:auto;
  margin-right:auto;        /* center the wrapper */
}

.pet-footer-card{
  width:100%;
  max-width:500px;          /* actual visual width of the card */
  margin:0 auto;
  background:#ffffff;
  border-radius:28px;
  border:1px solid #e5e7eb;
  box-shadow:0 12px 35px rgba(15,23,42,0.12);
  padding:18px 20px 16px;
}

/* Header: logo + domain + tagline */
.pet-footer-card-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid #f1f5f9;
  text-align:center;
}

.pet-footer-avatar{
  width:52px;
  height:52px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f9fafb;
}

.pet-footer-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pet-footer-card-title{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.pet-footer-domain{
  font-weight:700;
  font-size:15px;
}

.pet-footer-subtitle{
  font-size:13px;
  color:#4b5563;
}

.pet-footer-meta{
  font-size:12px;
  color:#6b7280;
}

/* Body: left = name/address, right = contact rows */
.pet-footer-card-body{
  display:grid;
  grid-template-columns:1.2fr 1.1fr;
  gap:12px;
  padding:12px 0 10px;
}

.pet-footer-card-left{
  font-size:14px;
  text-align:left;
}

.pet-footer-person{
  font-weight:600;
  margin-bottom:4px;
}

.pet-footer-address{
  color:#4b5563;
  line-height:1.45;
}

.pet-footer-card-right{
  font-size:14px;
}

.pet-footer-contact-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:4px;
}

.pet-footer-contact-row span{
  font-size:14px;
}

.pet-footer-contact-row a{
  color:#111827;
  text-decoration:none;
}

.pet-footer-contact-row a:hover{
  text-decoration:underline;
}

/* Actions: use global button styles, only control layout */
.pet-footer-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-top:10px;
  padding-bottom:8px;
}

.pet-footer-main-cta,
.pet-footer-secondary-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Opening hours strip */
.pet-footer-hours{
  margin-top:4px;
  padding:8px 10px;
  background:#f9fafb;
  border-radius:999px;
  font-size:12px;
  color:#4b5563;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
}

/* Responsive adjustments */
@media (max-width:640px){
  .pet-footer-card{
    padding:16px 14px 14px;
    border-radius:22px;
  }
  .pet-footer-card-header{
    flex-direction:column;
  }
  .pet-footer-card-body{
    grid-template-columns:1fr;
    text-align:center;
  }
  .pet-footer-card-left{
    text-align:center;
  }
  .pet-footer-card-actions{
    flex-direction:column;
  }
  .pet-footer-main-cta,
  .pet-footer-secondary-cta{
    width:100%;
  }
}

/* BLOG Accordion code from www.w3schools.com
 * All colours removed !!
============================================================================= */
.blog_accordion {
   font-size:0.90rem;
   padding: 0.05rem;
   cursor: pointer;
   border: none;
   text-align: center;
   outline: none;
   transition: 0.4s;
   background-color:white;
   color: darkgrey;
   width: 100%; 
}

.active, .blog_accordion:hover {
   background-color: #ccc;
}

.blog_accordion:after {
   content: '\02795'; /* Unicode character for "plus" sign (+) */
   font-size: 13px;
   color: #777;
   float: right;
   margin-left: 5px;
}

.active:after {
   content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.blog_accordion H2, H3, h4, h5 {
   font-size:0.90rem;
   color: darkgrey;	
   text-align:center;   
   font-weight: normal;
}

.blog_panel {
   max-height: 0;
   width: 100%;
   overflow: hidden;
   transition: max-height 0.2s ease-out;
   text-align: left;
   background-color: white;
}

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

.blog_accordion{
   max-width:900px;
   margin:0 auto;
   display:block;
   border-radius:10px;
   padding:10px 14px;
}

.blog_panel{
   max-width:900px;
   margin:0 auto;
   padding:0 18px;
   line-height:1.65;
}

/* =========================================================
   UTILITIES
   ========================================================= */
.soft{
  background:var(--soft);
}

.text-center{
  text-align:center;
}
.text-muted{
  color:var(--muted);
}

.mt-0{ margin-top:0 !important; }
.mt-1{ margin-top:4px !important; }
.mt-2{ margin-top:8px !important; }
.mt-3{ margin-top:12px !important; }
.mt-4{ margin-top:16px !important; }

.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:4px !important; }
.mb-2{ margin-bottom:8px !important; }
.mb-3{ margin-bottom:12px !important; }
.mb-4{ margin-bottom:16px !important; }


/* =========================================================
   FIX FOR ANCHOR JUMP UNDER FIXED HEADER
   ========================================================= */

/* Ensure anchored sections (e.g. #tailles, #avantages, #avis, #faq)
   stop just below the fixed header instead of hiding under it. */
section[id],
[id^="section-"],
h2[id]{
  scroll-margin-top:var(--anchor-offset);
}
/* =========================================
   Legacy / order pages layout fix
   - Only applies when there is NO hero on the page
   - Keeps order pages from stretching full width on desktop
   ========================================= */
@media (min-width: 900px){
  #main_wrap:not(:has(.hero-inner)) #main_content{
    display:flex;
    justify-content:center;
  }

  #main_wrap:not(:has(.hero-inner)) #main_content .content_area{
    width:100%;
    max-width:900px;    /* tweak: 800–1000px to taste */
    padding:0 16px;     /* same side padding as main container */
  }
}
/* Legacy Screens */
.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;
}

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

.arthritis-main-image{
   width:100%;
   max-width:480px;
   margin:auto;
   display:block;
   border-radius:14px;
}


/* =========================================================
   catalogue PAGE LAYOUT
   ========================================================= */

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

.catalogue-shortcut-card{
   display:block;
   text-decoration:none;
   background:#fcfaf6;
   border:1px solid #e6ddd2;
   border-radius:20px;
   padding:18px 18px 16px;
   box-shadow:0 10px 26px rgba(0,0,0,.05);
   min-height:108px;
   transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.catalogue-shortcut-card:hover{
   transform:translateY(-1px);
   box-shadow:0 14px 30px rgba(0,0,0,.08);
   border-color:#d8ccbc;
}

.shortcut-label{
   display:block;
   font-size:13px;
   line-height:1.45;
   color:#6a7787;
   font-weight:700;
   margin-bottom:8px;
}

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

.catalogue-list{
   max-width:1120px;
   margin:0 auto 36px;
}

.catalogue-card{
   background:#fcfaf6;
   border:1px solid #e6ddd2;
   border-radius:24px;
   box-shadow:0 14px 34px rgba(0,0,0,.06);
   padding:32px 36px 28px;
   margin:0 0 30px;
}

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

.catalogue-media{
   text-align:left;
}

.catalogue-image{
   display:block;
   width:100%;
   max-width:300px;
   height:auto;
   margin:0 0 8px 0;
   border-radius:20px;
   background:#f7f2eb;
   padding:16px;
   border:1px solid #e7ddd2;
   box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.catalogue-colours{
   margin-top:2px;
   text-align:left;
}

.catalogue-colours-label{
   display:block;
   font-size:15px;
   font-weight:800;
   color:#243244;
   line-height:1.35;
   margin:0 0 4px 0;
}

.catalogue-colour{
   display:inline-block;
   margin:0 12px 0 0;
   font-size:13px;
   color:#334155;
   vertical-align:top;
   text-align:center;
}

.catalogue-colour img{
   display:block;
   margin:4px auto 0;
   border-radius:6px;
   border:1px solid #e2d7ca;
}

.catalogue-main{
   text-align:left;
   padding-top:6px;
}

.catalogue-ref{
   font-size:15px;
   line-height:1.5;
   color:#7b8797;
   font-weight:700;
   margin-bottom:12px;
   letter-spacing:.2px;
}

.catalogue-title{
   margin:0 0 12px;
   font-size:28px;
   line-height:1.22;
}

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

.catalogue-subtitle{
   font-size:19px;
   line-height:1.5;
   color:#425164;
   font-weight:700;
   margin-bottom:18px;
}

.catalogue-price-row{
   display:flex;
   align-items:center;
   gap:16px;
   flex-wrap:wrap;
   margin-bottom:20px;
}

.catalogue-price-old{
   font-size:20px;
   line-height:1.1;
   color:#9aa4b3;
   text-decoration:line-through;
   font-weight:700;
}

.catalogue-price-new{
   font-size:32px;
   line-height:1.1;
   color:var(--navy);
   font-weight:900;
}

.catalogue-cta-row{
   display:flex;
   align-items:center;
   gap:14px;
   flex-wrap:wrap;
   margin-top:6px;
}

.catalogue-ratings{
   border-top:1px solid #ece4da;
   border-bottom:1px solid #ece4da;
   padding:22px 0;
   margin:0 0 22px;
}

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

.catalogue-score-label{
   font-size:14px;
   color:#6c7a8c;
   font-weight:700;
}

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

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

.catalogue-rating-item{
   display:flex;
   justify-content:space-between;
   align-items:center;
   gap:14px;
   padding:10px 0;
   border-bottom:1px solid #f1ebe3;
}

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

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

.catalogue-text{
   text-align:left;
   font-size:16px;
   line-height:1.8;
   color:#1f2937;
   margin-top:8px;
}

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

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

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

/* =========================================================
   catalogue PAGE MOBILE
   ========================================================= */

@media (max-width: 900px){

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

  .catalogue-card{
    padding:22px 18px 20px;
    border-radius:20px;
  }

  .catalogue-card-top{
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:18px;
  }

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

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

  .catalogue-colours{
    margin-top:14px;
  }

  .catalogue-colour{
    top:0;
    margin:0 8px 8px 0;
  }

  .catalogue-main{
    text-align:center;
    padding-top:0;
  }

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

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

  .catalogue-rating-item{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    padding:10px 0;
  }

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

@media (max-width: 640px){

  .catalogue-shortcuts{
    grid-template-columns:1fr;
    margin:18px auto 26px;
  }

  .catalogue-shortcut-card{
    min-height:auto;
    padding:16px 16px 14px;
  }

  .catalogue-card{
    padding:18px 14px 16px;
    margin:0 0 20px;
  }

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

  .catalogue-subtitle{
    font-size:16px;
    margin-bottom:14px;
  }

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

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

  .catalogue-ratings{
    padding:16px 0;
    margin:0 0 16px;
  }

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

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

  .catalogue-text{
    font-size:15px;
    line-height:1.75;
  }
}

.catalogue-text-block{
   max-width:900px;
   margin:0 auto 18px;
   text-align:center;
}

.catalogue-feature-images{
   max-width:900px;
   margin:18px auto;
   display:grid;
   grid-template-columns:repeat(3, minmax(0, 1fr));
   gap:16px;
   align-items:center;
}

.catalogue-feature-images img{
   display:block;
   width:100%;
   height:auto;
   border-radius:14px;
}

@media (max-width:700px){
   .catalogue-feature-images{
      grid-template-columns:1fr;
   }
}