/* =============================================================================
   Bio Lotus — WooCommerce Style Overrides
   Loaded on: is_woocommerce() | is_cart() | is_checkout() | is_account_page()

   Sections
     1.  Shared / resets
     2.  WC notices
     3.  Breadcrumb
     4.  Product archive (shop, category)
     5.  Product cards
     6.  Sale badge
     7.  Pagination
     8.  Single product — layout
     9.  Single product — gallery
    10.  Single product — info column
    11.  Product tabs
    12.  Related / upsells
    13.  Cart
    14.  Checkout
    15.  My Account
    16.  Responsive
   ============================================================================= */


/* ── 1. SHARED / RESETS ───────────────────────────────────────────────────── */

/* Page top-padding so content clears fixed header */
.woocommerce-page .site-main,
.woocommerce.post-type-archive .site-main,
.woocommerce.single-product .site-main {
	padding-top: var(--bl-header-h, 108px);
}

/* Container width */
.woocommerce,
.woocommerce-page {
	--wc-max: var(--bl-max-width);
}

/* WC resets all buttons — restore our font */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--bl-font-sans);
	border-radius: 2px;
	transition: background 180ms var(--bl-ease), color 180ms var(--bl-ease),
	            opacity 180ms var(--bl-ease);
}

/* Primary WC button → matches bl-btn-primary */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.wc-forward,
.woocommerce .checkout-button {
	background:     var(--bl-bold);
	color:          #FDFAF2;
	border:         none;
	padding:        12px 28px;
	font-size:      10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight:    500;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce .checkout-button:hover {
	background: var(--bl-text);
	color:      #FDFAF2;
}

/* Secondary / outline button */
.woocommerce a.button:not(.alt):not(.wc-forward),
.woocommerce button.button:not(.alt) {
	background:     transparent;
	color:          var(--bl-text-mid);
	border:         1px solid var(--bl-line);
	padding:        10px 22px;
	font-size:      10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight:    400;
}
.woocommerce a.button:not(.alt):not(.wc-forward):hover,
.woocommerce button.button:not(.alt):hover {
	border-color: var(--bl-text-mid);
	color:        var(--bl-text);
}


/* ── 2. WC NOTICES ────────────────────────────────────────────────────────── */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	font-family:    var(--bl-font-sans);
	font-size:      13px;
	letter-spacing: .02em;
	border-radius:  2px;
	border-top:     none;
	padding:        14px 20px;
}
.woocommerce-message {
	border-left:     3px solid var(--bl-accent);
	background:      var(--bl-accent-soft);
	color:           var(--bl-text);
}
.woocommerce-info {
	border-left:  3px solid var(--bl-bold);
	background:   var(--bl-bold-soft);
	color:        var(--bl-text);
}
.woocommerce-error {
	border-left:  3px solid #C0392B;
	background:   #FBEAEA;
	color:        var(--bl-text);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: inherit;
}

/* Notice action button */
.woocommerce-message .button,
.woocommerce-info .button {
	float:      inline-end;
	margin-top: -2px;
}


/* ── 3. BREADCRUMB ────────────────────────────────────────────────────────── */

.woocommerce-breadcrumb {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	letter-spacing: .08em;
	color:          var(--bl-text-faint);
	margin-bottom:  28px;
	padding:        0;
	background:     none;
}

.woocommerce-breadcrumb a {
	color:           var(--bl-text-faint);
	text-decoration: none;
	transition:      color 180ms var(--bl-ease);
}
.woocommerce-breadcrumb a:hover { color: var(--bl-accent); }


/* ── 4. PRODUCT ARCHIVE ───────────────────────────────────────────────────── */

/* Page layout: padding + inner max-width */
.woocommerce-page.woocommerce-shop .site-main,
.tax-product_cat .site-main {
	padding-inline: var(--bl-padding-x);
}

/* Archive header */
.woocommerce-products-header {
	padding-bottom: 32px;
	border-bottom:  1px solid var(--bl-line);
	margin-bottom:  40px;
}
.woocommerce-products-header__title.page-title {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      clamp(32px, 4vw, 52px);
	color:          var(--bl-text);
	letter-spacing: .04em;
	line-height:    1.1;
}

/* Ordering / results count bar */
.woocommerce-ordering,
.woocommerce-result-count {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	letter-spacing: .06em;
	color:          var(--bl-text-faint);
}

.woocommerce-ordering select {
	font-family:     var(--bl-font-sans);
	font-size:       11px;
	letter-spacing:  .06em;
	color:           var(--bl-text-mid);
	border:          1px solid var(--bl-line);
	background:      var(--bl-surface);
	padding:         6px 28px 6px 10px;
	border-radius:   2px;
	appearance:      none;
	-webkit-appearance: none;
	cursor:          pointer;
}
.woocommerce-ordering select:focus {
	outline:        2px solid var(--bl-accent);
	outline-offset: 2px;
}

/* Product grid.
   auto-fit (not auto-fill) collapses empty column tracks, so when a shop or
   category has only a few products the existing cards stretch to fill the row
   instead of leaving blank reserved tracks on the side. */
.woocommerce ul.products {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap:                   1px;
	background:            var(--bl-line);
	border:                1px solid var(--bl-line);
	list-style:            none;
	margin:                0;
	padding:               0;
}


/* ── 5. PRODUCT CARDS ─────────────────────────────────────────────────────── */

.woocommerce ul.products li.product {
	background:  var(--bl-surface);
	padding:     0;
	margin:      0;
	position:    relative;
	overflow:    hidden;
	transition:  box-shadow 240ms var(--bl-ease);
}
.woocommerce ul.products li.product:hover {
	box-shadow: 0 4px 24px rgba(28,23,16,.08);
	z-index:    1;
}

/* Card image area — show the FULL product image (no cropping). Broad,
   markup-agnostic selector so it applies whatever element Blocksy uses for the
   card image; the hover image is excluded (handled separately below). */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img:not(.bl-loop-img-secondary) {
	object-fit: contain;
	background: var(--bl-surface);
	transition: transform 400ms var(--bl-ease), opacity 400ms var(--bl-ease);
}
.woocommerce ul.products li.product a img {
	width:        100%;
	aspect-ratio: 3 / 4;
	display:      block;
}
.woocommerce ul.products li.product:hover a img {
	transform: scale(1.03);
}

/* Anchor for the hover-swap image: the classic-Woo link PLUS a Blocksy-agnostic
   :has() rule that makes whatever element directly wraps the second image a
   positioning context — so the overlay sits on top in either markup. */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display:  block;
	overflow: hidden;
	position: relative;
}
.woocommerce ul.products li.product :has(> img.bl-loop-img-secondary) {
	position: relative;
}

/* Hover-swap: the 2nd product image fades in over the featured one. Class-only
   selectors so it works regardless of card markup; opacity:0 guarantees it is
   hidden (never stacked) until hover. */
img.bl-loop-img-secondary {
	position:       absolute;
	inset:          0;
	width:          100%;
	height:         100%;
	object-fit:     contain;
	opacity:        0;
	transition:     opacity 400ms var(--bl-ease);
	pointer-events: none;
}
.woocommerce ul.products li.product:hover img.bl-loop-img-secondary {
	opacity: 1;
}

/* Card text area */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-family:    var(--bl-font-serif);
	font-weight:    300;
	font-size:      18px;
	color:          var(--bl-text);
	letter-spacing: .03em;
	line-height:    1.25;
	padding:        16px 20px 4px;
	margin:         0;
}

/* Star rating in card */
.woocommerce ul.products li.product .star-rating {
	margin: 4px 20px 8px;
	font-size: .8em;
}

