s) and
merely clipped it. Collapse the line breaks inside the PREVIEW only, so the
clamp measures real text — the expanded state keeps the merchant formatting. */
@media (max-width: 749px) {
.collection-description-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden; font-size: 13.5px; line-height: 1.5; }
.collection-description-preview br { display: none; }
.collection-description-preview p { display: inline; }
.collection-description-preview p + p::before { content: ' · '; color: var(--btq-pink-deep); }
}
/* 6 · REMOVED for the same reason as (2) — see templates/collection.json. */
/* ==========================================================================
DRAWER BACKDROP — rewritten after measuring why the previous attempt failed.
The theme's own .drawer__overlay is unusable: its parent #Drawer-Menu computes
opacity:0 / visibility:hidden (the theme sets data-moved and renders the visible
panel elsewhere), and a child can never be more opaque than its parent. Three
attempts at restyling that element were therefore doomed regardless of
specificity — even an !important opacity:1 measured as computed 0.
Render the backdrop from BODY instead, which nothing can suppress.
body.overflow-hidden is the theme's real open-state signal (verified: present
while any drawer is open, removed on close).
Ladder: announcement 14 < backdrop 17 < drawer 19 < modals 20.
========================================================================== */
body::after {
content: '';
position: fixed;
inset: 0;
background: rgba(26, 26, 26, .46);
z-index: 17;
opacity: 0;
pointer-events: none;
transition: opacity .24s ease-out;
}
body.overflow-hidden::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { body::after { transition-duration: .01ms; } }
/* keep the theme's stranded overlay out of the way entirely */
#Drawer-Menu .drawer__overlay, cart-drawer .drawer__overlay { background: transparent; }
/* the panel must stay above its own overlay */
#Drawer-Menu .drawer__inner, cart-drawer .drawer__inner { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
#Drawer-Menu .drawer__overlay, cart-drawer .drawer__overlay { transition-duration: .01ms; }
}
/* ==========================================================================
CART DRAWER — dead space below the last product.
Measured with 3 items in the cart: 283px of empty white between the last row
and the note/promo row. Cause: CART-DRAWER-ITEMS carries the theme's `h-full`
utility, so the list box is forced to full height (732px) regardless of the
~321px of actual rows. Let it size to content and only scroll once it genuinely
overflows.
========================================================================== */
#CartDrawer cart-drawer-items,
cart-drawer cart-drawer-items.h-full {
height: auto !important;
flex: 0 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
#CartDrawer .cart-items__wrapper, #CartDrawer .cart__items { height: auto !important; }
/* the note / promo row was 102px for two rarely-used controls in a COD store where
shipping is a flat 7 TND — keep them reachable, stop them dominating the drawer */
#CartDrawer .cart__note.field { height: auto; }
#CartDrawer .cart__note .modal-opener,
#CartDrawer .cart__note button { min-height: 44px; padding-block: 10px; font-size: 12.5px; }
#CartDrawer .cart__note svg { width: 15px; height: 15px; }
/* ==========================================================================
ANNOUNCEMENT BAR — the owner's reported "messages overlap" bug, reproduced
and root-caused rather than guessed.
Measured: swiper-component.announcement-bar has 3 slides, ALL position:relative
and ALL at the same top:8 — they occupy the same box. swiper-fade crossfades by
opacity, so mid-transition the outgoing slide is still partly opaque and paints
THROUGH the incoming one. A screenshot caught "LIVRAISON OFFERTE DES 100 TND"
overlapping the next message.
Fix: only the active slide may paint. visibility (not display) so no reflow and
no layout shift — the bar's height never changes.
========================================================================== */
.announcement-bar .swiper-slide,
.announcement-bar-slider .swiper-slide { visibility: hidden; }
.announcement-bar .swiper-slide-active,
.announcement-bar-slider .swiper-slide-active { visibility: visible; }
/* the rotation must not run underneath an open drawer — a message changing behind
the menu or cart is what made this read as a glitch */
body.overflow-hidden .announcement-bar .swiper-wrapper,
body.overflow-hidden .announcement-bar-slider .swiper-wrapper {
transition: none !important;
animation-play-state: paused !important;
}
/* ==========================================================================
CART DRAWER — the 283px void below the last product.
Measured with 3 items: cart-drawer-items computes 692px against ~321px of rows.
NOTE ON SELECTORS: #CartDrawer is the inner DIV.cart-drawer; the custom element
is . Both are used below deliberately so the rules
hold whichever node the theme renders, without lowering specificity on the
existing #CartDrawer layer.
========================================================================== */
#CartDrawer cart-drawer-items, cart-drawer cart-drawer-items,
#CartDrawer cart-drawer-items.h-full, cart-drawer cart-drawer-items.h-full {
height: auto !important;
min-height: 0 !important;
flex: 0 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
}
#CartDrawer .cart-items__wrapper, cart-drawer .cart-items__wrapper,
#CartDrawer .cart__items, cart-drawer .cart__items,
#CartDrawer .js-contents, cart-drawer .js-contents,
#CartDrawer table.cart-items, cart-drawer table.cart-items {
height: auto !important;
min-height: 0 !important;
}
/* ---------- beautica-easysell.css (source: assets/beautica-easysell.css) ---------- */
/* ==========================================================================
BEAUTICA — ONE PRIMARY ACTION + EASYSELL COD NATIVE SKIN
Owner brief: (a) remove "Acheter maintenant" from every product page, leave
no dead space; (b) make the EasySell COD order form look like one premium
site, not two systems bolted together.
CONCATENATION: append this file into assets/beautica-custom.css BEFORE the
"/* ==== END GENERATED PARTS ==== *\/" marker and AFTER the beautica-card.css
section. Only beautica-custom.css is ed (layout/theme.liquid:74) — a
standalone beautica-easysell.css asset is never loaded by the theme.
--------------------------------------------------------------------------
SELECTORS CONFIRMED against real repo markup (file:line):
.accelerated-checkout-block blocks/accelerated-checkout.liquid:94
.checkout--button-secondary (modifier) blocks/accelerated-checkout.liquid:94
.shopify-payment-button__button assets/base.css:9657 (Shopify-emitted)
.shopify-payment-button__button--unbranded assets/base.css:9976
.shopify-payment-button__more-options assets/base.css:9971
more-payment-options-link (element) assets/base.css:9958
.product-form__buttons + --gap blocks/buy-buttons.liquid:102-108
.buy-buttons-block assets/base.css:9625
.add-to-cart-button-container blocks/add-to-cart.liquid:38
.add-to-cart-button-inner blocks/add-to-cart.liquid:42
button[name="add"].button beautica-custom.css:305 (primary CTA spec)
.field / .field__input / .field__label assets/base.css:3080-3130
.product-details used throughout beautica-pdp.css
.shopify-app-block / [id^="shopify-block-"]
Shopify theme-app-extension wrapper
(platform-emitted, not app-specific)
NOT CONFIRMED — EasySell ships ZERO markup into this repo. Verified by:
grep -rn -i "easysell" over *.liquid *.json *.css *.js -> 0 hits
config/settings_data.json app embeds -> only hiko-social-login and
google-youtube. No EasySell.
Therefore EVERY EasySell-specific class name is unknown. Per the project's
hard-won lesson #1, no guessed EasySell selector is shipped live in this
file. Section 3 is a variable-driven skin that activates only once the
orchestrator stamps the real container (see the instructions there).
========================================================================== */
/* --------------------------------------------------------------------------
1. KILL "ACHETER MAINTENANT" (Shopify dynamic / accelerated checkout)
SOURCE-LEVEL ATTEMPT (already made): templates/product.json now carries
sections.main.blocks.product-details.blocks.buy_buttons_eYQEYi
.blocks.accelerated-checkout -> "disabled": true
WHY CSS IS STILL REQUIRED: there is no show_dynamic_checkout setting on the
block that actually renders. snippets/buy-buttons.liquid:21-23 has one, but
that snippet is the LEGACY path — this template renders blocks/buy-buttons
.liquid, which emits the payment button through an unconditional
{% content_for 'block', type: 'accelerated-checkout', id: ... %} (:129-134)
and blocks/accelerated-checkout.liquid:104-107 prints {{ form_obj |
payment_button }} with no enable/disable checkbox in its schema (:114-185).
Static blocks are rendered by content_for regardless of block_order, so the
"disabled" flag may well be ignored by the platform. The flag is harmless
and reversible either way; this rule is the guarantee.
-------------------------------------------------------------------------- */
/* Global, not scoped to .product-details: the owner asked for ONE primary
action on ALL product surfaces (main PDP, quick-add modal, featured-product
sections). The cart's own checkout CTA uses .cart__checkout-button and is
NOT matched here. */
.accelerated-checkout-block,
.product-form__buttons .accelerated-checkout-block,
.product-form__buttons .shopify-payment-button,
.product-form__buttons .shopify-payment-button__button,
.product-form__buttons more-payment-options-link,
.shopify-payment-button__more-options {
display: none !important;
}
/* --------------------------------------------------------------------------
2. CLOSE THE GAP LEFT BEHIND
MEASUREMENT / HONEST ACCOUNTING. .product-form__buttons is
`display:flex; flex-wrap:wrap; gap:var(--gap)` (base.css:9630-9635) with
--gap:10px from the block setting. Its flex children are:
quantity selector · add-to-cart container · hidden error span ·
accelerated-checkout-block
Reclaimed by removing the last child:
payment button ~50px (min-height:50px, beautica-custom.css:319-326)
+ one 10px flex row-gap
= ~60px of vertical space, on every product page.
Flex `gap` is only drawn BETWEEN rendered items, so display:none removes
the gap with the button — there is no orphan 10px band to chase. The
agree-condition wrapper (a further 20+20px of padding) was already off
(agree_condition:false) and its paddings are now zeroed in product.json too,
so it cannot reappear if the setting is ever re-enabled by accident.
The rules below are defensive: they make sure nothing that used to sit
alongside the payment button now keeps a margin reserved for it, and that
the surviving CTA goes truly full-width instead of flex-sharing the row.
-------------------------------------------------------------------------- */
.product-form__buttons {
/* wrap-row gap no longer needs to double as the ATC/payment-button gap */
row-gap: 8px;
}
/* The remaining CTA is now the only action — let it own the full row. */
.product-form__buttons > .add-to-cart-button-container {
flex: 1 1 100%;
min-width: 100%;
}
/* No block-level margin may survive under the now-single CTA. */
.buy-buttons-block,
.product-details .buy-buttons-block {
margin-block-end: 0;
}
.add-to-cart-button-inner {
margin-block-end: 0;
}
/* --------------------------------------------------------------------------
3. EASYSELL COD — NATIVE SKIN (ACTIVATION REQUIRED)
*** READ BEFORE ENABLING ***
EasySell's DOM is not in this repo, so its class names are unknown and NONE
are guessed here. This section is written against ONE hook the orchestrator
controls: the attribute [data-btq-easysell] on EasySell's outermost
container. Nothing below applies until that attribute exists.
ORCHESTRATOR — to activate, do exactly this in the live preview DOM:
1. Open a product page, find EasySell's wrapper. Likely shapes, in order:
a) a theme app-extension block: [id^="shopify-block-"] .shopify-app-block
b) an inline
injected by a ScriptTag
c) a custom element
2. Copy its REAL outermost selector.
3. Add ONE line to this file mapping it to the hook, e.g.
{ } /* alias, see note */
or, preferred, replace every `[data-btq-easysell]` below with the real
selector via find-and-replace. Do not add both.
4. Re-verify the field/button/label sub-selectors the same way — the
descendant selectors below use only GENERIC element selectors
(input, select, textarea, label, button[type=submit]) precisely so they
survive without knowing EasySell's class names.
Everything in 3.1 is scoped inside [data-btq-easysell]; with the attribute
absent these rules match nothing and cost nothing. They cannot leak.
-------------------------------------------------------------------------- */
[data-btq-easysell] {
/* one typographic system, not two */
font-family: "Cabin", var(--font-body--family), sans-serif;
color: var(--btq-ink, #1A1A1A);
background: var(--btq-surface, #fff);
border: 1px solid var(--btq-line, #EBE6EA);
border-radius: var(--btq-radius-card, 12px);
padding: 14px;
margin-block: 12px 0;
-webkit-font-smoothing: antialiased;
}
/* 3.1 — form fields matched to the theme's .field__input rhythm */
[data-btq-easysell] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-btq-easysell] select,
[data-btq-easysell] textarea {
width: 100%;
min-height: 46px; /* >= 44px tap target */
box-sizing: border-box;
padding: 10px 12px;
font-family: inherit;
font-size: 15px; /* >= 16px avoids iOS zoom; 15 matches theme */
line-height: 1.35;
color: var(--btq-ink, #1A1A1A);
background: var(--btq-surface, #fff);
border: 1px solid var(--btq-line, #EBE6EA);
border-radius: 10px;
transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
[data-btq-easysell] input:focus,
[data-btq-easysell] select:focus,
[data-btq-easysell] textarea:focus,
[data-btq-easysell] input:focus-visible,
[data-btq-easysell] select:focus-visible,
[data-btq-easysell] textarea:focus-visible {
outline: none;
border-color: var(--btq-pink-deep, #C2117E);
box-shadow: 0 0 0 3px rgba(194, 17, 126, .12);
}
[data-btq-easysell] input::placeholder,
[data-btq-easysell] textarea::placeholder {
color: var(--btq-ink-soft, #5C5C66);
opacity: 1;
}
[data-btq-easysell] label {
display: block;
font-size: 13px; /* above the 12px readable floor */
font-weight: 600;
color: var(--btq-ink, #1A1A1A);
margin: 0 0 5px;
letter-spacing: .01em;
}
/* 3.2 — submit button: byte-for-byte the primary CTA spec from
beautica-custom.css:305-318 (button[name="add"].button) */
[data-btq-easysell] button[type="submit"],
[data-btq-easysell] input[type="submit"] {
width: 100%;
min-height: 52px;
padding: 12px 20px;
background: var(--btq-pink-deep, #C2117E);
border: 1.5px solid var(--btq-pink-deep, #C2117E);
color: #fff;
border-radius: var(--btq-radius-btn, 10px);
font-family: inherit;
font-size: 16px;
font-weight: 600;
letter-spacing: .02em;
cursor: pointer;
transition: background-color .18s ease-out, transform .12s ease-out;
}
[data-btq-easysell] button[type="submit"]:hover,
[data-btq-easysell] input[type="submit"]:hover {
background: #A50E6B;
border-color: #A50E6B;
}
[data-btq-easysell] button[type="submit"]:active,
[data-btq-easysell] input[type="submit"]:active {
transform: scale(.985);
}
[data-btq-easysell] button[type="submit"]:focus-visible {
outline: 2px solid var(--btq-pink-deep, #C2117E);
outline-offset: 2px;
}
[data-btq-easysell] button[type="submit"][disabled] {
opacity: .5;
cursor: not-allowed;
transform: none;
}
/* 3.3 — quantity / choice controls keep the brand accent */
[data-btq-easysell] input[type="checkbox"],
[data-btq-easysell] input[type="radio"] {
accent-color: var(--btq-pink-deep, #C2117E);
min-width: 20px;
min-height: 20px;
}
/* 3.4 — mobile */
@media screen and (max-width: 749px) {
[data-btq-easysell] {
padding: 12px;
margin-block: 10px 0;
}
[data-btq-easysell] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-btq-easysell] select,
[data-btq-easysell] textarea {
font-size: 16px; /* prevents the iOS focus zoom on mobile */
}
[data-btq-easysell] button[type="submit"],
[data-btq-easysell] input[type="submit"] {
min-height: 52px;
font-size: 15.5px;
}
}
@media (prefers-reduced-motion: reduce) {
[data-btq-easysell] * {
transition: none !important;
}
}
/* 3.5 — NO DOUBLE CTA. Once EasySell is the primary flow, its submit button
and the theme's "Ajouter au panier" must not read as two equal actions.
This is deliberately NOT shipped enabled: whether ATC should be demoted to
a secondary outline button or removed entirely is the OWNER's call, and it
depends on where EasySell actually mounts relative to the buy buttons.
Orchestrator: confirm placement in the live DOM, then uncomment ONE.
-- demote ATC to secondary (recommended: keeps cart flow available) --
.product-details button[name="add"].button {
background: #fff !important;
color: var(--btq-pink-deep, #C2117E) !important;
border: 1.5px solid var(--btq-pink-deep, #C2117E) !important;
}
-- or remove ATC entirely, leaving EasySell as the only action --
.product-details .add-to-cart-button-container { display: none !important; }
*/
/* --------------------------------------------------------------------------
4. SAFE CROSS-SYSTEM TYPOGRAPHY (ships live — no guessed class names)
.shopify-app-block is platform-emitted markup for ANY theme app extension,
not an EasySell-specific guess. Only inherited, non-structural properties
are set, so if EasySell mounts some other way this is a harmless no-op, and
if another app block matches it simply inherits the site font — which is the
desired outcome anyway ("one premium website").
Scoped to the product details column so it cannot touch the footer/header
embeds (hiko-social-login, google-youtube).
-------------------------------------------------------------------------- */
.product-details .shopify-app-block,
.product-details [id^="shopify-block-"] {
font-family: "Cabin", var(--font-body--family), sans-serif;
color: var(--btq-ink, #1A1A1A);
}
/* ==== BEGIN GENERATED PARTS (do not edit below; edit the part files) ==== */
/* ---------- beautica-announce.css ---------- */
/* ==========================================================================
BEAUTICA — ANNOUNCEMENT BAR x OPEN DRAWERS
Owner bug: the rotating announcement bar ("IMPOSSIBLE A IGNORER",
"Livraison 24-48h partout en Tunisie") stays painted ON TOP of the open menu
drawer and the open cart drawer, and keeps changing text underneath them.
ROOT CAUSE — read from the code, not guessed
--------------------------------------------
1. STACKING. assets/beautica-custom.css:527 carries a "header stacking guard"
added in an earlier session (owner photo: cards visible over the header):
#header-group, #header-group .shopify-section, sticky-header,
.header-wrapper, header.header { position:relative; z-index:40;
background:#fff; }
The announcement bar section IS a `#header-group .shopify-section` —
sections/announcement-bar.liquid declares
`"class": "section-header section-announcement-bar"` — so it silently
became position:relative, z-index:40, opaque white.
Both drawers relocate themselves to on connect
(`document.body.appendChild(this)` in details-disclosure.js -> SideDrawer,
and the identical line in cart-drawer.js) and are position:fixed with
.drawer { z-index: var(--layer-menu-drawer) } -> 18
(value from snippets/global-style.liquid). 18 < 40, so the announcement
bar — and the header row with it — paints straight through the drawer
overlay AND the drawer panel, on every template.
`#header-group` itself flips to `display:contents` when the header is
sticky (base.css:19403), which voids the guard's z-index on the GROUP.
It is the PER-SECTION z-index:40 that does the damage, which is why the
bar survives above the drawer on every page.
40 was an arbitrary number. The only thing the guard actually has to
clear is (theme.liquid).
Everything from --layer-overlay (16) upwards is modal furniture that must
be ABOVE the header, not below it.
2. ROTATION. blocks/_group-announcement.liquid renders
as soon as there is more than
one message. sections/header-group.json holds 3 messages with
autoplay:true / autoplay_speed:5, and assets/global.js (SwiperComponent)
builds it with effect:"fade", crossFade:true, disableOnInteraction:false
and only pauseOnMouseEnter:true. Nothing stops that timer when a drawer
opens — which is exactly why the owner's two screenshots show two
different messages behind two different open drawers.
WHAT THIS FILE DOES
-------------------
Declares one coherent z-index scale and applies it. Nothing is hidden and
nothing leaves the document flow, so the fix cannot cause layout shift.
The rotation pause needs a JS timer and therefore lives in
sections/announcement-bar.liquid.
Selector specificity is deliberately raised above the guard's so the result
does not depend on the order the orchestrator concatenates the part files.
========================================================================== */
/* --------------------------------------------------------------------------
THE SCALE. Monotonic, every rung applied, no gaps invented for their own
sake. Theme reference (snippets/global-style.liquid): --layer-overlay 16,
--layer-menu-drawer 18, --layer-sidebar 19, --layer-temporary 20.
2 content .......... theme.liquid `.z-2`
14 announcement bar ........ --btq-z-announce
15 header .................. --btq-z-header (was the arbitrary 40)
16 modal / popup backdrop .. --btq-z-overlay (= theme --layer-overlay)
19 drawer container ........ --btq-z-drawer (= theme --layer-sidebar)
20 drawer's own dialogs .... --btq-z-modal (must clear the drawer)
21 add-to-cart toast ....... --btq-z-toast (must clear all of it)
Inside a drawer, the backdrop rung is -1: it is a DIRECT CHILD of the
drawer element (verified: snippets/cart-drawer.liquid:8 and
sections/header_mobile.liquid:21 both put #...-Overlay inside the custom
element), and the drawer is position:fixed + z-index:19, i.e. its own
stacking context. -1 therefore means "behind the panel, in front of
EVERYTHING outside the drawer" — the whole page including the announcement
bar at 14 is dimmed and the backdrop is the topmost hit target outside the
panel, so click-to-close works. -1 is only inert when the ancestor makes no
stacking context, which is not the case here.
--btq-z-overlay / --btq-z-drawer / --btq-z-toast are also declared by
assets/beautica-atc.css:12-14 with these exact values, by prior agreement,
so concatenation order is irrelevant. Do not diverge without updating both.
--btq-z-announce / --btq-z-header / --btq-z-drawer-overlay / --btq-z-modal
are declared here only. Every var() below carries its literal as a fallback,
so this file is correct even if it is served on its own.
Nothing here removes an element from flow or changes any height: the only
suppression is pointer-events (rule 5) and opacity on swiper-fade slides
that are already absolutely positioned. No layout shift is possible.
-------------------------------------------------------------------------- */
:root {
--btq-z-announce: 14;
--btq-z-header: 15;
--btq-z-overlay: 16;
--btq-z-drawer: 19;
--btq-z-drawer-overlay: -1; /* backdrop, INSIDE the drawer's own context */
--btq-z-modal: 20;
--btq-z-toast: 21;
}
/* --------------------------------------------------------------------------
1. The announcement bar gets its own rung — still above page content, now
unambiguously below every piece of modal furniture.
It stays position:relative and stays in normal flow: the section keeps
reserving exactly the same height it does today, so there is no reflow when
a drawer opens or closes.
Specificity (1,2,1) beats the guard's `#header-group .shopify-section`
(1,1,0) regardless of source order.
-------------------------------------------------------------------------- */
body #header-group .shopify-section.section-announcement-bar {
position: relative;
z-index: var(--btq-z-announce, 14);
}
/* --------------------------------------------------------------------------
2. Same correction for the rest of the header guard, because the bar and the
header row are one visual block — fixing only the bar would leave the logo
and cart icon punched through the open drawer, which is the same defect.
The guard's purpose is preserved: 15 still clears 's z-index 2, so
product cards cannot climb over the header again. Only the modal furniture
above 16 changes side, which is the correction being made.
Each selector below outranks its counterpart in the guard by exactly one
`body`, so this holds whichever way the parts are concatenated.
-------------------------------------------------------------------------- */
body #header-group,
body #header-group .shopify-section:not(.section-announcement-bar),
body sticky-header,
body .header-wrapper,
body header.header {
z-index: var(--btq-z-header, 15);
}
/* --------------------------------------------------------------------------
3. Drawers pinned to their rung explicitly instead of inheriting the theme's
--layer-menu-drawer. Covers both menu-drawer variants
(sections/header_mobile.liquid is the live one, snippets/header-drawer.liquid
the fallback) and the cart drawer.
`side-drawer.drawer` is (0,1,1) and beats both `.drawer` (0,1,0) and the
markup's `.z-9` utility (0,1,0) on source-order-independent grounds.
A closed drawer is visibility:hidden + opacity:0 + pointer-events:none, so
this changes nothing at all until one is actually opened.
-------------------------------------------------------------------------- */
side-drawer.drawer,
cart-drawer.drawer {
z-index: var(--btq-z-drawer, 19);
}
/* The backdrop is a CHILD of the drawer, so it lives inside the drawer's own
stacking context: -1 keeps it behind the panel while still covering the whole
page, announcement bar included. Re-asserted here so that a later change to
either rung can never strand it. */
side-drawer.drawer > .drawer__overlay,
cart-drawer.drawer > .drawer__overlay {
z-index: var(--btq-z-drawer-overlay, -1);
}
/* --------------------------------------------------------------------------
3b. The cart drawer's OWN dialogs — "Ajouter une note", carte-cadeau, code
promo (snippets/cart-drawer.liquid:203/247/284/320). They are
, and
ModalComponent.connectedCallback() (assets/cart-drawer.js:222-227) runs
`document.body.appendChild(this)`. At open time they are therefore SIBLINGS
of , not descendants — nothing about being "inside" the drawer
in the Liquid source survives to runtime.
Their painted rung is min(.z-9 = 9, .modal--popup = --layer-menu-drawer 18),
both far below the drawer's 19. A sibling below the drawer opens BEHIND the
full-viewport drawer panel and is simply invisible: tapping "Ajouter une
note" would look like it did nothing. They must sit one rung ABOVE the
drawer that spawned them, and one below the toast.
Specificity (0,2,1) beats base.css's `.modal--popup` (0,1,0) and the `.z-9`
utility (0,1,0) regardless of source order. Scoped to `modal-component` on
purpose: quick-add / quick-view / video are also `.modal--popup` but are
never co-open with a drawer, and raising them above 19 could invert them
against the cart drawer that quick-add itself opens.
-------------------------------------------------------------------------- */
body modal-component.modal--popup {
z-index: var(--btq-z-modal, 20);
}
/* --------------------------------------------------------------------------
4. Fade-carousel invariant: exactly one message visible at a time.
Swiper's fade effect stacks all three slides on top of each other and drives
them with INLINE opacity. Inline styles outrank this rule, so the crossfade
itself is untouched — this only covers the window between `swiper-initialized`
landing on the container and Swiper's first setTranslate() writing those
inline opacities. That is the one moment all three messages can render on top
of one another, i.e. the literal "messages overlap" the owner reported.
(Before init the theme already guards it:
`.swiper:not(.swiper-initialized) .swiper-wrapper.grid-layout--1
.swiper-slide:not(:first-child) { display:none }` — base.css:4933.)
-------------------------------------------------------------------------- */
.section-announcement-bar .swiper.swiper-fade .swiper-slide:not(.swiper-slide-active) {
opacity: 0;
pointer-events: none;
}
/* A mis-translated slide can never spill outside the bar. */
.section-announcement-bar .announcement-bar-slider.swiper {
overflow: hidden;
}
/* --------------------------------------------------------------------------
5. While a drawer is open the bar is fully covered by the backdrop, so it is
NOT hidden — hiding a section that reserves height is precisely what causes
layout shift. It is only made inert, so a tap that lands on the backdrop can
never activate the link underneath it.
`body.overflow-hidden` is added by SideDrawer.open() and CartDrawer.open()
and removed by both close() methods.
-------------------------------------------------------------------------- */
body.overflow-hidden #header-group .shopify-section.section-announcement-bar {
pointer-events: none;
}
/* --------------------------------------------------------------------------
6. Motion preference.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.section-announcement-bar .swiper .swiper-slide {
transition-duration: 0.01ms !important;
}
}
/* ---------- beautica-drawer.css ---------- */
/* ==========================================================================
BEAUTICA — MOBILE NAVIGATION DRAWER
Owns: the #Drawer-Menu shell (panel, overlay, fixed header/X, scroll body)
and the .btq-menu content rendered by snippets/beautica-menu.liquid.
REAL DOM (read from sections/header_mobile.liquid — the live mobile drawer,
NOT snippets/header-drawer.liquid which is the non-multi-tab variant):
side-drawer#Drawer-Menu.drawer.drawer--menu.drawer--menu-multi-tab
> #Drawer-Overlay-Menu.drawer__overlay
> div.side-drawer[data-drawer-content]
> div.drawer__inner.d-flex.flex-column.h-full
> div.drawer__header (contains button.drawer__close)
> div.btq-menu (our content — DIRECT child)
> div.drawer__wrapper (display:none, set in beautica-custom.css)
REAL JS HOOKS (read from assets/details-disclosure.js — class SideDrawer):
open() -> adds .animate, .active, .open on side-drawer#Drawer-Menu
close() -> removes .active, .open AFTER its await'ed animation finishes
The panel SLIDE is driven by Motion One (WAAPI) on [data-drawer-content],
not by CSS. We therefore do NOT declare a competing transform transition
on that element — WAAPI would win and the two would fight. We keep the
container's own opacity transition alive because SideDrawer.open() binds
trapFocus() to 'transitionend'; killing it would break focus trapping.
SPECIFICITY NOTE: rules here intentionally lead with `side-drawer#Drawer-Menu`
(id + type + class) so they outrank the earlier `#Drawer-Menu .x` rules in
beautica-custom.css regardless of concatenation order.
========================================================================== */
/* --------------------------------------------------------------------------
1. OVERLAY — elegant fade, calm backdrop
The theme fades the whole .drawer container (opacity + visibility) on
.active. We retune the timing on this drawer only and restyle the scrim.
-------------------------------------------------------------------------- */
side-drawer#Drawer-Menu {
transition-property: opacity, visibility;
transition-duration: 220ms;
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
side-drawer#Drawer-Menu #Drawer-Overlay-Menu,
side-drawer#Drawer-Menu #Drawer-Overlay-Menu:empty {
background-color: rgba(26, 26, 26, 0.44);
}
/* --------------------------------------------------------------------------
2. PANEL — fixed, so no ancestor overflow can ever clip or scroll it.
Width formula is copied from the theme so nothing shifts.
RTL-guarded: this drawer is left-anchored and the store is French/LTR.
-------------------------------------------------------------------------- */
html:not([dir='rtl']) side-drawer#Drawer-Menu [data-drawer-content] {
position: fixed;
top: 0;
left: 0;
height: 100dvh;
max-height: 100dvh;
width: min(calc(100% - var(--minimum-touch-target, 44px)), var(--drawer-max-width, var(--narrow-content-width)));
background-color: var(--btq-surface, #fff);
backface-visibility: hidden;
}
@supports not (height: 100dvh) {
html:not([dir='rtl']) side-drawer#Drawer-Menu [data-drawer-content] {
height: 100vh;
max-height: 100vh;
}
}
/* will-change only while open — dropped automatically when .active is removed */
side-drawer#Drawer-Menu.active [data-drawer-content] {
will-change: transform, opacity;
}
/* --------------------------------------------------------------------------
3. SHELL — .drawer__inner stops being the scroller.
Previously .drawer__inner scrolled, which is why the X scrolled away and
got clipped. Now it is a non-scrolling flex column: header pinned, body
scrolls inside itself.
-------------------------------------------------------------------------- */
side-drawer#Drawer-Menu .drawer__inner {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
overflow: hidden !important;
overscroll-behavior: contain;
}
/* --------------------------------------------------------------------------
4. HEADER + CLOSE (X) — pinned by flex AND sticky (belt and braces), opaque,
above the scrolling list. It can no longer scroll away or be overlapped.
ROOT CAUSE of the owner's "X scrolls away and gets clipped" bug, found in
assets/base.css:12575 —
.drawer--menu-multi-tab .drawer__header:has(.drawer__close) {
width: fit-content; position: absolute; right: 0; left: auto; padding: 0;
}
An absolutely-positioned, fit-content header inside what used to be the
scrolling .drawer__inner rides along with the content. We put it back in
flow, full width, in a shell that no longer scrolls. The resets below are
deliberate — dropping any one of them lets that rule partially win again.
-------------------------------------------------------------------------- */
side-drawer#Drawer-Menu .drawer__inner > .drawer__header {
position: sticky !important;
top: 0;
right: auto !important;
left: auto !important;
width: 100% !important;
z-index: 3;
flex: 0 0 auto !important;
min-height: 56px;
padding: 6px 10px !important;
background: var(--btq-surface, #fff);
border-bottom: 1px solid var(--btq-line, #ebe6ea);
}
side-drawer#Drawer-Menu .drawer__close {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--btq-surface-soft, #faf7f9);
color: var(--btq-ink, #1a1a1a);
transition: background-color 160ms ease, transform 160ms ease;
}
side-drawer#Drawer-Menu .drawer__close:active {
background: var(--btq-pink-soft, #fdf2f8);
transform: scale(0.94);
}
side-drawer#Drawer-Menu .drawer__close .svg-wrapper,
side-drawer#Drawer-Menu .drawer__close svg {
width: 18px;
height: 18px;
}
side-drawer#Drawer-Menu .drawer__heading {
font-size: 15px;
letter-spacing: 0.02em;
}
/* --------------------------------------------------------------------------
5. SCROLL BODY — .btq-menu is now the only scroller.
flex: 1 1 auto is safe here (unlike the old crush bug) precisely BECAUSE
it is a scroll container with min-height:0 — shrinking to the free space is
the intended behaviour; the content scrolls inside instead of being clipped.
-------------------------------------------------------------------------- */
side-drawer#Drawer-Menu .drawer__inner .btq-menu {
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
overflow-y: auto !important;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: thin;
padding: 16px 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
gap: 18px;
}
/* .btq-menu is itself a flex column. Now that its own height is constrained,
its children would SHRINK to fit instead of overflowing — that is the exact
928px -> 393px crush recorded in the project notes. The scroll container may
shrink; its children must not. Do not remove this rule. */
side-drawer#Drawer-Menu .drawer__inner .btq-menu > * {
flex: 0 0 auto !important;
}
/* --------------------------------------------------------------------------
6. CONTENT REFINEMENTS — scoped to .btq-menu only.
The "Par occasion" chip row is gone (see beautica-menu.liquid); the block
below styles its replacement, "Par famille olfactive", plus the new
secondary "Bons plans" row.
-------------------------------------------------------------------------- */
/* Section label */
.btq-menu .btq-menu__label {
display: block;
margin-bottom: 10px;
}
/* Olfactory-family tiles. Reuses the .btq-menu__familles DNA already defined
in beautica-custom.css; this only refines it and handles the 7th tile. */
.btq-menu .btq-menu__familles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.btq-menu .btq-menu__familles a {
display: flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 10px 12px;
border-radius: var(--btq-radius-btn, 10px);
background: var(--btq-surface-soft, #faf7f9);
box-shadow: inset 0 0 0 1px var(--btq-line, #ebe6ea);
font-size: 14px;
font-weight: 600;
color: var(--btq-ink, #1a1a1a);
text-decoration: none;
transition: background-color 160ms ease, box-shadow 160ms ease;
}
.btq-menu .btq-menu__familles a .btq-icon {
flex: 0 0 auto;
color: var(--btq-pink-deep, #c2117e);
}
.btq-menu .btq-menu__familles a:active {
background: var(--btq-pink-soft, #fdf2f8);
box-shadow: inset 0 0 0 1px rgba(194, 17, 126, 0.24);
}
/* 7 tiles in a 2-col grid: the odd last one spans the row instead of leaving
a hole. Purely presentational — no orphan gap, no filler link. */
.btq-menu .btq-menu__familles a:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
/* Secondary "Bons plans" row — deliberately lighter than the pink finder CTA
so the drawer keeps exactly ONE primary call to action. */
.btq-menu__deals {
display: flex;
align-items: center;
gap: 12px;
min-height: 56px;
padding: 12px 14px;
border-radius: var(--btq-radius-card, 12px);
background: var(--btq-pink-soft, #fdf2f8);
box-shadow: inset 0 0 0 1px rgba(194, 17, 126, 0.12);
color: var(--btq-ink, #1a1a1a);
text-decoration: none;
}
.btq-menu__deals span {
flex: 1;
line-height: 1.3;
font-size: 14px;
}
.btq-menu__deals strong {
font-weight: 700;
}
.btq-menu__deals small {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--btq-ink-soft, #5c5c66);
}
.btq-menu__deals .btq-icon {
flex: 0 0 auto;
color: var(--btq-pink-deep, #c2117e);
}
/* Primary list: last item should not draw a rule into the next block */
.btq-menu__primary a:last-child {
border-bottom: 0;
}
/* --------------------------------------------------------------------------
7. REDUCED MOTION
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
side-drawer#Drawer-Menu,
side-drawer#Drawer-Menu [data-drawer-content],
side-drawer#Drawer-Menu .drawer__close,
.btq-menu .btq-menu__familles a {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
side-drawer#Drawer-Menu .drawer__inner .btq-menu {
scroll-behavior: auto;
}
}
/* ==========================================================================
v2 — FAMILLE TILES: the owner reports the block "occupies too much vertical
space". Measured at 2-up it needs 5 rows for 9 tiles (~250px). At 3-up it
needs 3 rows (~130px) — roughly half — while the labels are single short
words that read fine at this width. Label also renamed to
"Trouvez votre parfum par senteur": customer language, not perfumery jargon.
========================================================================== */
.btq-menu__familles { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
.btq-menu__familles a {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 9px 4px !important;
min-height: 56px;
font-size: 11.5px;
line-height: 1.15;
text-align: center;
}
.btq-menu__familles a .btq-icon { width: 17px; height: 17px; }
.btq-menu__label { margin-bottom: 7px !important; font-size: 11px; letter-spacing: .04em; }
/* ---------- beautica-cart.css ---------- */
/* ==========================================================================
BEAUTICA — CART DRAWER LAYOUT
Owner brief: "I see ONE product in a 3-product cart."
Scope: EVERY rule below is prefixed with #CartDrawer (the drawer's inner div,
which also carries .cart-drawer). Nothing here can reach the cart PAGE, whose
rows are scoped `cart-items-component` in component-cart-items.css.
WHAT WAS ACTUALLY WRONG (read from the theme source, not guessed):
component-cart-drawer.css already lays the row out as a 2x3 CSS grid —
the