/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .testimonial{
      background-attachment: scroll !important;
  }
}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
    .testimonial {
        background-attachment: scroll !important;
        background-size: cover;
        border-image-repeat: no-repeat;
    }
}

@media only screen and (min-width : 320px) and (max-width : 480px) {
	.testimonial {
        background-attachment: scroll !important;
        background-size: cover;
        border-image-repeat: no-repeat;
    }
}
.header-1 {
    position: relative;
    padding: 5px 0;
}

.fa{
    font-size: 2rem;
}

#rb-back-top {
    bottom: 120px;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    padding: 1.25rem;
}


button,input,optgroup,select,textarea{
    font-family:inherit;
    margin-right: 5%;
    
}
button:focus{
    outline:none
    
}
p{
    margin-bottom:.8rem; 
    margin-left: 5%;
    
}

input, button, select, textarea {
    line-height: inherit;
    width: 90%;
    margin-bottom: 5%;
    margin-top: 2%;
}

label, .label {
    text-align: left;
    
}

.product-customization .product-message {
    width: 90%;
    height: 100px;
}
#rb-back-top a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:50%;
  line-height:1;
}

/* Footer (footer-h4): single row on desktop — logo, then address, then socials */
.footer-h4 .footer-single-col{
  display:block;
}
.footer-h4 .footer-single-col > div{
  padding:0;
  border-right:none;
}
.footer-h4 .footer-brand-block{
  display:flex;
  align-items:center;
  gap:40px;
  text-align:left;
  padding:50px 0 30px;
}
.footer-h4 .footer-logo-link{
  flex:0 0 auto;
}
.footer-h4 .footer-brand-address{
  flex:1 1 auto;
}
.footer-h4 .footer-brand-social{
  flex:0 0 auto;
}
.footer-h4 .footer-brand-address .block-contact{
  margin-top:0;
}
.footer-h4 .footer-brand-address .block-contact ul,
.footer-h4 .footer-brand-address .block-contact ul li{
  text-align:left;
}
/* email is an <a>, which picks up the global a{padding:1.25rem} rule and
   gets indented/offset — strip it so it lines up with address & phone */
.footer-h4 .footer-brand-address .block-contact li.email a{
  padding:0;
  display:inline;
}
@media (max-width: 767px){
  .footer-h4 .footer-brand-block{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:25px;
  }
}

/* Add-to-cart confirmation modal header:
   theme sets .modal-title{width:100%}, which fills the row and bumps the
   close button to a 2nd line + squeezes the title into wrapping. Force a
   clean flex row: title left on one line, close button pinned top-right. */
#blockcart-modal .modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  text-align:left;
  padding:15px 20px;
}
#blockcart-modal .modal-header .modal-title{
  width:auto;
  flex:1 1 auto;
  min-width:0;        /* allow the flex item to stay within the header */
  margin:0;
  padding-right:15px;
  font-size:16px;     /* trim slightly so it fits on one line */
}
#blockcart-modal .modal-header .close{
  flex:0 0 auto;
  float:none;
  margin:0;
  line-height:1;
}

/* The global input{width:90%;margin:...} rule also hits checkboxes/radios,
   stretching them across the row and pushing labels off. Keep them as a
   small box sitting to the LEFT of their label (e.g. "Use this address for
   invoice too" on the order page). */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  margin:0 8px 0 0;
  vertical-align:middle;
  display:inline-block;
}
input[type="checkbox"] + label,
input[type="radio"] + label{
  display:inline;
  vertical-align:middle;
}

/* Mobile header (header-2): logo left, then account + cart icons, then the
   hamburger/menu on the far right. The hamburger toggle is bundled inside the
   mega-menu column, so we reorder the three header columns with flexbox order
   rather than moving markup (keeps the menu's open/close JS intact). */
@media (max-width: 767px){
  .header-top .header-flex{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
  }
  /* logo — left, takes the free space */
  .header-top .header-flex .left-header{
    order:1;
    flex:1 1 auto;
    width:auto;
    max-width:none;
  }
  /* sign-in + cart icons */
  .header-top .header-flex .right-header{
    order:2;
    flex:0 0 auto;
    width:auto;
    max-width:none;
    display:flex;
    align-items:center;
  }
  /* hamburger / menu — moved to the FAR LEFT so the "≡ MENU" toggle is clearly
     visible (it was clipped against the right edge before) */
  .header-top .header-flex .megamenu{
    order:0;
    flex:0 0 auto;
    width:auto;
    max-width:none;
    margin-left:0;
    margin-right:12px;   /* gap between the hamburger and the logo */
  }
  /* hide the account/sign-in icon on mobile — sign-in now lives in the menu */
  .header-top .header-flex .right-header .rb-login{
    display:none;
  }
}

