/* ============================================================
   DesignAxis — WooCommerce Store styling
   Scoped to Shop / Product / Cart / Checkout. Loads ONLY on
   WooCommerce pages (see enqueue in designaxis-portal.php).
   Mirrors the portal design tokens so the store matches the
   account area and the rest of the brand.

   These rules deliberately target WooCommerce's own classes
   (.button, .wp-block-* , .wc-block-*) and do NOT touch any
   hand-built page markup.
   ============================================================ */

:root {
  --da-cyan:     #00a8e8;
  --da-cyan-dim: rgba(0,168,232,.13);
  --da-cyan-h:   rgba(0,168,232,.35);
  --da-dark:     #080d1a;
  --da-card:     #0c1220;
  --da-white:    #eef2ff;
  --da-muted:    #8190af;
  --da-green:    #00ff88;
  --da-clip:     polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
  --da-font-display:'Rajdhani',sans-serif;
}

/* ------------------------------------------------------------
   WHATSAPP float positioning is handled by cart-count.js
   (the custom cursor previously mentioned here has been removed).
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   PRODUCT GALLERY — handled in storefront.css via Blocksy's real gallery
   markup (.flexy / .flexy-pills). The old max-width:460px cap here was
   fighting the larger layout, so it's been removed.
   ------------------------------------------------------------ */
/* NOTE: single-product layout (two-column grid + title sizing) is handled in
   storefront.css, which now also loads on product pages — single source. */

/* ------------------------------------------------------------
   BUTTONS — the main off-brand element. Convert WooCommerce's
   default blue buttons to the cyan angular DesignAxis style.
   Covers classic (.button) and block (.wc-block-*, .wp-element-button) buttons.
   ------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wp-block-button__link,
.wp-element-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--da-cyan) !important;
  background-image: none !important;
  color: #001018 !important;
  font-family: var(--da-font-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 28px !important;
  clip-path: var(--da-clip) !important;
  transition: filter .2s ease, transform .2s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--da-cyan) !important;
  color: #001018 !important;
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
}

/* Secondary / ghost-ish buttons (e.g. "View cart" link after add) */
.woocommerce a.added_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--da-font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--da-cyan) !important;
  background: transparent !important;
  border: 1px solid var(--da-cyan-h) !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  margin-left: 8px !important;
  text-decoration: none !important;
  clip-path: var(--da-clip) !important;
  transition: background .2s ease, color .2s ease !important;
}
.woocommerce a.added_to_cart:hover {
  background: var(--da-cyan) !important;
  color: #001018 !important;
}

/* ------------------------------------------------------------
   ACCENT RECOLOR — default WooCommerce/Blocksy blue -> cyan
   Radios, checkboxes, focus rings, links.
   ------------------------------------------------------------ */
.woocommerce input[type="radio"],
.woocommerce input[type="checkbox"],
.wc-block-components-checkbox input,
.wc-block-components-radio-control__input {
  accent-color: var(--da-cyan) !important;
}

/* Selected shipping/payment option border + radio dot */
.wc-block-components-radio-control__option--checked,
.woocommerce .wc-block-components-radio-control-accordion-option--checked {
  border-color: var(--da-cyan) !important;
}

/* Links inside store content (scoped to main content; never the header/footer) */
.woocommerce .site-main a:not(.button):not(.added_to_cart):not(.da-cat-tab),
.woocommerce-page .entry-content a:not(.button):not(.added_to_cart):not(.da-cat-tab),
.wc-block-components-product-name {
  color: var(--da-cyan);
}
.woocommerce-message a,
.woocommerce-info a { color: var(--da-cyan) !important; }

/* On-sale / price accents */
.woocommerce span.price,
.woocommerce .price,
.wc-block-components-product-price {
  color: var(--da-white) !important;
}
.woocommerce .price del { color: var(--da-muted) !important; opacity: .7; }
.woocommerce .price ins { color: var(--da-cyan) !important; text-decoration: none; }