/* Price in card */
.woocommerce ul.products li.product .price {
	display:      block;
	font-family:  var(--bl-font-sans);
	font-size:    14px;
	font-weight:  400;
	color:        var(--bl-text-mid);
	padding:      0 20px 6px;
	letter-spacing: .02em;
}
.woocommerce ul.products li.product .price del {
	color:    var(--bl-text-faint);
	font-size: 12px;
	opacity:  .8;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color:           var(--bl-bold);
	font-weight:     500;
}

/* Add-to-cart button in card */
.woocommerce ul.products li.product .button {
	display:         block;
	width:           calc(100% - 40px);
	margin:          10px 20px 20px;
	text-align:      center;
	background:      var(--bl-bold);
	color:           #FDFAF2;
	border:          none;
	padding:         10px 0;
	font-size:       10px;
	letter-spacing:  .16em;
	text-transform:  uppercase;
	font-weight:     500;
	border-radius:   2px;
	transition:      background 180ms var(--bl-ease),
	                 opacity   180ms var(--bl-ease);
}
.woocommerce ul.products li.product .button:hover {
	background: var(--bl-text);
	color:      #FDFAF2;
}
.woocommerce ul.products li.product .button.loading {
	opacity: .6;
	pointer-events: none;
}
.woocommerce ul.products li.product .button.added {
	background: var(--bl-accent);
}

/* Added-to-cart checkmark link */
.woocommerce ul.products li.product .added_to_cart {
	display:        block;
	text-align:     center;
	margin:         -10px 20px 10px;
	font-size:      10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--bl-accent);
}

/* Product-category label inside the loop card.
   The theme card insets title / price / button by 20px, but the category row
   (added by the theme/Blocksy card layout) sits flush-start and misaligns.
   WooCommerce category links carry rel="tag", so this targets the category
   wrapper precisely — regardless of its class — and re-insets it to 20px. */
.woocommerce ul.products li.product > *:has(a[rel~="tag"]),
.woocommerce ul.products li.product .ct-woo-card-extra,
.woocommerce ul.products li.product .posted_in {
	padding-inline: 20px;
	box-sizing:     border-box;
	max-width:      100%;
}


/* ── 6. SALE BADGE ────────────────────────────────────────────────────────── */

.woocommerce span.onsale {
	position:     absolute;
	top:          14px;
	inset-inline-end: 14px;
	background:   var(--bl-bold);
	color:        #FDFAF2;
	font-family:  var(--bl-font-sans);
	font-size:    10px;
	font-weight:  500;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding:      5px 10px;
	border-radius: 2px;
	min-height:   auto;
	min-width:    auto;
	line-height:  1.4;
	z-index:      2;
}


/* ── 7. PAGINATION ────────────────────────────────────────────────────────── */

.woocommerce nav.woocommerce-pagination {
	margin-top: 48px;
	text-align: center;
}
.woocommerce nav.woocommerce-pagination ul {
	display:     inline-flex;
	gap:         2px;
	border:      none;
	background:  none;
}
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a {
	font-family:    var(--bl-font-sans);
	font-size:      12px;
	letter-spacing: .08em;
	color:          var(--bl-text-mid);
	border:         1px solid var(--bl-line);
	background:     var(--bl-surface);
	padding:        8px 14px;
	border-radius:  2px;
	transition:     border-color 180ms var(--bl-ease),
	                color        180ms var(--bl-ease);
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--bl-accent);
	color:        var(--bl-accent);
	background:   var(--bl-surface);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background:   var(--bl-bold);
	color:        #FDFAF2;
	border-color: var(--bl-bold);
}


/* ── 8. SINGLE PRODUCT — LAYOUT ──────────────────────────────────────────── */

/* The two-column structure (gallery + summary) is handled by Blocksy's
   native WooCommerce layout. A custom CSS grid here previously turned
   div.product into a 2-column grid, which produced empty grid cells / large
   blank areas whenever the element held more than two direct children
   (Blocksy wraps the gallery and summary in additional elements). We defer
   layout to the theme and keep only brand typography in the sections below. */
.woocommerce div.product {
	padding-bottom: 48px;
}


/* ── 9. SINGLE PRODUCT — GALLERY ─────────────────────────────────────────── */

/* Gallery position/size is left to Blocksy. We only neutralise the legacy
   WooCommerce Flexslider frame (margin / border / shadow / background) that
   would otherwise add blank space around the image. */
.woocommerce div.product .woocommerce-product-gallery .flexslider {
	margin:        0;
	border:        none;
	box-shadow:    none;
	border-radius: 0;
	background:    transparent;
}
.woocommerce div.product .woocommerce-product-gallery__image a {
	display:     block;
	line-height: 0;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
	width:        100%;
	height:       auto;
	display:      block;
	border-radius: 1px;
}

/* Thumbnail strip */
.woocommerce div.product .flex-control-thumbs {
	display: flex;
	gap:     8px;
	margin-top: 12px;
	list-style: none;
	padding:    0;
}
.woocommerce div.product .flex-control-thumbs li {
	width: 72px;
	flex-shrink: 0;
}
.woocommerce div.product .flex-control-thumbs img {
	width:        72px;
	height:       72px;
	object-fit:   cover;
	cursor:       pointer;
	border:       1px solid transparent;
	border-radius: 1px;
	transition:   border-color 180ms var(--bl-ease);
}
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs .flex-active img {
	border-color: var(--bl-accent);
}

/* Sale badge on single product */
.woocommerce div.product span.onsale {
	top:             20px;
	inset-inline-end: 20px;
}


/* ── 10. SINGLE PRODUCT — INFO COLUMN ────────────────────────────────────── */

.woocommerce div.product .entry-summary {
	padding-top: 8px;
}

/* Category breadcrumb line */
.woocommerce div.product .posted_in {
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	letter-spacing: .20em;
	text-transform: uppercase;
	color:          var(--bl-accent);
	display:        block;
	margin-bottom:  12px;
}
.woocommerce div.product .posted_in a {
	color: var(--bl-accent);
}

/* Product title */
.woocommerce div.product .product_title {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      clamp(28px, 3vw, 42px);
	color:          var(--bl-text);
	letter-spacing: .04em;
	line-height:    1.1;
	margin-bottom:  16px;
}

/* Star rating */
.woocommerce div.product .woocommerce-product-rating {
	display:     flex;
	align-items: center;
	gap:         10px;
	margin-bottom: 18px;
}
.woocommerce div.product .star-rating {
	color:     var(--bl-accent);
	font-size: .9em;
}
.woocommerce div.product .woocommerce-review-link {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	color:          var(--bl-text-faint);
	letter-spacing: .04em;
}

/* Star rating spans */
.star-rating {
	overflow:   hidden;
	position:   relative;
	height:     1em;
	line-height: 1;
	font-size:  .9em;
	width:      5.4em;
	color:      var(--bl-accent);
}
.star-rating::before {
	content:    "\73\73\73\73\73";
	float:      inline-start;
	top:        0;
	left:       0;
	position:   absolute;
	color:      var(--bl-line);
	letter-spacing: .1em;
}
.star-rating span {
	overflow:    hidden;
	float:       inline-start;
	top:         0;
	left:        0;
	position:    absolute;
	padding-top: 1.5em;
}
.star-rating span::before {
	content:        "\73\73\73\73\73";
	top:            0;
	position:       absolute;
	left:           0;
	color:          var(--bl-accent);
	letter-spacing: .1em;
}

/* Price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family:    var(--bl-font-sans);
	font-size:      22px;
	font-weight:    400;
	color:          var(--bl-text);
	letter-spacing: .02em;
	margin-bottom:  20px;
	display:        block;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color:     var(--bl-text-faint);
	font-size: 16px;
	opacity:   .8;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	text-decoration: none;
	color:           var(--bl-bold);
	font-weight:     500;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
	font-family:   var(--bl-font-sans);
	font-size:     13px;
	color:         var(--bl-text-mid);
	line-height:   1.75;
	letter-spacing: .02em;
	margin-bottom: 28px;
	border-top:    1px solid var(--bl-line);
	padding-top:   20px;
}
/* When the short description holds a styled .bl-pdp block (pasted product
   content), drop the wrapper hairline + top padding: the block defines its
   own structure, so the separator would otherwise float in the wrong place. */
