/* OULATASTORE — SHOP / ARCHIVE / PRODUCT-CATEGORY DARK LUXURY skin. CSS ONLY.
   Loaded on is_shop()/product taxonomies by novamira-sandbox/oula-shop-archive-skin.php.
   Matches the dark homepage + drawer + single-product page: black #050505 / panel
   #0A0B0C, gold #6EC1E4, Playfair title, Inter body, ivory text. KEEPS: the red
   Sale! badge (.ast-onsale-card), the Limited Quantity badge (.oulq-badge), and the
   on-card green add-to-cart. Recolors only — layout (Jomashop-style) is preserved.
   Rules are body.woocommerce-scoped + !important to win over the later inline light
   styles from oula-shop-design.php. Product photos sit on the SAME ivory framed tile
   (--ou-gallery #F6F2EA) used by the single-product gallery, so the pages match. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ou-black:#050505; --ou-panel:#0A0B0C; --ou-panel-2:#0F1113;
  --ou-gold:#6EC1E4; --ou-gold-light:#A8D8F0;
  --ou-ink:#F4EFE6; --ou-body:#D9D5CC; --ou-muted:#A8A39A;
  --ou-green:#57C98F; --ou-line:rgba(110,193,228,.20);
  --ou-gallery:#F6F2EA; /* same warm ivory tile as the single-product gallery */
}

/* ===========================================================
   PAGE SURFACE — darken the archive content area (was white)
   =========================================================== */
body.woocommerce{ background:var(--ou-black) !important; }
body.woocommerce #page,
body.woocommerce #content.site-content,
body.woocommerce .site-content,
body.woocommerce #primary,
body.woocommerce .content-area,
body.woocommerce .ast-container,
body.woocommerce .ast-separate-container,
body.woocommerce .ast-separate-container .site-content,
body.woocommerce .ast-woocommerce-container{ background:transparent !important; box-shadow:none !important; }

/* ===========================================================
   CATEGORY TITLE (Playfair ivory) + BREADCRUMBS (Inter light, gold links)
   =========================================================== */
body.woocommerce .woocommerce-products-header__title,
body.woocommerce .woocommerce-products-header .page-title{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif !important;
  color:var(--ou-ink) !important;
  letter-spacing:.2px;
}
body.woocommerce .woocommerce-breadcrumb{
  color:var(--ou-muted) !important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;
}
body.woocommerce .woocommerce-breadcrumb a{ color:var(--ou-gold) !important; }
body.woocommerce .woocommerce-breadcrumb a:hover{ color:var(--ou-gold-light) !important; }

/* ===========================================================
   RESULT COUNT + ORDERING DROPDOWN — light text, dark dropdown
   =========================================================== */
body.woocommerce .woocommerce-result-count{
  color:var(--ou-body) !important;
  font-family:'Inter',system-ui,sans-serif !important;
}
body.woocommerce .woocommerce-ordering select.orderby{
  background:var(--ou-panel-2) !important;
  color:var(--ou-ink) !important;
  border:1px solid var(--ou-line) !important;
  font-family:'Inter',system-ui,sans-serif !important;
}
body.woocommerce .woocommerce-ordering select.orderby option{
  background:var(--ou-panel-2) !important;
  color:var(--ou-ink) !important;
}

/* ===========================================================
   LEFT FILTER SIDEBAR — dark panel, light text, gold accents (layout kept)
   =========================================================== */
body.woocommerce #secondary{ color:var(--ou-body) !important; }
body.woocommerce .ou-filters-head{ border-bottom-color:var(--ou-line) !important; }
body.woocommerce .ou-filters-title{ color:var(--ou-ink) !important; }
body.woocommerce .ou-filters-close{ color:var(--ou-ink) !important; }
body.woocommerce #secondary .widget{ border-bottom-color:var(--ou-line) !important; }
body.woocommerce #secondary .widget .widget-title,
body.woocommerce #secondary .widget .widgettitle,
body.woocommerce #secondary .widget h2,
body.woocommerce #secondary .widget h3{ color:var(--ou-ink) !important; }
body.woocommerce #secondary .widget ul li a{ color:var(--ou-body) !important; }
body.woocommerce #secondary .widget ul li a:hover{ color:var(--ou-gold-light) !important; }
body.woocommerce #secondary .widget ul li.ou-active>a,
body.woocommerce #secondary .widget ul li.current-cat>a,
body.woocommerce #secondary .widget ul li.chosen>a,
body.woocommerce #secondary .widget ul li.current-cat-parent>a{ color:var(--ou-gold) !important; }
body.woocommerce #secondary .widget ul li span{ color:var(--ou-muted) !important; }