/* ------------------------------------------------------------
   SHOP — sort dropdown + result count
   ------------------------------------------------------------ */
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby {
  background: var(--da-dark) !important;
  color: var(--da-white) !important;
  border: 1px solid var(--da-cyan-h) !important;
  border-radius: 0 !important;
  font-family: var(--da-font-display) !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  padding: 10px 14px !important;
}
.woocommerce .woocommerce-result-count {
  color: var(--da-muted) !important;
  font-family: var(--da-font-display) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ------------------------------------------------------------
   PRODUCT CARDS (shop grid) — subtle hover lift + cyan edge
   ------------------------------------------------------------ */
.woocommerce ul.products li.product {
  transition: transform .25s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
}
.woocommerce ul.products li.product img {
  transition: filter .25s ease;
}

/* ------------------------------------------------------------
   QUANTITY STEPPER — align with dark theme
   ------------------------------------------------------------ */
.woocommerce .quantity input.qty,
.wc-block-components-quantity-selector {
  background: var(--da-dark) !important;
  color: var(--da-white) !important;
  border: 1px solid var(--da-cyan-h) !important;
  border-radius: 0 !important;
}

/* ------------------------------------------------------------
   NOTICES — match the portal notice style
   ------------------------------------------------------------ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--da-card) !important;
  color: var(--da-white) !important;
  border: 1px solid var(--da-cyan-h) !important;
  border-top: 2px solid var(--da-cyan) !important;
  border-radius: 0 !important;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--da-cyan) !important; }

/* ------------------------------------------------------------
   CART / CHECKOUT block totals — keep totals readable
   ------------------------------------------------------------ */
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total,
.wc-block-formatted-money-amount {
  color: var(--da-white) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--da-cyan) !important;
}

/* ============================================================
   v8.24.2 — Checkout Ship/Collection toggle contrast fix
   The unselected option had a white background with white text
   (invisible). Re-theme: selected = cyan pill + dark text,
   unselected = transparent + muted text.
   ============================================================ */
.wc-block-checkout__shipping-method{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--da-cyan-h, rgba(0,168,232,.35)) !important;
  border-radius:2px !important;
  padding:18px 20px !important;
}
/* The "Delivery" heading inside that box needs breathing room below it
   before the Ship/Collection toggle. */