.woocommerce div.product .woocommerce-product-details__short-description:has(.bl-pdp) {
	border-top:  none;
	padding-top: 0;
}

/* Quantity input — keep brand font/colour only. Blocksy's data-type stepper
   owns the layout (border, sizing, and the +/− buttons): it gives the input a
   large padding-inline to make room for the buttons, so forcing a fixed width
   or padding here breaks the stepper (the − overlaps the number). */
.woocommerce div.product form.cart .quantity input {
	font-family: var(--bl-font-sans);
	color:       var(--bl-text);
}

/* Add to cart button — single product */
.woocommerce div.product form.cart .single_add_to_cart_button {
	background:     var(--bl-bold);
	color:          #FDFAF2;
	border:         none;
	padding:        14px 36px;
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight:    500;
	border-radius:  2px;
	cursor:         pointer;
	transition:     background 180ms var(--bl-ease);
	min-width:      200px;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--bl-text);
}
.woocommerce div.product form.cart .single_add_to_cart_button.loading {
	opacity: .7;
}

/* ── Quantity stepper + add-to-cart row ──────────────────────────────────────
   Blocksy renders a native quantity stepper as <div class="quantity"
   data-type="..."> with the −/＋ buttons built in. We DON'T restyle the stepper
   internals — we only (a) put the quantity + add-to-cart button on one centered
   row (variable-safe: the variations table above stays block-level), (b) set
   Blocksy's --quantity-height so the stepper matches the 48px button, and
   (c) tint the stepper border/accent to the theme palette. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         12px;
}
.woocommerce div.product form.cart .quantity {
	margin: 0;
	--quantity-height: 48px;
	--quantity-initial-color: var(--bl-line);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
	height: 48px;
	margin: 0;
}

/* Meta (SKU, categories, tags) */
.woocommerce div.product .product_meta {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	color:          var(--bl-text-faint);
	letter-spacing: .06em;
	margin-top:     24px;
	border-top:     1px solid var(--bl-line);
	padding-top:    18px;
}
.woocommerce div.product .product_meta a {
	color: var(--bl-text-mid);
}
.woocommerce div.product .product_meta a:hover {
	color: var(--bl-accent);
}


/* ── 11. PRODUCT TABS ─────────────────────────────────────────────────────── */

.woocommerce div.product .woocommerce-tabs {
	margin-top: 48px;
	border-top: 1px solid var(--bl-line);
}

/* Tab navigation */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display:      flex;
	gap:          0;
	list-style:   none;
	margin:       0;
	padding:      0;
	border-bottom: 1px solid var(--bl-line);
	background:   none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border:     none;
	border-radius: 0;
	margin:     0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight:    400;
	color:          var(--bl-text-faint);
	padding:        16px 24px;
	display:        block;
	border-bottom:  2px solid transparent;
	transition:     color 180ms var(--bl-ease),
	                border-color 180ms var(--bl-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color:        var(--bl-accent);
	border-color: var(--bl-accent);
}

/* Tab content panels */
.woocommerce div.product .woocommerce-tabs .panel {
	padding:    32px 0;
	font-family: var(--bl-font-sans);
	font-size:  14px;
	color:      var(--bl-text-mid);
	line-height: 1.8;
}
.woocommerce div.product .woocommerce-tabs .panel > h2 {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      26px;
	color:          var(--bl-text);
	letter-spacing: .03em;
	margin-bottom:  20px;
}
.woocommerce div.product .woocommerce-tabs .panel > table {
	width:          100%;
	border-collapse: collapse;
	font-size:      13px;
}
.woocommerce div.product .woocommerce-tabs .panel > table th,
.woocommerce div.product .woocommerce-tabs .panel > table td {
	padding:       10px 14px;
	border-bottom: 1px solid var(--bl-line);
	text-align:    start;
}
.woocommerce div.product .woocommerce-tabs .panel > table th {
	color:      var(--bl-text-faint);
	font-weight: 400;
	width:       35%;
}

/* Review form inside tabs */
#review_form #respond {
	background: var(--bl-bg-alt);
	padding:    28px;
	border-radius: 2px;
}
#review_form .comment-form-rating label {
	font-family:    var(--bl-font-sans);
	font-size:      12px;
	letter-spacing: .08em;
	color:          var(--bl-text-mid);
}


/* ── 12. RELATED / UPSELLS ────────────────────────────────────────────────── */

.woocommerce div.product .related,
.woocommerce div.product .upsells {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--bl-line);
}

.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      clamp(24px, 2.5vw, 34px);
	color:          var(--bl-text);
	letter-spacing: .04em;
	margin-bottom:  32px;
}

.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}


/* ── 13. CART ─────────────────────────────────────────────────────────────── */

.woocommerce-cart .woocommerce {
	max-width:    var(--bl-max-width);
	margin:       0 auto;
	padding:      0 var(--bl-padding-x) 64px;
}

/* Cart table */
.woocommerce-cart table.shop_table {
	border-collapse: collapse;
	width:           100%;
	border:          none;
	font-family:     var(--bl-font-sans);
	font-size:       14px;
}
.woocommerce-cart table.shop_table thead th {
	font-size:      10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color:          var(--bl-text-faint);
	font-weight:    400;
	padding:        10px 14px;
	border-bottom:  1px solid var(--bl-line);
	background:     none;
}
.woocommerce-cart table.shop_table tbody tr {
	border-bottom: 1px solid var(--bl-line);
}
.woocommerce-cart table.shop_table tbody td {
	padding:    18px 14px;
	background: none;
	border:     none;
	vertical-align: middle;
}

/* Product image cell */
.woocommerce-cart table.shop_table td.product-thumbnail img {
	width:        80px;
	height:       80px;
	object-fit:   cover;
	border-radius: 1px;
}

/* Product name link */
.woocommerce-cart table.shop_table td.product-name a {
	font-family:    var(--bl-font-serif);
	font-size:      16px;
	font-weight:    300;
	color:          var(--bl-text);
	letter-spacing: .02em;
	text-decoration: none;
}
.woocommerce-cart table.shop_table td.product-name a:hover { color: var(--bl-accent); }

/* Price & subtotal in cart */
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-subtotal {
	font-size:  15px;
	color:      var(--bl-text-mid);
	text-align: end;
}

/* Remove × button */
.woocommerce-cart table.shop_table td.product-remove a.remove {
	font-size:   18px;
	color:       var(--bl-text-faint) !important;
	font-weight: 300;
	line-height: 1;
	transition:  color 180ms var(--bl-ease);
}
.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
	color:      #C0392B !important;
	background: none;
}

/* Cart quantity input */
.woocommerce-cart table.shop_table td.product-quantity .qty {
	width:        62px;
	border:       1px solid var(--bl-line);
	border-radius: 2px;
	padding:      7px 8px;
	font-family:  var(--bl-font-sans);
	font-size:    13px;
	text-align:   center;
}

/* Cart actions row */
.woocommerce-cart table.shop_table tr.cart_item td.actions {
	text-align: end;
	padding-top: 24px;
}
.woocommerce-cart input[name="update_cart"] {
	background:     transparent;
	border:         1px solid var(--bl-line);
	color:          var(--bl-text-mid);
	font-size:      10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding:        9px 20px;
	border-radius:  2px;
	transition:     border-color 180ms var(--bl-ease);
}
.woocommerce-cart input[name="update_cart"]:hover {
	border-color: var(--bl-text-mid);
}

