/* thefrenchgame bridge overrides — PrestaShop always loads this file LAST,
   so rules here win over common.css and swiper.min.css. */

/* Mega-menu submenu: span the full viewport width (the mockup's original JS
   positioned it; position:fixed needs explicit left/right to stretch). */
#cbp-hrmenu .cbp-hrsub {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

/* Minicart: the legacy theme opened .cart_block via JS hover — pure CSS here. */
#header .shopping_cart:hover .cart_block {
  display: block;
}

/* Minicart product name: the live shop's themeeditor override shrinks it to
   12px/14px with no bottom padding (base rule in common.css is 13px/16px). */
.cart_block .cart-info .cart_block_product_name {
  padding-bottom: 0;
  font-size: 12px;
  line-height: 14px;
  display: inline-block;
}

/* Swiper adaptions so our design rules win over its defaults. The live shop
   runs the swiper@9 CDN stylesheet with its stock 44px navigation box and a
   30px glyph (common.css .swiper-button-*::after) — keep the same 44px box. */
.swiper {
  --swiper-navigation-size: 44px;
}

/* Homepage DNA/testimonial text column: common.css reserves an 89px right
   gutter meant for the desktop 2-column layout, but never scopes it to a
   min-width media query — squeezing content left on mobile. */
@media (max-width: 767px) {
  .col-xs-12.col-sm-12.col-md-6.tfgcontent-column.tfgcontent-element.tfgcontent-element-id-101 {
    padding-right: 10px !important;
  }
}

/* Mobile/tablet listing toolbar: the grid/list switcher + "Show:"/"Sort by"
   selects sit in .content_sortPagiBar .sortPagiBar (products-top.tpl). Those
   children are float-based (common.css), which collapses to a zero-height
   row once the item count text is hidden below 999px — put them in a single
   flex row (grid icon left, Show/Sort selects right) matching the live site. */
@media (max-width: 999px) {
  .content_sortPagiBar .sortPagiBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }
  .content_sortPagiBar .view-and-count {
    float: none;
    order: 1;
  }
  .content_sortPagiBar .sortPagiBar .nbrItemPage {
    float: none;
    order: 2;
    margin-bottom: 0;
  }
  .content_sortPagiBar .sortPagiBar #productsSortForm {
    float: none;
    order: 3;
    margin-left: 0;
    margin-bottom: 0;
    flex: 1;
  }
  .content_sortPagiBar .sortPagiBar .nbrItemPage select,
  .content_sortPagiBar .sortPagiBar #productsSortForm select {
    float: none;
    width: 100%;
    max-width: 160px;
  }
}

/* Slider arrows: draw a crisp CSS chevron instead of relying on Swiper's
   icon-font glyph (content:'prev'/'next' from the swiper-icons webfont),
   which can fall back to an ugly system glyph if the font doesn't load.
   This renders one clean, thin taupe chevron for every swiper site-wide. */
.swiper-button-next,
.swiper-button-prev {
  font-weight: normal;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border: solid #B0A497;
  border-width: 2px 2px 0 0;
  font-size: 0; /* neutralise the inherited 30px icon-font sizing */
}
.swiper-button-prev::after {
  transform: rotate(-135deg);
  margin-left: 4px;
}
.swiper-button-next::after {
  transform: rotate(45deg);
  margin-right: 4px;
}
.swiper-button-next:hover::after,
.swiper-button-prev:hover::after {
  border-color: #8f8477;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: .35;
}

/* Birthdate: three side-by-side selects (day/month/year) instead of a single
   date input, matching the live 1.6 site's registration form. */
.birthday-selects {
  display: flex;
  gap: 10px;
}
.birthday-selects select {
  flex: 1;
  max-width: 140px;
}

/* Category description video: center it and give it a real 16:9 box
   (no rules existed for .category-video-responsive inside the expanded
   category description, so the iframe rendered tiny and left-aligned). */
#category_description_full .category-video-wrapper{width:100%;max-width:960px;margin:20px auto 10px;clear:both}
#category_description_full .category-video-responsive{position:relative;width:100%;height:0;padding-top:56.25%;overflow:hidden}
#category_description_full .category-video-responsive iframe.category_desc_video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media (max-width:768px){#category_description_full .category-video-wrapper{margin:12px auto 6px}}

/* Product page prev/next navigation arrows (breadcrumb right side), ported
   from the live 1.6 site's #productsnavpn rules. */
#productsnavpn{font-size:20px;position:relative;top:-3px}
#productsnavpn a{color:#dddddd}
#productsnavpn a:after{content:"";display:none}
#productsnavpn a:hover{color:#777}


/* Quickview modal styling used to live here, written against the stock PS9
   quickview (compact 830px preview, PS9 ul.product-images thumbs, touchspin
   spinners hidden). The quickview has since been rebuilt to 1.6 parity:
   templates/catalog/_partials/quickview.tpl now emits the same primary_block /
   pb-left-column / pb-center-column markup as the product page, so product.css
   supplies the inner styling (including the 1.6 qty box and its
   .product_quantity_up/.down chevrons — which the old block wrongly hid, live
   does show them) and cart-modal.css owns the dialog metrics (1087x610, the
   exact fancybox size configured in live's js/global.js). Rules removed rather
   than kept, to avoid two competing sources of truth. */

/* Pack price: "Instead of ..." sits inline right after the current price,
   like the live product page (no tax label shown there either). */
