/* ==========================================================================
   DUNEUS — Category / Products page (Template 1: Full-Bleed Hero)
   Loaded after Soft Theme styles so it wins the cascade.
   Presentation only — no commerce classes altered.
   ========================================================================== */

/* ---- Full-bleed hero ---- */
.dn-cat-hero {
  position: relative;
  width: 100%;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #111;
}
/* No-image categories (e.g. ACCESSORIES): a premium neutral gradient so the
   header matches the photo heroes instead of falling back to the old orange
   .subTitle-detail block. White title stays readable; orange eyebrow accents. */
.dn-cat-hero--plain {
  min-height: 260px;
  background: #1b1d21;
  background:
    /* soft dark fade at the bottom so the text always sits on a darker base */
    linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 42%, rgba(0,0,0,0) 72%),
    radial-gradient(120% 150% at 88% -10%, rgba(255,81,0,.12) 0%, rgba(255,81,0,0) 46%),
    linear-gradient(135deg, #2a2d33 0%, #1c1e22 48%, #121316 100%);
}
.dn-cat-hero--plain .dn-cat-hero__desc { max-width: 60ch; }

.dn-cat-hero__media { position: absolute; inset: 0; }
.dn-cat-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.dn-cat-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.05) 100%);
}
.dn-cat-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 40px;
  padding-bottom: 40px;
  color: #fff;
}
.dn-cat-hero__eyebrow {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--duneus-accent, #FF5100);
  font-weight: 700;
  margin-bottom: 10px;
}
.dn-cat-hero__title {
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: .95;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -.01em;
  margin: 0;
  color: #fff;
}
.dn-cat-hero__desc {
  font-size: .9rem;
  color: #fff;
  opacity: .95;
  margin-top: 12px;
  max-width: 52ch;
  line-height: 1.5;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

/* ---- Sub-category chips ---- */
.dn-cat-chips {
  padding-top: 18px;
  padding-bottom: 6px;
}
.dn-cat-chips__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.dn-cat-chips__track::-webkit-scrollbar { display: none; }
.dn-cat-chip {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 1px solid var(--dn-hdr-border, #e0e0e0);
  border-radius: 40px;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--duneus-fg, #111);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.dn-cat-chip:hover {
  border-color: var(--duneus-fg, #111);
  color: var(--duneus-fg, #111);
  text-decoration: none;
}
.dn-cat-chip.is-current {
  background: var(--duneus-fg, #111);
  color: #fff;
  border-color: var(--duneus-fg, #111);
}

/* ---- Tighter, more organized products area ----
   The default layout left large empty gaps (visible in the reference
   screenshot). These rules tighten the breadcrumb-to-content rhythm and
   align the toolbar, without touching the filter/grid commerce markup. #}
.dn-cat-hero + .breadcrumb-section,
.breadcrumb-section { padding-block: 12px; }

/* The plain-text title block (breadcrumb-subTitle-detail) duplicates the
   breadcrumb's category name and only left a tall empty gap above the grid, so
   hide it on every category/listing page (not just when a hero is present).
   The breadcrumb remains the on-page title. */
.dn-has-cat-hero .subTitle-detail,
body[data-template='category'] .subTitle-detail,
body[data-template='categories'] .subTitle-detail,
body[data-template='search'] .subTitle-detail,
body[data-template='products'] .subTitle-detail { display: none !important; }

/* Robust guard: whenever a hero is on the page (photo OR plain gradient), the
   duplicate orange plain-text title block is always hidden — independent of the
   template name the platform reports. This is what kills the orange "mess". */
.dn-cat-hero ~ .subTitle-detail,
.dn-cat-hero ~ * .subTitle-detail { display: none !important; }

/* Grid sits right under the toolbar — no oversized top gap. */
.products-container { padding-top: 6px !important; }
body[data-template='category'] .container.d-flex.flex-row { margin-top: 0; }

@media (max-width: 991px) {
  .dn-cat-hero { min-height: 240px; }
  .dn-cat-hero__inner { padding-top: 26px; padding-bottom: 26px; }
}

/* ===========================================================================
 * COLLECTION TOOLBAR · tidy Filter / Sort row  (v6.9.5)
 * ---------------------------------------------------------------------------
 * Soft Theme stacks a floating "Sort by" / "Filter" text label above each
 * control, which read as a stray centred heading. Remove those and lay the two
 * controls out as equal, bordered pills — one clean row — keeping the DUNEUS
 * brand-orange text the store already uses. Commerce markup/handlers untouched.
 * ======================================================================== */
/* --- Option B · soft pills -------------------------------------------------
   Two equal rounded pills (soft grey plate, dark text) — the chosen design.
   Clean, thumb-friendly, no stray centred "Sort by" heading, no orange text. */
.products-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid #EFEFEF;
}
/* Drop the redundant floating labels — the buttons already name themselves. */
.products-filter .filter-order,
.products-filter .filter-result { display: none !important; }

.products-filter .filter-buttons-container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 10px;
  flex: 1 1 auto;
  width: 100%;
}
/* Both cells are equal flex columns; the sort control lives inside a .dropdown,
   so make that fill its cell too — otherwise the two pills baseline-misalign
   (one sits higher than the other). Fixed height keeps them on one line. */
.products-filter .filter-buttons-container > div {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;
  min-width: 0;
}
.products-filter .filter-buttons-container .dropdown {
  display: flex !important;
  align-items: center;
  width: 100%;
}

/* Show only the button Bootstrap intends (mobile .d-lg-none vs desktop
   .d-none.d-lg-block) — forcing display on all unhid the duplicate FILTER. */
.products-filter .btn-filter:not(.d-none) { display: inline-flex !important; }
@media (min-width: 992px) {
  .products-filter .btn-filter.d-lg-block { display: inline-flex !important; }
  .products-filter .btn-filter.d-lg-none { display: none !important; }
}

.products-filter .btn-filter {
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 0 !important;
  border-radius: 12px;
  background: #F5F5F5 !important;
  color: #111111 !important;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
/* Beat the global orange-text rule: Option B uses dark text on a grey pill. */
.products-filter .btn-filter > span,
.products-filter .btn-filter > i,
.products-filter .btn-filter > i::before,
#products-list-filter, #products-list-sort,
#products-list-filter i::before, #products-list-sort i::before {
  color: #111111 !important;
}
/* Hover/press: fill dark, text white — readable, never hides the label. */
.products-filter .btn-filter:hover,
.products-filter .btn-filter:focus,
.products-filter .btn-filter:active {
  background: #111111 !important;
}
.products-filter .btn-filter:hover,
.products-filter .btn-filter:hover > span,
.products-filter .btn-filter:hover > i,
.products-filter .btn-filter:hover > i::before,
.products-filter .btn-filter:focus > span,
.products-filter .btn-filter:focus > i,
.products-filter .btn-filter:focus > i::before,
.products-filter .btn-filter:active > span,
.products-filter .btn-filter:active > i::before { color: #FFFFFF !important; }

.products-filter .btn-filter > span { line-height: 1; }
.products-filter .btn-filter i { font-size: 14px; display: inline-flex; }

/* Mobile: two equal pills filling the row. */
@media (max-width: 991.98px) {
  .products-filter .filter-buttons-container > div { flex: 1 1 0; }
  .products-filter .btn-filter { width: 100%; }
}
/* Desktop: the two pills sit compact side-by-side on the left at their natural
   width (NOT stretched — that left a big gap between FILTER and NEWEST); the
   product count sits flush right on a single line. The !important here is what
   actually beats the mobile-first base rule above (which is !important too). */
@media (min-width: 992px) {
  .products-filter .filter-buttons-container {
    flex: 0 0 auto !important;
    width: auto !important;
  }
  .products-filter .filter-buttons-container > div { flex: 0 0 auto !important; }
  .products-filter .btn-filter { width: auto; min-width: 150px; }
}

/* Product count ("Total 78 products") — one tidy line, vertically centred with
   the pills, flush to the right end of the toolbar. Was wrapping onto 3 lines
   because the buttons row was eating the full width. DESKTOP ONLY — on mobile
   it keeps Soft Theme's .d-none (hidden), otherwise it overflows the row. */
@media (min-width: 992px) {
  .products-filter > .text-color-primary {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    font-size: 13px;
    letter-spacing: .02em;
  }
  .products-filter > .text-color-primary .text-line-height { line-height: 1 !important; margin: 0 !important; }
  .products-filter > .text-color-primary #product-filter-count { font-weight: 800; }
}

/* ===========================================================================
 * FILTER PANEL · sticky action bar  (v6.9.8)
 * ---------------------------------------------------------------------------
 * Save/Clear shipped at the very bottom of a scrolling panel, so on mobile you
 * had to scroll the whole list to apply. Pin the action row as a sticky bar at
 * the bottom of the panel — always visible, right in the thumb zone — with a
 * full-width orange Save. Works in the mobile collapse and the desktop modal;
 * the form markup and its submit handler are untouched.
 * ======================================================================== */
.form-products-filter { display: flex; flex-direction: column; }
.form-products-filter > .form-group {
  display: flex;
  gap: 10px;
  justify-content: stretch !important;
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 8px 0 0 !important;
  padding: 14px 0 calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid #ECECEC;
}
.form-products-filter > .form-group .btn {
  flex: 1 1 0;
  margin: 0 !important;
  min-height: 50px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.form-products-filter > .form-group .btn span { padding: 0 !important; }
/* Save = brand-orange primary (takes the larger share); Clear = outline. */
.form-products-filter > .form-group .btn.primary {
  flex: 1.6 1 0;
  background: var(--duneus-accent, #FF5100) !important;
  border-color: var(--duneus-accent, #FF5100) !important;
  color: #FFFFFF !important;
}
.form-products-filter > .form-group .btn.btn-white {
  background: #FFFFFF !important;
  border: 1px solid #E2E2E2 !important;
  color: #111111 !important;
}

/* The desktop modal body scrolls; give the sticky bar something to stick to and
   room so content never hides under it. */
#filterModal .modal-body { max-height: 78vh; overflow-y: auto; padding-bottom: 0; }

/* ===========================================================================
 * LISTING PAGES · no empty band when there's no hero  (v6.9.14)
 * ---------------------------------------------------------------------------
 * The category hero only renders when the category has an image in Zid. When it
 * doesn't, a tall empty white band was still reserved above the grid (from the
 * .app min-height and the header-clearance padding meant for a fixed header —
 * our solid header is sticky and already in normal flow, so no clearance is
 * needed). Collapse both on hero-less listing pages so the grid starts right
 * under the breadcrumb. A category WITH a hero image is unaffected.
 * ======================================================================== */
body[data-template='category']:not(.dn-has-cat-hero) .app,
body[data-template='categories']:not(.dn-has-cat-hero) .app,
body[data-template='search']:not(.dn-has-cat-hero) .app,
body[data-template='products']:not(.dn-has-cat-hero) .app {
  min-height: 0 !important;
  height: auto !important;
}
body[data-template='category']:not(.dn-has-cat-hero) .app-content-padded,
body[data-template='categories']:not(.dn-has-cat-hero) .app-content-padded,
body[data-template='search']:not(.dn-has-cat-hero) .app-content-padded,
body[data-template='products']:not(.dn-has-cat-hero) .app-content-padded {
  padding-top: 0 !important;
}

/* ===========================================================================
 * MEN / WOMEN quick filter (general categories)
 * Segmented pill above the grid; filters loaded cards by data-gender (JS).
 * ======================================================================== */
.dn-genfilter{
  display:inline-flex; gap:4px; padding:4px; margin:0 0 14px;
  border:1px solid #e7e7e9; border-radius:999px; background:#f5f5f6;
}
.dn-genfilter[hidden]{ display:none !important; }
.dn-genfilter__btn{
  appearance:none; border:0; cursor:pointer; background:transparent; color:#555;
  font-family:'Montserrat','Tajawal',sans-serif; font-weight:800; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; padding:9px 20px; border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
[dir="rtl"] .dn-genfilter__btn{ letter-spacing:0; text-transform:none; }
.dn-genfilter__btn:hover{ color:#111; }
.dn-genfilter__btn.is-on{ background:#111; color:#fff; }
@media (max-width:600px){ .dn-genfilter{ display:flex; width:100%; } .dn-genfilter__btn{ flex:1 1 0; padding:10px 8px; } }