/* On Sale toggle */
body.woocommerce .ou-onsale-widget{ border-bottom-color:var(--ou-line) !important; }
body.woocommerce .ou-onsale{ color:var(--ou-body) !important; }
body.woocommerce .ou-onsale .ou-onsale-box{ border-color:var(--ou-gold) !important; }
body.woocommerce .ou-onsale.on .ou-onsale-box{ background:var(--ou-gold) !important; }
body.woocommerce .ou-onsale.on .ou-onsale-box:after{ border-color:var(--ou-black) !important; }
body.woocommerce .ou-onsale:hover{ color:var(--ou-gold-light) !important; }

/* Brand search input */
body.woocommerce .ou-brand-search{
  background:var(--ou-panel-2) !important;
  border:1px solid var(--ou-line) !important;
  color:var(--ou-ink) !important;
}
body.woocommerce .ou-brand-search::placeholder{ color:var(--ou-muted) !important; }
body.woocommerce .ou-brand-search:focus{ border-color:var(--ou-gold) !important; }

/* PRICE slider — gold track + range, gold handles; FILTER button stays gold */
body.woocommerce #secondary .price_slider_wrapper .ui-slider{ background:rgba(110,193,228,.22) !important; }
body.woocommerce #secondary .price_slider_wrapper .ui-slider .ui-slider-range{ background:var(--ou-gold) !important; }
body.woocommerce #secondary .price_slider_wrapper .ui-slider .ui-slider-handle{
  background:var(--ou-gold) !important;
  border-color:var(--ou-gold) !important;
}
body.woocommerce #secondary .widget_price_filter .price_label{ color:var(--ou-body) !important; }
body.woocommerce #secondary .widget_price_filter .price_label span{ color:var(--ou-ink) !important; }
body.woocommerce #secondary .widget_price_filter .button{
  background:var(--ou-gold) !important;
  color:var(--ou-black) !important;
}
body.woocommerce #secondary .widget_price_filter .button:hover{ background:var(--ou-gold-light) !important; }

/* ===========================================================
   PRODUCT CARDS — dark surface; title ivory; price ivory/muted/green.
   KEEPS the red Sale! badge, the Limited Quantity badge, on-card add-to-cart.
   =========================================================== */
body.woocommerce ul.products li.product{
  background:var(--ou-panel) !important;
  border:1px solid var(--ou-line) !important;
}
body.woocommerce ul.products li.product:hover{
  box-shadow:0 14px 32px rgba(0,0,0,.55) !important;
  border-color:rgba(110,193,228,.35) !important;
}
body.woocommerce ul.products li.product .woocommerce-loop-product__title{ color:var(--ou-ink) !important; }
body.woocommerce ul.products li.product .price{ color:var(--ou-ink) !important; }
body.woocommerce ul.products li.product .price del,
body.woocommerce ul.products li.product .price del .woocommerce-Price-amount{ color:var(--ou-muted) !important; }
body.woocommerce ul.products li.product .price ins,
body.woocommerce ul.products li.product .price ins .woocommerce-Price-amount{ color:var(--ou-green) !important; text-decoration:none; }
/* muted category/brand label if the loop renders one */
body.woocommerce ul.products li.product .ast-woo-product-category,
body.woocommerce ul.products li.product .ou-loop-brand,
body.woocommerce ul.products li.product [class*="loop-category"]{ color:var(--ou-muted) !important; }

/* PRODUCT IMAGE — same warm-ivory framed tile as the single-product gallery so
   white-background photos read as an intentional premium card, never a white block. */
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
  background:var(--ou-gallery) !important;
  border:1px solid var(--ou-line) !important;
  border-radius:12px !important;
  padding:14px !important;
  box-shadow:0 8px 22px rgba(0,0,0,.40) !important;
  overflow:hidden;
}
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a,
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img,
body.woocommerce ul.products li.product a img{
  background:transparent !important;
  border-radius:8px !important;
}

/* ===========================================================
   MOBILE filter drawer + toggle — dark panel, gold toggle
   =========================================================== */