.box-cart-bottom .product-prices,
.box-cart-bottom .pack_price {
  display: inline-block;
  vertical-align: baseline;
}
.box-cart-bottom .pack_price {
  margin: 0 0 0 6px;
}
/* Discounted price: "Instead of <old>" inline after the price (live style, no badge) */
.box-cart-bottom .price p {
  display: inline-block;
  vertical-align: baseline;
  margin: 0;
}
.box-cart-bottom .price .pack_price {
  margin-left: 6px;
}
.box-cart-bottom .price #old_price {
  text-decoration: none; /* only the amount is struck, not "Instead of" */
}

/* Discount/sale flag badge (product-flags.tpl): .product-flags renders plain
   spans (no <li>) but category.css's absolute-positioning rule for it was
   written for the core <li> markup, so with no in-flow children the box
   collapses to 0 width at the tile's left edge. .sale-label's right:0 then
   anchors against that 0-width box and bleeds the badge left of the tile.
   Anchor it at the same left edge as the other flags instead. */
.js-product-miniature .sale-label {
  left: 0;
  right: auto;
}

/* Listing price: strike the old price, keep the current price undecorated */
.content_price .regular-price {
  text-decoration: line-through;
  color: #999;
  margin-right: 4px;
}

/* Mobile accordion menu: E-Shop's own link must navigate like a normal page
   link (tfg-theme.js no longer preventDefaults on it); expand/collapse of
   its sub-categories is now a dedicated .submenu-toggle control next to it.
   common.css's old ::after +/- indicator lived on the anchor itself (from
   when the whole anchor toggled the submenu) — hide it so it doesn't
   overlap the new control, and lay the row out so the toggle sits flush
   right with a comfortably tappable ~44px hit area. */
#tfgmegamenu-accordion > li:has(> ul) > a::after {
  display: none;
}
#tfgmegamenu-accordion > li:has(.submenu-toggle) {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}
#tfgmegamenu-accordion > li:has(.submenu-toggle) > a {
  flex: 1;
}
#tfgmegamenu-accordion > li > ul {
  flex-basis: 100%;
}
.submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  cursor: pointer;
  /* the row's divider lives on the anchors (.cbp-spmenu-vertical a), and
     E-Shop's anchor is flex:1 beside this control — carry the same border
     so the line runs the full row width instead of stopping at the chevron */
  border-bottom: 1px solid #cecece;
}
.submenu-toggle .icon-chevron-down {
  transition: transform 0.2s ease;
}
#tfgmegamenu-accordion > li.sub-open .submenu-toggle .icon-chevron-down {
  transform: rotate(180deg);
}

/* Mobile cart popup (header.tpl #mh-cart-drop): panel dropped below the
   condensed header, toggled by tfg-theme.js adding/removing .show.
   Reuses the shared .mh-drop class for its collapsed-by-default box model,
   but common.css's generic ".mobile-condensed-header .mh-drop" rule (which
   the search/user drops rely on) also sets opacity:0/visibility:hidden at
   higher specificity than a plain ".mh-cart-drop.show" rule can beat — match
   that selector's specificity so our .show state actually paints visible. */
@media (max-width: 999px) {
  .mh-cart-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 20;
    background: #fff;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  }
  .mh-cart-drop.show {
    display: block;
  }
  header .mobile-condensed-header .mh-drop.mh-cart-drop.show {
    opacity: 1;
    visibility: visible;
  }
}
.mh-cart-drop-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #333;
}
.mh-cart-drop-products {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.mh-cart-drop-product {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dotted #ddd;
}
.mh-cart-drop-image img {
  width: 60px;
  height: auto;
  display: block;
}
.mh-cart-drop-info {
  flex: 1;
}
.mh-cart-drop-name {
  display: block;
  font-size: 13px;
}
.mh-cart-drop-attributes {
  font-size: 11px;
  color: #777;
}
.mh-cart-drop-price {
  font-size: 13px;
  white-space: nowrap;
}
.mh-cart-drop-totals-line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dotted #ddd;
}
.mh-cart-drop-total {
  font-weight: bold;
}
.mh-cart-drop-checkout {
  display: block;
  margin-top: 12px;
  background: #000;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 12px;
}
.mh-cart-drop-checkout:hover {
  background: #333;
  color: #fff;
}
.mh-cart-drop-empty {
  text-align: center;
  margin: 10px 0;
}

/* Checkout personal-information step: only the active tab (guest / sign in) shows */
#checkout .tab-content .tab-pane { display: none; }
#checkout .tab-content .tab-pane.active { display: block; }

/* Pack products: MORE INFO / DATA SHEET stacked in the right column under add-to-cart */
.pb-center-column .more_info_block { margin-top: 30px; }
.pb-center-column .more_info_block .page-product-box { width: 100%; }
.pb-center-column .more_info_block iframe { width: 100%; }

/* Contact page SEND button: contact.css already renders it black via the
   plain ".form-footer button" selector; this is just a defensive backstop
   scoped to the contact page in case a shared blue .btn-primary class ever
   ends up back on the markup, so it can never regress on-page again. */
body#contact .form-footer button {
  background: #000;
  color: #fff;
  border: none;
}
body#contact .form-footer button:hover {
  background: #333;
}
/* SEND sits bottom-right like the live contact page */
body#contact .form-footer {
  text-align: right;
}

/* Secure payment / Privacy Policy CMS page (id 5) — match live: plain text
   lines, no list bullets, logos stacked in the left column. */
.page-cms-5 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-cms-5 ul li {
  margin: 0 0 2px;
  padding: 0;
}
.page-cms-5 .paiement-img img {
  display: block;
}