/*
Theme Name: White Woo Visual
Description: WooCommerce theme. Drawer title removed; search (🔍) next to drawer with fallback; real chevrons ▸/▼; first-click fix; compact mobile.
Version: 1.3.20
Text Domain: white-woo-visual
*/

:root { --bg:#fff; --text:#111; --muted:#6b7280; --border:#e5e7eb; }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:#fff; color:#111; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Arial; line-height:1.6; }
a { color:#111; text-decoration:none; }
a:hover { text-decoration:underline; }
body { overflow-x:hidden; }
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 1rem; }

/* Header */
.header { position:sticky; top:0; z-index:1100; background:#fff; border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem 0; }

/* Left: drawer + search */
.header-left { display:flex; align-items:center; gap:.5rem; min-width:0; }
.drawer-toggle { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border); background:#fff; border-radius:.45rem; cursor:pointer; flex:0 0 auto; }
.drawer-toggle .icon { width:18px; height:18px; }
.drawer-toggle .label { display:none; }

/* SEARCH */
.site-search { position:relative; flex:0 0 auto; display:block !important; }
.site-search form { display:flex !important; align-items:center; }
.site-search form.woocommerce-product-search { position:relative; width:240px; max-width:240px; }
.site-search input[type="search"] { width:100%; border:1px solid var(--border); padding:.38rem .55rem; padding-right:2.1rem; border-radius:.45rem; font-size:.95rem; }
.site-search button[type="submit"] {
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:22px; height:22px; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; color:#111;
}
.site-search button[type="submit"] span { font-size:16px; }

/* Right */
.header-right { display:flex; justify-content:flex-end; align-items:center; gap:.45rem; white-space:nowrap; flex:1 1 auto; }
.header-right a { position:relative; display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--border); background:#fff; padding:.45rem .6rem; border-radius:.5rem; }
.header-right a .icon { display:none; }
.header-right a .text { display:inline; }

.cart-link { position:relative; }
.cart-link .wwv-cart-count { position:absolute; top:-6px; right:-6px; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:999px; background:#111; color:#fff; font-size:12px; line-height:1; }

/* Drawer */
.drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; visibility:hidden; transition:all .2s ease; z-index:11990; pointer-events:none; }
.drawer-panel { position:fixed; top:0; left:0; height:100vh; width:360px; background:#fff; border-right:1px solid var(--border); transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto; padding-bottom:2rem; z-index:12000; }
.drawer-open .drawer-backdrop { opacity:1; visibility:visible; pointer-events:auto; }
.drawer-open .drawer-panel { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:flex-end; padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.drawer-close { background:transparent; border:0; font-size:1.2rem; cursor:pointer; }

/* Category tree (smaller fonts) */
.category-tree { list-style:none; margin:0; padding:0; }
.category-tree li { border-bottom:1px solid var(--border); }
.category-item { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem; cursor:pointer; }
.category-item .label { font-weight:600; font-size:.95rem; }
.category-item .chev { color:var(--muted); margin-left:.45rem; font-size:.9rem; }
.subtree { display:none; padding-left:.5rem; background:#fafafa; }
.subtree .subcategory-item { display:block; padding:.5rem 1rem; border-top:1px dashed var(--border); font-size:.9rem; }

/* Admin bar */
body.admin-bar .header { top:46px; }
@media (min-width:782px) { body.admin-bar .header { top:32px; } }

/* Mobile */
@media (max-width:768px){
  .header-inner { gap:.4rem; }
  .site-search form.woocommerce-product-search { width: 860px !important; max-width: 860px !important; min-width: 860px !important; }
  .site-search input[type="search"] { height:30px !important; padding:3px 28px 3px 8px !important; font-size:13px !important; border-radius:6px !important; }
  .site-search button[type="submit"] { display:inline-flex !important; width:20px; height:20px; right:4px; }
  .header-right a { padding:.38rem .5rem; }
  .header-right a .text { display:none; }
  .header-right a .icon { display:inline; font-size:1.05rem; line-height:1; }
  .drawer-panel { width:max(40vw, 220px); }
  .category-item .label { font-size:.92rem; }
  .subtree .subcategory-item { font-size:.86rem; }
}

/* Products grid mobile */
@media (max-width:600px){
  ul.products { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  ul.products li.product { width:auto !important; margin:0 !important; }
}


/* === Desktop: 4 per row === */
@media (min-width: 1024px){
  .woocommerce ul.products,
  ul.products{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}


/* === Responsive Woo grid fix (mobile 2, tablet 3, desktop 4) === */
.woocommerce ul.products,
ul.products{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* default mobile */
  gap: 12px !important;
}
.woocommerce ul.products li.product,
ul.products li.product{
  list-style: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Tidy images */
.woocommerce ul.products li.product a img,
ul.products li.product a img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover;
  -webkit-transform: translateZ(0); /* avoid blurriness on some mobiles */
}

/* Tablet (≥768px): 3 per row */
@media (min-width: 768px){
  .woocommerce ul.products,
  ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Desktop (≥1024px): 4 per row */
@media (min-width: 1024px){
  .woocommerce ul.products,
  ul.products{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* === Hide PhotoSwipe (lightbox) share, keep inline share next to image === */
.pswp .pswp__button--share,
.pswp .wwv-pswp-share{ display:none !important; }


/* ================================
   OPD Temu Drawer layout (v1)
   ================================ */

/* Core drawer behavior (hidden by default, shown when body has .drawer-open)
   This was missing, which caused the drawer panel to always stay visible. */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.25);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.drawer-panel{
  position: fixed;
  top: 0;
  height: 100vh;
  background: #fff;
  z-index: 99999;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

body.drawer-open .drawer-backdrop{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.drawer-open .drawer-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.drawer-panel{
  /* keep existing positioning */
}

.opd-temu-drawer{ padding: 0 0 16px; }
.opd-temu-drawer__cols{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height: 70vh;
}
.opd-temu-drawer__left{
  background: rgba(120,120,120,.05);
  border-right: 1px solid rgba(0,0,0,.08);
  overflow:auto;
  padding: 10px 0;
}
.opd-temu-parent-list{ list-style:none; margin:0; padding:0; }
.opd-temu-parent{
  width:100%;
  border:0;
  background: transparent;
  text-align:left;
  padding: 12px 14px;
  font-weight: 800;
  cursor:pointer;
  border-left: 4px solid transparent;
}
.opd-temu-parent.is-active{
  background:#fff;
  border-left-color: rgba(212,175,55,.95);
}

.opd-temu-drawer__right{
  padding: 12px 14px 18px;
  overflow:auto;
}
.opd-temu-drawer__crumb{
  font-weight: 900;
  font-size: 16px;
  margin: 6px 2px 12px;
}

.opd-temu-subgrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px 12px;
}

.opd-temu-subcard{
  text-decoration:none !important;
  color: inherit !important;
  text-align:center;
}
.opd-temu-subimgwrap{
  width: 88px;
  height: 88px;
  border-radius: 999px;
  overflow:hidden;
  margin: 0 auto 8px;
  background: rgba(120,120,120,.06);
  border: 1px solid rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
}
.opd-temu-subimg{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.opd-temu-subfallback{
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(160,160,160,.18), rgba(160,160,160,.05));
  display:block;
}
.opd-temu-viewall-icon{ font-size: 26px; opacity:.85; }
.opd-temu-sublabel{
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 28px;
}

.opd-temu-loading, .opd-temu-empty{
  font-weight: 800;
  opacity: .75;
  padding: 10px 2px;
}

/* ==============================
   Temu drawer – products grid
   ============================== */
.opd-temu-products{ margin-top: 10px; }
.opd-temu-products__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.opd-temu-prod{
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}
.opd-temu-prod__img{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
}
.opd-temu-prod__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.opd-temu-prod__meta{ padding-top: 6px; }
.opd-temu-prod__title{
  font-size: 12px;
  line-height: 1.25;
  max-height: 30px;
  overflow: hidden;
}
.opd-temu-prod__price{
  font-weight: 900;
  margin-top: 2px;
}
.opd-temu-products__status{
  padding: 10px 0 4px;
  font-size: 12px;
  opacity: .75;
  text-align: center;
}
.opd-temu-products__sentinel{ height: 1px; }

@media (min-width: 768px){
  .opd-temu-products__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .opd-temu-products__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Desktop: Temu-like drawer anchored to the LEFT (same size, not centered) */
@media (min-width: 992px){
  .drawer-panel{
    /* Slightly narrower + give top/bottom breathing room (Temu-like) */
    width: min(920px, calc(100vw - 40px));
    left: 20px;
    right: auto;
    top: 60px;
    bottom: 60px;
    height: auto;
    /* Keep the base slide-in behaviour:
       closed: translateX(-100%), open: translateX(0) */
    border-radius: 0 16px 16px 0;
    overflow: auto;
  }
  .drawer-backdrop{ background: rgba(0,0,0,.35); }
}

/* Tablet */
@media (max-width: 991px){
  .opd-temu-drawer__cols{ grid-template-columns: 32% 68%; }
  .opd-temu-subgrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 520px){
  .drawer-panel{
    width: 100vw;
    left: 0;
    transform: none;
    border-radius: 0;
  }
  .opd-temu-drawer__cols{ grid-template-columns: 30% 70%; }
  .opd-temu-subgrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opd-temu-subimgwrap{ width: 78px; height: 78px; }
}


/* Mobile: smaller subcategory circles */
@media (max-width: 768px) {
  .opd-temu-subcat-circle {
    width: 860px !important;
    height: 80px !important;
  }
  .opd-temu-subcat-circle img {
    width: 860px !important;
    height: 80px !important;
  }
}

/* OPD Temu drawer – mobile only products + infinite scroll sentinel */
@media (min-width: 992px){
  .opd-temu-products{ display:none !important; }
}
.opd-temu-products__sentinel{ height: 2px; }


/* Phone only: hide search on My Account, leave desktop/tablet unchanged */
@media (max-width: 767px){
  body.woocommerce-account .woocommerce-product-search,
  body.woocommerce-account .search-field,
  body.woocommerce-account form[role="search"]{
    display:none !important;
  }
}


/* Phone only: search bar across the full top line inside Categories drawer */
@media (max-width: 767px){
  .opd-phone-drawer-top-search{
    display:block !important;
    padding:12px 14px;
    background:#fff;
    border-bottom:1px solid #e5e7eb;
  }
  .opd-phone-drawer-top-search-form{
    position:relative;
    margin:0;
  }
  .opd-phone-drawer-top-search-form .search-field{
    width:100%;
    height:46px;
    border:2px solid #111;
    border-radius:999px;
    background:#fff;
    padding:0 52px 0 16px;
    font-size:16px;
    line-height:46px;
    outline:none;
  }
  .opd-phone-drawer-top-search-form button{
    position:absolute;
    right:4px;
    top:4px;
    width:38px;
    height:38px;
    border:none;
    border-radius:999px;
    background:#111;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
  }
}
@media (min-width: 768px){
  .opd-phone-drawer-top-search{
    display:none !important;
  }
}


/* Mobile: left and right columns scroll separately inside Categories drawer */
@media (max-width: 767px){
  #drawer-panel{
    overflow: hidden !important;
  }

  .opd-temu-drawer,
  .opd-temu-drawer__cols{
    height: calc(100vh - 150px);
    min-height: calc(100vh - 150px);
  }

  .opd-temu-drawer__cols{
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: stretch;
  }

  .opd-temu-drawer__left{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    min-height: 0;
  }

  .opd-temu-drawer__right{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    min-height: 0;
  }

  .opd-temu-products__sentinel{
    display:block;
    height: 20px;
  }
}