.wc-block-checkout__shipping-method .wc-block-components-checkout-step__heading{
  margin:0 0 14px !important;
}
.wc-block-checkout__shipping-method-option{
  background:transparent !important;
  color:var(--da-muted2, #9aa7c7) !important;
  border-radius:2px !important;
  transition:background .2s, color .2s !important;
}
.wc-block-checkout__shipping-method-option *{ color:inherit !important; }
/* selected option: cyan pill, dark readable text */
.wc-block-checkout__shipping-method-option--selected,
.wc-block-checkout__shipping-method-option[aria-checked="true"],
.wc-block-checkout__shipping-method-option.is-selected{
  background:var(--da-cyan, #00a8e8) !important;
  color:#001018 !important;
}
.wc-block-checkout__shipping-method-option--selected *,
.wc-block-checkout__shipping-method-option[aria-checked="true"] *,
.wc-block-checkout__shipping-method-option.is-selected *{ color:#001018 !important; }
/* hover on unselected */
.wc-block-checkout__shipping-method-option:not(.wc-block-checkout__shipping-method-option--selected):hover{
  background:rgba(0,168,232,.10) !important; color:var(--da-white, #eef2ff) !important;
}

/* ============================================================
   v8.24.3 — Notice banner contrast (info/success/error)
   WooCommerce block notices use a light background by default;
   on our dark theme the text was light → white-on-white. Force
   a dark, legible treatment with a coloured accent bar/icon.
   ============================================================ */
.wc-block-components-notice-banner,
.woocommerce-info, .woocommerce-message, .woocommerce-error,
.wc-block-store-notice{
  background:rgba(0,168,232,.08) !important;
  color:var(--da-white, #eef2ff) !important;
  border:1px solid rgba(0,168,232,.30) !important;
  border-radius:3px !important;
}
.wc-block-components-notice-banner *,
.woocommerce-info *, .woocommerce-message *, .wc-block-store-notice *{
  color:var(--da-white, #eef2ff) !important;
}
.wc-block-components-notice-banner a,
.woocommerce-info a, .woocommerce-message a{ color:var(--da-cyan, #00a8e8) !important; }
/* success = green tint, error = red tint */
.wc-block-components-notice-banner.is-success,
.woocommerce-message{
  background:rgba(46,204,113,.10) !important; border-color:rgba(46,204,113,.35) !important;
}
.wc-block-components-notice-banner.is-error,
.woocommerce-error{
  background:rgba(231,76,60,.10) !important; border-color:rgba(231,76,60,.40) !important;
}
/* keep the notice icon visible (don't recolor SVG fills to white) */
.wc-block-components-notice-banner svg{ color:inherit !important; }

/* ============================================================
   v8.24.4 — "View cart" link (appears after add-to-cart)
   Was light-grey bg with faint cyan text. Make it a clear
   secondary button: dark with cyan border + cyan text.
   ============================================================ */
.woocommerce a.added_to_cart,
.woocommerce a.added_to_cart.wc-forward{
  display:inline-block !important;
  background:transparent !important;
  color:var(--da-cyan, #00a8e8) !important;
  border:1px solid var(--da-cyan, #00a8e8) !important;
  border-radius:2px !important;
  padding:10px 18px !important;
  margin-top:10px !important;
  font-family:var(--da-font-display, 'Rajdhani', sans-serif) !important;
  font-weight:600 !important; letter-spacing:.06em !important; text-transform:uppercase !important;
  text-align:center !important; text-decoration:none !important;
  transition:background .2s, color .2s !important;
}
.woocommerce a.added_to_cart:hover,
.woocommerce a.added_to_cart.wc-forward:hover{
  background:var(--da-cyan, #00a8e8) !important;
  color:#001018 !important;
}

/* ============================================================
   v8.27.0 — Cart & Checkout block polish + Order Confirmation
   Cart/Checkout were running on default WooCommerce Cart/Checkout
   block markup with only color overrides — no card structure, so
   they looked unfinished next to the shop/product pages. This adds
   real card surfaces to both, and a styled woocommerce_thankyou
   screen (none existed before).
   ============================================================ */

/* ---- Cart & Checkout: page heading ---- */
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title{
  font-family:var(--da-font-display) !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
}

/* ---- Cart items table -> card rows ---- */
.wc-block-cart-items{
  width:100% !important;
  border-collapse:collapse !important;
}
.wc-block-cart-items thead{ display:none !important; } /* header row reads as default WP table; our column meaning is obvious from layout */
.wc-block-cart-items__row{
  border-bottom:1px solid var(--da-cyan-h, rgba(0,168,232,.18)) !important;
}
.wc-block-cart-items__row td{
  padding:18px 10px !important;
  vertical-align:middle !important;
}
.wc-block-cart-item__image{ width:64px !important; }
.wc-block-cart-item__image img{
  width:64px !important; height:64px !important;
  object-fit:contain !important;
  background:#f4f6f9 !important;
  padding:6px !important;
  border-radius:2px !important;
}
.wc-block-cart-item__product .wc-block-components-product-name{
  color:var(--da-white) !important;
  font-weight:600 !important;
  font-size:13.5px !important;
  text-decoration:none !important;
}
.wc-block-cart-item__remove-link{
  color:var(--da-muted) !important;
  font-family:var(--da-font-display) !important;
  font-size:11.5px !important;
  letter-spacing:.05em !important;
  text-transform:uppercase !important;
  text-decoration:underline !important;
}
.wc-block-cart-item__remove-link:hover{ color:var(--da-red, #ff6b6b) !important; }
.wc-block-cart-item__total .price,
.wc-block-cart-item__prices .price{
  font-family:var(--da-font-display) !important;
  font-weight:700 !important;
  color:var(--da-white) !important;
}

/* ---- Cart & Checkout sidebar -> card surface ----
   Shared block markup, so one rule styles both the Cart Totals
   panel and the Checkout Order Summary panel. */
.wc-block-components-sidebar{
  background:var(--da-card, #0c1220) !important;
  border:1px solid var(--da-cyan-h, rgba(0,168,232,.3)) !important;
  border-radius:2px !important;
  padding:22px !important;
  position:sticky !important;
  top:96px !important;
}
.wc-block-cart__totals-title,
.wc-block-components-totals-wrapper [role="heading"]{
  font-family:var(--da-font-display) !important;
  font-size:13px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  color:var(--da-muted2, #9aa7c7) !important;
}
.wc-block-components-totals-item__label{
  color:var(--da-muted2, #9aa7c7) !important;
  font-size:13.5px !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--da-font-display) !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:var(--da-cyan, #00a8e8) !important;
}
.wc-block-cart__submit-container,
.wc-block-checkout__actions_row{
  margin-top:16px !important;
}

/* small reassurance note under the summary CTA — injected by store.js */
.da-summary-note{
  font-size:11.5px;
  line-height:1.5;
  color:var(--da-muted, #6b7a99);
  border-left:2px solid var(--da-cyan, #00a8e8);
  padding-left:10px;
  margin-top:14px;
}

@media(max-width:900px){
  .wc-block-components-sidebar{ position:static !important; top:auto !important; }
}

/* ============================================================
   Order Confirmation (woocommerce_thankyou) — rendered by
   DA_Storefront::order_confirmation(). Reuses the same dark-card
   system as the rest of the store; no new tokens.
   ============================================================ */
.da-confirm{ max-width:560px; margin:40px auto 80px; padding:0 20px; text-align:center; }
/* Our card fully replaces WooCommerce's default plain "Thank you" text +
   order-overview list (order number/date/total/payment) — hide the
   originals so the screen isn't showing the same info twice. */
.woocommerce-order-received .woocommerce-thankyou-order-received,
.woocommerce-order-received ul.woocommerce-order-overview{
  display:none !important;
}
.da-confirm-check{
  width:78px; height:78px; border-radius:50%;
  background:rgba(0,255,136,.12); border:1.5px solid var(--da-green, #00ff88);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px;
}
.da-confirm-check svg{ width:34px; height:34px; }
.da-confirm h1{
  font-family:var(--da-font-display); font-size:26px; font-weight:700;
  color:var(--da-white); margin:0 0 8px;
}
.da-confirm-lead{ color:var(--da-muted2, #9aa7c7); font-size:14px; margin:0 0 22px; }
.da-confirm-badge{
  display:inline-block; background:var(--da-card, #0c1220);
  border:1px solid var(--da-cyan-h, rgba(0,168,232,.35));
  padding:10px 20px; margin-bottom:28px;
  font-family:var(--da-font-display); font-weight:700; letter-spacing:.06em;
  color:var(--da-cyan, #00a8e8);
}
.da-confirm-eft{
  background:var(--da-card, #0c1220); border:1px solid var(--da-border, rgba(0,160,230,.16));
  padding:18px 20px; text-align:left; margin-bottom:24px;
}
.da-confirm-eft h3{
  font-family:var(--da-font-display); font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--da-muted2, #9aa7c7); margin:0 0 12px;
}
.da-confirm-row{
  display:flex; justify-content:space-between; padding:9px 0;
  border-bottom:1px solid var(--da-border, rgba(0,160,230,.16)); font-size:13px;
}
.da-confirm-row:last-child{ border-bottom:none; }
.da-confirm-row span:first-child{
  color:var(--da-muted2, #9aa7c7); font-family:var(--da-font-display);
  letter-spacing:.04em; text-transform:uppercase; font-size:11px;
}
.da-confirm-row span:last-child{ font-family:var(--da-font-display); font-weight:700; color:var(--da-white); }
.da-confirm-row.amount span:last-child{ color:var(--da-green, #00ff88); font-size:16px; }
.da-confirm-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.da-confirm-actions > *{ flex:1 1 200px; }
.da-btn-whatsapp{
  background:#25d366 !important; color:#06210f !important;
  font-family:var(--da-font-display); font-weight:700; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:13px 20px; border:none; clip-path:var(--da-clip-sm, none);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none !important; transition:filter .2s;
}
.da-btn-whatsapp:hover{ filter:brightness(1.1); }
.da-btn-continue{
  background:transparent !important; color:var(--da-cyan, #00a8e8) !important;
  border:1px solid var(--da-cyan-h, rgba(0,168,232,.4)) !important;
  font-family:var(--da-font-display); font-weight:600; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:13px 20px; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none !important; transition:background .2s, color .2s;
}
.da-btn-continue:hover{ background:var(--da-cyan-dim, rgba(0,168,232,.13)) !important; }
.da-btn-project{
  background:var(--da-cyan, #00a8e8) !important; color:#000 !important;
  font-family:var(--da-font-display); font-weight:700; font-size:13.5px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:13px 20px; display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none !important; transition:filter .2s;
}
.da-btn-project:hover{ filter:brightness(1.1); }
@media(max-width:560px){ .da-confirm-actions{ flex-direction:column; } }

/* ============================================================
   Checkout fixes (v8.39.2)
   ============================================================ */

/* PayFast gateway logo is a dark PNG — it vanishes on the dark theme.
   Give it a light rounded chip so it's legible. Targets the gateway icon
   image in the block + classic checkout payment method rows. */
.wc-block-components-payment-method-icons img,
.wc-block-components-payment-method-label img,
.payment_method_payfast img,
.wc_payment_method img[src*="payfast" i],
img[src*="payfast" i] {
  background:#fff !important;
  padding:3px 7px !important;
  border-radius:5px !important;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  vertical-align:middle;
}

/* Order summary line item: stop the product title collapsing into a
   1-char-per-line column. The row is flex; let the description flex to fill
   the space beside the thumbnail instead of shrinking to its min-content. */
.wc-block-components-order-summary-item{
  display:flex !important;
  align-items:flex-start !important;
  gap:12px !important;
}
.wc-block-components-order-summary-item__image{ flex:0 0 48px !important; }
.wc-block-components-order-summary-item__description{
  flex:1 1 auto !important;
  min-width:0 !important;          /* allow normal wrapping, not min-content */
  word-break:normal !important;
  overflow-wrap:anywhere !important;
}
.wc-block-components-order-summary-item__total{ flex:0 0 auto !important; }

/* Checkout: on narrower screens, ensure the order-summary sidebar doesn't get
   squeezed into an unreadable column. Below 1000px, stack it under the form
   (mirrors WooCommerce's own mobile behaviour, in case the block's responsive
   class doesn't fire under the theme). */
@media (max-width: 1000px){
  .wc-block-checkout{ display:block !important; }
  .wc-block-checkout__main,
  .wc-block-checkout__sidebar{ width:100% !important; max-width:none !important; float:none !important; }
  .wc-block-checkout__sidebar{ margin-top:24px !important; position:static !important; }
}

/* ------------------------------------------------------------
   EMPTY CART (Page: Cart block content) — WooCommerce's default
   "Empty Cart" pattern ships with a near-white icon (background-color:
   currentColor masked into the sad-face shape) and default WP heading
   styling, both off-brand against the dark navy storefront. The icon
   recolors automatically since color + the icon's mask both read
   currentColor — we only need to set color, font, and remove the
   bright divider/heading defaults.
   ------------------------------------------------------------ */
.wc-block-cart__empty-cart__title{
  color: var(--da-white) !important;
  font-family: var(--da-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{
  background-color: var(--da-cyan) !important;
  opacity: .9 !important;
}
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title){
  color: var(--da-white) !important;
  font-family: var(--da-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-size: 20px !important;
}