body.woocommerce .ou-filters-toggle{
  background:var(--ou-gold) !important;
  color:var(--ou-black) !important;
}
@media(max-width:992px){
  body.woocommerce #secondary{
    background:var(--ou-panel) !important;
    box-shadow:0 0 40px rgba(0,0,0,.65) !important;
  }
}

/* ===========================================================
   PAGINATION — dark/gold (kill the default white current-page chip)
   =========================================================== */
body.woocommerce .woocommerce-pagination .page-numbers{
  background:transparent !important;
  color:var(--ou-body) !important;
  border-color:var(--ou-line) !important;
}
body.woocommerce .woocommerce-pagination a.page-numbers:hover{
  color:var(--ou-gold-light) !important;
  border-color:var(--ou-gold) !important;
}
body.woocommerce .woocommerce-pagination .page-numbers.current{
  background:var(--ou-gold) !important;
  color:var(--ou-black) !important;
  border-color:var(--ou-gold) !important;
}

/* ===========================================================
   FRAMING UNIFORMITY (2026-06-30) — the ivory frame already applies to EVERY card
   (simple/variable/1-img/2-img/sale/limited all carry .astra-shop-thumbnail-wrap).
   Dark-background product photos (e.g. Valentino Born in Roma) were stretched
   (object-fit:fill) and filled the tile, so the ivory read as thin/partial. Contain
   the image + center it so a consistent ivory border shows on all four sides, and the
   hover/second image stays inside the rounded frame.
   =========================================================== */
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{ text-align:center; }
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img{
  object-fit:contain !important;
  max-width:100% !important;
  margin-inline:auto !important;
}
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap a{
  display:block !important;
  border-radius:8px !important;
  overflow:hidden !important;
}

/* OULA price display normalization (2026-07-03): display-only.
   Hide sale strikethroughs and pin product-card prices to one shared baseline. */
body.woocommerce ul.products li.product{
  display:flex !important;
  flex-direction:column !important;
}
body.woocommerce ul.products li.product .astra-shop-summary-wrap,
body.woocommerce ul.products li.product .woocommerce-loop-product__link{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}
body.woocommerce ul.products li.product .price{
  margin-top:auto !important;
  white-space:nowrap !important;
}
body.woocommerce ul.products li.product .price del{
  display:none !important;
}
body.woocommerce ul.products li.product .price ins{
  display:inline !important;
  text-decoration:none !important;
  background:transparent !important;
}

/* ===== OULATASTORE 2026-07-07 — COMPACT 2-UP MOBILE ARCHIVE CARDS (shop/category/tag/brand). Mobile-only; desktop >768px unchanged. Matches the homepage compact card: large image, tight stack, no dead vertical space, dark frame kept. Display-only — price VALUES/currency logic untouched. Direction-neutral (RTL ok). ===== */
@media(max-width:768px){
body.woocommerce ul.products,body.woocommerce-page ul.products{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important;max-width:100%!important;margin:0 0 24px!important;padding:0!important;}
body.woocommerce ul.products li.product,body.woocommerce-page ul.products li.product{width:100%!important;max-width:100%!important;margin:0!important;float:none!important;display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;box-sizing:border-box!important;}
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{width:100%!important;margin:0!important;}
body.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img{width:100%!important;height:auto!important;display:block!important;}
body.woocommerce ul.products li.product .astra-shop-summary-wrap{flex:0 0 auto!important;padding:8px 9px 10px!important;gap:3px!important;margin:0!important;} /* no flex:1 stretch — card hugs content */
body.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:12.5px!important;line-height:1.3!important;margin:0!important;}
body.woocommerce ul.products li.product .price{font-size:clamp(10.5px,3.4vw,13px)!important;white-space:nowrap!important;margin:2px 0 0!important;} /* variable range fits one line, incl. long MRU strings */
body.woocommerce ul.products li.product .price del{font-size:.85em!important;}
body.woocommerce ul.products li.product .star-rating{margin:2px 0!important;}
body.woocommerce ul.products li.product .button,body.woocommerce ul.products li.product .add_to_cart_button{width:100%!important;min-height:40px!important;padding:9px 10px!important;font-size:10.5px!important;margin:6px 0 0!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:normal!important;}
}
@media(max-width:480px){
body.woocommerce ul.products,body.woocommerce-page ul.products{gap:8px!important;}
body.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:12px!important;}
}