/* OULATASTORE — SINGLE PRODUCT page DARK LUXURY skin. CSS ONLY. Additive & reversible.
   Loaded only on is_product() by novamira-sandbox/oula-single-product-skin.php.
   Matches the drawer + checkout: black #050505 / panel #0A0B0C, gold #6EC1E4,
   Playfair Display title, Inter body, ivory text. KEEPS: green Add-to-Cart,
   the red -% discount badge (.ou-off), and the brand colors of payment/BNPL logos.
   Rules are body.single-product-scoped + !important to win over the inline ou-pp styles. */

@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; /* warm ivory card behind white-bg product photos */
}

/* ===========================================================
   PAGE SURFACE — darken the single-product content area
   (header + site trust bar are already dark; body was white)
   =========================================================== */
body.single-product{ background:var(--ou-black) !important; }
body.single-product #page,
body.single-product #content,
body.single-product #content.site-content,
body.single-product .site-content,
body.single-product #primary,
body.single-product .content-area,
body.single-product .ast-container,
body.single-product .ast-article-single,
body.single-product .ast-separate-container,
body.single-product .ast-separate-container .ast-article-single,
body.single-product div.product{ background:transparent !important; box-shadow:none !important; }
body.single-product .entry-summary{ color:var(--ou-body) !important; }

/* ===========================================================
   BREADCRUMBS — Inter, light; links gold
   =========================================================== */
body.single-product .woocommerce-breadcrumb{
  color:var(--ou-muted) !important;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;
}
body.single-product .woocommerce-breadcrumb a{ color:var(--ou-gold) !important; }
body.single-product .woocommerce-breadcrumb a:hover{ color:var(--ou-gold-light) !important; }

/* ===========================================================
   TITLE — Playfair Display, ivory  |  BRAND — gold
   =========================================================== */
body.single-product .product_title.entry-title{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif !important;
  color:var(--ou-ink) !important;
  letter-spacing:.2px;
}
body.single-product .ou-brand{ color:var(--ou-gold) !important; }

/* ===========================================================
   PRICE — ivory now / muted strikethrough.  RED .ou-off badge: UNTOUCHED.
   In Stock: brighter green on a dark-friendly chip.
   =========================================================== */
