/* ============================================================
PLP DESIGN-SYSTEM TOKENS — source de verite unique (etape 1)
Palette / typo / rayons / conteneurs / rythme / ombres.
Breakpoints canoniques : 749/750 (mobile/desktop) + 990/989 (tablette).
============================================================ */
:root{
/* Palette */
--plp-accent:#2279be; /* bleu accent unique (liens, icones, CTA) */
--plp-accent-deep:#002b31; /* teal foncE (fin de gradient CTA) */
--plp-navy:#0e2a44; /* navy foncE unique */
--plp-ink:#121212; /* slate texte fort */
--plp-mu:rgba(18,18,18,.6); /* texte muted */
--plp-line:rgba(18,18,18,.10);/* lignes / bordures fines */
--plp-off:#f6f8fa; /* fond off-white */
--pill-border:#e5e7eb; /* bordure des pills eyebrow */
/* Gradient CTA */
--plp-cta:linear-gradient(90deg,#2279be,#002b31);
--plp-cta-hover:linear-gradient(90deg,#002b31,#2279be);
/* Rayons */
--radius-card:16px; --radius-image:18px; --radius-pill:20px; --radius-btn:9999px;
/* Conteneurs */
--content-1120:1120px; --page-1200:1200px; --text-820:820px;
/* Rythme vertical des sections */
--plp-section-y:72px; --plp-section-y-m:52px;
/* Ombres */
--plp-shadow:0 1px 2px rgba(16,20,26,.05),0 14px 34px -14px rgba(79,96,104,.26);
--plp-shadow-hover:0 2px 4px rgba(16,20,26,.06),0 20px 44px -16px rgba(79,96,104,.34);
/* Cartes (verre / glass) */
--plp-card-bg:rgba(154,174,181,.22); --plp-card-border:rgba(255,255,255,.6); --plp-card-blur:blur(14px);
/* Typo */
--plp-body-size:16px; --plp-body-lh:1.7;
}
body {overflow-x: hidden;}
details[open]>.header__submenu li {
margin-bottom: 10px;
}
details[open]>.header__submenu li:last-child {
margin: 0px;
}
.section+.section {
position: relative;
}
body {
font-size: 18px;
line-height: normal;
font-weight: 400 !important;
color: #00000080 !important;
}
body.index div#shopify-section-sections--17729088356514__icon_grid_column_jqNKwn {
display: none;
}
a.sold-out-btn {
opacity: 0.5;
pointer-events: none;
}
header.page-width,
.notice-banner .page-width {
max-width: 100%;
}
body.index main#MainContent {
position: relative;
}
.header--middle-left {
grid-template-columns: 1fr auto 1fr !important;
}
ul.list-menu.list-menu--inline {
gap: 2rem;
}
ul.list-menu.list-menu--inline a.header__menu-item {
padding: 0px;
text-decoration: none !important;
}
summary.list-menu__item {
padding: 0px;
padding-right: 2.7rem;
}
ul.list-menu.list-menu--inline a.header__menu-item span {
text-decoration: none !important;
}
.header__icons {
gap: 0;
flex-direction: row;
justify-content: space-between;
padding: 0px;
}
.header__icons svg {
width: 28px;
height: 28px;
}
.header__icons a#cart-icon-bubble {
margin: 0px;
}
a.header__heading-link {
padding: 0px;
margin: 0px;
}
.header__menu-item span,
ul.list-menu.list-menu--inline a.header__menu-item span {
font-size: 16px;
font-weight:600;
}
.sub-title{
font-size:30px;
}
.multicolumn .sub-title{
font-size:24px;
font-weight: 600;
}
.multicolumn .sub-title strong {
color: #7d7d7d;
font-weight: 600;
}
.header-wrapper {
border: 0px;
}
.button {
border-radius: 9999px !important;
background: var(--plp-cta);
}
.button:before,.button:after {
content: none;
}
div#FacetsWrapperDesktop {
display: none;
}
form#FacetFiltersForm {
display: flex;
width: 100%;
flex-direction: row-reverse;
justify-content: space-between;
}
.active-facets.active-facets-desktop {
display: none;
}
.facet-filters.sorting select {
border: 1px solid #e3e5e6;
border-radius: 20px;
padding: 8px 26px;
outline: none;
font-weight: 700;
color: #031825;
font-size: 18px;
appearance: none;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDQ0OCA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwNy4wMjkgMzgxLjQ3NkwxMi42ODYgMTg3LjEzMmMtOS4zNzMtOS4zNzMtOS4zNzMtMjQuNTY5IDAtMzMuOTQxbDIyLjY2Ny0yMi42NjdjOS4zNTctOS4zNTcgMjQuNTIyLTkuMzc1IDMzLjkwMS0uMDRMMjI0IDI4NC41MDVsMTU0Ljc0NS0xNTQuMDIxYzkuMzc5LTkuMzM1IDI0LjU0NC05LjMxNyAzMy45MDEuMDRsMjIuNjY3IDIyLjY2N2M5LjM3MyA5LjM3MyA5LjM3MyAyNC41NjkgMCAzMy45NDFMMjQwLjk3MSAzODEuNDc2Yy05LjM3MyA5LjM3Mi0yNC41NjkgOS4zNzItMzMuOTQyIDB6Ii8+PC9zdmc+) no-repeat;
-moz-appearance: none;
-webkit-appearance: none;
background-position: right 20px center;
background-size: 13px auto;
}
.facet-filters__field .select svg {
display: none;
display: none;
}
h2.facet-filters__label.caption-large.text-body {
display: none;
}
h2.product-count__text.text-body span {
font-size: 16px;
font-weight: 700;
color: #777;
margin-bottom: 40px;
padding-top: 20px;
}
.facet-filters.sorting select:focus {
outline: none !important;
box-shadow: none;
}
.facet-filters__sort:focus-visible {
outline: none;
box-shadow: none;
}
.footer_marquee {
overflow: hidden;
display: flex;
}
.footer_marquee h2, .footer_marquee span {
tw-gradient-to: #002B31 ;
-webkit-background-clip: text;
background-clip: text;
--tw-gradient-from: #2279BE ;
--tw-gradient-to: rgb(34 121 190 / 0) ;
--tw-gradient-stops: ;
}
.footer_marquee h2, .footer_marquee span{
font-size: 160px;
white-space: nowrap;
text-transform: uppercase;
margin-top:0px !important;
margin-bottom:0px !important;
font-weight:700;
background-image: linear-gradient(to right,#002B31,#2279BE); /* Linear gradient */
-webkit-background-clip: text; /* Clip the background to the text */
color: transparent; /* Make the text color transparent so the gradient shows through */
opacity:0.3;
position:relative;
top:0; /* etait 50px : le conteneur overflow:hidden coupait la moitie basse des lettres */
}
.marquee_two,
.marquee {
overflow: hidden;
gap: 20px;
display: flex;
position: relative;
z-index: 1;
}
.marquee_two h2,
.marquee h2 {
-webkit-text-stroke: 3px #002B31;
font-size: 160px;
white-space: nowrap;
text-transform: uppercase;
margin-top:0px !important;
margin-bottom:0px !important;
color:#fff;
}
.styled-header{
font-size: 18px;
display: flex;
align-items: center;
justify-content: space-between;
width: fit-content;
gap: 10px;
border-radius: 20px;
margin: 0px;
line-height: normal;
height: auto;
}
.styled-header span {
background-image: linear-gradient(to right, #002B31, #2279BE); /* Linear gradient from #002B31 to #2279BE */
-webkit-background-clip: text; /* Clip the background to the text */
color: transparent; /* Make the text color transparent so the gradient shows through */
}
.styled-header {
border: 1px solid #e5e7eb;
padding: 5px 20px;
}
.styled-header span {
font-size: 18px;
}
.flex-header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.flex-header a.button {
padding: 0px;
margin: 0px;
min-height: auto;
background: transparent;
border: 0px !important;
display: flex;
gap: 0.5rem;
color: #A3A3A3;
letter-spacing: 0px;
font-size: 16px;
text-decoration: underline;
justify-content: space-between;
}
.flex-header a.button:before,.flex-header a.button:after {
content: none;
}
.card.card--standard.card--media {
border: 1px solid #e3e5e6;
border-radius: 10px;
float: none;
width: 100%;
padding: 5px 5px 12px;
background-color: #fff;
margin: 0;
}
img.motion-reduce {
background: #fff;
}
quantity-input.quantity input:focus {
outline: none;
box-shadow: none;
}
.card__heading a {
color: #031825;
font-size: 24px;
padding: 0 13px;
font-weight: 700;
line-height: 120%;
/*text-transform: capitalize;*/
transition: all .3s ease-in-out;
height: 60px;
width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 20px;
text-decoration: none;
}
.card__heading a:hover {
color: #0e2a44;
transition: all .3s ease-in-out;
text-decoration: none;
}
.card-information {
padding: 0 13px;
}
.card-information span{
color: #2279be;
text-decoration: none;
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
}
.collapsible-content-wrapper-narrow {
max-width: 100% !important;
padding-left: 35px !important;
padding-right: 35px !important;
}
.accordion summary h3.accordion__title {
font-size: 24px;
font-weight: 600;
}
.accordion summary h3.accordion__title span {
color: #484c48b3;
}
.accordion summary {
justify-content: space-between;
}
.accordion summary:hover {
text-decoration: none;
background: transparent;
}
.collapsible-content summary:hover .accordion__title {
text-decoration: none;
}
.accordion summary svg.hide {
display: none;
}
.accordion summary[aria-expanded="true"] .show {
display: none;
}
.accordion summary[aria-expanded="true"] .hide {
display: block;
}
.accordion summary h3+span {
background: linear-gradient(90deg, #2279be, #002b31);
border-radius: 9999px;
line-height: normal;
height: 24px;
width: 48px;
display: flex;
align-items: center;
justify-content: center;
}
h3.caption-with-letter-spacing {
margin: 0px;
border: 1px solid #e3e5e6;
padding: 0.75rem 1.75rem;
border-radius: 9999px;
font-size: 18px;
line-height: 1;
letter-spacing: 0px;
text-transform: none;
gap: 0.5rem;
display: flex;
width: max-content;
height: auto;
margin-bottom: 20px;
}
body.product main#MainContent {
padding-top: 145px;
}
/* mobile : le main a déjà margin-top:120px (header mobile) → éviter le double espacement */
@media screen and (max-width: 749px){
body.product main#MainContent { padding-top: 8px; }
}
.global-media-settings {
border: 0px;
}
.prod_add_info {
background: #000;
padding: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.prod_add_info p,.prod_add_info p a {
color: #fff;
font-size: 18px;
font-weight: 500;
}
.stock {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 3px 10px;
border-radius: 20px;
}
.stock.in-stock {
background-color: #22c55e1a;
border: 1px solid rgba(34, 197, 94, .1);
}
.stock.out-stock {
background-color: #ff33334d;
border: 1px solid rgba(34, 197, 94, .1);
}
.stock.in-stock span {
font-size: 12px;
color: #22c55e;
text-transform: capitalize;
}
.stock.out-stock span {
font-size: 12px;
color: #f33;
text-transform: capitalize;
}
body.product {
background: #fcfcfc;
}
.dot.stock {
display: block;
position: relative;
}
.dot:after {
content: "";
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
position: relative;
top: 3px;
}
.dot.in-stock:after {
background-color: #4ade80;
}
.dot.out-stock:after {
background-color: #f33;
}
.dot {
width: 10px;
height: 10px;
display: grid;
place-items: center;
border-radius: 50%;
}
.dot.out-stock {
background-color: #ff33334d;
}
.prod_add_info {
background: #000;
padding: 20px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
position:relative;
z-index:1;
}
.prod_add_info p,.prod_add_info p a {
color: #fff;
font-size: 18px;
font-weight: 500;
}
.stock {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 2px 12px;
border-radius: 20px;
}
.stock.in-stock {
background-color: #22c55e1a;
border: 1px solid rgba(34, 197, 94, .1);
}
.stock.in-stock span {
font-size: 12px;
color: #22c55e;
text-transform: capitalize;
}
.dot.out-stock,
.dot.in-stock {
display: block;
position: relative;
}
.dot:after {
content: "";
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
position: relative;
top: 3px;
}
.dot.in-stock:after {
background-color: #4ade80;
}
.dot {
width: 10px;
height: 10px;
display: grid;
place-items: center;
border-radius: 50%;
}
.dot.in-stock {
background-color: #4ade804d;
}
.product__tax.caption.rte,
.product-form__quantity .form__label {
display:none;
}
.product-form__input.product-form__quantity {
max-width: max-content;
float: left;
margin: 0px;
}
product-form.product-form {
float: left;
margin: 0px 20px !important;
}
.product__description.rte.quick-add-hidden {
clear: both;
margin-top: 20px;
float: left;
}
.missoncontent_gird h2,.missoncontent_gird p {
margin: 0px;
}
.mc-grid {
margin-top: 30px;
}
.mc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.image-with-text__content .image-with-text__text.rte.body .mc-grid p {
color: #121212;
font-size: 60px;
font-weight: 600;
}
.image-with-text__content .image-with-text__text.rte.body .mc-grid p span {
font-size: 18px;
font-weight: normal;
}
.image-with-text__content .image-with-text__text.rte.body .mc-grid p {
display: flex;
flex-direction: column;
}
.missoncontent_gird h2 {
font-size: 30px;
color: #121212;
font-weight: 600;
}
.missoncontent_gird h2 span {
color: #7d7d7d;
}
.image-with-html .image-with-text__grid.grid {
display: flex;
flex-direction: row-reverse;
}
.image-with-html .image-with-text__grid.grid .grid__item {
flex-basis: 40%;
}
.card__inner.color-scheme-2.gradient.ratio {
border-bottom: 1px solid #f1f5f9;
}
.card-information a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart{
display:none !important;
}
.card-information a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart, .quick-add__submit.button {
background: transparent;
border: 0px;
padding: 0px;
height: auto;
line-height: normal;
min-height: auto;
}
.card-information a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:before, .quick-add__submit.button:before,.card-information a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart:after, .quick-add__submit.button:after {
content: none;
}
.card-information {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.cart-count-bubble {
bottom: auto;
top: 0px;
color: #fff;
}
.card-information span.caption-large.light {
display: none;
}
.card-information a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart span {
text-decoration: underline;
color: #777;
font-size: 16px;
text-transform: capitalize;
letter-spacing: 0px;
}
.card-information a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
display: flex;
gap: 4px;
}
.card-information a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart svg path {stroke: #2279be;}
body.page\.contact .page-width.page-width--narrow {
display: none;
}
.contactcontainer .page-width {
display: grid;
grid-template-columns: 1fr 1fr;
}
.contact_grid {
display: flex;
gap: 20px;
align-items: center;
justify-content: flex-start;
}
.contact_grid .cont-icon {
width: 72px;
height: 72px;
background: #0e2a44;
display: flex;
align-items: center;
justify-content: center;
border-radius: .375em;
}
.contact_grid .cont-icon svg path {
stroke: #fff;
}
.contact_details {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 50px;
}
.cont-det span {
color: #828284;
font-size: 16px;
}
.cont-det {
display: flex;
flex-direction: column;
gap: 4px;
}
.cont-det a {
text-decoration: none;
color: #000;
font-size: 20px;
}
.contact_form {
background-color: #fff;
border-radius: 10px;
padding: 40px;
display: grid;
gap: 16px;
position: relative;
}
.contact__fields {
display: flex !important;
flex-direction: column !important;
}
.field__input, .customer .field input {
border: 1px solid rgba(18,18,18,.10);
}
.field:before,.field:after {
content: no-close-quote;
}
body h2.title {
font-size: clamp(23px,2.8vw,32px);
line-height: 1.15;
font-weight: 600;
margin-top: 40px;
}
.contact_form .field input,.contact_form .field textarea {border: 0px;background: transparent;}
.contact_form .field:before,.contact_form .field:after {
border: none;
outline: none;
content: none;
}
.contact_form .field textarea:focus,.contact_form .field input:focus {outline: none;border: none;box-shadow:none;}
label.field__label{ text-transform:none; font-size:13px; }
.contact__button button.button {
background: linear-gradient(90deg, #2279be, #002b31);
color: #fff;
font-weight: 700;
padding: 10px;
border-radius: 6px;
cursor: pointer;
display: block;
position: relative;
width: 100%;
transition: all .3s ease;
letter-spacing: 0px;
}
.contact__button button.button:before,.contact__button button.button:after {
content:none;
}
.contact__button button.button:hover {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
quantity-input.quantity {
border: 0px;
}
quantity-input.quantity:before,quantity-input.quantity:after {
content: none;
}
quantity-input.quantity input {
background: #fff;
}
.product__description.rte.quick-add-hidden {color: #0009;padding-bottom: 25px;border-bottom: 1px solid rgba(0, 0, 0, .1);margin-bottom: 25px;margin-top: 0px;}
.price__regular .price-item--regular {
font-size: 32px;
}
.product-form__buttons {
max-width: 100%;
}
.product-form__buttons {
width: fit-content;
}
.product-form__buttons svg {
width: 40px;
height: 40px;
}
.product-form__buttons button {
padding: 6px 20px !important;
border-radius: 9999px !important;
background: linear-gradient(90deg,#2279be,#002b31);
gap: 10px;
}
.product-form__buttons button span {
font-weight: 700;
letter-spacing: 0px;
font-size: 18px;
text-transform: capitalize;
}
quantity-input.quantity input {
text-align: center;
color: #2279be;
font-weight: 500;
border: 0;
font-size: 20px;
}
.quantity-input.quantity .svg-wrapper>svg {
width: 20px !important;
height: 20px !important;
}
.quantity__button svg path {
fill: #121212;
}
.product-form__input .svg-wrapper {
width: 20px;
}
/*footer*/
.footer-block__image-wrapper {
width: 200px;
}
.footer-block__image-wrapper img {
width: 100%;
}
.footer__content-top.page-width {
max-width: 100%;
padding: 0 5rem;
}
footer.footer {
padding: 30px !important;
background: #f6f6f6;
}
footer.footer .footer__content-top.page-width {
border-radius: 20px;
background: #fff;
padding: 0px;
}
.first_row{
padding: 30px 50px 0;
}
footer.footer .footer__content-top .first_row {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
footer.footer .footer__content-top.page-width .menu-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
}
.footer__content-bottom.scroll-trigger.animate--slide-in {
display: none;
}
.footer_bottom {
text-align: center;
padding-top: 1rem;
}
span.font-bold.text-brand-blue {
color: #0e2a44;
font-weight: 700;
}
p.text-lg {
font-size: 18px;
margin: 0px;
}
p.text-gray-400 {
font-size: 12px;
line-height: normal;
color: #9ca3af;
margin: 0px;
}
.second_row {
overflow: hidden;
}
footer.footer {
padding-bottom: 1rem !important;
}
.image-with-text__media {
background: transparent !important;
border: 0px;
}
.image-with-text__media img {
object-fit: contain !important;
}
details[open]>.header__submenu {
background: #fff;
padding: 10px;
border-radius: 0 0 5px 5px;
width: 15rem;
}
details[open]>.header__submenu a.header__menu-item {
font-size: 14px;
font-weight: 600;
}
/*cart page*/
body.cart .title-wrapper-with-link {
display: none;
}
body.cart .cart-items td {
padding: 10px 0 !important;
}
body.cart .cart-items td img.cart-item__image {
width: 32px;
height: 32px;
}
body.cart .cart-items td a.cart-item__link {
display: none;
}
body.cart .cart-item__details>*+* {
width: auto !important;
padding: 0px !important;
margin: 0px !important;
}
body.cart table {
border: 1px solid rgba(0,0,0,.1);
}
body.cart div#main-cart-items {
padding: 0px;
border: 0px;
}
body.cart .cart-items thead th {
text-align: center;
padding: 10px;
}
body.cart .cart-items *.right {
text-align: left !important;
}
body.cart span.price.price--end {
text-align: left;
}
body.cart .cart-item__quantity-wrapper {
justify-content: center;
}
a.button.button--tertiary {
min-height: auto;
min-width: auto;
background: transparent;
}
td.cart-item__media {
width: auto;
}
quantity-popover .quantity {
min-height: auto;
}
/*cart page*/
body.about-us .image-with-text__content .image-with-text__text.rte.body p {
font-size: 18px;
line-height: 1.3;
margin-bottom: 20px;
color: #39373880;
}
.button.button--primary svg {
width: 40px;
height: 40px;
}
.button.button--primary {
gap: 10px;
color: #fff;
font-weight: 600;
border-radius: 9999px !important;
background: linear-gradient(90deg,#2279be,#002b31);
padding-right: 6px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.button.button--primary:hover{
background: linear-gradient(90deg,#002b31,#2279be);
}
.section-template--17735739605154__image_with_text_VkBF8C-padding.gradient.color-scheme-6db32e35-39b4-4de4-a39c-5bda667abda0 {
background: url('http://avloee-tx.myshopify.com/cdn/shop/files/about_page_mockup.png') no-repeat;
background-size: 50%;
}
.page-width.page-width--narrow.section-template--17735739605154__main-padding {
display: none;
}
.section-template--17735739605154__image_with_text_VkBF8C-padding.gradient.color-scheme-6db32e35-39b4-4de4-a39c-5bda667abda0 img {
display: none;
}
.card__badge.bottom.left {
display: none;
}
.banner__buttons a.button.button--primary {
padding: 5px;
}
.multicolumn-card__info .inline-richtext {
font-size: 22px;
font-weight: 600;
}
.multicolumn-card__info .rte p {
margin: 0px;
line-height: 1.3;
}
@media screen and (max-width: 1024px) {
.header--middle-left {
grid-template-areas: "heading icons left-icons";
grid-template-columns: 40% 55% 5%!important;
}
.menu-drawer__navigation-container {background: #fff;}
.js .menu-drawer__submenu {
background: #fff;
}
div#menu-drawer {
box-shadow: inset 0 25px 50px -12px rgb(0 0 0 / .25);
}
.menu-drawer__utility-links {
display: none;
}
nav.menu-drawer__navigation {
padding: 2rem;
}
.list-menu__item {
background: transparent;
align-items: center;
justify-content: center;
}
.menu-drawer summary.menu-drawer__menu-item {
padding-right: 0px !important;
}
ul.menu-drawer__menu.has-submenu.list-menu li:hover {
background: transparent;
}
.menu-drawer__menu-item--active, .menu-drawer__menu-item:focus, .menu-drawer__close-button:focus, .menu-drawer__menu-item:hover, .menu-drawer__close-button:hover {
background: transparent;
}
.menu-drawer__menu-item {
padding-left: 0px;
padding-right: 0px;
}
nav.menu-drawer__navigation {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
}
@media screen and (min-width: 768px) {
/*.header-wrapper.color-scheme-cfab03de-7b3d-41dd-8de3-c7d13cc457d9.gradient.header-wrapper--border-bottom {
margin-top: 5.8rem;
}*/
}
@media screen and (min-width: 1025px) {
.card__media {
min-height: 375px;
border-bottom: 1px solid #f7f7f7;
}
.card__media img {
object-fit: contain !important;
}
.card__content {
display: flex !important;
flex-direction: column-reverse !important;
}
.card__inner.color-scheme-2.gradient.ratio {
border: 0 !important;
}
nav.header__inline-menu {
display: flex;
align-items: center;
justify-content: center;
}
.header-wrapper.color-scheme-cfab03de-7b3d-41dd-8de3-c7d13cc457d9.gradient.header-wrapper--border-bottom {
padding-left: 5rem;
padding-right: 5rem;
position: absolute;
width: 100%;
max-width: 100%;
}
header.header.header--middle-left.header--mobile-left.page-width.header--has-menu.header--has-account {
border-radius: 9999px;
background:#fff;
padding-top: .75rem;
padding-bottom: .75rem;
}
header.header.header--middle-left.header--mobile-left.page-width.header--has-menu.header--has-account {
box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgb(0 0 0 / .25);
}
media-gallery.product__column-sticky {
display: flex;
flex-direction: row-reverse;
}
media-gallery.product__column-sticky slider-component.slider-mobile-gutter {
width: 80%;
}
media-gallery.product__column-sticky slider-component.thumbnail-slider {
width: 20%;
}
media-gallery.product__column-sticky slider-component.thumbnail-slider .thumbnail-list.slider--tablet-up {
flex-direction: column;
}
media-gallery.product__column-sticky slider-component.thumbnail-slider .thumbnail-list.slider--tablet-up li{
width: 100%;
}
media-gallery.product__column-sticky slider-component.thumbnail-slider .thumbnail-list.slider--tablet-up li button {
width: 100%;
border: 3px solid #2279be;
border-radius: 20px;
overflow: hidden;
box-shadow: none;
}
media-gallery.product__column-sticky slider-component.thumbnail-slider .thumbnail-list.slider--tablet-up li button[aria-current="true"] {
width: 100%;
border-color: #002b31;
}
media-gallery.product__column-sticky slider-component.thumbnail-slider .thumbnail-list.slider--tablet-up li:before {
border: 0px;
}
.thumbnail[aria-current] {
box-shadow: none;
border: 0px;
}
}
loo-lists-bar.loo-lists-bar.loo-pf.loo-centerright {
z-index: 1 !important;
}
.card__information h3 a {
margin: 0px;
}
a#customAddToCart,.quick-add__submit.button {
position: relative;
z-index: 5;
}
a#customAddToCart,.quick-add__submit.button {
padding: 5px;
min-width: max-content;
gap: 10px;
background: linear-gradient(90deg, #2279be, #002b31);
color: #fff;
border-radius: 9999px !important;
}
a#customAddToCart:hover,.quick-add__submit.button:hover{
background: linear-gradient(90deg, #002b31, #2279be);
}
a#customAddToCart svg,.quick-add__submit.button svg {
width: 24px;
height: 24px;
}
a#customAddToCart span,.quick-add__submit.button span {
color: #fff;
text-decoration: none;
font-weight: 600;
margin-left: 1.0rem;
font-size: 15px;
text-transform: capitalize;
}
a#customAddToCart:hover span, .quick-add__submit.button:hover span {
text-decoration: none;
}
.card-wrapper.product-card-wrapper.underline-links-hover:hover a#customAddToCart {
text-decoration: none !important;
}
.card-wrapper.product-card-wrapper.underline-links-hover {}
a#customAddToCart span, .quick-add__submit.button span {
text-decoration: none !important;
}
.custom-add-to-cart-button{
display:none;
}
.center.collection__view-all a {
padding: 5px 10px;
gap: 10px;
background: linear-gradient(90deg, #2279be, #002b31);
color: #fff;
border-radius: 9999px !important;
}
.center.collection__view-all a,.center.collection__view-all a span {
text-decoration: none;
}
.center.collection__view-all a svg {
width: 32px;
height: 32px;
}
.center.collection__view-all a span {
margin-left: 5px;
}
.center.collection__view-all a:hover {
background: linear-gradient(90deg, #002b31, #2279be);
}
/*Home blog posts*/
body.index .blog__posts.articles-wrapper .article-card-wrapper.card-wrapper{
display:none;
}
body.index .article-details {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
border: 1px solid #e3e5e6;
border-radius: 8px;
padding: 20px;
}
body.index .article-details img {
width: 100%;
height: 100%;
max-width: 100%;
}
body.index .article-card__excerpt,
body.index .article-card__excerpt p {
font-size: 16px;
line-height: 130%;
color: #00000080;
font-weight: 400;
}
body.index .article-card__info,
body.index .article-card__info span {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
body.index .article-card__info span.circle-divider:after {
content: none;
}
body.index .article-card__info {
gap: 16px;
}
body.index .article-details .article_img {
width: 100%;
height: 300px;
}
body.index .article-details .article_img img {
object-fit: contain;
}
body.index .article-details h3.card__heading.h2 a {
padding: 0px;
}
body.index .article-card__excerpt, body.index .article-card__excerpt p {
margin-bottom: 0px;
}
/*Home blog posts*/
@media screen and (max-width: 767px) {
body.product section.product-section.comparisontable.product-count-1 .page-width {
padding: 0px;
}
.image-with-text__text.rte.body p {
line-height: 130% !important;
}
/*Home blog posts*/
/*body.index .article-details .article_img {
height: auto;
}
body.index .article-details a.full-unstyled-link {
margin: 15px 0px;
line-height: 140%;
}
body.index .article-card__excerpt, body.index .article-card__excerpt p {
font-size: 14px;
line-height: 140%;
}
body.index .article-details {
margin: 0 15px;
}
body.index .blog__posts.articles-wrapper {
gap: 15px;
}
body.index .blog__posts.articles-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 15px;
margin-bottom: 20px;
align-items: flex-start;
}
body.index .blog__posts.articles-wrapper li.blog__post.article {
width: 100%;
}
body.index .blog__posts.articles-wrapper li.blog__post.article .article-details {
margin: 0px;
padding: 0;
overflow: hidden;
}
body.index .blog__posts.articles-wrapper li.blog__post.article .article-details a.full-unstyled-link {
text-align: left;
margin-top: 0px;
}
body.index .blog__posts.articles-wrapper li.blog__post.article .article-details .article_content {
padding: 10px;
}
body.index .blog__posts.articles-wrapper li.blog__post.article .article-details .article-card__info {flex-direction: column;gap: 4px;}
body.index .article-details .article_img {
height: 130px;
}*/
body.index .blog__posts .article-card__info {
margin-top: 10px;
}
body.index .blog__posts .article-card__info span.circle-divider time,
body.index .blog__posts .article-card__info span.author-blog {
position: relative;
top: 4px;
}
.multicolumn .sub-title ,
.image-with-text__content h2.image-with-text__heading.inline-richtext.h2 {
font-size: 19px !important;
}
.image-with-text__content .image-with-text__text.rte.body p {
font-size: 16px !important;
}
body.index .article-details h3.card__heading.h2 a {
font-size: 19px;
line-height: 130%;
}
/*Home blog posts*/
.modal-content {
width: 90% !important;
}
.popcontent {
display: block;
margin-top: 20px;
}
.modal-content p, .modal-content p a {
font-size: 16px;
}
.modal-content {
min-height: 440px;
}
.close-btn {
margin-bottom: 15px;
padding-bottom: 15px;
}
.section-template--17735739605154__image_with_text_VkBF8C-padding.gradient.color-scheme-6db32e35-39b4-4de4-a39c-5bda667abda0 {
background: no-repeat;
}
.section-template--17735739605154__image_with_text_VkBF8C-padding.gradient.color-scheme-6db32e35-39b4-4de4-a39c-5bda667abda0 img {
display: block;
}
body.about-us .image-with-text__grid.grid.grid--gapless.grid--1-col.grid--2-col-tablet {
/*flex-direction: column-reverse;*/
}
.image-with-text--overlap .image-with-text__content {
width: 100% !important;
}
footer.footer .footer__content-top .first_row {
flex-direction: column;
padding: 20px;
}
footer.footer .footer__content-top .first_row .menu-container {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap:30px;
}
ul.footer-block__details-content.list-unstyled {
margin: 0px;
}
footer.footer .footer__content-top .first_row .menu-container a.link.link--text.list-menu__item.list-menu__item--link {
justify-content: flex-start;
padding: 0px;
}
h2.footer-block__heading.inline-richtext {
font-size: 20px;
}
.footer-block__details-content {
margin: 0px;
}
.footer-block__details-content li a {
font-size: 16px;
color: #909090;
}
a.link.link--text.list-menu__item.list-menu__item--link {
text-decoration: none;
}
header.header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
padding-left:15px;
padding-right:15px;
}
.banner--adapt {
height: 100vh !important;
}
.banner__box.content-container {
background: transparent;
position: absolute;
top: 80px;
padding: 0px 20px;
text-align: left;
height: max-content;
}
h1.banner__heading.inline-richtext.h1,
.banner__text.rte.body p {
}
.banner__buttons > svg {
display: none;
}
a.button.button--primary {
padding-top: 0px;
padding-bottom: 0px;
}
.banner__text.rte.body p {
font-size: 14px;
}
h1.banner__heading.inline-richtext.h1 {
font-size: 30px;
line-height: normal;
letter-spacing: 0px;
}
.banner__box.content-container h2 {
font-size: 14px;
}
.marquee_two h2, .marquee h2 {
font-size:48px;
-webkit-text-stroke-width: 1px;
}
.multicolumn.background-none .multicolumn-card {
text-align: center;
}
h3.sub-title {
text-align: center;
font-size: 20px;
font-weight: 600;
}
.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin.multicolumn__title {
/*justify-content: center;*/
justify-content: flex-start;
}
.image-with-html .image-with-text__grid.grid {
flex-direction: column-reverse;
}
.missoncontent_gird h2 {
font-size: 20px;
}
.mc-grid {
display:flex;
flex-direction:column;
gap:20px;
}
.image-with-text__content .image-with-text__text.rte.body .mc-grid p{
font-size:36px !important;
line-height: 1.1 !important;
}
.image-with-text__content .image-with-text__text.rte.body .mc-grid p span {
font-size:18px;
margin-top:5px
}
.card__heading a {
font-size: 14px;
line-height: normal;
text-align: center;
height: auto;
margin: 0px;
}
.price__regular .price-item--regular {
font-size: 14px;
}
.card-information {
flex-direction: column;
}
.styled-header span {
font-size: 14px;
}
h2.title.inline-richtext.h2 {
margin: 0px;
}
.flex-header a.button {
margin: 0px;
font-size: 14px;
gap: 0px;
max-width: fit-content;
}
.image-with-text__content {
padding-top: 0px;
}
.section-template--17729088061602__custom_liquid_UtiMVy-padding {
padding: 0;
}
.prod_add_info {
text-align: center;
line-height: 1.3;
}
.multicolumn-card__info .inline-richtext {
font-size: 18px !important;
font-weight: 600;
}
.multicolumn-card__info .rte p{
font-size:14px !important;
}
.multicolumn-card.content-container {
margin: 0 5rem;
}
.image-with-text__content {
padding: 0px !important;
}
.multicolumn-list li:last-child .multicolumn-card__info {
padding-bottom: 0px;
}
.multicolumn-list .multicolumn-card__info {
padding-bottom: 1rem;
}
.flex-header a.button {
/*width: 100px;*/
margin: 0px;
justify-content: flex-end;
gap: 5px;
}
.page-width.section-template--17729087897762__multicolumn_76XgzL-padding.isolate.scroll-trigger.animate--slide-in h3.sub-title {
display: block;
width: auto;
text-align: center;
}
.flex-header a.button svg {
width: 24px;
height: 24px;
}
.flex-header {
align-items: center;
justify-content: space-between;
}
.flex-header a.button {
width: auto;
margin: 0px !important;
}
.contactcontainer .page-width{
grid-template-columns:1fr;
gap:40px;
}
.contact_form {
padding: 10px 0;
}
.contact .field {
margin: 0px;
}
.contact__button {
margin: 0px;
padding: 20px;
padding-top: 0px;
}
label.form__label.field__label {
color: #0006;
}
label.field__label{ color:rgba(18,18,18,.6); font-size:13px; }
h2.title.title-wrapper--no-top-margin.inline-richtext.h1.scroll-trigger.animate--slide-in {
font-size: 24px;
line-height: 1.3;
}
.contact_grid .cont-icon {
width: 50px;
height: 50px;
}
.cont-det a {
font-size: 16px;
}
body.contact .page-width.page-width--narrow.section-template--17729087963298__main-padding {
display: none;
}
.banner--mobile-bottom .banner__box {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
.mc-grid{
margin-bottom:40px;
}
}
@media screen and (min-width: 768px) and (max-width: 992px) {
body.index .article-details .article_img {
height: auto;
}
body.index .article-details h3.card__heading.h2 a {
font-size: 20px;
height: 50px;
}
.icon_grid {
flex-direction: column;
}
.icon_grid .icon_details .icon_code {
position: absolute;
right: 20px;
}
.icon_content h6 {
font-size: 18px;
}
.icontent p {
font-size: 14px;
}
.icontent p a {
font-size: 16px;
}
.newsletter_flex.page-width {
grid-template-columns: 1fr;
width: 100%;
gap: 40px;
padding: 0;
}
.newsletter__wrapper {
padding-left: 2rem;
padding-right: 2rem;
}
.newsletter_form {
width: 100%;
max-width: 100%;
}
.newsletter-form,.newsletter__wrapper .newsletter-form__field-wrapper {
max-width: 100rem;
}
.newsletter-form__field-wrapper .field {
margin: 0px;
}
.contactcontainer .page-width{
grid-template-columns:1fr;
gap:40px;
padding: 0 2rem;
}
.contact_form {
padding: 10px 0;
}
.contact .field {
margin: 0px;
}
.contact__button {
margin: 0px;
padding: 20px;
padding-top: 0px;
}
label.form__label.field__label {
color: #0006;
}
label.field__label{ color:rgba(18,18,18,.6); font-size:13px; }
h2.title.title-wrapper--no-top-margin.inline-richtext.h1.scroll-trigger.animate--slide-in {
font-size: 24px;
line-height: 1.3;
}
.contact_grid .cont-icon {
width: 50px;
height: 50px;
}
.cont-det a {
font-size: 16px;
}
body.contact .page-width.page-width--narrow.section-template--17729087963298__main-padding {
display: none;
}
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
header-drawer {
display: block;
}
nav.header__inline-menu {
margin-left: -1.2rem;
grid-area: navigation;
display: none;
}
}
button.button.button--tertiary.cart-remove-button {
background: none;
}
.card-wrapper.product-card-wrapper.unavailable-product a#customAddToCart {
display: flex !important;
}
/* mini-cart */
cart-drawer .cart-drawer-progress-container p{color: #000000; font-size: 15px; line-height: 20px;}
cart-drawer .header__heading-logo-wrapper img{max-height: 31px; max-width: 50%; object-fit: contain;}
cart-drawer .header__heading-logo-wrapper{ text-align: center;}
cart-drawer .cart-drawer-progress-container .cart-drawer-track{ height: 10px;}
cart-drawer .cart-drawer-progress-container .cart-drawer-reward-desc{ color: #000000;}
cart-drawer .drawer__cart-items-wrapper .cart-item__name{font-size: 15px; line-height: 20px; color: #000000; font-weight: bold;}
cart-drawer .drawer__cart-items-wrapper .cart-item__name:hover{opacity: .7; text-decoration: none;}
cart-drawer .drawer__cart-items-wrapper quantity-popover .quantity{ width: 100%;}
cart-drawer .drawer__cart-items-wrapper .quantity__button:last-child { border-radius: 0 15px 15px 0;}
cart-drawer .drawer__cart-items-wrapper .quantity__button:first-child { border-radius: 15px 0 0 15px;}
cart-drawer .cart-item__quantity-wrapper{justify-content: space-between;}
cart-drawer .cart-drawer .cart-item__totals{ align-items: flex-end;margin-top:0 !important;}
cart-drawer cart-remove-button .button{ justify-content: flex-end;}
cart-drawer .cart-drawer .cart-item__details .product-option{display:none;}
/*cart-drawer .cart-drawer .cart-item__details dl .product-option{display:block;}
cart-drawer .cart-drawer .cart-item__details dl .product-option dt {
font-weight: 600 !important;
color: #000;
font-size: 14px !important;
}*/
cart-drawer .cart-drawer .cart-item__image{ height: auto; max-height: 88px; width: 100%; object-fit: contain;}
cart-drawer .cart-drawer .cart-item{border-bottom: 1px solid rgba(0, 0, 0, .1); padding: 0 30px; padding-bottom: 20px;}
cart-drawer .drawer__footer{ border-top: 1px solid rgba(0, 0, 0, .1); background: #f6f6f7; padding: 23px;
}
cart-drawer cart-drawer-items{flex: 1;display: flex; flex-direction: column; position: relative;overflow: auto !important;}
cart-drawer .cart-drawer .cart-items{ height: 100%;}
/* cart-drawer cart-drawer-items .cart-extra-products {position: absolute;width: 100%;bottom: 0;} */
/* cart-drawer .cart-drawer .cart-items{ height: calc(100vh - 68vh);} */
cart-drawer .cart-drawer__form {flex: 1;}
cart-product-carousel .controls__wrapper h3 p{color: #000000;font-size: 15px;font-weight: bold;}
cart-drawer .carousel__item{ padding: 15px; background: #f6f6f7;}
cart-drawer .carousel__item .product-form__buttons #ProductSubmitButton-{ cursor: pointer; font-size: 14px; font-weight: 600; height: 36px !important; margin: 0; max-height: 36px !important; min-height: 36px !important; padding: 7px 16px !important; width: 100% !important; background: linear-gradient(90deg, #2279be, #002b31) !important;}
cart-drawer .carousel__item .product-form__buttons #ProductSubmitButton- span{ font-size: 14px;}
cart-drawer .carousel__item .product-form__buttons #ProductSubmitButton-:hover{background: linear-gradient(90deg, #002b31, #2279be) !important;opacity: 1 !important;}
cart-drawer .carousel__item .add-to-bag_container product-form.product-form { float: unset;}
cart-drawer .carousel__item .product-form__buttons{ width: 100%;}
cart-drawer .carousel__item .product-form__buttons svg{display:none;}
cart-drawer .cart-drawer-progress-container{ padding: 0 30px; width:100%;}
cart-drawer .drawer__close .svg-wrapper{align-items: center; background-color: #0000000c; border-color: #000000; border-radius: 40px; border-style: solid; border-width: 0; cursor: pointer; display: flex; height: 30px; justify-content: center; transition: background-color .2s; width: 30px;}
cart-drawer .drawer__close .svg-wrapper svg{ height: 33%; width: 33%;}
cart-drawer .cart-item__totals .compare-price{ color: #000000; opacity: 0.4; font-size: 15px; text-decoration-line: line-through;}
cart-drawer .cart-item__totals .price.price--end{font-size: 15px;}
cart-drawer .cart-item__price-wrapper .save-money-parent { display: flex; gap: 10px;}
cart-drawer .cart-item__price-wrapper span.save-money { color: #2ea818; font-size: 15px; font-weight: 800; line-height: 1.2;}
cart-drawer cart-product-carousel .carousel__track{ margin: 0 !important;gap:20px !important;}
cart-drawer cart-product-carousel .carousel__track .carousel__slide { flex: 0 0 100%; }
cart-drawer .cart-extra-products .carousel__track-container-parent{ overflow: hidden;
width: 100%;
position: relative;
padding: 0 30px 15px;}
cart-drawer cart-product-carousel .carousel__product-info .carousel__product-title a{ display: block; font-size: 15px; font-weight: 600; margin-bottom: 0px; margin-top: 0; overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
cart-drawer .drawer__inner{padding:0; border: none;box-shadow: none;}
cart-drawer .drawer__inner .drawer__header{ padding: 1.5rem 30px;}
cart-drawer .drawer__inner .drawer__header .drawer__close{ right: 10px;}
cart-drawer .cart-drawer .cart-item{ grid-template: repeat(2, auto) / repeat(3, 1fr);}
cart-drawer #cart-drawer-Addons .cart-drawer-addon-product__item{ margin-left: 0px;margin-top:0;}
cart-drawer #cart-drawer-Addons .cart-drawer-addon-product{margin:0;gap:20px; align-items: flex-start;}
cart-drawer #cart-drawer-Addons .addons-add__submit{padding: 0;}
cart-drawer #CartDrawer .cart-drawer-Addons span.price-item.price-item--sale{margin:0; font-size: 15px !important; font-weight: 600; color: #000000 !important;}
cart-drawer .cart-drawer-Addons [class~=variationSubdued] {color: #000000; opacity: 0.4; font-size: 13px; line-height: 16px; max-width: 95%;}
cart-drawer #CartDrawer-Checkout{padding: 14px !important; font-size: 15px !important; line-height: 1.5; max-width: 100%; font-weight: 600; text-decoration: initial; transition: opacity .3s; background: linear-gradient(90deg, #2279be, #002b31) !important; border-radius: 9999px !important;}
cart-drawer #CartDrawer-Checkout:hover{ background: linear-gradient(90deg, #002b31, #2279be) !important;opacity: 1 !important;}
cart-drawer .continue-shooping-parent img { width: 100%;}
cart-drawer .continue-shooping-parent p{color: #000000; font-size: 15px; text-align: center; margin-top: 5px;cursor: pointer;}
cart-drawer .continue-shooping-parent p:hover{ opacity: .5;}
.carousel__product-info span.price-item.price-item--sale{ color: #000000;}
cart-drawer-items::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
cart-drawer cart-product-carousel .product-form__buttons .product-form__submit{height: 36px !important; min-height: 36px !important;}
cart-drawer cart-product-carousel .product-form__buttons .product-form__submit span{ font-size: 14px;font-weight: 600;}
td.done-cart {
grid-column: 5 / 5;
}
cart-drawer .drawer__inner-empty{padding:0;}
cart-drawer .cart-extra-products .carousel__track-container-parent svg{ width: 25px; height: 25px;}
cart-drawer .cart-extra-products .carousel__track-container-parent .carousel__button--prev svg{transform: rotate(180deg);}
cart-drawer td.done-cart .cart-item__quantity-wrapper{ justify-content: flex-end;}
cart-drawer h2.cart__empty-text{ font-size: 22px;font-style: normal;font-weight: 400;line-height: 20px;margin:0;}
cart-drawer .cart-empty-btn-content{ color: #000000; padding: 0 30px; font-size: 18px; text-align: center; font-weight: 600;}
cart-drawer .cart-empty-btn-parent { margin-bottom: 25px; padding: 0 30px;}
cart-drawer.drawer.active{ z-index: 9999;}
cart-drawer.is-empty .cart-emty-none{display:none;}
cart-drawer.is-empty .cart-emty-block{display:block !important;}
cart-drawer.is-empty .cart-drawer-progress-container .cart-drawer-progress-container-one{ margin-bottom: 20px;}
cart-drawer.is-empty .drawer__inner-empty .cart-drawer-reward-circle{ border: 2px solid rgb(34, 121, 190) !important; background-color: rgb(226, 226, 226) !important; fill: rgb(34, 121, 190) !important;}
cart-drawer .art-empty-child a{ font-weight: 600; padding: 7px 14px; transition: background .25s ease; text-decoration: initial; cursor: pointer; background: linear-gradient(90deg,#2279be,#002b31); color: #FFFFFF; border-radius: 9999px; width: 100%; display: flex; text-align: center; justify-content: center; font-size: 15px !important;}
cart-drawer .art-empty-child a:hover{background: linear-gradient(90deg,#002b31,#2279be);}
body.overflow-hidden #smile-ui-lite-container{z-index:0 !important;}
cart-drawer #cart-drawer-Addons .cart-drawer-addon-product__item.toggle-btn{align-self: anchor-center;}
cart-drawer .carousel__product-price { margin-top: 4px !important; margin-bottom: 4px !important;}
cart-drawer cart-product-carousel .carousel__track .carousel__slide .carousel__item{border-radius:0;}
cart-drawer cart-product-carousel .carousel__product-info s.price-item.price-item--regular{ color: #000 !important;font-size: 12px !important;font-weight: 400;margin-right: 10px;opacity: .6;}
cart-drawer.is-empty .drawer__inner-empty .cart-extra-products, cart-drawer.is-empty .drawer__inner-empty .cart__login-title, cart-drawer.is-empty .drawer__inner-empty .cart__login-paragraph{display:none;}
@media screen and (max-width: 567px) {
cart-drawer cart-product-carousel .carousel__track .carousel__slide .carousel__item img{width: 100%;height: 100%;}
}
@media screen and (max-width: 767px) {
cart-drawer .cart-drawer .cart-item__details{ grid-column: 2 / 5; padding-left: 0rem !important;}
cart-drawer .cart-drawer .cart-item{ padding: 0 20px 20px; gap: 0;}
cart-drawer cart-product-carousel .carousel__track .carousel__slide .carousel__item{ align-items: center; padding: 7px;}
cart-drawer cart-product-carousel .carousel__track .carousel__slide .carousel__item img{max-height: 80px; max-width: 80px; width: 80px;}
cart-drawer cart-product-carousel .carousel__product-info{margin-left: 0px !important;}
cart-drawer cart-product-carousel .carousel__product-info .carousel__product-title a{ margin-bottom: 0px;}
cart-drawer .carousel__product-price { margin-top: 4px !important; margin-bottom: 4px !important;}
cart-drawer .cart-extra-products .carousel__track-container-parent{ padding: 0 20px 5px;}
cart-drawer .cart-extra-products .carousel__track-container-parent .carousel__button--prev {left: -8px;}
cart-drawer .cart-extra-products .carousel__track-container-parent .carousel__button--next { right: -8px;}
cart-drawer .drawer__inner{ width: 100%; max-width: calc(100vw - 0rem);}
cart-drawer #cart-drawer-Addons .cart-drawer-addon-product__item{margin-top: 0px; }
cart-drawer .drawer__footer{ padding: 23px;}
.carousel__product-info span.price-item.price-item--sale{font-size: 12px !important; font-weight: 500 !important; color: initial !important;}
.cart-drawer .cart-item:last-child { margin-bottom: 4px;}
cart-drawer .cart-drawer-Addonstitle__{ max-width: 95%;}
cart-drawer .cart-drawer-Addons [class~=variationSubdued]{ max-width: 94%;}
.cart-drawer .cart-items .cart-item__quantity{ padding-left: 0;}
}
product-recommendations.related-products .card__information .card-information .dflex {
flex-direction:column;
}
body.collection ul#product-grid li.grid__item .card__heading.h5 a {text-align: center;}
body.collection ul#product-grid li.grid__item .price__container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
}
body.collection ul#product-grid li.grid__item .price__container .price-item {
font-size: 16px !important;
margin: 0px;
}
body.collection ul#product-grid li.grid__item .dflex {
width: 100%;
}
body.collection a#customAddToCart,
body.collection .quick-add__submit.button {
z-index: 1;
}
.email-me-button.email-me-submitButton,
.product-restore-email .email-me-button.email-me-inlineButton{
color: #fff !important;
font-weight: 600 !important;
border-radius: 9999px !important;
background: linear-gradient(90deg, #2279be, #002b31);
padding: 8px 16px !important;
padding-right: 70px !important;
position: relative;
}
.email-me-button.email-me-submitButton:hover,
.product-restore-email .email-me-button.email-me-inlineButton:hover{
background: linear-gradient(90deg, #002b31, #2279be);
}
.product-restore-email {
width: 100% !important;
}
.button.button--primary {
width: fit-content;
}
.email-me-button.email-me-submitButton:after,
.product-restore-email .email-me-button.email-me-inlineButton:after {
position: absolute;
content: '';
width: 40px;
height: 40px;
background: #fff;
border-radius: 40px;
right: 6px;
}
.email-me-button.email-me-submitButton:before,
.product-restore-email .email-me-button.email-me-inlineButton:before {
position: absolute;
content: '';
width: 40px;
height: 40px;
background: url('https://cdn.shopify.com/s/files/1/0665/6612/7778/files/svg-arw.png') no-repeat;
border-radius: 40px;
right: 6px;
z-index:1;
}
.frame-email-logo svg path {
fill: #2279be;
}
.frame-email-logo svg {
margin: 0px !important;
}
.email-me-button.email-me-submitButton {
min-height: 52px !important;
}
.email-me-button.email-me-submitButton {
min-height: 52px;
}
.email-frame-body input:focus {
outline: none;
box-shadow: none;
}
/* ── Header : transparent full-width en haut → morph pill verre au scroll (mécanisme Qovigen, DA Prime Lab) ── */
.header{ background: rgba(154,174,181,.22) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.6); border-radius: 999px; box-shadow: 0 12px 30px -10px rgba(79,96,104,.30); }
.header__heading-link img, .header__heading-logo{ background:transparent !important; }
.header__inline-menu a, .header__inline-menu .header__menu-item, .header__active-menu-item, .header__menu-item{ color:#121212 !important; }
.header__icons a, .header__icon, .header__icons .svg-wrapper svg, .header__icons svg, .header__icon svg{ color:#121212 !important; }
.header__icons svg path[fill="#0e2a44"], .header__icons svg path[fill="#0e2a44"], .header__icon svg path[fill="#0e2a44"], .header__icon svg path[fill="#0e2a44"]{ fill:#121212 !important; }
.menu-drawer, .menu-drawer a, .menu-drawer summary, .menu-drawer *, .mega-menu, .mega-menu__content, .mega-menu__content a, .header__submenu, .header__submenu a{ color:#121212 !important; }
.timer-code-label{ color:#121212 !important; }
/* PLP-HEADER (revert=supprimer ce bloc) — annonce sous la nav ; transparent au top -> morph pill verre au scroll (TOUTES pages) */
.plp-promo-below{ position:static !important; background:transparent !important; border:0 !important; box-shadow:none !important; display:flex !important; justify-content:center; flex-wrap:wrap; margin:6px 0 8px !important; transition:opacity .25s ease, visibility .25s ease; }
.header{ transition: max-width .32s cubic-bezier(.4,0,.2,1), background-color .32s ease, box-shadow .32s ease, border-color .32s ease, padding .32s ease !important; }
.header-wrapper{ margin-top:0 !important; }
html body .header-wrapper.plp-top > .header.header.header.header.header{ max-width:100% !important; }
html body .header-wrapper:not(.plp-top) > .header.header.header.header.header{ max-width:1340px !important; margin-left:auto !important; margin-right:auto !important; border-radius:999px !important; }
.plp-promo-below.is-hidden{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
.shopify-section-group-header-group{ top:0 !important; }
.shopify-section-group-header-group.shopify-section-header-sticky{ top:0 !important; }
/* PLP-GROUP-TOP0 */
/* PLP-HEADER-END */
/* PLP-HEADER-MOBILE (revert=supprimer ce bloc) — miroir desktop : wrapper absolute overlay + promo sous nav ; home hero derriere nav, texte du hero poussé sous le header. Etendu a 1200 pour couvrir la zone morte 990-1200 (le menu desktop du theme ne s'affiche qu'a >=1201) */
@media(max-width:1200px){
.header-wrapper{ position:absolute !important; left:0 !important; right:0 !important; }
.header-wrapper > .header.header{ position:static !important; }
body.index #MainContent{ margin-top:0 !important; }
}
/* PLP-HEADER-MOBILE-END */
/* PLP-PROMO-1LINE (revert=supprimer ce bloc) — annonce mobile sur UNE ligne facon qovigen */
@media(max-width:768px){
.plp-promo-below.timer-header{ padding:9px 8px !important; }
.plp-promo-below .timer-content{ flex-direction:row !important; flex-wrap:nowrap !important; gap:6px !important; }
.plp-promo-below .timer-label{ font-size:clamp(9px,3vw,13px) !important; line-height:1.2 !important; white-space:nowrap !important; display:inline !important; }
.plp-promo-below .timer-highlight{ display:inline !important; font-size:1em !important; margin-bottom:0 !important; }
.plp-promo-below .timer-details{ display:inline !important; font-size:1em !important; white-space:nowrap !important; }
.plp-promo-below .timer-code{ padding:2px 7px !important; font-size:.92em !important; }
.plp-promo-below .timer-code-label{ font-size:.92em !important; }
}
/* PLP-PROMO-1LINE-END */
/* PLP-INTERNAL-SPACER (revert=supprimer ce bloc) — espace contenu pages internes = hauteur header (--plp-hh) + 26px, adaptatif desktop+mobile */
body:not(.index) #MainContent{ margin-top:0 !important; padding-top: calc(var(--plp-hh, 130px) + 22px) !important; }
@media(min-width:990px){
body:not(.index) #MainContent{ padding-top: calc(var(--plp-hh, 130px) + 50px) !important; }
}
/* PLP-INTERNAL-DESKTOP */
/* PLP-INTERNAL-SPACER-END */
/* PLP-NOHEADER-SPACER (revert=supprimer ce bloc) — les gabarits qui n'affichent PAS le header
du site (pages ebook, template custom-home : elles ont leur propre section custom-header)
n'ont rien a degager : la reserve d'espace ci-dessus y laissait ~150px de blanc en haut. */
body.custom-home #MainContent{ padding-top:0 !important; }
/* Filet de securite : toute page rendue sans .header-wrapper. Regle separee volontairement,
un navigateur sans :has() l'ignore sans invalider la regle precedente. */
body:not(.index):not(:has(.header-wrapper)) #MainContent{ padding-top:0 !important; }
/* PLP-NOHEADER-SPACER-END */
/* PLP-HEADER-GAP (revert=supprimer ce bloc) — petit espace au-dessus de la barre (transparent ET pill verre) */
.header-wrapper{ top:12px !important; }
/* PLP-HEADER-GAP-END */
/* PLP-HEADER-TABLET (revert=supprimer ce bloc) — neutralise le spacer transparent 11rem du theme (768-992) qui decalait le header */
@media screen and (min-width:768px) and (max-width:992px){
html body .header-wrapper.header-wrapper.header-wrapper.header-wrapper.header-wrapper{ margin-top:0 !important; }
}
/* PLP-HEADER-TABLET-END */
/* PLP-RESP-FIXES (revert=supprimer ce bloc) — correctifs responsive (audit 2026-07-23) */
@media(max-width:767px){
.footer_marquee h2, .footer_marquee span{ font-size:48px !important; top:0 !important; }
.multicolumn-card.content-container{ margin:0 1rem !important; }
}
.plp-pdp-chips{ flex-wrap:wrap !important; }
h3.caption-with-letter-spacing{ max-width:100% !important; }
/* PLP-RESP-FIXES-END */
/* PLP-HEADER-990-1200 (revert=supprimer ce bloc) — zone morte 990-1200 : force le header MOBILE (grille + hamburger) au lieu du menu desktop casse (menu vertical/ovale/absent) */
@media (min-width:990px) and (max-width:1200px){
.header.header--middle-left{ grid-template-columns:40% 55% 5% !important; grid-template-areas:"heading icons left-icons" !important; }
.header__inline-menu{ display:none !important; }
.header header-drawer{ display:block !important; grid-area:left-icons !important; justify-self:end !important; align-self:center !important; }
.header header-drawer .header__icon--menu{ display:flex !important; }
.menu-drawer-container{ display:flex !important; }
}
/* PLP-HEADER-990-1024-END */
/* PLP-HERO-SHIFT-GUARD (revert=supprimer) — le decalage -70px du hero home clippe a gauche <1301px ; ne le garder que >=1301 */
@media(max-width:1300px){ body.index .banner__box{ margin-left:0 !important; } }
/* PLP-HERO-SHIFT-GUARD-END */
/* PLP-HERO-BOX (revert=supprimer) — position du contenu hero home derriere la nav, scopee : mobile portrait (grand hero) vs 990-1200 (hero court ~576px -> petit push sinon le bouton deborde) */
@media(max-width:767px){ body.index .banner__box{ top: calc(var(--plp-hh, 142px) + 34px) !important; } }
@media(min-width:768px) and (max-width:1200px){ body.index .banner__box{ top:30px !important; } body.index .banner, body.index .banner.banner--medium, body.index .banner.banner--large{ min-height:560px !important; } }
/* PLP-HERO-BOX-END */
/* PLP-TITLE-DA (global, revert=supprimer ce bloc) — titres unifies : navy #0e2a44 + weight 600 + tight + accent bleu #2279be (comme .plp-boy__title). Home + PDP + toutes pages. */
.banner__heading,
.plp-ms__mission,
.plp-about-title,
.plp-newsletter__title,
.styled-header,
[id*="featured_collection"] .title,
.product__title h1,
.product-section__title,
.product-description__title,
.plp-ship h2, .plp-ship__head h2,
[id*="compare"] h2{ color:#0e2a44 !important; font-weight:600 !important; letter-spacing:-.01em !important; }
/* titres degrades/transparents (Featured Products, Bulk Offers) -> navy plein */
[id*="featured_collection"] .title, [id*="featured_collection"] .title *{ -webkit-text-fill-color:#0e2a44 !important; background-image:none !important; background:none !important; color:#0e2a44 !important; }
/* accents (2e phrase) -> bleu */
.plp-ms__mission .g,
.plp-ship h2 .g, .plp-ship__head h2 .g,
[id*="compare"] h2 span,
.plp-newsletter__title span, .plp-newsletter__title .g,
.product-section__title .g, .product-description__title .g,
.plp-about-title strong{ color:#2279be !important; -webkit-text-fill-color:#2279be !important; background:none !important; background-image:none !important; }
/* PLP-TITLE-DA-END */
/* PLP-HL-CARD-TAB (revert=supprimer) — petit onglet bleu centre en haut des cartes Prime Lab Highlights (comme .plp-ms__card mais centre) */
.plp-boy__card::after{
content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:34px; height:3px; background:#2279be; border-radius:0 0 3px 3px; z-index:3;
}
.plp-boy__card:hover::after{ background:#ffffff; }
/* PLP-HL-CARD-TAB-END */
/* PLP-CARD-ALIGN (revert=supprimer) — epingle prix+bouton (.dflex) en bas des cartes produit -> boutons alignes meme si le prix passe sur 1 vs 2 lignes (ex GHK-Cu). Related products + collections + grids. */
.product-grid .card.card--standard > .card__content{ display:flex; flex-direction:column; flex:1 1 auto; }
.product-grid .card__content > .card__information{ display:flex; flex-direction:column; flex:1 1 auto; }
.product-grid .card__information > .card-information{ display:flex; flex-direction:column; flex:1 1 auto; }
.product-grid .card-information > .dflex{ margin-top:auto !important; }
/* PLP-CARD-ALIGN-END */
/* PLP-KB-BAR (revert=supprimer) — petit trait bleu vertical sur l'arete gauche (partie haute, pas colle au bord haut) des cartes Our Key Benefits */
.icon_details{ position:relative; }
.icon_details::before{
content:""; position:absolute; left:0; top:24px;
width:3px; height:34px; background:#2279be; border-radius:0 3px 3px 0; z-index:2;
}
/* PLP-KB-BAR-END */
/* PLP-SHIP-CARD (revert=supprimer) — cartes "Packaged with care" : contenu centre verticalement (garde align gauche) + trait bleu vertical sur l'arete DROITE centre */
.plp-ship__c{ position:relative; align-items:center !important; }
.plp-ship__c::before{
content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
width:3px; height:34px; background:#2279be; border-radius:3px 0 0 3px; z-index:2;
}
/* PLP-SHIP-CARD-END */
/* PLP-PROMO-TIGHT (revert=supprimer) — rapproche la barre d'annonce de la barre de menu (moins d'espace au-dessus) */
.plp-promo-below{ margin-top:2px !important; padding-top:8px !important; }
/* PLP-PROMO-TIGHT-END */
/* PLP-HEADER-MOBILE-TOP (revert=supprimer) — mobile : header colle plus au top (gap 12->4) */
@media(max-width:749px){
.header-wrapper{ top:4px !important; }
}
/* PLP-HEADER-MOBILE-TOP-END */
/* PLP-NL-TITLE-SIZE (revert=supprimer) — titre Newsletter plus petit pour tenir sur une ligne */
@media(max-width:749px){ }
/* PLP-NL-TITLE-SIZE-END */
/* PLP-ABOUT-CHIPS (revert=supprimer) — bande About = chips catalogue (mots), valeurs plus petites pour tenir */
.plp-about-stat-number{ font-size:19px !important; white-space:nowrap; }
.plp-about-stats{ gap:16px !important; }
@media(max-width:749px){ .plp-about-stat-number{ font-size:16px !important; } .plp-about-stats{ gap:10px !important; } }
/* PLP-ABOUT-CHIPS-END */
/* PLP-BUYROW (revert=supprimer) — quantite + Add To Cart sur une ligne alignee, bouton pousse a droite */
.plp-buyrow{ display:flex !important; width:100%; align-items:center; justify-content:space-between; gap:16px; }
.plp-buyrow *{ float:none !important; }
.plp-buyrow .product-form__quantity{ margin:0 !important; flex:0 0 auto; }
.plp-buyrow > div:last-child{ flex:0 0 auto; margin:0 !important; }
.plp-buyrow .product-form, .plp-buyrow .product-form__buttons{ margin:0 !important; }
.plp-buyrow .product-form__submit{ width:auto !important; }
@media(max-width:749px){ .plp-buyrow{ gap:10px; flex-wrap:nowrap; } .plp-buyrow .product-form__quantity{ flex:0 0 auto; } .plp-buyrow > div:last-child{ flex:1 1 auto; } .plp-buyrow .product-form__buttons{ width:100%; } .plp-buyrow .product-form__submit{ width:100% !important; } }
/* PLP-BUYROW-END */
/* PLP-NOTIFY-RESTOCK (revert=supprimer) — conteneur du formulaire back-in-stock Omnisend, pose SOUS .plp-buyrow.
Il etait auparavant dedans : .plp-buyrow est un flex row, le formulaire se retrouvait colle a droite du
selecteur de quantite. Omnisend n'injecte le formulaire que sur les produits en rupture, d'ou le :empty
qui evite une marge fantome quand le produit est en stock. */
/* ⚠️ Pas de margin-top ici : Dawn applique deja `.product__info-container > * + * { margin:1.5rem 0 }`
(= 15px, la font-size racine du theme est a 10px), et cette regle est chargee APRES
customize.css donc elle gagne a specificite egale. Un `margin-top` pose ici serait une
declaration morte. 15px est de toute facon le rythme vertical de toute la colonne produit. */
.plp-notify-restock{ width:100%; }
.plp-notify-restock:empty{ display:none; margin:0 !important; }
/* Le formulaire est rendu par Omnisend : son editeur ne connait ni les degrades ni les etats
hover, il ne stocke que des couleurs plates. On rejoue donc ici la DA des CTA du theme
(cf .button.button--primary plus bas) sur le bouton et le champ injectes. Le selecteur est
volontairement l'id du formulaire : si le formulaire est remplace, la regle devient inerte
au lieu de deteindre sur autre chose. */
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f button{
background:linear-gradient(90deg,#2279be,#002b31) !important;
transition:background .3s, box-shadow .1s;
font-weight:600 !important;
/* Omnisend pose un border 2px de la couleur du bouton. Sur un aplat il est invisible, mais
sur notre degrade (qui s'assombrit vers la droite) il ressortait en lisere bleu. Les CTA du
theme sont en border:0 — on l'enleve ici aussi, en plus du reglage cote Omnisend, pour que
rouvrir l'editeur du formulaire ne le fasse pas revenir. */
border:0 !important;
}
/* L'API Omnisend n'accepte que bold|normal comme graisse : elle rend donc du 700 la ou la DA
du theme est a 600 (titres de section et CTA). On ramene les deux a 600 ici. */
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f strong{ font-weight:600 !important; }
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f button:hover{
background:linear-gradient(90deg,#002b31,#2279be) !important;
}
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f input:focus{
border-color:#2279be !important;
outline:none;
}
/* Rangee champ + bouton. Omnisend la rend en flex-wrap avec deux colonnes 67%/33% et
AUCUN gap : les deux se touchaient. On pose le gap de la DA (16px, celui de .plp-buyrow)
et on laisse le flex decider — les colonnes sont ciblees par ce qu'elles contiennent
(:has) parce que la section titre utilise les memes classes generees. */
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f [class*="-section-"]{ gap:16px; }
/* Le libelle du bouton ne doit jamais se couper : en 33% de colonne, « Notify Me » passait
sur deux lignes des que la colonne produit se resserrait (breakpoint 750-1100px, ou la
grille produit est en 2 colonnes mais Omnisend n'est pas encore en mode mobile).
flex-basis:auto + min-width : le bouton garde sa largeur naturelle, et quand le champ ne
peut plus tenir 220px la rangee wrappe — bouton pleine largeur sous le champ. */
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f button{ white-space:nowrap; }
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f [class*="-column-"]:has(input){ flex:1 1 220px; }
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f [class*="-column-"]:has(button){ flex:0 1 auto; min-width:160px; }
/* Ce qui compte ici n'est pas la largeur de l'ecran mais celle de la COLONNE produit : entre
750px et ~1100px la grille passe en 2 colonnes et cette colonne tombe a ~350px, alors
qu'Omnisend n'est pas encore en mode mobile. Une media query viewport se tromperait de
mesure — d'ou la container query. Seuil = 220 (champ) + 16 (gap) + 160 (bouton) + marge. */
.plp-notify-restock{ container-type:inline-size; }
@container (max-width:420px){
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f [class*="-column-"]:has(input),
#omnisend-embedded-v2-6a89616cc8c1603e9077a30f [class*="-column-"]:has(button){
flex:1 1 100%;
min-width:0;
}
}
/* PLP-NOTIFY-RESTOCK-END */
/* PLP-MARQUEE-MOBILE : footer marquee plus petit en mobile */
@media(max-width:749px){ .footer_marquee h2, .footer_marquee span{ font-size:24px !important; line-height:1.35 !important; letter-spacing:.4px !important; } }
/* PLP-ROW-TITLE : titres rangees produit (Related / Frequently bought together) alignes sur la DA eyebrow home (.plp-boy__eyebrow) : 18px/400 texte degrade */
.related-products__heading.styled-header{ font-size:18px !important; font-weight:400 !important; letter-spacing:.6px !important; background-image:linear-gradient(to right,#002B31,#2279BE); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent !important; }
@media(max-width:749px){ .related-products__heading.styled-header{ font-size:15px !important; } }
/* PLP-EYEBROW-DA : eyebrows produit (science + shipping) sur la DA home (.plp-boy__eyebrow). ⚠️ inline-block (PAS flex) sinon -webkit-background-clip:text laisse le texte transparent/invisible. */
.product-section__subtitle, .product-description__label, .plp-ship__eye, .plp-cmp__eye, .bac-info__label, .plp-blog__eyebrow, .plp-cintro__eye{
display:inline-block !important; border:1px solid #e5e7eb !important; border-radius:20px !important; padding:5px 20px !important;
background-color:transparent !important; background-image:linear-gradient(to right,#002B31,#2279BE) !important;
-webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important;
font-size:18px !important; font-weight:400 !important; letter-spacing:.6px !important; text-transform:none !important; line-height:1.15 !important; margin-bottom:16px !important;
}
.product-section__subtitle::before, .product-description__label::before, .plp-ship__eye::before, .plp-cmp__eye::before, .bac-info__label::before, .plp-blog__eyebrow::before, .plp-cintro__eye::before{
content:""; display:inline-block; vertical-align:middle; width:18px; height:14px; margin:-2px 8px 0 0;
background:url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
@media(max-width:749px){ .product-section__subtitle, .product-description__label, .plp-ship__eye, .plp-cmp__eye, .bac-info__label, .plp-blog__eyebrow, .plp-cintro__eye{ font-size:15px !important; } }
/* PLP-COMPARE-DA : DA comparateur (colonne bleue + labels) copiee de plp-home-system.css (qui n'etait charge que sur la home) -> valable sur toutes les PDP */
.comparisontable .cd-products-comparison-table{border:1px solid rgba(18,18,18,.08) !important;border-radius:18px !important;box-shadow:0 18px 44px -18px rgba(79,96,104,.26) !important;background:#fff !important}
.comparisontable .features{background:#f6f8fa !important;border-right:1px solid rgba(18,18,18,.07) !important}
.comparisontable .features .top-info{color:rgba(18,18,18,.6) !important;letter-spacing:.14em !important}
.comparisontable .features .cd-features-list li{color:#121212 !important;font-weight:600 !important;letter-spacing:.03em !important}
.comparisontable .cd-features-list li{border-bottom:1px solid rgba(18,18,18,.05) !important}
.comparisontable .cd-products-columns .product{border-right:1px solid rgba(18,18,18,.06) !important}
.comparisontable .cd-products-columns .top-info h3{color:#121212 !important;font-weight:600 !important}
.comparisontable .feature-col.my-product{background:rgba(34,121,190,.06) !important;color:#0e2a44 !important;font-weight:700 !important;border-right:1px solid rgba(18,18,18,.06) !important}
.comparisontable .feature-col.my-product.cd-features-list-heading{background:rgba(34,121,190,.13) !important;color:#2279be !important}
.comparisontable .feature-col.compare-product{color:#9aa0aa !important;font-weight:500 !important}
.comparisontable .feature-col.compare-product.cd-features-list-heading{color:#9aa0aa !important}
.comparisontable .section_header h2{font-weight:600}
.comparisontable .section_header{margin-bottom:38px !important}
.comparisontable .section_header h2{margin-bottom:0 !important}
/* PLP-SECTION-TITLE (etape 4) : titre de section unique (32/24, 600, slate).
Gouverne les titres home/PDP concurrents ; les spans accent gardent leur traitement. */
.plp-boy__title, .plp-notice__title, .plp-about-title, .plp-newsletter__title, .plp-ship__head h2, .plp-mission__title{
font-size:clamp(23px,2.8vw,32px) !important; font-weight:600 !important; color:var(--plp-ink) !important; letter-spacing:.6px !important;
}
@media(max-width:749px){
.plp-boy__title, .plp-notice__title, .plp-about-title, .plp-newsletter__title, .plp-ship__head h2, .plp-mission__title{ font-size:24px !important; }
}
/* PLP-A11Y (etape 14) : parite focus/hover cartes + focus-visible visible */
.product-card-wrapper .card:focus-within,.card-wrapper:focus-within .card{ box-shadow:var(--plp-shadow-hover) !important; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--plp-accent); outline-offset:2px; border-radius:3px; }
/* PLP-BODY-COPY (etape 12) : corps de texte pages legales/contact -> 16px/1.7 */
.policy-container p, .policy-container li, .contact_form label:not(.field__label):not(.form__label), .contact_grid p{ font-size:16px !important; line-height:1.7 !important; }
/* ===== PLP-MOBILE-FIXES (QA responsive) ===== */
/* R05 tableaux/longs mots pages legales */
@media(max-width:749px){
.rte table{ display:block; width:100%; overflow-x:auto; }
.rte td,.rte th{ padding:.6rem; word-break:break-word; }
.rte p,.rte li{ overflow-wrap:anywhere; }
}
/* R06 champs contact non colles */
.contact__fields{ gap:16px; }
/* R07 cibles tactiles panier >=44px */
@media(max-width:749px){
.cart-drawer .quantity__button,.drawer .quantity__button,cart-drawer .quantity__button{ min-height:44px !important; }
.cart-drawer .quantity__input,.drawer .quantity__input{ min-height:44px !important; }
}
/* R09 titres FAQ raisonnables en mobile */
@media(max-width:749px){
.accordion summary h3.accordion__title,.accordion__title{ font-size:17px !important; line-height:1.35 !important; }
}
/* Blog : corps d'article lisible (.dcontent etait a 12px) */
.dcontent,.dcontent p,.dcontent li,.dcontent span{ font-size:16px !important; line-height:1.7 !important; }
/* PLP-MOBILE-FIXES2 (P2 responsive) */
@media(max-width:749px){
.collapsible-content-wrapper-narrow{ padding-left:18px !important; padding-right:18px !important; }
.contact_details{ margin-top:0 !important; }
}
/* PLP-PDP-FLOATERS (revert=supprimer ce bloc) — pages PRODUIT uniquement : les 2 flotteurs recentres
verticalement (miroir Qovigen) pour liberer le bas de l'ecran (future barre sticky Add-to-Cart).
- Pastille d'avis = .plp-badge-flottant (snippets/plp-avis-badge.liquid) -> milieu GAUCHE.
L'ancien badge injecte par GTM est masque par ce meme snippet.
- Bulle panier .custon-cart-section-btn (sections/custom-cart.liquid, fixed bottom/right)
-> milieu DROITE (garde son right existant 20/14px).
Ailleurs (home, collections...) : positions d'origine inchangees. */
body.product .plp-badge-flottant{ bottom:auto !important; top:50% !important; transform:translateY(-50%) !important; left:16px !important; }
body.product .custon-cart-section-btn{ bottom:auto !important; top:50% !important; transform:translateY(-50%) !important; }
/* PLP-PDP-FLOATERS-END */
/* PLP-DRAWER-UPSELL-BTN (revert=supprimer ce bloc) — le re-render JS du drawer (add/quantite)
enveloppe le bouton upsell du carousel dans .product-form__buttons -> il heritait des regles
du GROS bouton PDP (width:fit-content, padding 6px 20px, svg 40px) et retrecissait 241->122px.
On fige le format du rendu initial dans les DEUX etats. */
cart-drawer .product-form__buttons{ width:100% !important; max-width:100% !important; }
cart-drawer .product-form__buttons button{ width:100% !important; padding:7px 16px !important; }
cart-drawer .product-form__buttons svg{ width:20px; height:20px; }
cart-drawer .product-form__buttons button span{ font-size:15px; font-weight:600; }
/* PLP-DRAWER-UPSELL-BTN-END */
/* PLP-DRAWER-REMOVE-CENTER (revert=supprimer) — l'icone corbeille etait en justify-content:flex-end
dans son bouton 45x45 -> collee au bord droit (tap zone asymetrique + halo de tap decentre). */
cart-drawer cart-remove-button button{ justify-content:center !important; }
/* PLP-HERO-RESERVE (revert=supprimer ce bloc) — CLS : la hauteur du hero home est reservee
DES LE PREMIER LAYOUT (ce fichier est render-blocking au head). Sans ca, la section hero
passe de 0 a 100vh pendant la phase pre-paint (parsing incremental) et Chrome/Lighthouse
comptent cette expansion comme un layout shift de score ~1.0. */
@media screen and (max-width: 767px){
body.index #MainContent > .shopify-section:first-child{ height:100vh; }
body.index #MainContent > .shopify-section:first-child .banner{ height:100vh !important; }
}
/* PLP-HERO-RESERVE-END */
/* PLP-ATC-ARROW-MOBILE (revert=supprimer ce bloc) — PDP mobile : la fleche ronde du bouton
Add To Cart principal reduite 40->32px (meme geste que l'icone du FAB cart) et poussee
au bord DROIT du bouton (texte a gauche). Scope .product__info-container = ne touche NI
le bouton upsell du drawer NI le desktop. */
@media(max-width:749px){
.product__info-container .product-form__buttons button{ justify-content:space-between !important; }
.product__info-container .product-form__buttons svg{ width:32px; height:32px; flex:none; }
}
/* PLP-ATC-ARROW-MOBILE-END */
/* PLP-FONT-INHERIT (revert=supprimer ce bloc) — QA police 2026-07-27 :
les form controls N'HERITENT PAS de la police du site par defaut (UA stylesheet = Arial) ;
le theme ne couvrait ni