/* =====================================================================================
   catalog.css — Dahab v24 catalogue (owner: CATALOG)
   Product grid + card, bundle card, category hero (/hair /body /skin), /bundles, /offers,
   /search, /photo/{code}, /product/{slug}. Values are the resolved reference cascade
   (spec 03 §2, 04, 05 §3–4.6, 07). RTL first; [dir=ltr] rules follow the reference.
   ===================================================================================== */

/* ---------- shared primitives used by these components ---------- */
.product-card,.product-card *,.bundle-detail,.bundle-detail *,.category-hero,.category-hero *,
.product-sheet,.product-sheet *,.photo-view,.photo-view *,.shop-empty,.shop-empty *{box-sizing:border-box}
.scent-field .sr-only,.search-form .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}

/* ---------- product grid (spec 03 §2.3 / 04 §2.7) ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.category-products .product-grid{row-gap:40px}
@media (max-width:800px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}
@media (max-width:600px){.product-grid{gap:25px 14px}}

/* ---------- product card ---------- */
.product-card{display:flex;flex-direction:column;min-width:0;width:100%;padding:0;background:0 0;text-align:start;cursor:default;overflow:visible}
.product-photo{position:relative;display:block;width:100%;height:clamp(340px,33vw,450px);margin:0;padding:0;border:0;border-radius:28px;background:0 0!important;box-shadow:none;overflow:hidden;cursor:pointer;text-align:center;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.product-photo>[data-product-image]{display:block;width:100%;height:100%;max-width:100%;max-height:100%;padding:20px;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(0 16px 9px #43152b15);transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.product-card:hover .product-photo>[data-product-image]{transform:scale(1.025)}
.product-tag{position:absolute;z-index:2;top:15px;right:15px;padding:3px 12px;border-radius:24px;background:#fffc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#6e4958;font-size:13px}
.product-open{position:absolute;bottom:14px;left:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#501d39;transition:background .2s,transform .3s}
.product-card:hover .product-open{background:var(--product-color);transform:rotate(90deg)}
.product-meta{display:flex;flex-direction:column;flex:1;min-width:0;padding:19px 7px}
.product-meta>span:first-child{display:block;text-align:right;color:#977783;font:400 12px/1.5 Damas,Arial,sans-serif;letter-spacing:1px}
.product-title-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:50px}
.product-title-row .product-name-button{flex:1;min-width:0;margin:0;padding:0;border:0;background:0 0;text-align:start;font:inherit;color:inherit;cursor:pointer}
.product-title-row h3{margin:0;min-height:35px;font-family:Damas,Arial,sans-serif;font-size:clamp(18px,1.6vw,24px);font-weight:500;line-height:1.5}
.product-title-row .scent-inline{display:grid;gap:8px;flex:0 145px;min-width:115px;margin:0}

/* native scent selects: the no-JS / pre-enhancement look of the reference triggers
   (COMMERCE replaces them with the reference custom select and hides select.scent-native) */
select.scent-native{-webkit-appearance:none;appearance:none;display:block;width:100%;margin:0;color:#501d39;cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23755a68' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat left 12px center/16px 16px;
  box-shadow:0 1px 2px #0000000d;transition:color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
select.scent-native[dir=ltr]{background-position:right 12px center}
.scent-inline select.scent-native{height:42px;min-height:42px;padding:8px 12px;padding-inline-end:36px;border:1px solid #ab66877a;border-radius:24px;background-color:#fff8;font:300 14px/1.7 Damas,Arial,sans-serif;white-space:nowrap;text-overflow:ellipsis}
.scent-field:not(.scent-inline) select.scent-native{height:44px;min-height:44px;padding:8px 12px;padding-inline-end:36px;border:0;border-radius:6px;background-color:transparent;font:300 17px/1.7 Damas,Arial,sans-serif}
select.scent-native:focus-visible{outline:2px solid #9a3c6d;outline-offset:6px;box-shadow:0 0 0 3px rgba(175,91,125,.5),0 1px 2px rgba(0,0,0,.05)}

/* price row (reference Price) */
.shop-price{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0;font-size:20px;font-weight:600}
.shop-price strong{font-weight:bolder}
.shop-price del{color:#987c8b;font-size:15px;font-weight:400;text-decoration:line-through}
.shop-price>span{color:#8b6b7c;font-size:15px}
.product-meta>.shop-price{margin:12px 0 18px}

/* add to cart (reference AddToCart = shadcn Button + unlayered overrides) */
.cart-action{width:100%}
.product-meta>.cart-action{margin-top:auto}
/* base.css owns .add-to-cart (layout, colours, sizes, :hover, :disabled, ≤600); the card adds only these */
.add-to-cart{flex-shrink:0;margin:0;padding:8px 12px;border:0;white-space:nowrap;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}
.add-to-cart:disabled{cursor:default;pointer-events:none}
.cart-action .add-to-cart:disabled{color:#65374f;background:#ead7e2}
.cart-action-note{display:block;margin-top:8px;color:#856678;font-size:14px}

@media (max-width:1000px){
  .product-title-row{flex-wrap:wrap;place-content:center flex-start}
  .product-title-row .product-name-button{flex-basis:100%}
  .product-title-row .scent-inline{flex-basis:145px}
}
@media (max-width:800px){.product-tag{top:11px;right:10px;padding:3px 9px;font-size:12px}}
@media (max-width:700px){
  .product-photo{height:300px}
  .product-title-row h3{font-size:20px}
}
@media (max-width:600px){
  .product-photo{height:275px;border-radius:18px}
  .product-photo>[data-product-image]{padding:12px 6px}
  /* reference quirk kept (spec 07 G26): in LTR the badge stretches from left 8px to right 10px */
  .product-tag{top:12px;inset-inline-start:8px}
  .product-meta{padding:13px 1px}
  .shop-price{gap:8px;font-size:17px}
  .shop-price del{font-size:13px}
}
@media (max-width:480px){.product-open{width:30px;height:30px}}

/* ---------- category hero (spec 04 §2.4–2.5; colour from the DB via --hero-tint, CONTRACT D2) ---------- */
.category-hero{--hero-default:#f3dbe6;position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:480px;padding:48px 8%;overflow:hidden;background:var(--hero-tint,var(--hero-default))}
.hair-hero{--hero-default:#f1d4e2}
.body-hero{--hero-default:#d9eeed}
.skin-hero{--hero-default:#efd5e7}
.breadcrumb{display:flex;align-items:center;gap:13px;margin-bottom:35px;color:#7a566a;font-size:14px}
.breadcrumb span{opacity:.4}
.category-copy{position:relative;z-index:3}
.category-copy .eyebrow{display:block;margin-bottom:12px;color:#966a79;font:400 12px/1.5 Damas,Arial,sans-serif;letter-spacing:2px}
.category-copy h1{max-width:660px;margin:0;font-family:Damas,Arial,sans-serif;font-size:52px;font-weight:600;line-height:1.4;letter-spacing:-.7px}
.category-copy p{max-width:420px;margin:15px 0 25px;color:#755667;font-size:17px}
.category-copy .text-link,.photo-view .text-link,.product-sheet .text-link{display:inline-flex;align-items:center;gap:14px;padding-bottom:6px;border-bottom:1px solid #7740575c;font-size:16px;color:inherit;text-decoration:none}
.category-copy .text-link:hover,.photo-view .text-link:hover,.product-sheet .text-link:hover{color:#a34e75}
.category-hero-image{position:relative;display:grid;place-items:center}
.category-hero-image>span{position:absolute;bottom:60px;left:50%;transform:translate(-50%);color:#fff5;font:normal 600 240px/1 Damas,Arial,sans-serif;letter-spacing:-15px;pointer-events:none;user-select:none}
.category-hero-image :is(img,svg[data-product-image]){width:auto;max-width:none;height:440px;object-fit:contain;transform:rotate(-12deg);filter:drop-shadow(0 15px 14px #41102725);mix-blend-mode:normal;box-shadow:none;background:0 0!important;border-radius:0;animation:7s ease-in-out infinite categoryFloat}
.body-hero .category-hero-image :is(img,svg[data-product-image]){transform:rotate(10deg)}
@keyframes categoryFloat{0%,to{translate:0}50%{translate:0 -16px}}

/* catalogue heading + empty state (spec 04 §2.6, §2.8) */
#products{scroll-margin-top:25px}   /* nav links land on #products 130px below the top (spec 04 §1) */
.category-products{padding-top:65px}
.catalog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--border,#4d183421)}
.catalog-heading h2{margin:0;font-family:Damas,Arial,sans-serif;font-size:28px;font-weight:600}
.catalog-heading>span{color:#8a6a7b;font-size:15px}
.catalog-empty{grid-column:1/-1;margin:0;padding:40px 15px;text-align:center;color:#977585}

@media (max-width:1150px){.category-hero-image>span{font-size:185px}}
@media (max-width:800px){
  .category-hero{text-align:center;grid-template-columns:1fr;padding:28px 6% 0}
  .category-copy .breadcrumb{justify-content:center;margin-bottom:22px;font-size:13px}
  .category-copy .eyebrow{margin-bottom:8px;font-size:11px}
  .category-copy h1{font-size:43px}
  .category-copy p{margin:12px auto 18px}
  .category-hero-image{height:310px;margin-top:0}
  .category-hero-image :is(img,svg[data-product-image]){height:350px}
  .category-hero-image>span{font-size:190px;bottom:50px}
  .category-products{padding-top:45px}
  .catalog-heading h2{font-size:25px}
  .catalog-heading>span{font-size:13px}
}
@media (max-width:480px){.catalog-heading h2{font-size:23px}}

/* ---------- heading bands: /bundles, /offers, /search (spec 04 §3.3, §4.3) ---------- */
.bundles-heading{text-align:center;background:radial-gradient(at 50% 75%,#fbf2dc,#f6e8d1);padding:50px 5.2% 70px}
.bundles-heading .eyebrow{display:block;margin-bottom:12px;color:#966a79;font-size:14px}
.bundles-heading h1{margin:0;font-family:Damas,Arial,sans-serif;font-size:68px;font-weight:600;line-height:1.3}
.bundles-heading>p{color:#8c6b65;margin:22px auto;font-size:20px}
.offers-heading{background:#f9ddea}
@media (max-width:800px){
  .bundles-heading{padding:28px 6% 45px}
  .bundles-heading .eyebrow{margin-bottom:8px;font-size:13px}
  .bundles-heading h1{font-size:52px}
  .bundles-heading>p{font-size:18px}
}

/* ---------- bundle list + bundle card (spec 04 §3.4–3.6) ---------- */
.bundle-list{display:grid;gap:40px;padding-top:60px}
.bundle-detail{display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.3fr);align-items:center;gap:36px;padding:40px;border-radius:18px;background:var(--bundle-color)}
.bundle-description{min-width:0}
.bundle-description .eyebrow{display:block;margin-bottom:12px;color:#966a79;font:400 13px/1.5 Damas,Arial,sans-serif;letter-spacing:1.1px}
.bundle-description h2{margin:0 0 12px;font-family:Damas,Arial,sans-serif;font-size:34px;font-weight:600}
.bundle-description>p{max-width:100%;margin:0;color:#826371;font-size:17px;line-height:1.9}
.bundle-count{display:inline-block;margin-top:22px;padding:6px 15px;border:1px solid #81576d33;border-radius:25px;font-size:14px}
.small-tag{display:inline-block;padding:5px 16px;border:1px solid var(--border,#4d183421);border-radius:40px;font-size:14px}
.bundle-description .cart-action{max-width:300px}
.bundle-description .add-to-cart{max-width:300px}
.bundle-description .cart-action .add-to-cart{margin-top:14px}
.scent-field{display:grid;gap:8px;margin:12px 0}
.scent-field label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;line-height:1.6;-webkit-user-select:none;user-select:none}
.bundle-visual{min-width:0;container-type:inline-size}
.bundle-packshot{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;filter:drop-shadow(0 16px 16px #581d3710)}
.bundle-fallback{--pack-height:min(340px,calc(300cqw / var(--bundle-size)));isolation:isolate;direction:ltr;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:0;width:100%;min-height:0;padding:28px 0}
.bundle-fallback [data-product-image]{flex:none;width:calc(var(--pack-height) * 2 / 3);min-width:0;max-width:none;height:var(--pack-height);margin-inline:calc(var(--pack-height) * -.18);object-fit:contain;filter:drop-shadow(0 14px 10px #591d3a15)}
.bundle-contents{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:15px}
.bundle-contents button{display:flex;align-items:center;gap:7px;min-height:40px;margin:0;padding:8px 13px;border:1px solid #581d3724;border-radius:22px;background:#ffffff60;font:inherit;font-size:14px;color:inherit;cursor:pointer}
.bundle-contents button:hover{background:#fff}
.bundle-contents button svg{flex-shrink:0}

@media (max-width:1150px){
  .bundle-count{margin-top:15px}
  .bundle-description h2{font-size:32px}
}
@media (max-width:1000px){.bundle-detail{gap:20px;padding:26px}}
@media (max-width:800px){
  .bundle-list{gap:25px;padding-top:40px}
  .bundle-description .eyebrow{margin-bottom:8px}
  .bundle-description h2{font-size:29px}
  .bundle-description>p{font-size:16px}
  .bundle-count{font-size:13px}
}
@media (max-width:700px){
  .bundle-detail{grid-template-columns:1fr;padding:24px 20px}
  .bundle-visual{grid-row:1}
  .bundle-description h2{font-size:30px}
  .bundle-description .cart-action{max-width:none}
}
@media (max-width:600px){
  .bundle-fallback{padding:20px 0}
  .bundle-detail{scroll-margin-top:105px}
}

/* ---------- /offers (spec 04 §4) ---------- */
.shop-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:280px;padding:40px 20px;text-align:center;color:#744861}
.shop-empty h2,.shop-empty h3{margin:0;font-family:Damas,Arial,sans-serif;font-size:26px;font-weight:600}
.shop-empty p{max-width:520px;margin:0;font-size:16px}
/* shadcn default Button + `.shop-empty [data-slot=button]`; text colour fixed to #fffaf8
   (the reference renders #744861 on #571b3b because of a cascade bug, spec 04 §4.3) */
.shop-empty [data-slot=button]{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;margin-top:8px;padding:12px 23px;border-radius:25px;background:#571b3b;color:#fffaf8;font-size:16px;font-weight:500;line-height:1.4286;white-space:nowrap;text-decoration:none;transition:all .15s cubic-bezier(.4,0,.2,1)}
.shop-empty [data-slot=button]:hover{background:#571b3be6}

/* ---------- /photo/{code} (spec 05 §4.6) ---------- */
.photo-view{min-height:75vh;padding:35px 25px 65px}
.photo-view .text-link{margin-bottom:25px}
.photo-view>[data-product-image]{display:block;width:min(85vw,760px);height:78vh;margin:auto;object-fit:contain}
.photo-view h1{margin:20px 0 0;text-align:center;font-size:24px;font-weight:600}

/* ---------- /product/{slug}: inline product dialog (CONTRACT D3, spec 05 §4.3) ---------- */
.product-page{padding-top:45px}
.product-page>.breadcrumb{flex-wrap:wrap;max-width:860px;margin:0 auto 28px}
.product-page>.breadcrumb a{color:inherit;text-decoration:none}
.product-page>.breadcrumb a:hover{color:#a34e75}
.product-page>.breadcrumb b{font-weight:300;color:#501d39}
.product-sheet{display:grid;grid-template-columns:1fr 1fr;direction:ltr;max-width:860px;margin:0 auto;border-radius:20px;background:#fffaf8;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}
.product-sheet .dialog-image{display:grid;place-items:center;min-height:510px;border-radius:20px 0 0 20px;overflow:hidden;background:0 0!important}
.product-sheet .dialog-image>a{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:0 0;color:inherit;text-decoration:none}
.product-sheet .dialog-image :is(img,svg[data-product-image]){display:block;width:100%;height:510px;padding:15px 20px 45px;object-fit:contain;mix-blend-mode:normal}
.product-sheet .dialog-image>a>svg[data-product-image]{height:100%;max-height:570px;padding:22px}
.product-sheet .photo-zoom-hint{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:7px;color:#824363;font-size:13px}
.product-sheet .dialog-info{direction:rtl;text-align:right;align-self:center;min-width:0;padding:70px 35px 40px}
.product-sheet .dialog-info .eyebrow{display:block;margin-bottom:12px;color:#966a79;font:400 11px/1.5 Damas,Arial,sans-serif;letter-spacing:1px}
.product-sheet .product-title-row{flex-wrap:wrap;justify-content:flex-start}
.product-sheet .scent-inline{flex-basis:180px}
.product-sheet .dialog-title{margin:8px 0 12px;font-family:Damas,Arial,sans-serif;font-size:32px;font-weight:600;line-height:1.5;color:#501d39}
.product-sheet .dialog-description{margin:23px 0 30px;color:#7b5c6c;font-size:18px;line-height:1.9;white-space:pre-line}
.product-sheet .product-usage{margin:0}
.product-sheet .product-usage h3{margin:0 0 8px;font-size:19px;font-weight:600}
.product-sheet .product-usage p{margin:0;color:#806475;font-size:16px;line-height:1.9;white-space:pre-line}
.product-sheet .dialog-info .text-link{margin-top:9px;font-size:15px}
@media (max-width:1000px){.product-sheet .scent-inline{flex-basis:145px}}
@media (max-width:800px){
  .product-page{padding-top:30px}
  .product-page>.breadcrumb{justify-content:center;margin-bottom:22px;font-size:13px}
  .product-sheet{grid-template-columns:1fr;max-width:450px}
  .product-sheet .dialog-image{height:340px;min-height:0;border-radius:20px 20px 0 0}
  .product-sheet .dialog-image img[data-product-image]{height:340px}
  .product-sheet .dialog-info{padding:30px 25px}
  .product-sheet .dialog-info .eyebrow{margin-bottom:8px;font-size:10px}
  .product-sheet .dialog-title{font-size:27px}
  .product-sheet .dialog-description{margin:15px 0 22px;font-size:16px}
}
@media (max-width:700px){
  .product-sheet .dialog-image{height:360px}
  .product-sheet .dialog-image img[data-product-image]{height:360px;padding:10px 12px 35px}
  .product-sheet .photo-zoom-hint{bottom:8px;font-size:12px}
}

/* ---------- /search (CONTRACT D3 / spec 07 G25) ---------- */
.search-form{position:relative;display:flex;align-items:center;gap:8px;max-width:520px;margin:26px auto 0;padding:5px;padding-inline-start:22px;border:1px solid #dfbdce;border-radius:40px;background:#fffaf8}
.search-form:focus-within{box-shadow:0 0 0 3px rgba(175,91,125,.5)}
.search-form input{flex:1;min-width:0;height:46px;margin:0;padding:0;border:0;background:0 0;color:#501d39;font:300 17px/1.7 Damas,Arial,sans-serif;outline:0}
.search-form input::placeholder{color:#977783}
.search-form input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.search-form button{display:grid;place-items:center;flex:none;width:46px;height:46px;margin:0;padding:0;border:0;border-radius:50%;background:#5b1e3d;color:#fff;cursor:pointer;transition:background .15s}
.search-form button:hover{background:#7b2b51}
.search-results .bundle-list{padding-top:60px}
@media (max-width:800px){.search-form{margin-top:20px}.search-results .bundle-list{padding-top:40px}}

/* ---------- EN / LTR (reference [dir=ltr] rules) ---------- */
[dir=ltr] .category-copy,[dir=ltr] .product-meta{text-align:left}
[dir=ltr] .breadcrumb{direction:ltr}
[dir=ltr] .category-copy h1{font-size:clamp(38px,5vw,76px);line-height:1.18}
[dir=ltr] .product-sheet .dialog-info{text-align:left}

@media (prefers-reduced-motion:reduce){
  .category-hero-image :is(img,svg[data-product-image]){animation:none}
  .product-photo>[data-product-image],.product-open,.add-to-cart{transition:none}
}