body.single-product .ou-price-now{ color:var(--ou-ink) !important; }
body.single-product .ou-price-was{ color:#9a9a9a !important; }
body.single-product .ou-instock{
  background:rgba(87,201,143,.14) !important;
  color:var(--ou-green) !important;
}
body.single-product .ou-price-soon{ color:var(--ou-muted) !important; }

/* rating row */
body.single-product .woocommerce-product-rating .star-rating{ color:var(--ou-gold) !important; }
body.single-product .woocommerce-product-rating .woocommerce-review-link{ color:var(--ou-muted) !important; }

/* ===========================================================
   SHIP / DELIVER / COUNTDOWN — light, Inter; deliver icon gold
   =========================================================== */
body.single-product .ou-pp-ships{
  color:var(--ou-body) !important;
  font-family:'Inter',system-ui,sans-serif !important;
}
body.single-product .ou-pp-deliver{ color:var(--ou-body) !important; font-family:'Inter',system-ui,sans-serif !important; }
body.single-product .ou-pp-deliver svg{ stroke:var(--ou-gold) !important; }
body.single-product .ou-pp-count{ color:var(--ou-muted) !important; font-family:'Inter',system-ui,sans-serif !important; }
body.single-product .ou-pp-count b{ color:var(--ou-green) !important; }

/* ===========================================================
   SHORT DESCRIPTION (Fragrance Family / Scent Type / Notes) — Inter, light
   =========================================================== */
body.single-product .woocommerce-product-details__short-description{
  color:var(--ou-body) !important;
  font-family:'Inter',system-ui,sans-serif !important;
}
body.single-product .woocommerce-product-details__short-description strong,
body.single-product .woocommerce-product-details__short-description b{ color:var(--ou-ink) !important; }

/* ===========================================================
   IN-SUMMARY TRUST ROW (.ou-pp-trust) — gold icons, light text, faint gold rules
   (distinct from the site-wide .ou-trust bar, which is left alone)
   =========================================================== */
body.single-product .ou-pp-trust{
  border-top-color:var(--ou-line) !important;
  border-bottom-color:var(--ou-line) !important;
}
body.single-product .ou-pp-ti svg{ stroke:var(--ou-gold) !important; }
body.single-product .ou-pp-ti span{
  color:var(--ou-body) !important;
  font-family:'Inter',system-ui,sans-serif !important;
}

/* ===========================================================
   PAYMENTS ROW — dark-friendly; keep brand logo colors as-is
   =========================================================== */
body.single-product .ou-pay-accept{ border-top-color:var(--ou-line) !important; }
body.single-product .ou-pay-lbl{ color:var(--ou-muted) !important; }

/* BNPL (Stripe Klarna/Affirm/Afterpay message, rendered in DOM) — keep logos &
   their text legible by sitting them on a subtle light chip; brand colors intact. */
body.single-product .wc-stripe-bnpl-product-message,
body.single-product .wc-stripe-bnpl-shop-message,
body.single-product .wc-stripe-bnpl-message{
  background:var(--ou-gallery) !important;
  border:1px solid var(--ou-line) !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  display:inline-block !important;
}

/* ===========================================================
   SIZE SELECTOR CARDS (variable products) — dark cards, gold selected.
   GREEN Add-to-Cart (.ou-sg-add) is intentionally NOT restyled.
   =========================================================== */
body.single-product .ou-sg-h{
  color:var(--ou-ink) !important;
  font-family:'Playfair Display',Georgia,serif !important;
}
body.single-product .ou-sg-card{
  background:var(--ou-panel-2) !important;
  border-color:var(--ou-line) !important;
}
body.single-product .ou-sg-card:hover{ border-color:var(--ou-gold) !important; }
body.single-product .ou-sg-card.sel{
  border-color:var(--ou-gold) !important;
  box-shadow:0 0 0 3px rgba(110,193,228,.18) !important;
}
body.single-product .ou-sg-card.sel:after{ color:var(--ou-gold) !important; }
body.single-product .ou-sg-card .ou-sg-size{ color:var(--ou-muted) !important; }
body.single-product .ou-sg-card .ou-sg-price{ color:var(--ou-ink) !important; }
/* tiny variation thumbnails inside cards sit on a light tile so white-bg crops read */
body.single-product .ou-sg-card .ou-sg-img{ background:var(--ou-gallery) !important; border-radius:6px; }

/* ===========================================================
   PRODUCT GALLERY — keep a PREMIUM warm-ivory framed card so white-background
   product photos look intentional (never a raw white box on black).
   =========================================================== */
/* Gallery uses FlexSlider: frame each visible slide as a premium ivory card so
   white-background product photos read as an intentional white/ivory card, not a
   raw box on black. box-sizing:border-box (Astra default) keeps slide widths intact. */
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image{
  background:var(--ou-gallery) !important;
  border:1px solid var(--ou-line) !important;
  border-radius:16px !important;
  padding:20px !important;
  box-shadow:0 14px 36px rgba(0,0,0,.45) !important;
  overflow:hidden;
}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a,
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img{
  background:transparent !important;
  border-radius:8px !important;
  display:block;
  margin:0 auto;
}
/* subtle frame around the whole gallery viewport too */
body.single-product .woocommerce-product-gallery .flex-viewport{
  border-radius:18px !important;
}
/* gallery thumbnails strip on matching light tiles */
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img{
  background:var(--ou-gallery) !important;
  border:1px solid var(--ou-line) !important;
  border-radius:10px !important;
  padding:6px !important;
}
body.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active{
  border-color:var(--ou-gold) !important;
}

/* ===========================================================
   DESCRIPTION / DETAILS TABS — dark panel, Inter body, Playfair headings
   =========================================================== */
body.single-product .woocommerce-tabs{ background:transparent !important; }
body.single-product .woocommerce-tabs ul.tabs li{
  background:var(--ou-panel-2) !important;
  border-color:var(--ou-line) !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active{
  background:#16181B !important;
  border-color:var(--ou-gold) !important;
}
body.single-product .woocommerce-tabs ul.tabs li a{
  color:var(--ou-ink) !important;
  font-family:'Inter',system-ui,sans-serif !important;
}
body.single-product .woocommerce-tabs .panel,
body.single-product .woocommerce-Tabs-panel{
  background:transparent !important;
  color:var(--ou-body) !important;
  font-family:'Inter',system-ui,sans-serif !important;
}
body.single-product .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-Tabs-panel h3,
body.single-product .woocommerce-Tabs-panel h4{
  color:var(--ou-ink) !important;
  font-family:'Playfair Display',Georgia,serif !important;
}
body.single-product .woocommerce-Tabs-panel strong,
body.single-product .woocommerce-Tabs-panel b{ color:var(--ou-ink) !important; }

/* ===========================================================
   RELATED / UPSELL PRODUCTS (bottom of single page) — stay legible on dark
   =========================================================== */
body.single-product .related.products > h2,
body.single-product .upsells.products > h2{
  color:var(--ou-ink) !important;
  font-family:'Playfair Display',Georgia,serif !important;
}
body.single-product .related .woocommerce-loop-product__title,
body.single-product .upsells .woocommerce-loop-product__title,
body.single-product .related .price,
body.single-product .upsells .price{ color:var(--ou-ink) !important; }
body.single-product .related .price del,
body.single-product .upsells .price del{ color:var(--ou-muted) !important; }

/* ===========================================================
   FIXES (2026-06-30) — owner-verified: dim description, white active tab,
   stray BNPL dot, white "You may also like" cards.
   =========================================================== */

/* A) Description/details body text was dark (<p> computed #16201A) -> legible light */
body.single-product .woocommerce-Tabs-panel,
body.single-product .woocommerce-Tabs-panel p,
body.single-product .woocommerce-Tabs-panel li,
body.single-product .woocommerce-Tabs-panel td,
body.single-product .woocommerce-Tabs-panel span,
body.single-product .woocommerce-Tabs-panel div{ color:var(--ou-body) !important; }
body.single-product .woocommerce-Tabs-panel a{ color:var(--ou-gold) !important; }
body.single-product .woocommerce-Tabs-panel h2,
body.single-product .woocommerce-Tabs-panel h3,
body.single-product .woocommerce-Tabs-panel h4,
body.single-product .woocommerce-Tabs-panel strong,
body.single-product .woocommerce-Tabs-panel b{ color:var(--ou-ink) !important; }

/* B) ACTIVE "Description" tab rendered as a solid WHITE block (li bg + white ::before).
   Force dark+gold and neutralize the default WooCommerce tab corner pseudos. */
body.single-product div.product .woocommerce-tabs ul.tabs li.active,
body.single-product .woocommerce-tabs ul.tabs li.description_tab.active,
body.single-product .woocommerce-tabs ul.tabs li.active{
  background:#16181B !important;
  border-color:var(--ou-gold) !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a{ color:var(--ou-gold) !important; }
body.single-product .woocommerce-tabs ul.tabs li::before,
body.single-product .woocommerce-tabs ul.tabs li::after,
body.single-product .woocommerce-tabs ul.tabs li.active::before,
body.single-product .woocommerce-tabs ul.tabs li.active::after{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
/* Reviews-tab form fields -> dark-friendly (were white) */
body.single-product .woocommerce-Tabs-panel textarea,
body.single-product .woocommerce-Tabs-panel input[type="text"],
body.single-product .woocommerce-Tabs-panel input[type="email"],
body.single-product #review_form textarea,
body.single-product #review_form input{
  background:var(--ou-panel-2) !important;
  color:var(--ou-ink) !important;
  border:1px solid var(--ou-line) !important;
}

/* C) Stray white dot under Categories = an EMPTY .wc-stripe-bnpl-product-message
   placeholder shown as a small ivory chip by the BNPL chip rule -> hide when empty. */
body.single-product .wc-stripe-bnpl-product-message:empty,
body.single-product .wc-stripe-bnpl-shop-message:empty,
body.single-product .wc-stripe-bnpl-message:empty{ display:none !important; }

/* D) "You may also like" (.ou-ps) / related / upsell cards -> SAME dark card + warm-ivory
   framed image tile + ivory title + green sale price as shop/archive. shop-archive.css
   does NOT load on the single-product page, so these cards are styled here. */
body.single-product .ou-ps ul.products li.product,
body.single-product .related.products li.product,
body.single-product .upsells.products li.product{
  background:var(--ou-panel) !important;
  border:1px solid var(--ou-line) !important;
}
body.single-product .ou-ps ul.products li.product .astra-shop-thumbnail-wrap,
body.single-product .related.products li.product .astra-shop-thumbnail-wrap,
body.single-product .upsells.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.single-product .ou-ps li.product .astra-shop-thumbnail-wrap img,
body.single-product .related.products li.product .astra-shop-thumbnail-wrap img,
body.single-product .upsells.products li.product .astra-shop-thumbnail-wrap img{
  background:transparent !important; border-radius:8px !important; object-fit:contain !important;
}
body.single-product .ou-ps-title{
  color:var(--ou-ink) !important;
  font-family:'Playfair Display',Georgia,serif !important;
}
body.single-product .ou-ps ul.products li.product .woocommerce-loop-product__title,
body.single-product .related.products li.product .woocommerce-loop-product__title,
body.single-product .upsells.products li.product .woocommerce-loop-product__title{ color:var(--ou-ink) !important; }
body.single-product .ou-ps .price,
body.single-product .related.products .price,
body.single-product .upsells.products .price{ color:var(--ou-ink) !important; }
body.single-product .ou-ps .price del,
body.single-product .related.products .price del,
body.single-product .upsells.products .price del{ color:var(--ou-muted) !important; }
body.single-product .ou-ps .price ins,
body.single-product .related.products .price ins,
body.single-product .upsells.products .price ins{ color:var(--ou-green) !important; text-decoration:none; }
/* TASK 2 (2026-07-02) — mobile payment badges: replace the old 2-column grid
   with a compact horizontal wrap row. Display-only; payment logic untouched. */
@media(max-width:880px){
  body.single-product .ou-pay-accept{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:9px!important;
    grid-template-columns:none!important;
    grid-auto-flow:initial!important;
    direction:ltr!important;
  }
  body.single-product .ou-pay-accept .ou-pay-lbl{
    flex:0 0 100%!important;
    width:100%!important;
    grid-column:auto!important;
  }
  body.single-product .ou-pay-accept img{
    flex:0 0 46px!important;
    width:46px!important;
    height:30px!important;
    max-width:46px!important;
    object-fit:contain!important;
    justify-self:auto!important;
  }
  html[dir="rtl"] body.single-product .ou-pay-accept{
    direction:rtl!important;
    justify-content:flex-start!important;
  }
}

/* OULA price display normalization (2026-07-03): display-only.
   Applies to native Woo product rows on single-product pages, including Find Your Next Scent. */
body.single-product ul.products li.product,
body.single-product .ou-ps ul.products li.product{
  display:flex !important;
  flex-direction:column !important;
}
body.single-product ul.products li.product .astra-shop-summary-wrap,
body.single-product ul.products li.product .woocommerce-loop-product__link,
body.single-product .ou-ps ul.products li.product .astra-shop-summary-wrap,
body.single-product .ou-ps ul.products li.product .woocommerce-loop-product__link{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
}
body.single-product ul.products li.product .price,
body.single-product .ou-ps ul.products li.product .price{
  margin-top:auto !important;
  white-space:nowrap !important;
}
body.single-product ul.products li.product .price del,
body.single-product .ou-ps ul.products li.product .price del{
  display:none !important;
}
body.single-product ul.products li.product .price ins,
body.single-product .ou-ps ul.products li.product .price ins{
  display:inline !important;
  text-decoration:none !important;
  background:transparent !important;
}

/* ===== OULATASTORE 2026-07-07 — MOBILE RESPONSIVENESS FIX (single product). Mobile-only media queries; desktop (>768px) untouched. This stylesheet loads ONLY on single product pages. ===== */
/* Kill iOS Safari font-boosting (root cause of "desktop-size" text: no text-size-adjust existed anywhere, so overflow triggered inflation). Property only affects mobile rendering. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
@media(max-width:768px){
/* (b) hard horizontal containment — the document may never exceed the viewport, LTR and RTL alike */
body.single-product{overflow-x:hidden!important;max-width:100vw!important;}
body.single-product #content,body.single-product .ast-container,body.single-product #primary,body.single-product .site-content,body.single-product div.product,body.single-product .summary.entry-summary{max-width:100%!important;box-sizing:border-box!important;}
body.single-product .summary.entry-summary,body.single-product .ou-pp-right-desc{overflow-wrap:anywhere;}
body.single-product .entry-summary img,body.single-product .entry-content img{max-width:100%!important;height:auto!important;}
body.single-product .woocommerce-tabs table,body.single-product .ou-pp-right-desc table{display:block;max-width:100%!important;overflow-x:auto;}
/* (c) gallery fills the viewport width */
body.single-product div.product .woocommerce-product-gallery{width:100%!important;max-width:100%!important;float:none!important;margin-inline:0!important;}
body.single-product .woocommerce-product-gallery .flex-viewport,body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image{width:100%!important;max-width:100%!important;}
body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img{width:100%!important;height:auto!important;object-fit:contain;}
/* (a) mobile typography — explicit comfortable sizes */
body.single-product h1.product_title.entry-title{font-size:1.7rem!important;line-height:1.25!important;}
body.single-product .ou-price-now{font-size:1.6rem!important;}
body.single-product .ou-price-was{font-size:1.05rem!important;}
body.single-product .ou-sg-h,body.single-product .ou-pp-ships{font-size:14px!important;}
body.single-product .woocommerce-tabs h2,body.single-product .related h2,body.single-product .ou-ps h2{font-size:1.35rem!important;}
body.single-product .ou-sg-add{font-size:15px!important;}
}
@media(max-width:480px){
body.single-product h1.product_title.entry-title{font-size:1.5rem!important;}
body.single-product .ou-price-now{font-size:1.45rem!important;}
body.single-product .woocommerce-tabs h2,body.single-product .related h2,body.single-product .ou-ps h2{font-size:1.25rem!important;}
}

/* ============================================================
   2026-07-21 — WCAG contrast fixes (item 6-b, batch 1) — by Ameen
   1) .ast-woo-product-category was near-black on dark bg (ratio 1.04)
   2) .ou-ps-brand was light blue on ivory card (ratio 1.81)
   Backup: single-product-css-20260721-095729.css.bak
   ============================================================ */
body.single-product .ast-woo-product-category{ color:#B7B7B7 !important; }
body.single-product .ou-ps-brand{ color:#0C447C !important; }