/*
Theme Name:  Kholosh
Author:      Roguestacks
Author URI:  https://roguestacks.com
Description: Premium phone case brand based in Dhaka, Bangladesh. WooCommerce theme with twelve mood-based collections.
Version:     1.0.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.1
License:     Proprietary
Text Domain: kholosh
Tags:        woocommerce, e-commerce, custom
*/

/* ─── Base ─────────────────────────────────────────────────────────────── */
html, body {
  background: #FAF7F2;
  color: #1A1A1A;
  font-family: 'Montserrat', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: 'Source Serif 4', Georgia, serif;
}

/* ─── Image placeholder (.ph) ───────────────────────────────────────────── */
.ph {
  position: relative;
  background: #F2EEE5;
  overflow: hidden;
  color: #2A2A28;
}

.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(26,26,26,0.035) 14px 15px);
  pointer-events: none;
}

.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #E8E4DC;
  pointer-events: none;
}

.ph-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(26,26,26,.55);
  background: rgba(250,247,242,.85);
  padding: 4px 8px;
  border: 1px solid #E8E4DC;
}

.ph.dark {
  background: #222220;
  color: #fff;
}

.ph.dark::before {
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.05) 14px 15px);
}

.ph.dark::after {
  border-color: rgba(255,255,255,0.12);
}

.ph.dark .ph-label {
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.75);
  border-color: rgba(255,255,255,.18);
}

/* ─── Scrollbar hide ────────────────────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ─── Hero progress dot fill ────────────────────────────────────────────── */
@keyframes heroFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero-fill {
  animation: heroFill 6.5s linear forwards;
  transform-origin: left;
}

/* ─── Fade-up animation ─────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.fadeup {
  animation: fadeUp .7s ease both;
}

/* TODO: Production pass — replace Tailwind CDN with a proper Tailwind CLI
   build that scans theme/**/*.php for utility classes. This fallback CSS
   can be removed once Tailwind is generating overflow-x-auto and flex
   widths from the dynamic PHP markup correctly. */

/* ============================================
   Slider fallback CSS — bypass for Tailwind CDN
   gap on dynamically-rendered content.
   Replace with proper Tailwind build later.
   ============================================ */

/* Tracks — three horizontally-scrolling rows on the homepage.
   Selectors match the IDs rendered by front-page.php. */
#bs-track,
#collections-track,
#ig-track {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#bs-track::-webkit-scrollbar,
#collections-track::-webkit-scrollbar,
#ig-track::-webkit-scrollbar {
  display: none;
}

/* Snap behaviour — mirrors source HTML:
     bs-track  → snap-x snap-mandatory
     ig-track  → snap-x snap-mandatory
     collections-track → snap-x (proximity) */
#bs-track,
#ig-track {
  scroll-snap-type: x mandatory;
}
#collections-track {
  scroll-snap-type: x;
}

/* Gap between cards — mirrors Tailwind gap-4 / md:gap-6 (md:gap-5 for ig) */
#bs-track,
#collections-track,
#ig-track {
  gap: 1rem; /* 16px */
}
@media (min-width: 768px) {
  #bs-track,
  #collections-track {
    gap: 1.5rem; /* 24px */
  }
  #ig-track {
    gap: 1.25rem; /* 20px */
  }
}

/* Bestsellers cards — w-[72vw] max-w-[300px] md:w-[300px] from source HTML */
#bs-track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 72vw;
  max-width: 300px;
}
@media (min-width: 768px) {
  #bs-track > * {
    width: 300px;
    max-width: 300px;
  }
}

/* Collections cards — w-[72vw] max-w-[300px] md:w-[320px] h-[380px] md:h-[440px] */
#collections-track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 72vw;
  max-width: 300px;
  height: 380px;
}
@media (min-width: 768px) {
  #collections-track > * {
    width: 320px;
    max-width: 320px;
    height: 440px;
  }
}

/* Instagram phone-frame cells — w-[200px] md:w-[240px] from source HTML */
#ig-track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 200px;
}
@media (min-width: 768px) {
  #ig-track > * {
    width: 240px;
  }
}

/* Testimonials track — part of the same temporary Tailwind-CDN workaround.
   No ID on this track; scoped to the only homepage section using both
   `border-y` and `border-line` classes.
   Source HTML: flex gap-4 md:gap-6 overflow-x-auto no-scrollbar snap-x
   Cards: w-[80vw] max-w-[340px] md:w-[380px] aspect-[4/5] */
section.border-y.border-line .overflow-x-auto {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x; /* proximity — source uses snap-x without -mandatory */
  scrollbar-width: none;
  gap: 1rem; /* 16px = gap-4 */
}
section.border-y.border-line .overflow-x-auto::-webkit-scrollbar {
  display: none;
}
@media (min-width: 768px) {
  section.border-y.border-line .overflow-x-auto {
    gap: 1.5rem; /* 24px = md:gap-6 */
  }
}