/* Cart collaterals layout */
.woocommerce-cart .cart-collaterals {
	margin-top: 32px;
}
.woocommerce-cart .cart_totals {
	float:     inline-end;
	width:     min(100%, 380px);
	background: var(--bl-bg-alt);
	padding:   28px;
	border-radius: 2px;
}
.woocommerce-cart .cart_totals h2 {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      22px;
	color:          var(--bl-text);
	letter-spacing: .04em;
	margin-bottom:  20px;
}
.woocommerce-cart .cart_totals table {
	width:           100%;
	border-collapse: collapse;
	font-family:     var(--bl-font-sans);
	font-size:       14px;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	padding:       10px 0;
	border-bottom: 1px solid var(--bl-line);
}
.woocommerce-cart .cart_totals table th {
	color:      var(--bl-text-faint);
	font-weight: 400;
	font-size:  12px;
	letter-spacing: .06em;
}
.woocommerce-cart .cart_totals table tr.order-total th,
.woocommerce-cart .cart_totals table tr.order-total td {
	font-weight:   500;
	border-bottom: none;
	font-size:     16px;
	color:         var(--bl-text);
}
.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
	margin-top: 20px;
}
.woocommerce-cart .cart_totals .checkout-button {
	display:        block;
	width:          100%;
	text-align:     center;
	background:     var(--bl-bold);
	color:          #FDFAF2;
	padding:        14px;
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight:    500;
	border-radius:  2px;
	transition:     background 180ms var(--bl-ease);
}
.woocommerce-cart .cart_totals .checkout-button:hover {
	background: var(--bl-text);
	color:      #FDFAF2;
}


/* ── 14. CHECKOUT ─────────────────────────────────────────────────────────── */

.woocommerce-checkout .woocommerce {
	max-width: var(--bl-max-width);
	margin:    0 auto;
	padding:   0 var(--bl-padding-x) 64px;
}

/* 2-col layout */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	/* Handled via WC default float or flex — rely on WC's own layout,
	   override only typography */
}

/* Section headings */
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout h3.woocommerce-column__title {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      22px;
	color:          var(--bl-text);
	letter-spacing: .04em;
	margin-bottom:  20px;
	padding-bottom: 12px;
	border-bottom:  1px solid var(--bl-line);
}

/* Form fields */
.woocommerce-checkout .form-row label {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color:          var(--bl-text-mid);
	font-weight:    400;
	margin-bottom:  6px;
	display:        block;
}
.woocommerce-checkout .form-row input[type="text"],
.woocommerce-checkout .form-row input[type="email"],
.woocommerce-checkout .form-row input[type="tel"],
.woocommerce-checkout .form-row input[type="password"],
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	font-family:    var(--bl-font-sans);
	font-size:      13px;
	color:          var(--bl-text);
	border:         1px solid var(--bl-line);
	background:     var(--bl-surface);
	border-radius:  2px;
	padding:        11px 14px;
	width:          100%;
	transition:     border-color 180ms var(--bl-ease);
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
	outline:        2px solid var(--bl-accent);
	outline-offset: 2px;
	border-color:   var(--bl-accent);
}

/* Order review table */
.woocommerce-checkout #order_review table.shop_table {
	font-family:     var(--bl-font-sans);
	font-size:       13px;
	border-collapse: collapse;
	width:           100%;
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding:       10px 14px;
	border-bottom: 1px solid var(--bl-line);
}
.woocommerce-checkout #order_review table.shop_table tr.order-total td {
	font-weight: 500;
	font-size:   15px;
	color:       var(--bl-text);
}

/* Place order button */
.woocommerce-checkout #place_order {
	display:        block;
	width:          100%;
	background:     var(--bl-bold);
	color:          #FDFAF2;
	border:         none;
	padding:        16px;
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	letter-spacing: .20em;
	text-transform: uppercase;
	font-weight:    500;
	border-radius:  2px;
	cursor:         pointer;
	margin-top:     24px;
	transition:     background 180ms var(--bl-ease);
}
.woocommerce-checkout #place_order:hover { background: var(--bl-text); }


/* ── 15. MY ACCOUNT ───────────────────────────────────────────────────────── */

.woocommerce-account .woocommerce {
	max-width:    var(--bl-max-width);
	margin:       0 auto;
	padding:      0 var(--bl-padding-x) 64px;
	display:      grid;
	grid-template-columns: 220px 1fr;
	gap:          0 48px;
	align-items:  start;
}

/* Account navigation */
.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top:      calc(var(--bl-header-h) + 24px);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin:     0;
	padding:    0;
	border:     1px solid var(--bl-line);
	border-radius: 2px;
	overflow:   hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display:        block;
	font-family:    var(--bl-font-sans);
	font-size:      12px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color:          var(--bl-text-mid);
	text-decoration: none;
	padding:        13px 18px;
	border-bottom:  1px solid var(--bl-line);
	transition:     background 180ms var(--bl-ease),
	                color      180ms var(--bl-ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a {
	border-bottom: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--bl-bg-alt);
	color:      var(--bl-text);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
	background:  var(--bl-accent);
	color:       #FDFAF2;
	font-weight: 500;
}

/* Account content area */
.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
}
.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-family:    var(--bl-font-serif);
	font-style:     italic;
	font-weight:    300;
	font-size:      26px;
	color:          var(--bl-text);
	letter-spacing: .04em;
	margin-bottom:  24px;
	border-bottom:  1px solid var(--bl-line);
	padding-bottom: 16px;
}
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content table {
	font-family: var(--bl-font-sans);
	font-size:   14px;
	color:       var(--bl-text-mid);
	line-height: 1.7;
}

/* Login / Register forms (account page) */
.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="password"] {
	font-family:   var(--bl-font-sans);
	font-size:     13px;
	color:         var(--bl-text);
	border:        1px solid var(--bl-line);
	background:    var(--bl-surface);
	border-radius: 2px;
	padding:       11px 14px;
	width:         100%;
	transition:    border-color 180ms var(--bl-ease);
}
.woocommerce-account .woocommerce-form input:focus {
	outline:       2px solid var(--bl-accent);
	outline-offset: 2px;
}
.woocommerce-account .woocommerce-form label {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color:          var(--bl-text-mid);
	margin-bottom:  6px;
	display:        block;
}
.woocommerce-account .woocommerce-form .woocommerce-Button {
	background:     var(--bl-bold);
	color:          #FDFAF2;
	border:         none;
	padding:        12px 32px;
	font-family:    var(--bl-font-sans);
	font-size:      10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight:    500;
	border-radius:  2px;
	cursor:         pointer;
	transition:     background 180ms var(--bl-ease);
}
.woocommerce-account .woocommerce-form .woocommerce-Button:hover {
	background: var(--bl-text);
}


/* ── 16. RESPONSIVE ───────────────────────────────────────────────────────── */

/* Tablet: switch to mobile layout */
@media (max-width: 900px) {
	/* Cart: full-width totals */
	.woocommerce-cart .cart_totals {
		float: none;
		width: 100%;
	}

	/* Account: stack nav + content */
	.woocommerce-account .woocommerce {
		grid-template-columns: 1fr;
	}
	.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
	}
}

@media (max-width: 640px) {
	/* Hide thumbnail column in cart table */
	.woocommerce-cart table.shop_table td.product-thumbnail,
	.woocommerce-cart table.shop_table th.product-thumbnail {
		display: none;
	}

	/* 2-col product grid on small mobile */
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 400px) {
	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}
}


/* ── 17. PRODUCT DESCRIPTION BLOCKS (.bl-pdp) ─────────────────────────────────
   Styling for the short/long description HTML blocks pasted into the product
   description fields. The pasted markup carries CSS classes only — all styling
   lives here so it survives WordPress kses (which strips inline <style>/<script>
   from post content). Everything is scoped under .bl-pdp and uses the theme's
   own design tokens. Logical properties keep it correct in RTL. Tab interaction
   is wired in assets/js/theme.js.
   ============================================================================ */