/* Mobile: hide the top utility bar (.header-nav.nav_2 — phone / currency /
   language / sign-in). On phones its 3 columns overlap and the global
   .fa{font-size:2rem} + a{padding:1.25rem} overflow the row. Nothing is lost:
   currency & language stay in the hamburger menu (#mobile_top_menu_wrapper)
   and sign-in stays on the account icon in the main header row. */
@media (max-width: 767px){
  .header-nav.nav_2{
    display:none;
  }
}

/* Sign-in + language live INSIDE the mega-menu (rbthememenu) drawer as extra
   <li>s. Show them only on mobile (the drawer is the hamburger panel); on
   desktop the same <ul> is the horizontal menu bar, so hide them there. */
@media (min-width: 768px){
  .rb_menus_ul .rb-mobile-extra{ display:none !important; }
}
@media (max-width: 767px){
  /* language: plain inline links (English / Français), current one bold/underlined */
  .rb_menus_ul .rb-mobile-lang .rb-lang-link{
    display:inline-block;
    margin-right:24px;
    padding:4px 0;
    text-transform:uppercase;
  }
  .rb_menus_ul .rb-mobile-lang .rb-lang-link.current{
    font-weight:bold;
    text-decoration:underline;
  }
}

/* ===================================================================
   SITE-WIDE TYPOGRAPHY NORMALISATION — responsive scale
   The homepage builder (#rb) and CMS pages were authored with a jumble of
   tags and inline font-sizes. Normalise to a consistent scale. Base = DESKTOP
   (larger); a mobile override (≤767px) steps everything down. !important beats
   the inline styles. (Header / layout fixes elsewhere remain mobile-only.)

     role            desktop   mobile
     CMS page title    31px      26px
     section titles    27px      22px
     body              22px      17px
   =================================================================== */

/* --- DESKTOP (base, applies at all widths unless overridden below) --- */
/* Homepage builder (#rb): titles vs body */
#rb h2.rb-heading-title,
#rb h4.title_block,
#rb h3.rb-image-box-title,
#rb h3.rb-title{
  font-size:27px !important;
  line-height:1.3 !important;
}
/* classless headings are body copy here (the content authors used h2/h3/h4/h5
   interchangeably for paragraphs — e.g. FR "Laissez-nous…" is an <h2>, EN the
   same text is an <h4>). Real section titles all carry a class, so they're
   excluded by :not([class]). */
#rb h2:not([class]),
#rb h3:not([class]),
#rb h4:not([class]),
#rb h5:not([class]),
#rb p,
#rb p.font_8{
  font-size:22px !important;
  line-height:1.6 !important;
  font-weight:400 !important;
}
/* CMS pages: page title / section titles / body */
.page-cms h1{ font-size:31px !important; line-height:1.3 !important; }
.page-cms h2,
.page-cms h3{ font-size:27px !important; line-height:1.3 !important; }
.page-cms h4,
.page-cms h5,
.page-cms h6,
.page-cms p,
.page-cms li,
.page-cms td,
.page-cms div{ font-size:22px !important; line-height:1.6 !important; font-weight:400 !important; }
/* inline-styled <span> inherits its (now-normalised) parent size */
.page-cms span{ font-size:inherit !important; line-height:inherit !important; }
/* images/video never exceed their container, any screen size */
.page-cms img,
.page-cms iframe,
.page-cms video{ max-width:100% !important; height:auto !important; }

/* --- MOBILE (≤767px): step the scale down --- */
@media (max-width: 767px){
  #rb h2.rb-heading-title,
  #rb h4.title_block,
  #rb h3.rb-image-box-title,
  #rb h3.rb-title{ font-size:22px !important; }
  #rb h2:not([class]),
  #rb h3:not([class]),
  #rb h4:not([class]),
  #rb h5:not([class]),
  #rb p,
  #rb p.font_8{ font-size:17px !important; }
  .page-cms h1{ font-size:26px !important; }
  .page-cms h2,
  .page-cms h3{ font-size:22px !important; }
  .page-cms h4,
  .page-cms h5,
  .page-cms h6,
  .page-cms p,
  .page-cms li,
  .page-cms td,
  .page-cms div{ font-size:17px !important; }
  /* keep wide tables from overflowing on phones */
  .page-cms table{ display:block; max-width:100% !important; width:auto !important; overflow-x:auto; }
}

/* Category page description block (#category-description) — section-title scale
   (27px desktop / 22px mobile), matching the rest of the site. */
#category-description,
#category-description h1,
#category-description h2,
#category-description h3,
#category-description h4,
#category-description p{
  font-size:27px !important;
  line-height:1.4 !important;
}
@media (max-width: 767px){
  #category-description,
  #category-description h1,
  #category-description h2,
  #category-description h3,
  #category-description h4,
  #category-description p{ font-size:22px !important; }
}