section.border-y.border-line .overflow-x-auto > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 80vw;
  max-width: 340px;
  aspect-ratio: 4 / 5;
}
@media (min-width: 768px) {
  section.border-y.border-line .overflow-x-auto > * {
    width: 380px;
    max-width: 380px;
  }
}

/* Bubble category nav — part of the same temporary Tailwind-CDN workaround.
   Class hook is on the scrolling div in header.php. Source HTML used
   `overflow-x-auto no-scrollbar snap-x` plus gap-5 / md:gap-9. */
.kholosh-bubble-nav {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.kholosh-bubble-nav::-webkit-scrollbar {
  display: none;
}
.kholosh-bubble-nav > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Center-align the bubble row when fewer than 6 bubbles are rendered (a
   sparse 3-bubble strip reads asymmetric left-aligned). When 6+, the class
   is not applied (see header.php) and the default flex-start behavior
   keeps horizontal scrolling natural on mobile overflow. */
.kholosh-bubble-nav-centered {
  justify-content: center;
}

/* ============================================
   Mobile navigation drawer — slide-in from the
   left, semi-transparent overlay behind. Wiring
   (open/close, focus trap, Esc, body scroll
   lock) is in assets/js/drawer.js. The drawer
   markup is also `md:hidden` so this CSS never
   matches on desktop.

   The `visibility` transition delay pattern
   keeps the slide-out animation visible: on
   close, the wrapper waits the transition
   duration before hiding so the panel can
   finish translating off-screen.
   ============================================ */
.kholosh-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  transition: visibility 0s 0.3s; /* delay hide until panel finishes sliding out */
}
.kholosh-drawer.is-open {
  visibility: visible;
  transition: visibility 0s 0s;   /* show instantly so panel can animate in */
}

.kholosh-drawer-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  cursor: pointer;
}
.kholosh-drawer.is-open .kholosh-drawer-overlay {
  opacity: 1;
}

.kholosh-drawer-panel {
  position: relative;
  width: 80vw;
  max-width: 320px;
  min-height: 100vh;
  background-color: #FAF7F2;        /* bg token */
  border-right: 1px solid #E8E4DC;  /* line token */
  padding: 1.5rem;                  /* p-6 */
  display: flex;
  flex-direction: column;
  overflow-y: auto;                 /* internal scroll if content exceeds viewport */
  transform: translateX(-100%);
  transition: transform 0.3s ease-in;
}
.kholosh-drawer.is-open .kholosh-drawer-panel {
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}

/* Close (X) button — sits at top-right of the panel. */
.kholosh-drawer-close {
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #1A1A1A;                   /* ink token */
  transition: background-color 0.15s ease;
}
.kholosh-drawer-close:hover {
  background-color: #F2EEE5;        /* paper token */
}