.bl-pdp {
	color:       var(--bl-text);
	font-family: var(--bl-font-sans);
	line-height: 1.6;
}
.bl-pdp * { box-sizing: border-box; }

/* — Shared badges — */
.bl-pdp__badges {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.bl-pdp__badge {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
	color: var(--bl-text-mid); background: var(--bl-surface);
	border: 1px solid var(--bl-line); border-radius: 2px; padding: 7px 12px;
}
.bl-pdp__badge::before {
	content: ""; width: 5px; height: 5px; border-radius: 50%;
	background: var(--bl-bold); flex: none;
}

/* — Short description — */
.bl-pdp--short { padding: 2px 0 6px; }
.bl-pdp__eyebrow {
	display: block; font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--bl-text-faint); margin: 0 0 12px;
}
.bl-pdp__stitle {
	font-family: var(--bl-font-serif); font-style: italic; font-weight: 400;
	font-size: 23px; line-height: 1.25; letter-spacing: .02em;
	color: var(--bl-text); margin: 0 0 14px;
}
.bl-pdp__stext {
	font-size: 14px; line-height: 1.75; color: var(--bl-text-mid); margin: 0 0 18px;
}

/* — Long description shell — */
.bl-pdp--long { background: var(--bl-bg); overflow: hidden; }

/* Hero */
.bl-pdp__hero { background: var(--bl-bg-dark); text-align: center; padding: 64px 24px 58px; }
.bl-pdp__hero-eyebrow {
	display: block; font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
	color: var(--bl-footer-muted); margin: 0 0 16px;
}
.bl-pdp__hero-title {
	font-family: var(--bl-font-serif); font-style: italic; font-weight: 300;
	font-size: clamp(34px, 5.5vw, 64px); line-height: 1.02; letter-spacing: .03em;
	color: var(--bl-footer-text) !important; margin: 0 0 18px;
}
.bl-pdp__hero-title em { font-style: italic; color: var(--bl-bold-soft) !important; }
.bl-pdp__hero-sub {
	font-size: 15px; line-height: 1.7; color: var(--bl-footer-muted);
	max-width: 600px; margin: 0 auto;
}

/* Intro */
.bl-pdp__intro { padding: 56px 24px 4px; text-align: center; }
.bl-pdp__lead {
	font-family: var(--bl-font-serif); font-style: italic; font-weight: 400;
	font-size: clamp(20px, 2.6vw, 28px); line-height: 1.5; color: var(--bl-text);
	max-width: 760px; margin: 0 auto 22px;
}
.bl-pdp__lead strong { font-weight: 600; font-style: normal; color: var(--bl-bold); }
.bl-pdp__text {
	font-size: 15px; line-height: 1.8; color: var(--bl-text-mid);
	max-width: 680px; margin: 0 auto 26px;
}
.bl-pdp__intro .bl-pdp__badges { justify-content: center; max-width: 720px; margin: 0 auto; }

/* Tabs */
.bl-pdp__tabs {
	display: flex; flex-wrap: wrap; justify-content: center;
	border-bottom: 1px solid var(--bl-line);
	max-width: 880px; margin: 48px auto 0; padding: 0 24px;
}
.bl-pdp__tab {
	font-family: var(--bl-font-sans); font-size: 11px; letter-spacing: .14em;
	text-transform: uppercase; font-weight: 500; color: var(--bl-text-faint);
	padding: 16px 18px; border-bottom: 2px solid transparent; margin-bottom: -1px;
	cursor: pointer; user-select: none;
	transition: color .18s var(--bl-ease), border-color .18s var(--bl-ease);
}
.bl-pdp__tab:hover { color: var(--bl-text); }
.bl-pdp__tab.is-active { color: var(--bl-bold); border-bottom-color: var(--bl-bold); }
.bl-pdp__tab:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }

/* Panels */
.bl-pdp__panel { display: none; padding: 48px 24px 8px; max-width: 880px; margin: 0 auto; }
.bl-pdp__panel.is-active { display: block; }

/* Section heads */
.bl-pdp__sub {
	font-size: 9px; letter-spacing: .28em; text-transform: uppercase;
	color: var(--bl-text-faint); margin: 0 0 12px;
}
.bl-pdp__title {
	font-family: var(--bl-font-serif); font-style: italic; font-weight: 300;
	font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; letter-spacing: .03em;
	color: var(--bl-text); margin: 0 0 18px;
}
.bl-pdp__stintro {
	font-size: 15px; line-height: 1.8; color: var(--bl-text-mid);
	max-width: 680px; margin: 0 0 36px;
}

/* Benefits grid */
.bl-pdp__benefits {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
	background: var(--bl-line); border: 1px solid var(--bl-line);
	border-radius: 2px; overflow: hidden;
}
.bl-pdp__benefit { background: var(--bl-surface); padding: 30px 28px; }
.bl-pdp__benefit-num {
	display: block; font-family: var(--bl-font-serif); font-style: italic;
	font-size: 38px; line-height: 1; color: var(--bl-bold-soft); margin: 0 0 14px;
}
.bl-pdp__benefit-title {
	font-family: var(--bl-font-serif); font-style: italic; font-weight: 400;
	font-size: 21px; letter-spacing: .02em; color: var(--bl-text); margin: 0 0 10px;
}
.bl-pdp__benefit-desc { font-size: 13.5px; line-height: 1.65; color: var(--bl-text-faint); margin: 0; }

/* Specs table */
.bl-pdp__specs { width: 100%; border-collapse: collapse; }
.bl-pdp__specs tr { border-bottom: 1px solid var(--bl-line); }
.bl-pdp__specs tr:last-child { border-bottom: none; }
.bl-pdp__specs th {
	text-align: start; font-weight: 500; font-size: 10px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--bl-text-faint);
	padding-block: 14px; padding-inline-end: 16px; width: 38%; vertical-align: top;
}
.bl-pdp__specs td { font-size: 14px; color: var(--bl-text-mid); padding-block: 14px; line-height: 1.6; }
.bl-pdp__specs td.blp-ar { font-family: var(--bl-font-serif); font-size: 18px; color: var(--bl-text); }

/* Usage steps */
.bl-pdp__steps { list-style: none; margin: 0; padding: 0; }
.bl-pdp__step { display: flex; gap: 22px; padding: 24px 0; border-top: 1px solid var(--bl-line); }
.bl-pdp__step:first-child { border-top: none; padding-top: 0; }
.bl-pdp__step-num {
	font-family: var(--bl-font-serif); font-style: italic; font-size: 40px; line-height: 1;
	color: var(--bl-bold-soft); flex: none; width: 54px;
}
.bl-pdp__step-title {
	font-family: var(--bl-font-serif); font-style: italic; font-weight: 400;
	font-size: 19px; color: var(--bl-text); margin: 0 0 8px;
}
.bl-pdp__step-desc { font-size: 14px; line-height: 1.7; color: var(--bl-text-mid); margin: 0; }

/* Precautions */
.bl-pdp__precautions {
	list-style: none; margin: 0; padding: 24px 28px; background: var(--bl-bg-alt);
	border-inline-start: 3px solid var(--bl-bold); border-radius: 2px;
}
.bl-pdp__precautions li {
	position: relative; font-size: 14px; line-height: 1.7; color: var(--bl-text-mid);
	padding-inline-start: 22px; margin: 0 0 12px;
}
.bl-pdp__precautions li:last-child { margin-bottom: 0; }
.bl-pdp__precautions li::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 10px;
	width: 9px; height: 1px; background: var(--bl-bold);
}

