/* Page d'accueil — grille bento */
.llb-home-main { padding-block: 8px var(--section-y); }

/* --- Bento d'accueil (12 colonnes) -------------------------------------- */
.llb-bento--hero { grid-auto-rows: minmax(140px, auto); }
.b-hero    { grid-column: 1 / 8;  grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: clamp(26px, 4vw, 52px); border-radius: var(--r-xl); background: radial-gradient(600px 300px at 100% 0%, rgba(255,194,51,.35), transparent 60%), var(--t-blue); }
.b-feature { grid-column: 8 / 13; grid-row: 1 / 4; padding: 0; border-radius: var(--r-xl); min-height: 360px; background: var(--c-ink-2); }
.b-ship    { grid-column: 1 / 5;  grid-row: 3; }
.b-pay     { grid-column: 5 / 8;  grid-row: 3; }
.b-quality { grid-column: 1 / 5;  grid-row: 4; }
.b-support { grid-column: 5 / 9;  grid-row: 4; }
.b-wa      { grid-column: 9 / 13; grid-row: 4; }
.b-hero__title { color: #fff; font-size: clamp(2.2rem, 4.6vw, 4.2rem); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 16px; max-width: 14ch; }
.b-hero__lead { font-size: clamp(1rem, 1.4vw, 1.2rem); color: rgba(255,255,255,.88); max-width: 46ch; }
.b-hero__ar { align-self: flex-start; font-family: 'Tajawal', var(--font-body); font-weight: 700; font-size: 1.05rem; padding: 10px 18px; border-radius: var(--r-md); background: rgba(255,255,255,.14); line-height: 1.5; margin: 4px 0 20px; }
.b-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

.b-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.b-feature:hover img { transform: scale(1.05); }
.b-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,19,48,.65), transparent 45%); }
.b-feature__chip { position: absolute; z-index: 2; inset-inline: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-radius: var(--r-pill); background: rgba(255,255,255,.94); backdrop-filter: blur(8px); color: var(--c-ink); }
.b-feature__name { font-weight: 700; font-size: .92rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.b-feature__price { font-weight: 800; color: var(--c-accent); white-space: nowrap; }
.b-feature__price del { display: none; }
.b-feature__price ins { text-decoration: none; }
.b-feature__tag { position: absolute; z-index: 2; top: 16px; inset-inline-start: 16px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--t-saffron); color: var(--t-saffron-ink); font-weight: 800; font-size: .8rem; }

.b-ship, .b-pay, .b-quality, .b-support, .b-wa { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.b-ship strong, .b-pay strong, .b-quality strong, .b-support strong, .b-wa strong { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2; display: block; }
.b-ship span, .b-pay span, .b-quality span, .b-support span, .b-wa span { opacity: .8; font-size: .92rem; display: block; margin-top: 2px; }
.b-pay .llb-i { color: var(--c-accent); }
.b-wa .llb-i { color: #4be39a; }

@media (max-width: 900px) {
  .llb-bento--hero { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; }
  .b-hero, .b-feature, .b-ship, .b-pay, .b-quality, .b-support, .b-wa { grid-column: span 3; grid-row: auto; }
  .b-hero { grid-column: 1 / -1; }
  .b-feature { grid-column: 1 / -1; min-height: 300px; }
  .b-wa { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .b-hero__cta .llb-btn { flex: 1 1 100%; }
  .b-ship, .b-pay, .b-quality, .b-support { padding: 18px; min-height: 150px; }
  .b-ship strong, .b-pay strong, .b-quality strong, .b-support strong { font-size: 1.05rem; }
}

/* --- Sections ------------------------------------------------------------ */
.llb-section { margin-top: var(--section-y); }
.llb-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.llb-section__title { margin: 0 0 16px; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.02em; }
.llb-section__head .llb-section__title { margin: 0; }

/* --- Catégories (bento) ---------------------------------------------------- */
.llb-cats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 220px); gap: var(--gap); }
.llb-cat { position: relative; display: block; border-radius: var(--r-xl); overflow: hidden; background: var(--c-ink-2); text-decoration: none; isolation: isolate; grid-column: span 4; transition: transform .35s var(--ease); }
.llb-cat:nth-child(1) { grid-column: span 7; grid-row: span 2; }
.llb-cat:nth-child(2), .llb-cat:nth-child(3) { grid-column: span 5; }
.llb-cat:hover { transform: translateY(-4px); }
.llb-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); z-index: -2; }
.llb-cat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,19,48,.75), rgba(15,19,48,0) 60%); z-index: -1; }
.llb-cat:hover img { transform: scale(1.06); }
.llb-cat__label { position: absolute; inset-inline-start: 14px; bottom: 14px; display: grid; padding: 10px 20px; border-radius: var(--r-pill); background: rgba(255,255,255,.94); color: var(--c-ink); line-height: 1.2; }
.llb-cat__label strong { font-size: 1rem; }
.llb-cat__label small { color: var(--c-muted); font-size: .78rem; }
.llb-cat__go { position: absolute; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--t-saffron); color: var(--t-saffron-ink); transition: transform var(--dur) var(--ease); }
.llb-cat:hover .llb-cat__go { transform: rotate(-45deg); }
@media (max-width: 700px) {
  .llb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .llb-cat, .llb-cat:nth-child(n) { grid-column: span 1; grid-row: auto; }
  .llb-cat:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
  .llb-cat__label { padding: 8px 14px; inset-inline-start: 10px; bottom: 10px; }
}

/* --- Nouveautés : 1 grande carte + petites -------------------------------- */
.llb-bento-products .woocommerce ul.products li.product:first-child { grid-column: span 2; grid-row: span 2; }
.llb-bento-products .woocommerce ul.products li.product:first-child a.woocommerce-LoopProduct-link > img { aspect-ratio: auto; height: 100%; min-height: 320px; flex: 1; margin-bottom: 10px; }
.llb-bento-products .woocommerce ul.products li.product:first-child .woocommerce-loop-product__title { font-size: 1.2rem; }
.llb-bento-products .woocommerce ul.products li.product:first-child .price { font-size: 1.4rem; }
@media (max-width: 1024px) { .llb-bento-products .woocommerce ul.products li.product:first-child { grid-column: span 2; grid-row: span 1; } .llb-bento-products .woocommerce ul.products li.product:first-child a.woocommerce-LoopProduct-link > img { aspect-ratio: 16 / 10; min-height: 0; height: auto; } }

/* --- Promotions : grande tuile safran ------------------------------------ */
.llb-promo { padding: clamp(18px, 2.6vw, 32px); border-radius: var(--r-xl); }
.llb-promo .llb-section__title { color: var(--t-saffron-ink); }
.llb-promo ul.products { margin-top: 0 !important; }

/* --- Avis ------------------------------------------------------------------ */
.llb-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); font-family: 'Tajawal', var(--font-body); }
.llb-review { margin: 0; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-xl); display: flex; flex-direction: column; gap: 16px; }
.llb-stars { display: flex; gap: 3px; color: var(--t-saffron); }
.llb-tile--saffron .llb-stars, .llb-tile--mint .llb-stars { color: #d98f00; }
.llb-review blockquote { margin: 0; font-size: 1.15rem; line-height: 1.75; flex: 1; font-weight: 500; }
.llb-review figcaption { font-weight: 800; }