/* Primary nav list — vertical with 1px line-token bottom borders between items. */
.kholosh-drawer-menu {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.kholosh-drawer-menu li {
  border-bottom: 1px solid #E8E4DC;
}
.kholosh-drawer-menu li:last-child {
  border-bottom: none;
}
.kholosh-drawer-menu a {
  display: flex;
  align-items: center;
  min-height: 44px;                 /* tap target floor */
  padding: 14px 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #1A1A1A;
  text-decoration: none;
}
.kholosh-drawer-menu a:hover {
  color: #8B1E2D;                   /* crimson token */
}
.kholosh-drawer-menu li.current-menu-item > a,
.kholosh-drawer-menu li.current-page-item > a {
  color: #8B1E2D;
}

/* Social row at bottom — pinned to the bottom of the panel via margin-top:auto
   on the wrapper block (flex column layout pushes it down regardless of how
   short the nav list is). */
.kholosh-drawer-social-block {
  margin-top: auto;
  padding-top: 2rem;
}
.kholosh-drawer-social-eyebrow {
  display: block;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: #6B6B68;                   /* muted token */
  margin-bottom: 0.75rem;
}
.kholosh-drawer-social {
  display: flex;
  gap: 12px;
}
.kholosh-drawer-social a {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1A1A1A;
  transition: background-color 0.15s ease;
}
.kholosh-drawer-social a:hover {
  background-color: #F2EEE5;
}

/* ============================================
   Phone Case PDP — gallery pagination dots.
   Outer .pdp-gallery-dot is a 24px square tap target (8px padding around an
   8px visual). The inner .pdp-gallery-dot-fill is the visible circle, which
   grows to 10px and switches to ink color when the parent has
   aria-selected="true". Same aria-driven active-state pattern as the hero
   slider dots. JS lives in assets/js/product-gallery.js (setActiveImage).
   ============================================ */
.pdp-gallery-dot {
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  line-height: 0;
}
.pdp-gallery-dot-fill {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: rgba(107, 107, 104, 0.4); /* muted #6B6B68 at 40% opacity */
  transition: width 0.18s ease, height 0.18s ease, background-color 0.18s ease;
}
.pdp-gallery-dot[aria-selected="true"] .pdp-gallery-dot-fill {
  width: 10px;
  height: 10px;
  background-color: #1A1A1A; /* ink */
}

/* ============================================
   Homepage hero — multi-slide via Customizer.
   Stacks all enabled slides in a single CSS-grid cell so they overlay
   each other; only the .is-active slide is visible/clickable.
   ============================================ */
.kholosh-hero-slides {
  display: grid;
  grid-template-areas: "stack";
  position: relative;
}
.kholosh-hero-slide {
  grid-area: stack;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.kholosh-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
/* Single-slide hero: skip the opacity dance, slide is always visible */
.kholosh-hero-slide:only-child {
  opacity: 1;
  pointer-events: auto;
}

/* Hero progress-dot fill — driven by aria-selected on the parent button.
   Replaces the original single-shot .hero-fill animation with a smooth
   per-click transition so the active dot fills when its slide becomes active. */
.kholosh-hero-dot .kholosh-hero-dot-fill {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.kholosh-hero-dot[aria-selected="true"] .kholosh-hero-dot-fill {
  transform: scaleX(1);
}

/* ===========================================================
 * WooCommerce chrome-image neutralizer
 * ----------------------------------------------------------
 * WooCommerce loads woocommerce.css on shop / product / category
 * pages. That file applies `.woocommerce img { height: auto;
 * max-width: 100% }` — meant for product images inside .products
 * loops, but it also catches header/footer chrome images and
 * blows them up (a 2560×1767 logo expands to its parent's full
 * width, ~400px, bleeding across the page).
 *
 * These rules restore explicit sizing for chrome imagery (logo,
 * payment icons, etc.) on WooCommerce-tagged templates. The
 * `header img.kholosh-logo` selector has specificity 0,2,2 —
 * beats `.woocommerce img` (0,1,1).
 *
 * Add the .kholosh-logo class to any chrome <img> that needs to
 * stay a specific size on WooCommerce templates. For a different
 * fixed size, add another selector here rather than fighting WC
 * via Tailwind utility classes (Tailwind utilities are 0,1,0 and
 * always lose to .woocommerce img).
 * =========================================================== */
header img.kholosh-logo {
  height: 2.75rem;     /* h-11 = 44px (desktop) */
  width: auto;
  max-width: none;     /* release WC's max-width: 100% */
  max-height: 2.75rem;
}
header img.kholosh-logo.kholosh-logo--mobile {
  height: 2.5rem;      /* h-10 = 40px (mobile) */
  max-height: 2.5rem;
}

/* =====================================================================
 * PHONE CASE PRODUCT DETAIL PAGE (PDP)
 * Patterns from _source-html/product.html that don't reduce to Tailwind
 * utility classes. Scoped to the PDP wherever possible so they don't
 * leak into other templates.
 * ===================================================================== */

/* ── Phone Model native select — custom-styled to match the source HTML
 *    faux-dropdown trigger. WC's wc-add-to-cart-variation.js requires the
 *    actual <select> element to remain in the DOM, so we style it rather
 *    than replace it with a div. */
.kholosh-pdp-select-wrap {
  position: relative;
}
.kholosh-pdp-select,
.kholosh-pdp-select-wrap select {
  width: 100%;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #FFFFFF;
  border: 1px solid #E8E4DC;            /* var(--line) */
  border-radius: 4px;
  padding: 12px 40px 12px 16px;          /* py-3 px-4, room for chevron */
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  color: #1A1A1A;
  cursor: pointer;
  /* Inline SVG chevron — matches the source HTML's chevron icon */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
  transition: border-color 0.15s ease;
}
.kholosh-pdp-select:hover,
.kholosh-pdp-select-wrap select:hover {
  border-color: #1A1A1A;
}
.kholosh-pdp-select:focus,
.kholosh-pdp-select-wrap select:focus {
  outline: none;
  border-color: #1A1A1A;
}
/* Safari shows a faint inner border on selects; flatten it. */
.kholosh-pdp-select::-ms-expand {
  display: none;
}

/* ── Case Type cards — disabled state.
 * Tailwind's opacity-50 / cursor-not-allowed are single-class selectors
 * (specificity 0,1,0) and lose to the .ct-card.hover:border-ink (0,2,0)
 * applied by other utilities on the same element. !important is the
 * surgical fix — narrowly scoped, only affects the disabled visual,
 * doesn't bleed into the rest of the card lifecycle. JS adds the
 * .kholosh-ct-disabled class as a stable hook independent of any
 * aria-* attributes a future refactor might rename. */
.ct-card.kholosh-ct-disabled,
.ct-card[aria-disabled="true"] {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}
.ct-card.kholosh-ct-disabled .ph,
.ct-card[aria-disabled="true"] .ph {
  /* Desaturate the placeholder background so the disable reads visually
   * even when the eye is on the thumbnail rather than the card border. */
  filter: grayscale(0.5);
}
.ct-card[aria-pressed="true"] {
  /* Reinforce the crimson border in case Tailwind hover utilities lose
   * the race after a card switch. */
  border-color: #8B1E2D;
  border-width: 2px;
}

/* ── Phone-frame video tiles + scroll strip (used by the PDP review section
 *    and the homepage Instagram strip — both share this pattern). Pulled
 *    verbatim from _source-html/product.html lines 146-166. */
.review-strip-wrap {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 32px;
  touch-action: pan-y pan-x;
  -webkit-overflow-scrolling: touch;
}
.review-strip {
  display: flex;
  gap: 24px;
  padding: 8px 32px 4px;
}
@media (min-width: 768px) {
  .review-strip {
    padding-left: max(32px, calc((100vw - 1280px)/2 + 32px));
    padding-right: max(32px, calc((100vw - 1280px)/2 + 32px));
  }
}
@media (max-width: 600px) {
  .review-strip { gap: 16px; padding-left: 20px; padding-right: 20px; }
}
.rv-cell {
  flex: 0 0 auto;
  width: 240px;
  scroll-snap-align: start;
  display: block;       /* div wrapping an inline-by-default phone-frame */
}
@media (max-width: 600px) {
  .rv-cell { width: 200px; }
}
.phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9/19.5;
  background: #1a1a1a;
  border-radius: 28px;
  padding: 6px;
  border: 1px solid #2a2a2a;
}
.phone-frame::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;
  height: 18px;
  background: #0a0a0a;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #0d0d0d;
}
.play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.play-btn svg { margin-left: 3px; }
.rv-meta-handle {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: #1A1A1A;
  margin-top: 14px;
}
.rv-meta-cap {
  font-size: 12px;
  color: #6B6B68;
  margin-top: 4px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Accordion +/× toggle (semantic <details>, no JS needed). */
.acc summary { list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc-toggle { transition: transform .25s ease; }
.acc[open] .acc-toggle { transform: rotate(45deg); }

/* ── Header inline search (<details>/<summary>) — pure-HTML toggle that
 *    expands an inline search form when the magnifier icon is clicked.
 *    Same list-style trick as the accordion above so the disclosure marker
 *    doesn't appear next to the icon. The explicit closed/open form-display
 *    rules win over the Tailwind `flex` utility on the form, so the panel
 *    is hidden until the user clicks the icon and flex-rows its inputs when
 *    open — deterministic across UA stylesheets. */
.kholosh-header-search > summary { list-style: none; }
.kholosh-header-search > summary::-webkit-details-marker { display: none; }
.kholosh-header-search:not([open]) > form { display: none; }
.kholosh-header-search[open] > form { display: flex; }

/* ── Video reviews tile — Pelacase-style poster + custom play button.
 *    Both the self-hosted <video> tile and the lazy YouTube tile share
 *    .pdp-video-tile + .pdp-video-play-overlay so all tiles in the row
 *    look identical at rest (poster image + centered white circle with
 *    a dark triangle). Click-handler logic lives in
 *    assets/js/video-reviews.js. */
.pdp-video-tile {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.pdp-video-tile video,
.pdp-video-tile > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.pdp-video-play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 56px;
  height: 56px;
  background: #FAF7F2;
  border: 1px solid #E8E4DC;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.pdp-video-play-overlay svg {
  width: 16px;
  height: 16px;
  fill: #1A1A1A;
  /* Visual centering — the triangle's optical centroid sits slightly
   * left of the geometric center, so a tiny push-right balances it. */
  margin-left: 2px;
}
@media (max-width: 767px) {
  .pdp-video-play-overlay {
    width: 48px;
    height: 48px;
  }
}

/* ── WC's single-variation slot — we don't render anything in it (custom UI
 *    handles price + add-to-bag), so keep it visually inert. WC's JS still
 *    writes into it; hidden via attribute on the element ensures nothing
 *    leaks into the layout. */
.single_variation_wrap .single_variation[hidden] {
  display: none !important;
}

/* ── WC's "Clear" reset link — visually hidden but kept in DOM because
 *    wc-add-to-cart-variation.js looks it up on every variation reset. */
.variations_form .reset_variations {
  visibility: hidden;
}