/* =====================================================================
Layout preset "boozy" - a beauty-shop homepage anatomy modelled on
boozyshop.nl (USP bar, pill search, plain category nav, category
bubbles, big hero, tabbed products, campaign tiles, collection slider,
spotlight tiles, brand marquee, newsletter block, light footer).
Active only when (setting
storefront_layout_preset = boozy).
Every colour is a token. The defaults below derive from --color-primary;
Admin → Settings → Colors → "Boozy layout" overrides any token
(variables.blade.php emits the overrides on body.preset-boozy.preset-boozy).
===================================================================== */
.preset-boozy {
/* base palette */
--bz-accent: var(--color-primary);
--bz-accent-hover: var(--color-primary-hover);
--bz-ink: #1C1517;
--bz-muted: #8A7D83;
--bz-muted-2: #6B6266;
--bz-cotton: #F8F1F5; /* static fallbacks, tinted below when color-mix exists */
--bz-cotton-2: #F4EAF0;
--bz-line: #EFE4EA;
--bz-green: #02B901;
--bz-yellow: #FFEDBC;
--bz-radius: 6px;
--bz-card-radius: 18px;
--bz-shadow: 0 1px 6px rgba(116, 1, 147, 0.05);
--bz-font: "Rubik", "Helvetica Neue", Arial, sans-serif;
/* element tokens (all overridable from the Colors panel) */
--bz-page-bg: #ffffff;
--bz-usp-bg: var(--bz-cotton);
--bz-usp-text: var(--bz-muted-2);
--bz-header-bg: #ffffff;
--bz-header-icons: var(--bz-ink);
--bz-search-btn: var(--bz-accent);
--bz-search-btn-icon: #ffffff;
--bz-nav-bg: #ffffff;
--bz-nav-text: var(--bz-ink);
--bz-nav-active: var(--bz-accent);
--bz-bubble-ring: var(--bz-cotton-2);
--bz-bubble-new: var(--bz-accent);
--bz-bubble-text: var(--bz-ink);
--bz-hero-text: #ffffff;
--bz-hero-button: var(--bz-accent);
--bz-hero-button-text: #ffffff;
--bz-heading: var(--bz-accent);
--bz-heading-dark: var(--bz-ink);
--bz-tab-active: var(--bz-ink);
--bz-tab-inactive: var(--bz-muted);
--bz-link: var(--bz-accent);
--bz-card-bg: #ffffff;
--bz-card-image-bg: var(--bz-cotton-2);
--bz-card-text: var(--bz-ink);
--bz-price: var(--bz-accent);
--bz-badge-bg: var(--bz-accent);
--bz-badge-text: #ffffff;
--bz-cart-button: var(--bz-green);
--bz-cart-button-icon: #ffffff;
--bz-tile-label-bg: var(--bz-accent);
--bz-tile-label-text: #ffffff;
--bz-tile-text: #ffffff;
--bz-marquee-title: var(--bz-muted);
--bz-news-bg: var(--bz-yellow);
--bz-news-title: var(--bz-accent);
--bz-news-text: #333333;
--bz-news-button: var(--bz-accent);
--bz-news-button-text: #ffffff;
--bz-footer-bg: var(--bz-cotton);
--bz-footer-text: var(--bz-ink);
--bz-footer-bottom-bg: #ffffff;
--bz-footer-bottom-text: var(--bz-muted-2);
}
@supports (color: color-mix(in srgb, red 10%, white)) {
.preset-boozy {
--bz-cotton: color-mix(in srgb, var(--color-primary) 6%, #fff);
--bz-cotton-2: color-mix(in srgb, var(--color-primary) 9%, #fff);
--bz-line: color-mix(in srgb, var(--color-primary) 14%, #fff);
}
}
/* Latin locales use Rubik (the Arabic font is untouched on purpose) */
body.preset-boozy:not(.rtl) { --base-font-family: var(--bz-font); font-family: var(--bz-font); }
.preset-boozy { color: var(--bz-ink); font-size: 14px; }
.preset-boozy .wrapper { background: var(--bz-page-bg); }
/* Narrow, boozy-style page column */
.preset-boozy .container { padding-left: 20px; padding-right: 20px; }
@media (min-width: 1300px) { .preset-boozy .container { max-width: 1265px; } }
/* ---------------------------------------------------------------- USP bar */
/* !important: the Colors panel paints .top-nav-wrap with the header colour (variables.blade.php) */
.preset-boozy .top-nav-wrap { background: var(--bz-usp-bg) !important; border-bottom: 0; }
.preset-boozy .top-nav { padding: 0; min-height: 35px; display: flex; align-items: center; }
.preset-boozy .top-nav > .d-flex { width: 100%; align-items: center; }
.preset-boozy .top-nav-left { padding: 0; }
.preset-boozy .bz-usp { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.preset-boozy .bz-usp li { font-size: 13px; color: var(--bz-usp-text); white-space: nowrap; line-height: 20px; }
.preset-boozy .bz-usp li::before { content: "\26A1"; margin-inline-end: 6px; font-size: 12px; }
.preset-boozy .top-nav-right-list > li,
.preset-boozy .top-nav-right-list .custom-dropdown { border: 0 !important; padding: 0 0 0 22px; }
.preset-boozy .top-nav-right-list > li > a,
.preset-boozy .top-nav-right-list .dropdown-toggle { font-size: 13px; color: var(--bz-usp-text) !important; padding: 0; height: 35px; display: flex; align-items: center; }
.preset-boozy .top-nav-right-list > li > a:hover { color: var(--bz-accent) !important; }
.preset-boozy .top-nav-right-list > li > a > i,
.preset-boozy .top-nav-right-list .dropdown-toggle > i:first-child { display: none; }
.preset-boozy .top-nav-right-list .dropdown-menu { top: 35px; }
.preset-boozy.rtl .top-nav-right-list > li,
.preset-boozy.rtl .top-nav-right-list .custom-dropdown { padding: 0 22px 0 0; }
/* ---------------------------------------------------------------- header */
.preset-boozy .header-wrap { background: var(--bz-header-bg) !important; }
.preset-boozy .header-wrap-inner { padding: 20px 0; }
.preset-boozy .header-wrap-inner > .container > .d-flex { align-items: center; gap: 28px; }
.preset-boozy .header-column-left { flex: 0 0 auto; }
.preset-boozy .header-logo img { max-height: 46px; max-width: 215px; width: auto; }
.preset-boozy .header-search-wrap-parent { flex: 1 1 auto; min-width: 0; }
.preset-boozy .header-search-wrap { max-width: none; }
.preset-boozy .header-search-lg,
.preset-boozy .header-search-lg.header-search-lg-background {
height: 46px; align-items: center; background: #fff;
border: 1px solid var(--bz-line); border-radius: 999px; padding: 0 5px 0 0; box-shadow: none;
}
.preset-boozy.rtl .header-search-lg { padding: 0 0 0 5px; }
.preset-boozy .header-search-lg:focus-within { border-color: var(--bz-accent); }
.preset-boozy .header-search-lg .search-input,
.preset-boozy .header-search-lg .search-input.focused {
height: 44px; background: transparent; border: 0; border-radius: 999px;
padding: 0 22px; font-size: 14px; color: var(--bz-ink); box-shadow: none;
}
.preset-boozy .header-search-lg .search-input::placeholder { color: var(--bz-muted); }
.preset-boozy .header-search-right { margin: 0; background: transparent !important; }
.preset-boozy .header-search-right .custom-dropdown { display: none; }
.preset-boozy .header-search-lg .btn-search {
width: 35px; height: 35px; min-width: 35px; margin: 0; border-radius: 50%;
background: var(--bz-search-btn); border: 0;
}
.preset-boozy .header-search-lg .btn-search:hover { filter: brightness(0.92); }
.preset-boozy .header-search-lg .btn-search svg { width: 17px; height: 17px; }
.preset-boozy .header-search-lg .btn-search svg path { stroke: var(--bz-search-btn-icon); }
.preset-boozy .header-search-wrap.has-suggestion .header-search-lg { border-radius: 23px; }
.preset-boozy .header-column-right { gap: 22px; align-items: center; }
.preset-boozy .header-column-right-item { margin: 0 !important; }
.preset-boozy .header-localization,
.preset-boozy .header-compare { display: none !important; }
.preset-boozy .header-column-right .icon-wrap > svg { width: 25px; height: 25px; }
.preset-boozy .header-column-right .icon-wrap > svg path { stroke: var(--bz-header-icons); }
.preset-boozy .header-column-right .icon-wrap > .count {
background: var(--bz-accent); color: #fff; font-size: 10px; font-weight: 700;
min-width: 18px; height: 18px; line-height: 18px; border-radius: 9px; top: -8px; right: -10px;
}
.preset-boozy .header-wrap-inner.sticky.show { box-shadow: 0 2px 14px rgba(28, 21, 23, 0.08); }
.preset-boozy .search-suggestions { border-radius: 18px; }
/* ---------------------------------------------------------------- category nav */
.preset-boozy .primary-menu { background: var(--bz-nav-bg); padding: 0; border-bottom: 1px solid var(--bz-line); }
.preset-boozy .primary-menu .swiper .swiper-wrapper .swiper-slide:first-child a { padding-inline-start: 0; }
.preset-boozy .nav-item-wrapper { border-radius: 0; }
.preset-boozy .nav-link.cat-drop-btn {
padding: 18px 13px; font-size: 15px; font-weight: 400; color: var(--bz-nav-text); border-radius: 0; line-height: 19px;
}
.preset-boozy .swiper-slide.nav-item.cat-dropdown:first-child .nav-link.cat-drop-btn { color: var(--bz-nav-active); font-weight: 600; }
.preset-boozy .nav-item-wrapper:hover .nav-link,
.preset-boozy .nav-item.cat-dropdown:hover .cat-drop-btn { color: var(--bz-nav-active); }
.preset-boozy .nav-link.cat-drop-btn .la-angle-down { display: none; }
.preset-boozy .primary-menu .swiper .swiper-button-prev,
.preset-boozy .primary-menu .swiper .swiper-button-next { background: var(--bz-ink); }
.preset-boozy .categories-dropdown.cat-dropdown-content { border-radius: 14px; }
/* ---------------------------------------------------------------- bubbles */
.preset-boozy .bz-bubbles-wrap { padding: 12px 0 6px; }
.preset-boozy .bz-bubbles-title {
font-size: 13px; font-weight: 500; color: var(--bz-muted); margin: 14px 0 18px; padding-inline-start: 15px; line-height: 1.3;
}
.preset-boozy .bz-bubble-row {
display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; padding: 8px 15px 6px; scroll-snap-type: x proximity;
}
.preset-boozy .bz-bubble-row::-webkit-scrollbar { display: none; }
.preset-boozy .bz-bubble {
flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; gap: 9px;
text-decoration: none; color: var(--bz-bubble-text); scroll-snap-align: start; position: relative;
}
.preset-boozy .bz-bubble-ring {
width: 96px; height: 96px; border-radius: 50%; padding: 3px; background: var(--bz-bubble-ring);
transition: background 0.2s, transform 0.2s;
}
.preset-boozy .bz-bubble:hover .bz-bubble-ring { background: var(--bz-accent); transform: translateY(-2px); }
.preset-boozy .bz-bubble-inner {
width: 90px; height: 90px; border-radius: 50%; overflow: hidden; background: #fff; border: 2px solid #fff;
display: flex; align-items: center; justify-content: center;
}
.preset-boozy .bz-bubble-inner img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.preset-boozy .bz-bubble-inner.bz-bubble-text {
background: var(--bz-bubble-new); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.preset-boozy .bz-bubble-name { font-size: 12.5px; font-weight: 500; line-height: 16px; text-align: center; max-width: 104px; }
.preset-boozy .bz-bubble-note {
position: absolute; top: -6px; inset-inline-end: -2px; background: var(--bz-accent); color: #fff; font-size: 10px; font-weight: 600;
line-height: 1; padding: 6px 8px; border-radius: 999px; white-space: nowrap;
}
/* ---------------------------------------------------------------- hero */
.preset-boozy .home-section-wrap { margin-top: 10px; }
.preset-boozy .home-section-inner { margin: 0; }
.preset-boozy .home-section-inner .home-slider-wrap { width: 100% !important; height: 525px; padding: 0; }
.preset-boozy .home-slider { border-radius: var(--bz-radius); }
.preset-boozy .home-slider .swiper-slide .slider-bg-image { background-color: var(--bz-cotton-2); }
.preset-boozy .home-slider .slide-content .captions { width: min(620px, 82%); }
.preset-boozy .home-slider .slide-content.align-left .captions { margin-inline-start: 40px; text-align: start; }
.preset-boozy .home-slider .slide-content.align-right .captions { margin-inline-end: 40px; text-align: end; }
.preset-boozy .home-slider .slide-content .captions .caption-2 { margin-left: 0; margin-right: 0; }
.preset-boozy .bz-eyebrow { display: block; font-size: 17px; font-weight: 500; color: var(--bz-hero-text); opacity: 0.92; margin-bottom: 12px; }
.preset-boozy .home-slider .slide-content .caption-1 {
font-size: 64px; font-weight: 800; line-height: 0.96; letter-spacing: -0.96px; color: var(--bz-hero-text);
text-shadow: 0 2px 22px rgba(28, 21, 23, 0.45);
}
.preset-boozy .home-slider .slide-content .caption-2 {
font-size: 16px; line-height: 26px; color: var(--bz-hero-text); opacity: 0.92; margin-top: 14px; max-width: 460px;
text-shadow: 0 1px 12px rgba(28, 21, 23, 0.35);
}
.preset-boozy .home-slider .slide-content.align-right .caption-2 { margin-inline-start: auto; }
.preset-boozy .bz-pill {
display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; padding: 13px 28px; border-radius: 999px;
background: var(--bz-hero-button); color: var(--bz-hero-button-text); font-size: 15px; font-weight: 600; line-height: 26px; transition: filter 0.2s;
}
.preset-boozy .swiper-slide:hover .bz-pill { filter: brightness(0.92); }
.preset-boozy .home-section-inner .home-slider-wrap .swiper-pagination { padding-inline-end: 24px; }
.preset-boozy .home-section-inner .home-slider-wrap .swiper-pagination .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.55); }
.preset-boozy .home-section-inner .home-slider-wrap .swiper-pagination .swiper-pagination-bullet-active { background: #fff; }
.preset-boozy .home-section-inner .home-slider-wrap .swiper-button-prev,
.preset-boozy .home-section-inner .home-slider-wrap .swiper-button-next { background: rgba(255, 255, 255, 0.35); }
.preset-boozy .home-section-inner .home-slider-wrap .swiper-button-prev:hover,
.preset-boozy .home-section-inner .home-slider-wrap .swiper-button-next:hover { background: var(--bz-accent); }
/* ---------------------------------------------------------------- section headings */
.preset-boozy .bz-section { margin-top: 46px; }
.preset-boozy .bz-section-inner { padding: 0 40px; }
.preset-boozy .bz-h2 { font-size: 24px; font-weight: 800; color: var(--bz-heading); line-height: 28px; margin: 0 0 24px; }
.preset-boozy .bz-h2-dark { font-size: 23px; font-weight: 600; color: var(--bz-heading-dark); line-height: 26px; margin: 0; }
.preset-boozy .bz-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.preset-boozy .bz-section-head .bz-h2, .preset-boozy .bz-section-head .bz-h2-dark { margin-bottom: 0; }
.preset-boozy .bz-viewall { display: flex; justify-content: flex-end; margin-top: 16px; }
.preset-boozy .bz-viewall a, .preset-boozy a.bz-link { font-size: 14px; font-weight: 600; color: var(--bz-link); }
.preset-boozy .bz-viewall a:hover, .preset-boozy a.bz-link:hover { filter: brightness(0.85); }
/* ---------------------------------------------------------------- tabbed products */
.preset-boozy .landscape-tab-products-wrap { margin-top: 44px; }
.preset-boozy .landscape-tab-products-wrap .tab-products-header { justify-content: center; }
.preset-boozy .landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) { margin-bottom: 8px; }
.preset-boozy .landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item {
font-size: 17px; font-weight: 700; color: var(--bz-tab-inactive); padding: 12px 16px; margin: 0 6px; line-height: 27px; border-radius: 4px;
}
.preset-boozy .landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item.active { color: var(--bz-tab-active); }
.preset-boozy .landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item::before,
.preset-boozy .landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item::after { display: none; }
.preset-boozy .landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item:hover:not(.active) { color: var(--bz-tab-active); }
/* PREV / NEXT above the product slider: the theme sizes them for an icon, so a translated
label ("VOLGENDE", "ZURÜCK") overflowed the 27px box and collided with its neighbour. */
.preset-boozy .landscape-left-tab-products .swiper-button-prev,
.preset-boozy .landscape-left-tab-products .swiper-button-next {
top: -56px; left: auto; right: auto; width: auto; height: auto; margin: 0; padding: 4px 2px;
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--bz-muted); background: transparent;
}
.preset-boozy .landscape-left-tab-products .swiper-button-next { inset-inline-end: 8px; }
.preset-boozy .landscape-left-tab-products .swiper-button-prev { inset-inline-end: 108px; flex-direction: row-reverse; }
.preset-boozy .landscape-left-tab-products .swiper-button-prev::after,
.preset-boozy .landscape-left-tab-products .swiper-button-next::after { font-size: 11px; }
.preset-boozy .landscape-left-tab-products .swiper-button-prev:hover,
.preset-boozy .landscape-left-tab-products .swiper-button-next:hover { color: var(--bz-ink); }
.preset-boozy .landscape-left-tab-products .swiper-button-disabled { opacity: 0.35; }
.preset-boozy .tab-content .swiper { padding-top: 12px; }
.preset-boozy .landscape-right-tab-products-inner { position: relative; }
.preset-boozy .landscape-right-tab-products-inner .tab-products-header { flex-direction: column; align-items: flex-start; gap: 6px; }
.preset-boozy .landscape-right-tab-products-inner .section-title {
font-size: 23px; font-weight: 600; color: var(--bz-heading-dark); margin: 0; padding: 0; line-height: 26px;
}
.preset-boozy .landscape-right-tab-products-inner .section-title::after { display: none; }
.preset-boozy .landscape-right-tab-products-inner .tabs:not(.featured-categories-tabs) .tab-item { font-size: 13.5px; padding: 6px 0; margin: 0 18px 0 0; }
.preset-boozy .landscape-right-tab-products-inner .tab-products-header-overflow.bz-single-tab { display: none; }
.preset-boozy .landscape-right-tab-products-inner .bz-viewall { position: absolute; inset-inline-end: 10px; top: 4px; margin: 0; }
.preset-boozy .products-slider .swiper-pagination-bullet-active { background: var(--bz-accent); }
/* ---------------------------------------------------------------- product card */
.preset-boozy .product-card {
container-type: inline-size; border: 0; border-radius: var(--bz-card-radius); background: var(--bz-card-bg); box-shadow: var(--bz-shadow);
margin: 0 9px; overflow: visible; transition: box-shadow 0.2s, transform 0.2s;
}
.preset-boozy .product-card:hover { box-shadow: 0 8px 24px rgba(28, 21, 23, 0.10); transform: translateY(-2px); }
.preset-boozy .product-card .product-card-top,
.preset-boozy.product-card-elegant-image .product-card .product-card-top,
.preset-boozy.product-card-modern-image .product-card .product-card-top {
padding: 23px; background: var(--bz-card-image-bg); border-radius: 16px; overflow: hidden;
}
.preset-boozy .product-card .product-image,
.preset-boozy.product-card-elegant-image .product-card .product-image,
.preset-boozy.product-card-modern-image .product-card .product-image { border-radius: var(--bz-radius); background: transparent; }
.preset-boozy .product-card .product-image > img { border-radius: var(--bz-radius); }
.preset-boozy .product-card .product-card-top .product-badge,
.preset-boozy.product-card-elegant-image .product-card .product-card-top .product-badge { left: 12px; top: 12px; right: auto; }
.preset-boozy.rtl .product-card .product-card-top .product-badge { left: auto; right: 12px; }
.preset-boozy .product-card .product-badge .badge {
background: var(--bz-badge-bg); color: var(--bz-badge-text); font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 8px; border-radius: 4px; border: 0;
}
.preset-boozy .product-card .product-badge .badge.badge-danger { background: var(--bz-ink); }
.preset-boozy .product-card .product-card-actions { top: 12px; right: 12px; flex-direction: row; gap: 6px; }
.preset-boozy.rtl .product-card .product-card-actions { right: auto; left: 12px; }
.preset-boozy .product-card .product-card-actions .btn-compare { display: none; }
.preset-boozy .product-card .product-card-actions .btn {
width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 1px 4px rgba(28, 21, 23, 0.12);
opacity: 1; visibility: visible; transform: none;
}
.preset-boozy .product-card .product-card-actions .btn svg { width: 17px; height: 17px; }
.preset-boozy .product-card .product-card-actions .btn svg path { stroke: var(--bz-ink); }
.preset-boozy .product-card .product-card-actions .btn-wishlist.added { background: var(--bz-accent); }
.preset-boozy .product-card .product-card-actions .btn-wishlist.added svg path { stroke: #fff; fill: #fff; }
.preset-boozy .product-card .product-card-middle { padding: 12px 18px 0; }
.preset-boozy .product-card .product-name { padding-bottom: 6px; }
.preset-boozy .product-card .product-name h6 {
font-size: 14px; font-weight: 600; line-height: 18px; color: var(--bz-card-text); background: transparent; text-align: start; min-height: 36px; text-decoration: none;
}
.preset-boozy .product-card .product-rating .back-stars { font-size: 13px; color: var(--bz-card-text); }
.preset-boozy .product-card .product-rating .front-stars { color: var(--bz-card-text); }
.preset-boozy .product-card .product-rating .rating-count,
.preset-boozy .product-card .product-rating .reviews { font-size: 11.5px; font-weight: 300; color: var(--bz-muted); }
/* position: static so the add-to-cart button positions against the card, not this row */
.preset-boozy .product-card .product-card-bottom { position: static; padding: 10px 18px 20px; min-height: 0; align-items: center; }
.preset-boozy .product-card .product-price {
flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; font-size: 16px; font-weight: 700; color: var(--bz-price);
}
.preset-boozy .product-card .product-price .previous-price { font-size: 16px; font-weight: 700; color: var(--bz-price); padding: 0; overflow: visible; text-overflow: clip; max-width: none; }
.preset-boozy .product-card .product-price .special-price { font-size: 16px; font-weight: 700; color: var(--bz-price); padding: 0; overflow: visible; max-width: none; }
.preset-boozy .product-card .product-price .special-price + .previous-price {
font-size: 12.5px; font-weight: 300; color: var(--bz-muted); text-decoration: line-through; padding: 0; margin: 0; overflow: visible; text-overflow: clip;
}
.preset-boozy .product-card .product-price .price-fraction,
.preset-boozy .product-card .product-price .previous-price .price-fraction { font-size: 16px; top: 0; right: 0; margin: 0; display: inline; }
.preset-boozy .product-card .product-price .special-price + .previous-price .price-fraction { display: none; }
.preset-boozy .product-card .btn-add-to-cart {
width: 36px; height: 36px; border-radius: 50%; background: var(--bz-cart-button) !important; border: 0 !important; padding: 0; flex: 0 0 36px;
box-shadow: 0 2px 8px rgba(28, 21, 23, 0.18);
}
.preset-boozy .product-card .btn-add-to-cart > svg path { stroke: var(--bz-cart-button-icon) !important; }
.preset-boozy .product-card .btn-add-to-cart:hover { filter: brightness(0.9); }
.preset-boozy .product-card .btn-add-to-cart[disabled] { background: #d8d5d9 !important; box-shadow: none; }
@supports (top: 1cqw) {
.preset-boozy .product-card .btn-add-to-cart { position: absolute; inset-inline-end: 22px; top: calc(100cqw - 50px); z-index: 2; }
}
.preset-boozy .product-card-skeleton { border-radius: var(--bz-card-radius); }
/* ---------------------------------------------------------------- hot tiles (campaign grid) */
.preset-boozy .bz-tiles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.preset-boozy .bz-tile {
position: relative; display: block; aspect-ratio: 1; border-radius: var(--bz-radius); overflow: hidden; background: var(--bz-cotton-2);
color: var(--bz-tile-text); text-decoration: none; isolation: isolate;
}
.preset-boozy .bz-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.preset-boozy .bz-tile:hover img { transform: scale(1.04); }
.preset-boozy .bz-tile::after {
content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 21, 23, 0) 42%, rgba(28, 21, 23, 0.62) 100%); z-index: 1;
}
.preset-boozy .bz-tile-label {
position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; background: var(--bz-tile-label-bg); color: var(--bz-tile-label-text);
font-size: 10px; font-weight: 400; line-height: 1.15; padding: 8px 10px; border-radius: 6px; max-width: 130px;
}
.preset-boozy .bz-tile-body { position: absolute; inset-inline: 16px; bottom: 16px; z-index: 2; }
.preset-boozy .bz-tile-title { font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0 0 6px; color: var(--bz-tile-text); }
.preset-boozy .bz-tile-cta { font-size: 13.5px; font-weight: 700; color: var(--bz-tile-text); }
/* ---------------------------------------------------------------- spotlight tiles */
.preset-boozy .bz-spot-card {
background: var(--bz-card-bg); border-radius: var(--bz-card-radius); box-shadow: var(--bz-shadow); padding: 0 0 22px; display: flex; flex-direction: column;
transition: box-shadow 0.2s, transform 0.2s;
}
.preset-boozy .bz-spot-card:hover { box-shadow: 0 8px 24px rgba(28, 21, 23, 0.10); transform: translateY(-2px); }
.preset-boozy .bz-spot-media { display: block; aspect-ratio: 1; border-radius: var(--bz-radius); overflow: hidden; background: var(--bz-cotton-2); }
.preset-boozy .bz-spot-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preset-boozy .bz-spot-body { padding: 16px 18px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.preset-boozy .bz-spot-eyebrow { font-size: 12.5px; font-weight: 600; color: var(--bz-link); }
.preset-boozy .bz-spot-title { font-size: 16px; font-weight: 700; color: var(--bz-card-text); margin: 0; line-height: 1.3; }
.preset-boozy .bz-spot-title a { color: inherit; }
.preset-boozy .bz-spot-text {
font-size: 13.5px; font-weight: 300; color: var(--bz-muted-2); line-height: 20px; margin: 0;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.preset-boozy .bz-spot-body .bz-link { margin-top: auto; font-size: 13.5px; font-weight: 700; }
/* ---------------------------------------------------------------- brand marquee */
.preset-boozy .bz-marquee-wrap { padding: 36px 0; overflow: hidden; }
.preset-boozy .bz-marquee-title { font-size: 13px; font-weight: 700; color: var(--bz-marquee-title); text-align: center; text-transform: lowercase; margin: 0 0 26px; }
.preset-boozy .bz-marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.preset-boozy .bz-marquee-track { display: flex; gap: 20px; width: max-content; animation: bz-scroll 32s linear infinite; }
.preset-boozy .bz-marquee-mask:hover .bz-marquee-track { animation-play-state: paused; }
.preset-boozy .bz-marquee-item {
flex: 0 0 140px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
color: var(--bz-ink); text-decoration: none; font-size: 13px; font-weight: 500; text-align: center;
}
.preset-boozy .bz-marquee-item img { max-width: 120px; max-height: 60px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 0.2s, opacity 0.2s; }
.preset-boozy .bz-marquee-item:hover img { filter: none; opacity: 1; }
.preset-boozy .bz-marquee-item.is-category img { width: 56px; height: 56px; border-radius: 50%; filter: none; opacity: 1; }
@keyframes bz-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.preset-boozy.rtl .bz-marquee-track { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { .preset-boozy .bz-marquee-track { animation: none; } }
/* ---------------------------------------------------------------- newsletter block */
.preset-boozy .bz-news-wrap { margin-top: 60px; }
.preset-boozy .bz-news {
background: var(--bz-news-bg); border-radius: 80px 80px 0 0; padding: 90px 40px 80px;
display: grid; grid-template-columns: 1.05fr 0.95fr 0.8fr; gap: 40px; align-items: center;
}
.preset-boozy .bz-news-big { font-size: 70px; font-weight: 900; line-height: 56px; color: var(--bz-news-title); margin: 0; letter-spacing: -1px; }
.preset-boozy .bz-news-mid h3 { font-size: 24px; font-weight: 700; color: var(--bz-news-title); margin: 0 0 10px; line-height: 1.2; }
.preset-boozy .bz-news-mid p { font-size: 16px; line-height: 24px; color: var(--bz-news-text); margin: 0; }
.preset-boozy .bz-news-form { display: flex; flex-direction: column; gap: 14px; }
.preset-boozy .bz-news-form input.form-control {
height: 51px; border: 0; border-radius: 100px; background: #fff; padding: 0 22px; font-size: 14px; color: var(--bz-ink); box-shadow: none;
}
.preset-boozy .bz-news-form input.form-control:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
.preset-boozy .bz-news-form .btn-subscribe {
height: 54px; width: 175px; border-radius: 9999px; background: var(--bz-news-button); border: 0; color: var(--bz-news-button-text); font-size: 18px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.preset-boozy .bz-news-form .btn-subscribe:hover { filter: brightness(0.92); }
.preset-boozy .bz-news-form .bz-news-privacy { font-size: 12px; color: var(--bz-news-text); opacity: 0.8; }
.preset-boozy .bz-news-form .bz-news-privacy a { color: var(--bz-news-title); text-decoration: underline; }
/* ---------------------------------------------------------------- footer */
.preset-boozy .footer-wrap { background: var(--bz-footer-bottom-bg) !important; border-top: 0; }
.preset-boozy .footer { padding-top: 0; background: transparent !important; }
.preset-boozy .footer-top {
background: var(--bz-footer-bg); box-shadow: 0 0 0 100vmax var(--bz-footer-bg); clip-path: inset(0 -100vmax); padding: 56px 0 48px; color: var(--bz-footer-text);
}
@media (min-width: 992px) {
.preset-boozy .footer-top > .row > div { flex: 0 0 25%; max-width: 25%; }
}
/* Four columns like the reference: the tag cloud would wrap onto a fifth row */
.preset-boozy .footer-top > .row > div:has(> .footer-tags) { display: none; }
.preset-boozy .footer-top .title { font-size: 14px; font-weight: 700; color: var(--bz-footer-text) !important; margin-bottom: 18px; }
.preset-boozy .footer-links:not(.footer-tags) .list-inline li { margin-bottom: 12px; }
.preset-boozy .footer-links:not(.footer-tags) .list-inline li a { font-size: 13.5px; font-weight: 300; color: var(--bz-footer-text) !important; }
.preset-boozy .footer-links:not(.footer-tags) .list-inline li a:hover { color: var(--bz-accent) !important; }
.preset-boozy .contact-info li { font-size: 14px; font-weight: 300; color: var(--bz-footer-text) !important; margin-bottom: 10px; }
.preset-boozy .contact-info li a { color: var(--bz-footer-text) !important; }
.preset-boozy .contact-info li a:hover { color: var(--bz-accent) !important; }
.preset-boozy .contact-info li i { color: var(--bz-accent) !important; }
.preset-boozy .contact-info pre { font-family: inherit; font-size: 14px; font-weight: 300; margin: 0; background: none; color: var(--bz-footer-text) !important; }
.preset-boozy .social-links { margin: 18px 0 0 -8px; }
.preset-boozy .social-links li a { color: var(--bz-footer-text) !important; }
.preset-boozy .social-links li a i { font-size: 22px; }
.preset-boozy .social-links li a:hover { color: var(--bz-accent) !important; }
.preset-boozy .social-links svg { fill: var(--bz-footer-text); }
.preset-boozy .footer-bottom { margin-top: 0; padding: 32px 0; border-top: 0; }
.preset-boozy .footer-text { font-size: 13px; color: var(--bz-footer-bottom-text) !important; }
.preset-boozy .footer-text a { color: var(--bz-footer-bottom-text) !important; font-weight: 600; }
.preset-boozy .footer-payment > img { max-height: 28px; }
/* ---------------------------------------------------------------- responsive */
@media (max-width: 1199px) {
.preset-boozy .bz-section-inner { padding: 0 10px; }
.preset-boozy .home-slider .slide-content .caption-1 { font-size: 52px; }
.preset-boozy .bz-news { grid-template-columns: 1fr 1fr; padding: 60px 32px; }
.preset-boozy .bz-news-big { grid-column: 1 / -1; text-align: center; font-size: 56px; line-height: 48px; }
}
@media (max-width: 991px) {
.preset-boozy .header-wrap-inner { padding: 12px 0; }
.preset-boozy .header-wrap-inner > .container > .d-flex { gap: 12px; }
.preset-boozy .bz-tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.preset-boozy .home-section-inner .home-slider-wrap { height: 440px; }
.preset-boozy .bz-news { grid-template-columns: 1fr; text-align: center; border-radius: 40px 40px 0 0; }
.preset-boozy .bz-news-form { align-items: center; }
.preset-boozy .bz-news-form input.form-control { max-width: 380px; width: 100%; }
.preset-boozy .footer-top { padding: 40px 0 36px; }
.preset-boozy .footer-links { margin-top: 30px; }
}
@media (max-width: 767px) {
.preset-boozy .bz-section { margin-top: 34px; }
.preset-boozy .bz-h2 { font-size: 20px; line-height: 24px; margin-bottom: 16px; }
.preset-boozy .bz-h2-dark { font-size: 19px; }
.preset-boozy .home-section-inner .home-slider-wrap { height: 380px; }
.preset-boozy .home-slider .slide-content .caption-1 { font-size: 38px; line-height: 1; letter-spacing: -0.5px; }
.preset-boozy .home-slider .slide-content .caption-2 { font-size: 14px; line-height: 22px; margin-top: 10px; }
.preset-boozy .home-slider .slide-content.align-left .captions,
.preset-boozy .home-slider .slide-content.align-right .captions { margin: 0 24px; width: auto; }
.preset-boozy .bz-pill { padding: 11px 22px; font-size: 14px; margin-top: 16px; }
.preset-boozy .bz-bubble { flex-basis: 84px; }
.preset-boozy .bz-bubble-ring { width: 78px; height: 78px; }
.preset-boozy .bz-bubble-inner { width: 72px; height: 72px; }
.preset-boozy .bz-bubble-name { font-size: 11.5px; }
.preset-boozy .landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item { font-size: 15px; padding: 8px 10px; margin: 0 2px; }
.preset-boozy .product-card { margin: 0 5px; }
.preset-boozy .product-card .product-card-top { padding: 8px; }
.preset-boozy .product-card .product-card-middle { padding: 10px 12px 0; }
.preset-boozy .product-card .product-card-bottom { padding: 8px 12px 14px; }
.preset-boozy .bz-spot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.preset-boozy .bz-spot-body { padding: 12px 14px 0; }
.preset-boozy .bz-news { padding: 44px 20px 40px; border-radius: 28px 28px 0 0; }
.preset-boozy .bz-news-big { font-size: 44px; line-height: 40px; }
.preset-boozy .bz-news-mid h3 { font-size: 20px; }
.preset-boozy .bz-marquee-item { flex-basis: 110px; height: 80px; }
.preset-boozy .landscape-right-tab-products-inner .bz-viewall { position: static; margin-top: 12px; justify-content: center; }
}
@supports (top: 1cqw) {
@media (max-width: 767px) {
.preset-boozy .product-card .btn-add-to-cart { inset-inline-end: 12px; top: calc(100cqw - 46px); }
}
}
@media (max-width: 480px) {
.preset-boozy .bz-tiles-grid { gap: 10px; }
.preset-boozy .bz-tile-title { font-size: 14px; }
.preset-boozy .bz-tile-label { font-size: 9px; padding: 6px 8px; top: 10px; inset-inline-start: 10px; }
.preset-boozy .bz-tile-body { inset-inline: 12px; bottom: 12px; }
.preset-boozy .bz-spot-grid { grid-template-columns: 1fr; }
.preset-boozy .home-section-inner .home-slider-wrap { height: 340px; }
.preset-boozy .home-slider .slide-content .caption-1 { font-size: 32px; }
}
/* =====================================================================
Product card v2 - the boozyshop card: big 4-per-row cards, tinted image box,
pill sale badge, hover cart button, brand line, rating row, stock line.
(Later rules override the block above; slidesPerView is set by boozy_scripts.)
===================================================================== */
.preset-boozy {
--bz-price: var(--bz-ink);
--bz-price-sale: var(--bz-accent);
--bz-stars: #F5B301;
--bz-stock: #1DB954;
}
.preset-boozy .product-card { margin: 0 9px; padding-bottom: 20px; box-shadow: 0 1px 6px rgba(28, 21, 23, 0.06); }
.preset-boozy .product-card .product-card-top,
.preset-boozy.product-card-elegant-image .product-card .product-card-top,
.preset-boozy.product-card-modern-image .product-card .product-card-top { padding: 10px; border-radius: 16px; overflow: visible; }
.preset-boozy .product-card .product-image { overflow: hidden; }
.preset-boozy .product-card .product-card-top .product-badge,
.preset-boozy.product-card-elegant-image .product-card .product-card-top .product-badge { left: -6px; top: -6px; right: auto; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.preset-boozy.rtl .product-card .product-card-top .product-badge { left: auto; right: -6px; }
.preset-boozy .product-card .product-badge .badge {
display: inline-flex; align-items: center; background: var(--bz-badge-bg); color: var(--bz-badge-text);
font-size: 13px; font-weight: 700; line-height: 1; padding: 8px 14px; border-radius: 999px; border: 0; margin: 0; letter-spacing: 0.2px;
}
.preset-boozy .product-card .product-badge .badge.badge-info { background: #fff; color: var(--bz-ink); box-shadow: 0 1px 4px rgba(28, 21, 23, 0.12); font-weight: 600; }
.preset-boozy .product-card .product-badge .badge.badge-danger { background: var(--bz-ink); color: #fff; }
.preset-boozy .product-card .product-card-actions { top: 14px; right: 14px; opacity: 0; transition: opacity 0.2s; }
.preset-boozy.rtl .product-card .product-card-actions { right: auto; left: 14px; }
.preset-boozy .product-card:hover .product-card-actions { opacity: 1; }
.preset-boozy .product-card .product-card-actions .btn { width: 34px; height: 34px; }
.preset-boozy .product-card .product-card-middle { padding: 18px 20px 0; gap: 8px; }
.preset-boozy .product-card .bz-brand {
display: block; font-size: 12px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bz-muted); line-height: 1.2;
}
.preset-boozy .product-card:hover .bz-brand { color: var(--bz-accent); }
.preset-boozy .product-card .product-name { padding: 0; }
.preset-boozy .product-card .product-name h6 { font-size: 17px; font-weight: 700; line-height: 22px; min-height: 44px; }
.preset-boozy .product-card .product-rating-container { margin-top: 4px; }
.preset-boozy .product-card .product-rating { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.preset-boozy .product-card .bz-rating-avg { font-size: 14px; font-weight: 700; color: var(--bz-ink); }
.preset-boozy .product-card .product-rating .back-stars { font-size: 15px; color: #E3DDE0; line-height: 1; }
.preset-boozy .product-card .product-rating .front-stars { color: var(--bz-stars); }
.preset-boozy .product-card .product-rating .rating-count,
.preset-boozy .product-card .product-rating .reviews { font-size: 13.5px; font-weight: 300; color: var(--bz-muted); padding: 0; margin: 0; line-height: 1; }
.preset-boozy .product-card .product-rating .rating-count::before { content: "("; }
.preset-boozy .product-card .product-rating .rating-count::after { content: ")"; }
.preset-boozy .product-card .bz-stock { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--bz-stock); line-height: 1.2; }
.preset-boozy .product-card .bz-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
.preset-boozy .product-card .bz-stock.is-out { color: var(--bz-muted); }
.preset-boozy .product-card .product-card-bottom { padding: 12px 20px 0; }
.preset-boozy .product-card .product-price { font-size: 21px; gap: 2px 10px; }
.preset-boozy .product-card .product-price .previous-price { font-size: 21px; color: var(--bz-price); }
.preset-boozy .product-card .product-price .special-price { font-size: 21px; color: var(--bz-price-sale); }
.preset-boozy .product-card .product-price .special-price + .previous-price { font-size: 15px; font-weight: 300; color: var(--bz-muted); }
.preset-boozy .product-card .product-price .price-fraction,
.preset-boozy .product-card .product-price .previous-price .price-fraction { font-size: 21px; }
/* Sale badge like the reference: a bold pill "-20% off" hanging over the top-left corner */
.preset-boozy .product-card .product-card-top .product-badge,
.preset-boozy.product-card-elegant-image .product-card .product-card-top .product-badge { left: -8px; top: -8px; }
.preset-boozy.rtl .product-card .product-card-top .product-badge { left: auto; right: -8px; }
.preset-boozy .product-card .product-badge .badge.bz-sale {
font-size: 14px; font-weight: 800; padding: 10px 16px; gap: 5px; letter-spacing: 0.1px;
box-shadow: 0 3px 10px rgba(28, 21, 23, 0.16); white-space: nowrap;
}
.preset-boozy .product-card .product-badge .badge.bz-sale bdi { direction: ltr; unicode-bidi: isolate; }
.preset-boozy .product-card .product-badge .badge.bz-sale .bz-off { font-weight: 400; font-size: 13px; opacity: 0.95; }
@media (max-width: 767px) {
.preset-boozy .product-card .product-badge .badge.bz-sale { font-size: 12px; padding: 7px 12px; }
.preset-boozy .product-card .product-badge .badge.bz-sale .bz-off { font-size: 11px; }
}
/* the struck-through old price keeps its cents ("€24.00", not "€24.") */
.preset-boozy .product-card .product-price .special-price + .previous-price .price-fraction { display: inline; font-size: inherit; }
.preset-boozy .product-card .btn-add-to-cart { width: 44px; height: 44px; flex-basis: 44px; box-shadow: 0 4px 14px rgba(28, 21, 23, 0.18); }
.preset-boozy .product-card .btn-add-to-cart > svg { width: 20px; height: 20px; }
@supports (top: 1cqw) {
.preset-boozy .product-card .btn-add-to-cart { inset-inline-end: 16px; top: calc(100cqw - 60px); opacity: 0; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s; }
.preset-boozy .product-card:hover .btn-add-to-cart,
.preset-boozy .product-card .btn-add-to-cart.btn-loading { opacity: 1; transform: none; }
@media (hover: none) { .preset-boozy .product-card .btn-add-to-cart { opacity: 1; transform: none; } }
}
@media (hover: none) { .preset-boozy .product-card .product-card-actions { opacity: 1; } }
/* the collection slider (product tabs two) uses the same card, 5 per row - slightly tighter */
.preset-boozy .landscape-right-tab-products .product-card .product-name h6 { font-size: 15px; line-height: 20px; min-height: 40px; }
.preset-boozy .landscape-right-tab-products .product-card .product-price,
.preset-boozy .landscape-right-tab-products .product-card .product-price .previous-price,
.preset-boozy .landscape-right-tab-products .product-card .product-price .special-price,
.preset-boozy .landscape-right-tab-products .product-card .product-price .price-fraction { font-size: 18px; }
.preset-boozy .landscape-right-tab-products .product-card .product-card-top { padding: 10px; }
@media (max-width: 767px) {
.preset-boozy .product-card { margin: 0 5px; padding-bottom: 14px; }
.preset-boozy .product-card .product-card-top { padding: 8px; }
.preset-boozy .product-card .product-card-middle { padding: 12px 14px 0; gap: 5px; }
.preset-boozy .product-card .product-name h6 { font-size: 14px; line-height: 18px; min-height: 36px; }
.preset-boozy .product-card .product-card-bottom { padding: 8px 14px 0; }
.preset-boozy .product-card .product-price, .preset-boozy .product-card .product-price .previous-price,
.preset-boozy .product-card .product-price .special-price, .preset-boozy .product-card .product-price .price-fraction { font-size: 16px; }
.preset-boozy .product-card .product-badge .badge { font-size: 11px; padding: 6px 10px; }
.preset-boozy .product-card .btn-add-to-cart { width: 36px; height: 36px; flex-basis: 36px; }
.preset-boozy .product-card .btn-add-to-cart > svg { width: 16px; height: 16px; }
}
@supports (top: 1cqw) {
@media (max-width: 767px) { .preset-boozy .product-card .btn-add-to-cart { inset-inline-end: 10px; top: calc(100cqw - 46px); } }
}
/* =====================================================================
Product page - the boozyshop product layout: tinted gallery box with the
sale pill + heart, brand line, big title, rating, price, low-stock pill,
free-shipping line, boxed qty stepper + full-width green buy button,
soft USP info box.
===================================================================== */
.preset-boozy .product-details-wrap { margin-top: 26px; }
.preset-boozy .product-details-top { margin-bottom: 40px; }
.preset-boozy .product-details-top > .d-flex { gap: 56px; align-items: flex-start; }
.preset-boozy .product-details-top .right-sidebar { display: none; }
.preset-boozy .product-gallery { width: 49%; min-width: 0; flex: 0 0 49%; padding: 0 !important; top: 110px; }
/* thin tinted frame around the product image (owner: "كتير رفيع") */
.preset-boozy .product-gallery-preview-wrap {
border: 0; border-radius: 20px; background: var(--bz-card-image-bg); padding: 10px; margin-bottom: 14px; overflow: visible !important;
}
.preset-boozy .product-gallery-preview-wrap .product-gallery-preview { border-radius: 12px; overflow: hidden; }
.preset-boozy .product-gallery-preview .gallery-preview-item { background: transparent; cursor: zoom-in; }
.preset-boozy .product-gallery-preview .gallery-preview-item > img { border-radius: 12px; }
.preset-boozy .product-gallery-preview .gallery-view-icon { background: #fff; color: var(--bz-ink); box-shadow: 0 1px 4px rgba(28, 21, 23, 0.14); }
.preset-boozy .product-gallery-preview .swiper-button-prev,
.preset-boozy .product-gallery-preview .swiper-button-next { background: #fff; color: var(--bz-ink); box-shadow: 0 1px 6px rgba(28, 21, 23, 0.14); }
.preset-boozy .product-offers-container { top: 60px; left: 14px; }
.preset-boozy .product-offer-badge { border-radius: 999px; background: #fff; color: var(--bz-ink); box-shadow: 0 1px 4px rgba(28, 21, 23, 0.12); font-size: 13px; font-weight: 600; padding: 8px 12px; }
/* The overlay covers only the (square) preview box, not the thumbnail strip below it */
.preset-boozy .bz-gallery-overlay { position: absolute; inset: 0 0 auto 0; aspect-ratio: 1 / 1; z-index: 5; pointer-events: none; }
.preset-boozy .bz-gallery-overlay .bz-sale {
position: absolute; top: -8px; inset-inline-start: -8px; display: inline-flex; align-items: center; gap: 6px; pointer-events: auto;
background: var(--bz-badge-bg); color: var(--bz-badge-text); font-size: 16px; font-weight: 800; line-height: 1; padding: 12px 18px;
border-radius: 999px; box-shadow: 0 3px 12px rgba(28, 21, 23, 0.18); white-space: nowrap;
}
.preset-boozy .bz-gallery-overlay .bz-sale bdi { direction: ltr; unicode-bidi: isolate; }
.preset-boozy .bz-gallery-overlay .bz-sale .bz-off { font-weight: 400; font-size: 14px; }
.preset-boozy .bz-gallery-wish {
position: absolute; top: 22px; inset-inline-end: 22px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: transparent;
display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer; transition: background 0.2s;
}
.preset-boozy .bz-gallery-wish:hover { background: rgba(255, 255, 255, 0.7); }
.preset-boozy .bz-gallery-wish svg path { stroke: var(--bz-ink); transition: fill 0.2s, stroke 0.2s; }
.preset-boozy .bz-gallery-wish.added svg path { stroke: var(--bz-accent); fill: var(--bz-accent); }
.preset-boozy .bz-gift {
position: absolute; bottom: 22px; inset-inline-start: 22px; display: inline-flex; align-items: center; gap: 8px; pointer-events: auto;
background: var(--bz-gift-bg, #FFE9A8); color: var(--bz-gift-text, var(--bz-ink)); font-size: 15px; font-weight: 700; line-height: 1; padding: 12px 16px;
border-radius: 999px; box-shadow: 0 3px 12px rgba(28, 21, 23, 0.14); white-space: nowrap;
}
.preset-boozy .bz-gift .bz-gift-icon { font-size: 16px; line-height: 1; }
/* card variant: sits on the image box, bottom corner (the cart button takes the other corner) */
.preset-boozy .product-card .bz-gift-card {
bottom: 12px; inset-inline-start: 12px; z-index: 3; font-size: 12px; padding: 8px 11px; gap: 6px; box-shadow: 0 2px 8px rgba(28, 21, 23, 0.12);
}
.preset-boozy .product-card .bz-gift-card .bz-gift-icon { font-size: 13px; }
@media (max-width: 767px) {
.preset-boozy .product-card .bz-gift-card { bottom: 8px; inset-inline-start: 8px; font-size: 11px; padding: 6px 9px; }
}
@media (max-width: 576px) {
.preset-boozy .bz-gift { bottom: 12px; inset-inline-start: 12px; font-size: 13px; padding: 9px 12px; }
}
.preset-boozy .bz-lowstock .bz-lowstock-count { display: inline-flex; align-items: center; gap: 8px; }
.preset-boozy .product-gallery-thumbnail .gallery-thumbnail-item { border-radius: 12px; border: 2px solid transparent; background: var(--bz-card-image-bg); overflow: hidden; }
.preset-boozy .product-gallery-thumbnail .swiper-slide-thumb-active .gallery-thumbnail-item,
.preset-boozy .product-gallery-thumbnail .gallery-thumbnail-item.active { border-color: var(--bz-accent); }
.preset-boozy .product-details-info { padding: 6px 0 0; }
.preset-boozy .product-details-info .bz-brand { display: block; font-size: 13px; font-weight: 400; letter-spacing: 1.6px; text-transform: uppercase; color: var(--bz-muted); margin: 0 0 10px; }
.preset-boozy .product-details-info .product-name { font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -0.4px; color: var(--bz-ink); margin: 0 0 14px; }
.preset-boozy .product-details-info .product-rating { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.preset-boozy .product-details-info .product-rating .back-stars { font-size: 17px; color: #E3DDE0; line-height: 1; }
.preset-boozy .product-details-info .product-rating .front-stars { color: var(--bz-stars); }
.preset-boozy .product-details-info .bz-rating-avg { font-size: 15px; font-weight: 700; color: var(--bz-ink); }
.preset-boozy .product-details-info .product-rating .rating-count,
.preset-boozy .product-details-info .product-rating .reviews { font-size: 14px; font-weight: 300; color: var(--bz-muted); padding: 0; margin: 0; }
.preset-boozy .product-details-info .product-rating .rating-count::before { content: "\2022 "; color: var(--bz-muted); }
.preset-boozy .product-details-info .brief-description { font-size: 16px; line-height: 1.75; color: #3D3A3C; margin: 16px 0 10px; }
.preset-boozy .product-details-info .brief-description p:last-child { margin-bottom: 0; }
.preset-boozy .details-info-top-actions { margin-top: 8px; }
.preset-boozy .details-info-top-actions .btn-wishlist,
.preset-boozy .details-info-top-actions .btn-compare { display: none !important; }
.preset-boozy .details-info-top-actions .stock-status { font-size: 14px; font-weight: 600; margin: 0; }
.preset-boozy .details-info-top-actions .stock-status.in-stock { color: var(--bz-stock); }
.preset-boozy .details-info-top-actions .stock-status.in-stock::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-inline-end: 8px; vertical-align: 1px; }
.preset-boozy .details-info-top-actions .stock-status.out-of-stock { color: var(--bz-muted); }
.preset-boozy .details-info-middle { margin-top: 18px; }
.preset-boozy .product-show-price-section { margin-bottom: 16px; }
.preset-boozy .product-show-price-section .product-price { display: flex; align-items: baseline; gap: 10px; font-size: 28px; font-weight: 800; line-height: 1; color: var(--bz-price); }
.preset-boozy .product-show-price-section .product-price .special-price { color: var(--bz-price-sale); font-size: 28px; font-weight: 800; }
.preset-boozy .product-show-price-section .product-price .previous-price { font-size: 18px; font-weight: 300; color: var(--bz-muted); text-decoration: line-through; }
.preset-boozy .product-show-price-section .product-price .price-fraction { font-size: inherit; position: static; margin: 0; }
.preset-boozy .bz-lowstock {
display: inline-flex; align-items: center; gap: 8px; background: var(--bz-cotton-2); color: var(--bz-accent); font-size: 15px; font-weight: 500;
padding: 14px 18px; border-radius: 12px; margin: 4px 0 16px; line-height: 1.2;
}
.preset-boozy .bz-lowstock b { font-weight: 700; }
.preset-boozy .bz-lowstock .bz-dot { opacity: 0.6; }
.preset-boozy .bz-freeship { font-size: 15px; color: #3D3A3C; margin: 0 0 18px; }
.preset-boozy .product-variants .form-group label { font-size: 15px; font-weight: 700; color: var(--bz-ink); }
.preset-boozy .product-variants .form-control,
.preset-boozy .product-variants .custom-select,
.preset-boozy .product-variants select { border-radius: 12px; border: 1px solid var(--bz-line); height: 48px; font-size: 15px; }
.preset-boozy .details-info-middle-actions { display: flex; align-items: stretch; gap: 14px; margin-top: 6px; }
.preset-boozy .number-picker-lg { margin: 0; flex: 0 0 auto; }
.preset-boozy .number-picker-lg label { display: none; }
.preset-boozy .number-picker-lg .input-group-quantity {
display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; height: 64px; width: 164px; padding: 0;
border: 1px solid var(--bz-line); border-radius: 12px; background: #fff; position: relative; overflow: hidden;
}
.preset-boozy .number-picker-lg .btn-wrapper { display: contents; }
.preset-boozy .number-picker-lg .input-quantity {
order: 2; height: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
background: transparent !important; box-shadow: none !important; text-align: center; font-size: 20px; font-weight: 700; color: var(--bz-ink);
}
.preset-boozy .number-picker-lg .btn-number {
position: static !important; transform: none !important; width: 48px; height: 100%; margin: 0; padding: 0; border: 0 !important; border-radius: 0;
background: transparent !important; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 400; color: var(--bz-ink); box-shadow: none;
}
.preset-boozy .number-picker-lg .btn-number:hover { background: var(--bz-cotton) !important; }
.preset-boozy .number-picker-lg .btn-number:disabled { opacity: 0.35; }
.preset-boozy .number-picker-lg .btn-minus { order: 1; }
.preset-boozy .number-picker-lg .btn-plus { order: 3; }
.preset-boozy .details-info-middle-actions .btn-add-to-cart {
flex: 1 1 auto; height: 64px; margin: 0 !important; border-radius: 12px !important; border: 0 !important; padding: 0 24px;
background: var(--bz-cart-button) !important; color: var(--bz-cart-button-icon) !important; font-size: 18px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 6px 18px rgba(28, 21, 23, 0.12); transition: filter 0.2s;
}
.preset-boozy .details-info-middle-actions .btn-add-to-cart::before {
content: ""; width: 22px; height: 22px; flex: 0 0 22px; background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.preset-boozy .details-info-middle-actions .btn-add-to-cart:hover { filter: brightness(0.92); }
.preset-boozy .details-info-middle-actions .btn-add-to-cart:disabled { background: #d8d5d9 !important; box-shadow: none; }
.preset-boozy .details-info-middle-actions .btn-add-to-cart.btn-loading { color: transparent !important; }
.preset-boozy .details-info-middle-actions .btn-add-to-cart.btn-loading::before { opacity: 0; }
.preset-boozy .bz-infobox { list-style: none; margin: 24px 0 0; padding: 20px 24px; background: var(--bz-cotton); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; }
.preset-boozy .bz-infobox li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--bz-ink); line-height: 1.5; }
.preset-boozy .bz-infobox li i { font-size: 20px; line-height: 1.2; color: var(--bz-stock); flex: 0 0 22px; text-align: center; }
.preset-boozy .bz-infobox li b { font-weight: 600; }
.preset-boozy .bz-infobox .bz-infobox-sub { color: var(--bz-muted-2); }
.preset-boozy .details-info-bottom { margin-top: 26px; }
.preset-boozy .details-info-bottom .additional-info li { font-size: 13.5px; color: var(--bz-muted-2); }
.preset-boozy .details-info-bottom .additional-info li label { color: var(--bz-muted); font-weight: 400; }
.preset-boozy .details-info-bottom .additional-info li a { color: var(--bz-ink); }
.preset-boozy .details-info-bottom .additional-info li a:hover { color: var(--bz-accent); }
.preset-boozy .product-details-tab .nav-link { font-size: 16px; font-weight: 600; color: var(--bz-muted); }
.preset-boozy .product-details-tab .nav-link.active { color: var(--bz-ink); }
.preset-boozy .product-details-tab .nav-link::before, .preset-boozy .product-details-tab .nav-link::after { background: var(--bz-accent); }
.preset-boozy .product-details-tab .description .content { font-size: 15.5px; line-height: 1.75; color: #3D3A3C; }
@media (max-width: 1199px) {
.preset-boozy .product-details-top > .d-flex { gap: 32px; }
.preset-boozy .product-details-info .product-name { font-size: 30px; }
}
@media (max-width: 991px) {
.preset-boozy .product-gallery { width: 100%; flex-basis: 100%; position: static !important; }
.preset-boozy .product-details-top > .d-flex { gap: 24px; }
.preset-boozy .product-details-info .product-name { font-size: 26px; }
.preset-boozy .product-show-price-section .product-price,
.preset-boozy .product-show-price-section .product-price .special-price { font-size: 24px; }
}
@media (max-width: 576px) {
.preset-boozy .product-gallery-preview-wrap { padding: 8px; border-radius: 16px; }
.preset-boozy .bz-gallery-overlay .bz-sale { font-size: 13px; padding: 9px 13px; top: -6px; inset-inline-start: -6px; }
.preset-boozy .bz-gallery-overlay .bz-sale .bz-off { font-size: 12px; }
.preset-boozy .bz-gallery-wish { top: 12px; inset-inline-end: 12px; }
.preset-boozy .details-info-middle-actions { flex-wrap: wrap; }
.preset-boozy .number-picker-lg .input-group-quantity { height: 54px; width: 140px; grid-template-columns: 42px 1fr 42px; }
.preset-boozy .details-info-middle-actions .btn-add-to-cart { height: 54px; font-size: 16px; flex-basis: 100%; }
}