/* FAQ */
.bl-pdp__faq-item { border-top: 1px solid var(--bl-line); }
.bl-pdp__faq-item:last-child { border-bottom: 1px solid var(--bl-line); }
.bl-pdp__faq-q {
	list-style: none; cursor: pointer; font-size: 14.5px; font-weight: 500;
	color: var(--bl-text); padding-block: 18px; padding-inline-end: 36px;
	position: relative; outline: none;
}
.bl-pdp__faq-q::-webkit-details-marker { display: none; }
.bl-pdp__faq-q::after {
	content: "+"; position: absolute; inset-inline-end: 4px; top: 15px;
	font-size: 18px; color: var(--bl-bold);
}
.bl-pdp__faq-item[open] .bl-pdp__faq-q::after { content: "\2212"; }
.bl-pdp__faq-a { font-size: 14px; line-height: 1.8; color: var(--bl-text-mid); margin: 0; padding: 0 0 20px; }

/* CTA */
.bl-pdp__cta { background: var(--bl-bg-dark); text-align: center; padding: 64px 24px; margin-top: 56px; }
.bl-pdp__cta-eyebrow {
	display: block; font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
	color: var(--bl-footer-muted); margin: 0 0 16px;
}
.bl-pdp__cta-title {
	font-family: var(--bl-font-serif); font-style: italic; font-weight: 300;
	font-size: clamp(28px, 4vw, 50px); line-height: 1.05; letter-spacing: .03em;
	color: var(--bl-footer-text) !important; margin: 0 0 16px;
}
.bl-pdp__cta-title em { font-style: italic; color: var(--bl-bold-soft) !important; }
.bl-pdp__cta-sub { font-size: 15px; line-height: 1.7; color: var(--bl-footer-muted); max-width: 560px; margin: 0 auto; }

/* Responsive */
@media (max-width: 680px) {
	.bl-pdp__benefits { grid-template-columns: 1fr; }
	.bl-pdp__step { gap: 14px; }
	.bl-pdp__step-num { width: 40px; font-size: 32px; }
	.bl-pdp__hero { padding: 48px 20px; }
	.bl-pdp__tab { padding: 13px 12px; font-size: 10px; }
}


/* ── 17b. ARABIC / RTL ADJUSTMENTS (.bl-pdp) ─────────────────────────────────
   Amiri (the Arabic serif this stack falls back to) has no true italic —
   synthetic oblique looks wrong, so the serif headings render upright here.
   Layout flow is already RTL-correct via logical properties in section 17.
   ============================================================================ */
.bl-pdp__hero-title,
.bl-pdp__hero-title em,
.bl-pdp__lead,
.bl-pdp__stitle,
.bl-pdp__title,
.bl-pdp__benefit-num,
.bl-pdp__benefit-title,
.bl-pdp__step-num,
.bl-pdp__step-title,
.bl-pdp__cta-title,
.bl-pdp__cta-title em {
	font-style: normal;
}

/* A French / Latin (LTR) value inside the RTL specs table (e.g. botanical or
   French product name) stays left-to-right and isolated from the Arabic flow. */
.bl-pdp__specs td.blp-fr {
	font-family: var(--bl-font-sans);
	direction: ltr;
	unicode-bidi: isolate;
	text-align: start;
}


/* ============================================================================
   MODERN POLISH LAYER - WooCommerce (visual only, no plugin logic)
   Same palette; softer geometry, gentler elevation. Additive overrides.
   Desktop + mobile.
   ============================================================================ */

/* Product cards: soft corners + calm hover elevation */
.woocommerce ul.products li.product {
	border-radius: var(--bl-radius, 10px);
	overflow:      hidden;
	transition:    box-shadow 220ms var(--bl-ease),
	               transform 220ms var(--bl-ease);
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--bl-shadow-soft, 0 6px 24px rgba(28, 23, 16, 0.08));
	transform:  translateY(-2px);
}
.woocommerce ul.products li.product a img {
	border-radius: var(--bl-radius, 10px) var(--bl-radius, 10px) 0 0;
}

/* Buttons: consistent soft radius + gentle lift */
.woocommerce #respond input#submit,
.woocommerce .checkout-button,
.woocommerce button.button,
.woocommerce ul.products li.product .button {
	border-radius: var(--bl-radius-sm, 6px);
	transition:    background 200ms var(--bl-ease),
	               box-shadow 200ms var(--bl-ease),
	               transform 200ms var(--bl-ease);
}
.woocommerce .checkout-button:hover,
.woocommerce button.button:hover,
.woocommerce ul.products li.product .button:hover {
	transform: translateY(-1px);
}

/* Sale badge: soft pill */
.woocommerce span.onsale {
	border-radius: 999px;
}

/* Notices: soft corners */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--bl-radius-sm, 6px);
}

/* Sorting select + pagination: soft corners */
.woocommerce-ordering select {
	border-radius: var(--bl-radius-sm, 6px);
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span.current {
	border-radius: var(--bl-radius-sm, 6px);
}

/* Product gallery: rounded frame */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image img {
	border-radius: var(--bl-radius, 10px);
}
.woocommerce div.product .flex-control-thumbs img {
	border-radius: var(--bl-radius-sm, 6px);
}

/* Form fields on cart/checkout/account: soft corners + focus glow */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border-radius: var(--bl-radius-sm, 6px);
	transition:    border-color 200ms var(--bl-ease),
	               box-shadow 200ms var(--bl-ease);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--bl-accent);
	box-shadow:   0 0 0 3px rgba(92, 110, 80, 0.16);
	outline:      none;
}


/* ============================================================================
   23. DESIGN DIRECTION PASS - product page, cart page, checkout (visual only)
   + brass star ratings. Same tokens, no WooCommerce logic touched.
   ============================================================================ */

/* -- Star ratings: brass fill on linen empty track ------------------------- */
.woocommerce .star-rating::before {
	color: var(--bl-line, #C4C0A8);
}
.woocommerce .star-rating span::before {
	color: var(--bl-brass, #B08D57);
}
.woocommerce p.stars a {
	color: var(--bl-brass, #B08D57);
}

/* -- Product page: editorial title + serif price --------------------------- */
.woocommerce div.product .product_title {
	font-family:    var(--bl-font-serif);
	font-weight:    400;
	font-size:      clamp(26px, 3vw, 38px);
	color:          var(--bl-text);
}
.woocommerce div.product p.price {
	font-family: var(--bl-font-serif);
	font-size:   28px;
	color:       var(--bl-text);
}
.woocommerce div.product p.price ins {
	text-decoration: none;
	color:           var(--bl-bold, #7A4830);
}
.woocommerce div.product p.price del {
	font-size: 20px;
	color:     var(--bl-text-faint);
}

/* Trust trio under the add-to-cart form (markup from inc/woocommerce.php) */
.bl-pdp-trust {
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px 20px;
	margin:     16px 0 0;
	padding:    14px 0 0;
	border-top: 1px solid var(--bl-line);
}
.bl-pdp-trust__item {
	display:     inline-flex;
	align-items: center;
	gap:         7px;
	font-family: var(--bl-font-sans);
	font-size:   12px;
	color:       var(--bl-text-mid);
}
.bl-pdp-trust__item svg {
	color:       var(--bl-accent, #5C6E50);
	flex-shrink: 0;
}

/* Producer line in product meta (markup from inc/woocommerce.php) */
.bl-pdp-producer {
	display:     inline-flex;
	align-items: center;
	gap:         7px;
	margin-top:  10px;
	font-family: var(--bl-font-sans);
	font-size:   12px;
	color:       var(--bl-text-faint);
}
.bl-pdp-producer svg {
	color:       var(--bl-brass, #B08D57);
	flex-shrink: 0;
}

/* Sticky add-to-cart on mobile (simple products only - variations keep flow) */
@media (max-width: 768px) {
	.woocommerce div.product.product-type-simple form.cart {
		position:      sticky;
		bottom:        10px;
		z-index:       60;
		display:       flex;
		align-items:   center;
		gap:           10px;
		background:    var(--bl-surface);
		border:        1px solid var(--bl-line);
		border-radius: var(--bl-radius, 10px);
		padding:       10px 12px;
		box-shadow:    var(--bl-shadow-soft, 0 6px 24px rgba(28, 23, 16, 0.12));
	}
	.woocommerce div.product.product-type-simple form.cart .button {
		flex: 1;
	}
}

/* -- Cart page: boutique table + totals panel ------------------------------ */
.woocommerce table.shop_table {
	border-collapse: separate;
	border-spacing:  0;
	border:          1px solid var(--bl-line);
	border-radius:   var(--bl-radius, 10px);
	overflow:        hidden;
	background:      var(--bl-surface);
}
.woocommerce table.shop_table th {
	font-family:    var(--bl-font-sans);
	font-size:      11px;
	font-weight:    500;
	color:          var(--bl-text-mid);
	background:     var(--bl-bg-alt);
}
.woocommerce .quantity .qty {
	border:        1px solid var(--bl-line);
	border-radius: var(--bl-radius-sm, 6px);
	padding:       8px;
	background:    var(--bl-surface);
	color:         var(--bl-text);
}
.woocommerce-cart .cart-collaterals .cart_totals {
	float:               none;
	width:               100%;
	max-width:           440px;
	margin-inline-start: auto;
	background:          var(--bl-surface);
	border:              1px solid var(--bl-line);
	border-radius:       var(--bl-radius, 10px);
	padding:             22px;
}
.woocommerce-cart .cart-collaterals .cart_totals h2 {
	font-family: var(--bl-font-serif);
	font-weight: 400;
	font-size:   22px;
}

/* -- Checkout: one calm column, boutique panels ---------------------------- */
.woocommerce-checkout form.checkout .col2-set {
	width: 100%;
	float: none;
}
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
	width: 100%;
	float: none;
}
.woocommerce-checkout form.checkout {
	max-width:     760px;
	margin-inline: auto;
}
.woocommerce-checkout form.checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--bl-font-serif);
	font-weight: 400;
	font-size:   24px;
	color:       var(--bl-text);
	margin:      26px 0 16px;
}
.woocommerce-checkout #order_review {
	background:    var(--bl-surface);
	border:        1px solid var(--bl-line);
	border-radius: var(--bl-radius, 10px);
	padding:       22px;
}
.woocommerce-checkout #payment {
	background:    var(--bl-bg-alt);
	border-radius: var(--bl-radius-sm, 6px);
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--bl-bg-section);
	color:      var(--bl-text-mid);
	font-size:  13px;
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--bl-bg-section);
}
.woocommerce #place_order {
	width:   100%;
	padding: 15px 0;
}

/* COD reassurance under the place-order button (inc/woocommerce.php) */
.bl-checkout-reassure {
	margin:      14px 0 0;
	font-family: var(--bl-font-sans);
	font-size:   12px;
	line-height: 1.7;
	text-align:  center;
	color:       var(--bl-text-mid);
}


/* ============================================================================
   24. PRODUCT PAGE REDESIGN — mobile-first, full-width, rebalanced type
   Fixes: (a) the long description sat in a narrow 680–880px centered column
   with large empty sides; (b) body copy was 13–15px (too small); (c) hero /
   section headings were oversized with bulky 56–64px padding bands.
   Strategy: mobile-first base, full-bleed long description that fills the
   page, a single generous reading measure, larger body text, tighter
   headings, and multi-column layouts on desktop. Logical properties only
   (RTL-safe). Additive — wins via source order.
   ============================================================================ */

:root {
	/* One reading measure for every long-description section, so content fills
	   the page like the rest of the site instead of a thin centered column. */
	--bl-pdp-measure: min(1180px, 100%);
}

/* ── Long description: fill the content width, centered. No 100vw breakout —
   that hack interacted with the scrollbar and made the dark hero band shift
   sideways and clip the title. Bands now span the (already wide) content area. */
.bl-pdp--long {
	font-size: 16px;
}

/* Centered inner sections at the shared measure + matching site gutters ───── */
.bl-pdp__intro {
	max-width:     var(--bl-pdp-measure);
	margin-inline: auto;
	padding:       40px var(--bl-padding-x) 4px;
}
.bl-pdp__tabs {
	max-width:      var(--bl-pdp-measure);
	margin-inline:  auto;
	margin-top:     32px;
	padding-inline: var(--bl-padding-x);
}
.bl-pdp__panel {
	max-width:     var(--bl-pdp-measure);
	margin-inline: auto;
	padding:       32px var(--bl-padding-x) 8px;
}

/* ── Body copy: larger, more readable ────────────────────────────────────── */
.bl-pdp__text,
.bl-pdp__stintro {
	max-width:   80ch;
	font-size:   16px;
	line-height: 1.75;
}
.bl-pdp__benefit-desc,
.bl-pdp__specs td,
.bl-pdp__precautions li,
.bl-pdp__stext {
	font-size:   15px;
	line-height: 1.7;
}
.bl-pdp__step-desc,
.bl-pdp__faq-q,
.bl-pdp__faq-a {
	font-size: 16px;
}
.woocommerce div.product .woocommerce-tabs .panel {
	font-size: 16px;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 15px;
}

/* ── Headings: smaller, tighter — recover the wasted vertical space ──────── */
.bl-pdp__hero {
	padding: 44px var(--bl-padding-x);
}
.bl-pdp__hero-title {
	font-size:   clamp(28px, 4.2vw, 44px);
	line-height: 1.05;
}
.bl-pdp__hero-sub {
	font-size: 16px;
	max-width: 60ch;
}
.bl-pdp__lead {
	max-width:   60ch;
	font-size:   clamp(19px, 2.2vw, 24px);
	line-height: 1.45;
}
.bl-pdp__stitle {
	font-size: clamp(21px, 3vw, 26px);
}
.bl-pdp__title {
	font-size: clamp(22px, 2.6vw, 30px);
}
.bl-pdp__cta {
	padding:    48px var(--bl-padding-x);
	margin-top: 40px;
}
.bl-pdp__cta-title {
	font-size: clamp(26px, 3.4vw, 40px);
}

/* ── Desktop: spend the horizontal space ─────────────────────────────────── */
@media (min-width: 1024px) {
	/* 3-up benefits (base is 2; ≤680px collapses to 1) */
	.bl-pdp__benefits {
		grid-template-columns: repeat(3, 1fr);
	}
	/* Usage steps side-by-side instead of a tall stacked list */
	.bl-pdp__steps {
		display:               grid;
		grid-template-columns: repeat(3, 1fr);
		gap:                   28px;
	}
	.bl-pdp__step,
	.bl-pdp__step:first-child {
		border-top: none;
		padding:    0;
	}
}
@media (min-width: 1280px) {
	.bl-pdp__benefits {
		grid-template-columns: repeat(4, 1fr);
	}
}


/* ============================================================================
   25. PRODUCT PAGE — "ATELIER" TREATMENT (concept 4)
   Layers concept-4's atelier look onto the live PDP: a bordered purchase
   card, an arched product image, a dark metrics band (markup from
   inc/woocommerce.php), benefit cards, and two-column tab panels on desktop.
   Builds on section 24 (full-width + typography). Logical properties only
   (RTL-safe).
   ============================================================================ */

/* ── Purchase card: box the buy column like concept-4's panel ────────────── */
.woocommerce div.product .entry-summary {
	background:    var(--bl-surface);
	border:        1px solid var(--bl-line);
	border-radius: var(--bl-radius, 10px);
	padding:       clamp(20px, 3.5vw, 30px);
	box-shadow:    var(--bl-shadow-soft, 0 12px 35px rgba(28, 28, 20, 0.06));
}

/* Category line → brass eyebrow (concept-4 .tag) */
.woocommerce div.product .posted_in,
.woocommerce div.product .posted_in a {
	color: var(--bl-brass, #b08d57);
}
.woocommerce div.product .posted_in {
	letter-spacing: .22em;
}

/* ── Arched product image (concept-4 .visual) ────────────────────────────── */
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image img {
	border-radius: clamp(60px, 18vw, 200px) clamp(60px, 18vw, 200px)
	               var(--bl-radius, 10px) var(--bl-radius, 10px);
}
.woocommerce div.product .woocommerce-product-gallery__image {
	overflow:   hidden;
	box-shadow: var(--bl-shadow-soft, 0 18px 40px rgba(28, 28, 20, 0.10));
}

/* ── Metrics band (dark) — markup from inc/woocommerce.php ────────────────── */
.bl-pdp-metrics {
	background: var(--bl-bg-dark, #1c1c14);
	color:      var(--bl-footer-text, #e8e4d4);
}
.bl-pdp-metrics__inner {
	max-width:             var(--bl-max-width);
	margin-inline:         auto;
	padding:               clamp(22px, 3vw, 30px) var(--bl-padding-x);
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   2px 0;
}
.bl-pdp-metric {
	padding:             14px clamp(14px, 3vw, 30px);
	border-inline-start: 1px solid rgba(232, 228, 212, .16);
}
.bl-pdp-metric:nth-child(odd) {
	border-inline-start: 0;
}
.bl-pdp-metric strong {
	display:     block;
	font-family: var(--bl-font-serif);
	font-style:  italic;
	font-weight: 400;
	font-size:   clamp(26px, 6vw, 32px);
	line-height: 1;
	color:       var(--bl-brass, #b08d57);
}
.bl-pdp-metric span {
	font-size:      10px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color:          rgba(232, 228, 212, .6);
}

/* ── Benefit cards (concept-4 .benefit) ──────────────────────────────────── */
.bl-pdp__benefits {
	background:    transparent;
	border:        0;
	border-radius: 0;
	overflow:      visible;
	gap:           12px;
}
.bl-pdp__benefit {
	border:        1px solid var(--bl-line);
	border-radius: var(--bl-radius, 10px);
}

/* ── Tablet: metrics in one row ──────────────────────────────────────────── */
@media (min-width: 700px) {
	.bl-pdp-metrics__inner {
		grid-template-columns: repeat(4, 1fr);
	}
	.bl-pdp-metric:nth-child(odd) {
		border-inline-start: 1px solid rgba(232, 228, 212, .16);
	}
	.bl-pdp-metric:first-child {
		border-inline-start: 0;
	}
}

/* ── Desktop: two-column tab panels (concept-4 .panel-grid) ──────────────── */
@media (min-width: 1024px) {
	/* Only the ACTIVE panel becomes a grid — inactive panels keep the base
	   display:none so the tab toggle keeps working (fixes "all panels shown"). */
	.bl-pdp__panel.is-active {
		display:               grid;
		grid-template-columns: .8fr 1.2fr;
		grid-template-rows:    auto auto auto 1fr;
		column-gap:            clamp(40px, 5vw, 80px);
		align-items:           start;
	}
	/* heading trio → left column */
	.bl-pdp__sub     { grid-column: 1; grid-row: 1; }
	.bl-pdp__title   { grid-column: 1; grid-row: 2; }
	.bl-pdp__stintro { grid-column: 1; grid-row: 3; }
	/* content block → right column, spanning the heading rows. The trailing
	   1fr filler row absorbs the slack so the heading items never spread. */
	.bl-pdp__benefits,
	.bl-pdp__steps,
	.bl-pdp__specs,
	.bl-pdp__precautions,
	.bl-pdp__faq {
		grid-column: 2;
		grid-row:    1 / -1;
		align-self:  start;
		margin:      0;
	}
	/* benefits sit in the ~55%-wide right column → keep them 2-up */
	.bl-pdp__benefits {
		grid-template-columns: 1fr 1fr;
	}
	/* usage steps read better stacked in the narrower column */
	.bl-pdp__steps {
		display: block;
	}
	.bl-pdp__step {
		border-top: 1px solid var(--bl-line);
		padding:    24px 0;
	}
	.bl-pdp__step:first-child {
		border-top:  none;
		padding-top: 0;
	}
}


/* ============================================================================
   26. CROSS-SELL → "ATELIER ROUTINE" (Blocksy up-sells, confirmed live)
   Turns the native WooCommerce/Blocksy up-sells block (.upsells) into the
   concept-4 routine section: brass eyebrow + serif heading (set in CSS so it
   doesn't depend on a PHP heading filter) and "الخطوة 0N" step chips on each
   card — while keeping Blocksy's real product cards (image, price, add-to-cart
   and native hover-swap). Verified against the live markup via the browser.
   ============================================================================ */

/* Blocksy hides up-sells on small/medium screens by default — show them. */
.woocommerce .upsells.ct-hidden-sm,
.woocommerce .upsells.ct-hidden-md {
	display: block !important;
}

.woocommerce .upsells.products {
	margin-top:  clamp(40px, 6vw, 72px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top:  1px solid var(--bl-line);
	text-align:  center;
}

/* Heading: hide Blocksy's default text (font-size:0) and supply the eyebrow +
   serif title via ::before / ::after so it works regardless of the markup. */
.woocommerce .upsells .ct-module-title {
	font-size:   0 !important;
	line-height: 1;
	margin:      0 0 clamp(28px, 4vw, 44px);
}
.woocommerce .upsells .ct-module-title::before {
	content:        "بناء روتينك";
	display:        block;
	font-family:    var(--bl-font-sans);
	font-weight:    500;
	font-size:      11px;
	letter-spacing: .14em;
	color:          var(--bl-brass, #b08d57);
	margin-bottom:  12px;
}
.woocommerce .upsells .ct-module-title::after {
	content:        "أكملي طقوسك";
	display:        block;
	font-family:    var(--bl-font-serif);
	font-weight:    400;
	font-size:      clamp(26px, 3.4vw, 40px);
	line-height:    1.2;
	color:          var(--bl-text);
}

/* "الخطوة 0N" step chip on each card (counter-based, RTL-safe positioning). */
.woocommerce .upsells ul.products {
	counter-reset: bl-step;
	text-align:    start;
}
.woocommerce .upsells ul.products > li.product {
	position: relative;
}
.woocommerce .upsells ul.products > li.product::before {
	counter-increment:   bl-step;
	content:             "الخطوة 0" counter(bl-step);
	position:            absolute;
	top:                 10px;
	inset-inline-start:  10px;
	z-index:             2;
	font-family:         var(--bl-font-sans);
	font-size:           10px;
	font-weight:         500;
	letter-spacing:      .04em;
	color:               var(--bl-text-mid);
	background:          var(--bl-surface);
	border:              1px solid var(--bl-line);
	border-radius:       999px;
	padding:             5px 10px;
}


/* ============================================================================
   27. INTRO: fill the section width + drop the redundant badge row
   The intro's trust badges duplicate the hero band and the summary short
   description, so hide them here. On desktop, lay the serif lead + the
   supporting paragraph side by side so the intro spans the full content width
   instead of a thin centered column. (Confirmed live via the browser.)
   ============================================================================ */
.bl-pdp__intro .bl-pdp__badges {
	display: none !important;
}
@media (min-width: 1024px) {
	.bl-pdp__intro {
		display:               grid;
		grid-template-columns: 1fr 1fr;
		gap:                   clamp(40px, 5vw, 72px);
		align-items:           center;
		text-align:            start;
	}
	.bl-pdp__intro .bl-pdp__lead,
	.bl-pdp__intro .bl-pdp__text {
		max-width: none;
		margin:    0;
	}
}