/*
Theme Name: Cutline
Theme URI: https://xactwrap.com
Author: Xact Wrap
Author URI: https://xactwrap.com
Description: A wide, workshop-grade WordPress theme built around the Cut Vinyl Lettering Designer app. Industrial signage aesthetic — registration marks, hazard-stripe dividers, edge-to-edge app canvas — for shops that sell configurable cut vinyl, wraps, and signage. WooCommerce ready.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cutline
Tags: e-commerce, full-width-template, custom-menu, translation-ready, one-column
*/

/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */
:root{
  --ink:            #0f1115;   /* ONE flat background color used everywhere — matches the designer app's own background exactly */
  --ink-soft:       #0f1115;
  --panel:          #0f1115;
  --paper:          #0f1115;   /* MAIN SITE BACKGROUND — same as the designer app */
  --paper-dim:      #e7e2d4;   /* muted light text (secondary copy) */
  --text:           #eaeaea;   /* primary light body text on the dark background */
  --line:           var(--safety);      /* all "rules" (dividers/borders) are the same dark yellow */
  --line-on-paper:  var(--safety);
  --safety:         #ca8a04;   /* dark yellow — accents AND all border/divider "rules" */
  --safety-dark:    #a16207;
  --teal:           #5eead4;   /* BUTTON accent — matches the designer app's own teal exactly */
  --teal-dark:      #2dd4bf;
  --heading-muted:  #dfdfdf;
  --btn-gradient:       linear-gradient(180deg, #5eead4 0%, #0e312f 100%);
  --btn-gradient-hover: linear-gradient(180deg, #0e312f 0%, #5eead4 100%);   /* muted gray for page-title h1s (e.g. "CART", "ORDERS") — softer than pure white */
  --ok:             #7cb518;
  --mono-font:      'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --display-font:   'Bebas Neue', 'Anton', 'Archivo Black', Impact, sans-serif;
  --body-font:      'Work Sans', -apple-system, sans-serif;
  --max-content:    1400px;    /* wide — the app needs room to breathe */
  --radius:         10px;      /* rounded corners on all blocks — matches the designer app's own radius */
}

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--body-font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family:var(--display-font);
  text-transform:uppercase;
  letter-spacing:.03em;
  line-height:1.1;
  margin:0 0 .5em;
}
h1{ font-size:clamp(1.5rem,2.6vw,2.4rem); color:var(--heading-muted); }
h2{ font-size:clamp(1.1rem,1.7vw,1.5rem); }
h3{ font-size:.92rem; }
p{ margin:0 0 1em; }
.container{
  max-width:var(--max-content);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,64px);
}
.eyebrow{
  font-family:var(--mono-font);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--safety);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{ content:"■"; font-size:.6em; }

/* Grain/noise texture on dark sections */
.texture-noise{ position:relative; isolation:isolate; }
.texture-noise::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hazard-stripe divider (safety tape motif) */
.hazard{
  height:14px;
  background:repeating-linear-gradient(-45deg,var(--safety) 0 22px,var(--ink) 22px 44px);
}

/* ==========================================================================
   2. CUT-LINE PANELS (registration-mark cards)
   ========================================================================== */
.cut-panel{
  position:relative;
  border:2px solid var(--line-on-paper);
  border-radius:var(--radius);
  padding:clamp(24px,3vw,40px);
  background:var(--panel);
}
.cut-panel::before,.cut-panel::after,
.cut-panel .reg-tl,.cut-panel .reg-br{ content:""; }
.cut-panel::before,.cut-panel::after{
  position:absolute; width:16px; height:16px;
  background:
    linear-gradient(var(--safety),var(--safety)) center/2px 100% no-repeat,
    linear-gradient(90deg,var(--safety),var(--safety)) center/100% 2px no-repeat;
}
.cut-panel::before{ top:-9px; left:-9px; }
.cut-panel::after{ bottom:-9px; right:-9px; }

/* ==========================================================================
   3. HEADER / NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#3f3f3f;
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
  max-width:var(--max-content);
}
.site-branding{ display:flex; align-items:center; gap:.7em; color:var(--text); }
.site-branding .brand-mark{
  width:34px; height:34px; background:var(--safety);
  clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
  flex:none;
}
.site-branding .brand-name{
  font-family:var(--display-font); text-transform:uppercase;
  font-size:1.35rem; letter-spacing:.02em; color:var(--text);
}
.primary-nav ul{ display:flex; gap:2.2rem; align-items:center; }
.primary-nav a{
  color:var(--paper-dim); font-family:var(--mono-font); font-size:.82rem;
  text-transform:uppercase; letter-spacing:.08em;
  padding:.4em 0; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.primary-nav a:hover, .primary-nav .current-menu-item a{
  color:var(--safety); border-color:var(--safety);
}
.header-cta{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--btn-gradient); color:#fff;
  font-family:var(--mono-font); font-weight:700; font-size:.8rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.7em 1.3em; border-radius:var(--radius);
  transition:transform .15s, background .15s;
}
.header-cta:hover{ background:var(--btn-gradient-hover); transform:translateY(-1px); color:#fff; }
.menu-toggle{ display:none; }

/* ==========================================================================
   3b. HEADER WOO LINKS (cart / account)
   ========================================================================== */
.header-woo-links{ display:flex; align-items:center; gap:.9rem; }
.header-icon-link{
  position:relative; display:inline-flex; align-items:center; gap:.4em;
  color:var(--paper-dim); transition:color .15s;
}
.header-icon-link:hover{ color:var(--safety); }
.header-icon-link svg{ flex:none; }
.header-icon-label{
  font-family:var(--mono-font); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.06em;
}
.cart-contents-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--teal); color:var(--ink);
  font-family:var(--mono-font); font-size:.68rem; font-weight:700;
  line-height:1;
}
@media (max-width:1100px){
  .header-icon-label{ display:none; }
}
@media (max-width:900px){
  .header-woo-links{ gap:.6rem; }
}


@media (max-width:900px){
  .primary-nav{ display:none; }
  .menu-toggle{
    display:inline-flex; background:none; border:1px solid var(--line);
    color:var(--text); width:44px; height:44px; align-items:center; justify-content:center;
  }
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--mono-font); text-transform:uppercase; letter-spacing:.06em;
  font-size:.85rem; font-weight:600;
  padding:.9em 1.6em; border-radius:var(--radius); border:2px solid transparent;
  cursor:pointer; transition:all .15s ease;
}
.btn-primary{ background:var(--btn-gradient); color:#fff; }
.btn-primary:hover{ background:var(--btn-gradient-hover); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--text); }
.btn-dark{ background:var(--ink); color:var(--text); }
.btn-dark:hover{ background:#0b0c10; }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{
  background:var(--ink); color:var(--text);
  padding-block:clamp(64px,10vw,120px) clamp(48px,6vw,80px);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:.9fr 1.3fr; gap:clamp(32px,5vw,80px);
  align-items:center; position:relative; z-index:2;
}
.hero h1{ color:var(--text); }
.hero h1 em{ font-style:normal; color:var(--safety); }
.hero-sub{ font-size:1.15rem; color:var(--paper-dim); max-width:46ch; }
.hero-actions{ display:flex; gap:1em; margin-top:2em; flex-wrap:wrap; }
.hero-specs{
  margin-top:2.5em; display:flex; gap:2.5em; font-family:var(--mono-font);
  flex-wrap:wrap;
}
.hero-specs div strong{ display:block; font-size:1.6rem; color:var(--safety); font-family:var(--display-font); }
.hero-specs div span{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); }

.hero-swatch{
  position:relative; border:2px solid var(--safety); border-radius:var(--radius);
  aspect-ratio:2000/1111; overflow:hidden;
}
.hero-swatch img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block;
}

@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   6. FEATURE / PROCESS GRID
   ========================================================================== */
.section{ padding-block:clamp(56px,8vw,100px); }
.section-head{ max-width:56ch; margin-bottom:3rem; }
.feature-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem;
}
.feature-card{
  background:var(--panel); border:1px solid var(--line-on-paper);
  border-radius:var(--radius); padding:2rem;
  position:relative;
}
.feature-card .num{
  font-family:var(--mono-font); color:var(--safety); font-size:.8rem; letter-spacing:.1em;
}
.feature-card h3{ margin-top:.6em; }

/* material / color swatch strip */
/* All 23 swatches sized to comfortably fit on one row within the
   section's max content width, rather than wrapping to multiple lines.
   overflow-x is a safety net only — at these sizes it shouldn't be needed
   on any normal desktop/tablet width, but keeps things from breaking
   layout on very narrow viewports instead of forcing a wrap. */
.material-strip{
  display:flex; flex-wrap:nowrap; gap:.5rem; justify-content:center;
  overflow-x:auto; padding-bottom:.25rem;
}
.material-strip span{
  width:clamp(28px,3.6vw,44px); height:clamp(28px,3.6vw,44px);
  border-radius:9px; border:2px solid var(--ink);
  display:inline-block; flex:0 0 auto;
}

/* ==========================================================================
   7. APP SHOWCASE (marketing page block, not the app template)
   ========================================================================== */
.app-showcase{ background:var(--ink); color:var(--text); }
.app-frame{
  border:2px solid var(--safety); border-radius:var(--radius);
  padding:10px; background:var(--panel);
}
.app-frame .app-frame-bar{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono-font); font-size:.7rem; letter-spacing:.1em;
  color:var(--paper-dim); padding:.4em .6em;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer{ background:var(--paper); color:var(--paper-dim); border-top:1px solid var(--safety); }
.site-footer .container{
  padding-block:3.5rem 2rem; display:grid;
  grid-template-columns:1.4fr repeat(3,1fr); gap:2.5rem;
}
.site-footer h4{ color:var(--text); font-size:.85rem; letter-spacing:.1em; }
.site-footer ul li{ margin-bottom:.6em; }
.site-footer a:hover{ color:var(--safety); }
.footer-bottom{
  border-top:1px solid var(--line); font-family:var(--mono-font); font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:#666;
  display:flex; justify-content:space-between; padding:1.4rem clamp(20px,4vw,64px);
  max-width:var(--max-content); margin-inline:auto; flex-wrap:wrap; gap:1em;
}
@media (max-width:900px){ .site-footer .container{ grid-template-columns:1fr 1fr; } }

/* ==========================================================================
   9. FULL-BLEED APP TEMPLATE (page-templates/template-full-bleed-app.php)
   ========================================================================== */
.app-shell{
  --shell-h: 56px;
  background:var(--ink-soft);
}
.app-shell-header{
  height:var(--shell-h); display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(16px,2vw,32px); background:#3f3f3f; border-bottom:1px solid var(--line);
}
.app-shell-header .brand-name{ font-size:1rem; }
.app-shell-header .app-shell-back{
  font-family:var(--mono-font); font-size:.75rem; letter-spacing:.08em; color:var(--paper-dim);
  text-transform:uppercase; display:flex; gap:.5em; align-items:center;
}
.app-shell-header .app-shell-back:hover{ color:var(--safety); }
.app-shell-header-right{ display:flex; align-items:center; gap:1rem; }
.app-shell-cart-link{
  position:relative; display:inline-flex; align-items:center;
  color:var(--paper-dim); transition:color .15s;
}
.app-shell-cart-link:hover{ color:var(--safety); }
.app-shell-cart-link svg{ flex:none; }
.app-shell-cart-link .cart-contents-count{
  position:absolute; top:-8px; right:-10px;
}
.app-shell-canvas{
  width:100%;
  min-height:calc(100vh - var(--shell-h));
  background:var(--paper);
}
/* Fills exactly the space below the slim app-shell-header, so the designer
   (notices + iframe + price/qty/Add to Cart bar) is entirely visible on
   load with no page-scrolling needed to reach any part of it. Any product
   description still renders normally AFTER this block, so the page can
   still scroll further down for that — it's just no longer competing with
   the tool itself for vertical space. */
.app-product-viewport{
  height:calc(100vh - var(--shell-h) - 2rem);
  min-height:520px;
  display:flex;
  flex-direction:column;
  padding-top:1.25rem;
}
.app-product-viewport .woocommerce-notices-wrapper:empty{ display:none; }
.app-shell-canvas iframe{
  width:100%; height:calc(100vh - var(--shell-h)); border:0; display:block;
}
/* When the designer is embedded via shortcode rather than iframe, this wraps it full-width */
.app-shell-canvas .designer-mount{ width:100%; min-height:calc(100vh - var(--shell-h)); }

/* ==========================================================================
   10. WOOCOMMERCE OVERRIDES (wide layout, industrial buttons)
   ========================================================================== */
.woocommerce ul.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.5rem; }
.woocommerce ul.products li.product{ list-style:none; }
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit,
.woocommerce input.button, .woocommerce-page a.button{
  background:var(--btn-gradient) !important; color:#fff !important;
  border-radius:var(--radius) !important; font-family:var(--mono-font) !important;
  text-transform:uppercase; letter-spacing:.06em; border:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{ background:var(--btn-gradient-hover) !important; }
.woocommerce div.product .product_title{ font-family:var(--display-font); text-transform:uppercase; }
.woocommerce-checkout .woocommerce, .woocommerce-cart .woocommerce{ max-width:var(--max-content); margin-inline:auto; }

/* ==========================================================================
   9b. APP PRODUCT LAYOUT (page-templates/template-app-product.php)
   Full-width single-column layout for the configurable designer product —
   deliberately skips WooCommerce's default two-column gallery+summary grid,
   which is what was squeezing the designer iframe into a narrow column.
   ========================================================================== */
.app-product-head{
  margin-bottom:1.75rem; padding-bottom:.2rem;
  border-bottom:2px solid var(--line-on-paper);
}
.app-product-head .product_title{ margin-bottom:.3em; }
.app-product-head .price{
  font-family:var(--mono-font); font-size:1.4rem; font-weight:700;
  color:var(--safety); text-transform:uppercase; letter-spacing:.02em;
}
.app-product-head .price del{ color:#999; opacity:.7; margin-right:.5em; }
.app-product-head .price ins{ text-decoration:none; }
.app-product-designer{
  width:100%; flex:1; min-height:0;
  display:flex; flex-direction:column;
}
.app-product-designer form.cart{
  width:100%; max-width:none;
  flex:1; min-height:0;
  display:flex; flex-direction:column;
}
.app-product-designer .vld-wrap{
  width:100%; flex:1; min-height:0; margin-bottom:.75rem !important;
}
.app-product-designer .vld-wrap iframe{
  width:100% !important; max-width:100% !important;
  height:100% !important; min-height:0 !important;
}
.app-product-designer .vld-bottom-bar{ flex:0 0 auto; margin-top:0; }
.app-product-description{
  max-width:900px; margin-top:3rem; padding-top:2rem;
  border-top:1px solid var(--line-on-paper);
}
.woocommerce-notices-wrapper{ margin-bottom:1rem; }

/* ==========================================================================
   9c. CART/CHECKOUT THUMBNAIL STYLING
   The plugin now replaces the default product-image thumbnail with the
   customer's actual live design preview (see VLD_Cart_Hooks::
   show_preview_thumbnail() / show_block_preview_images()) for both the
   classic cart/checkout templates AND the Cart/Checkout/Mini-Cart BLOCKS
   (Store API) — this just makes sure it's sized/cropped nicely wherever it
   shows up, instead of being hidden.
   ========================================================================== */
.woocommerce-cart table.cart .product-thumbnail img,
.woocommerce-checkout table.shop_table .product-thumbnail img,
.woocommerce-checkout-review-order-table .product-thumbnail img,
.widget_shopping_cart .product-thumbnail img,
.woocommerce-mini-cart img,
.wc-block-cart-item__image img,
.wc-block-components-product-image img,
/* Quantity "circle" badge overlaid on the order-summary thumbnail (e.g.
   Checkout sidebar) — was teal-on-teal-ish and unreadable; dark yellow
   background with black text matches the rest of the accent system and
   is legible against any thumbnail. */
.wc-block-components-order-summary-item__quantity,
.wc-block-components-order-summary-item .wc-block-components-quantity-badge,
[class*="quantity-badge"],
[class*="product-badge"]{
  background:var(--safety) !important;
  color:#000 !important;
  border-color:var(--safety) !important;
}
.wc-block-components-order-summary-item__quantity *,
[class*="quantity-badge"] *,
[class*="product-badge"] *{
  color:inherit !important;
}
.wc-block-components-order-summary-item__image img,
.wc-block-mini-cart-items-item-image img{
  border-radius:var(--radius);
  object-fit:cover;
}

/* ==========================================================================
   9d. BOTTOM BAR — price + quantity + Add to Cart, inline, full width
   (woocommerce/single-product/add-to-cart/simple.php theme override)
   ========================================================================== */
.vld-bottom-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  width:100%; margin-top:1.25rem; padding:1.25rem 1.5rem;
  background:#3f3f3f; border:1px solid var(--safety); border-radius:var(--radius);
}
/* Left side: the live per-design estimated price (see the note in
   woocommerce/single-product/add-to-cart/simple.php about the plugin JS
   that updates these #vld-price-* elements by ID). */
.vld-bottom-bar-price{ flex:1 1 auto; min-width:200px; }
.vld-bottom-bar-price-label{
  font-family:var(--mono-font); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--paper-dim);
}
.vld-bottom-bar-price-value{
  font-family:var(--display-font); font-size:2rem; line-height:1.1; color:var(--safety);
}
.vld-bottom-bar-price-detail{
  font-family:var(--mono-font); font-size:.78rem; color:var(--paper-dim); margin-top:.2em;
}
/* Right side: quantity + Add to Cart, grouped together */
.vld-bottom-bar-right{ display:flex; align-items:center; gap:1rem; flex:0 0 auto; }
.vld-bottom-bar-qty .quantity{ display:flex; }
.vld-bottom-bar-qty input.qty{
  width:64px; padding:.75em .5em; text-align:center;
  border:1px solid var(--safety); border-radius:var(--radius);
  background:var(--paper); color:var(--text); font-family:var(--mono-font); font-size:1rem;
}
.vld-bottom-bar-button{
  flex:0 0 auto;
  font-family:var(--mono-font); text-transform:uppercase; letter-spacing:.06em; font-weight:700;
  font-size:1rem; padding:1em 2.4em; border:none; border-radius:var(--radius);
  background:var(--btn-gradient); color:#fff; cursor:pointer; white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.vld-bottom-bar-button:hover{ background:var(--btn-gradient-hover); transform:translateY(-1px); }
@media (max-width:680px){
  .vld-bottom-bar{ flex-direction:column; align-items:stretch; }
  .vld-bottom-bar-price{ text-align:center; }
  .vld-bottom-bar-right{ justify-content:center; }
  .vld-bottom-bar-button{ flex:1 1 auto; }
}

/* ==========================================================================
   9e. WOOCOMMERCE NOTICES ("Added to cart", errors, info)
   Overrides WooCommerce's default pale green/red/blue notice boxes so the
   "Added to cart" message (and error/info notices) match the rest of the
   dark site instead of standing out as a bright default-styled box.
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:var(--paper) !important;
  color:var(--text) !important;
  border:1px solid var(--safety) !important;
  border-radius:var(--radius) !important;
  font-family:var(--body-font);
  padding:1em 1.5em 1em 3em !important;
  margin-bottom:1.5rem !important;
  list-style:none !important;
  position:relative !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  color:var(--safety) !important;
  position:absolute !important;
  left:1em !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}
.woocommerce-message a.button.wc-forward,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a{
  background:var(--btn-gradient); color:#fff !important;
  font-family:var(--mono-font); text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  font-size:.8rem; padding:.6em 1.2em; border-radius:var(--radius);
  display:inline-block; margin-left:.75em;
}
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-error a:hover,
.woocommerce-info a:hover{ background:var(--btn-gradient-hover); }

/* Utility */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }


/* ==========================================================================
   10f. WOOCOMMERCE BLOCKS (CART/CHECKOUT) + MY ACCOUNT — READABILITY FIX
   WooCommerce's own default styles for the Cart/Checkout blocks and the
   My Account pages assume a LIGHT page background, so their built-in body
   text colors (muted grays meant for a white page) end up nearly invisible
   against this theme's near-black background. These overrides force every
   relevant piece of copy back to bright, legible colors.
   ========================================================================== */

/* Cart / Checkout blocks (Store API) — line-item text, meta, totals panel */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart *,
.wp-block-woocommerce-checkout *{
  color:var(--text);
}
.wc-block-components-product-metadata,
.wc-block-components-product-metadata *,
.wc-block-cart-item__prices,
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-item__description,
.wc-block-cart__totals-title,
.wc-block-components-panel,
.wc-block-components-panel *,
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label,
.wc-block-components-address-form label,
.wc-block-components-text-input label,
.wc-block-components-checkbox__label{
  color:var(--text) !important;
}
.wc-block-components-product-name{ color:var(--text) !important; text-decoration:none; }
.wc-block-components-product-name:hover{ color:var(--safety) !important; }
.wc-block-cart-item__remove-link,
.wc-block-components-panel__button,
a.wc-block-components-totals-coupon-link{
  color:var(--teal) !important;
}
.wc-block-cart-items__header-text,
.wc-block-components-sidebar-layout .wc-block-components-panel .wc-block-components-panel__button-icon,
.wc-block-components-quantity-selector,
.wc-block-components-quantity-selector input{
  color:var(--text) !important;
}
.wc-block-components-quantity-selector{
  border-color:var(--line) !important;
}
.wc-block-components-quantity-selector input,
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select{
  background:var(--panel) !important;
  color:var(--text) !important;
  border-color:var(--line) !important;
}
/* "Proceed to Checkout" / "Place order" buttons — high-contrast teal fill */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block a,
.wp-block-woocommerce-proceed-to-checkout a,
[class*="proceed-to-checkout"] a,
a[class*="submit-button"],
a[class*="checkout-place-order"],
button[class*="checkout-place-order"]{
  background:var(--btn-gradient) !important; color:#fff !important;
  font-family:var(--mono-font) !important; text-transform:uppercase; letter-spacing:.05em;
  border:none !important; border-radius:var(--radius) !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block a:hover,
.wp-block-woocommerce-proceed-to-checkout a:hover,
[class*="proceed-to-checkout"] a:hover,
a[class*="submit-button"]:hover,
a[class*="checkout-place-order"]:hover,
button[class*="checkout-place-order"]:hover{
  background:var(--btn-gradient-hover) !important; color:#fff !important;
}
/* Make sure the button's own text/label span (WC Blocks sometimes wraps
   the visible label in a nested span) always inherits this same color,
   rather than the ambient --text color from the broad ".wp-block-
   woocommerce-cart *" rule above winning by being more specific to that
   inner element. */
[class*="proceed-to-checkout"] a *,
a[class*="submit-button"] *,
a[class*="checkout-place-order"] *,
button[class*="checkout-place-order"] *{
  color:inherit !important;
}
/* Order summary / totals card background so it isn't pure black-on-black */
.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wc-block-cart__totals-title{
  border-color:var(--line) !important;
}

/* My Account (Dashboard, Orders, Downloads, Addresses, Account details) */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content p,
.woocommerce-account .woocommerce-MyAccount-content li,
.woocommerce-account .woocommerce-MyAccount-content address,
.woocommerce-account table.shop_table,
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td{
  color:var(--text) !important;
}
.woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-MyAccount-navigation ul li{ margin-bottom:.6em; }
.woocommerce-MyAccount-navigation ul li a{
  color:var(--paper-dim) !important; font-family:var(--mono-font); font-size:.85rem;
  text-transform:uppercase; letter-spacing:.06em; text-decoration:none;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a{
  color:var(--safety) !important;
}
.woocommerce-Address-title h3{ color:var(--text) !important; font-family:var(--display-font); text-transform:uppercase; }
.woocommerce-Address-title a:not(.button):not(.woocommerce-button),
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button){
  color:var(--teal) !important;
}
.woocommerce-Address-title a:not(.button):not(.woocommerce-button):hover,
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):hover{
  color:var(--teal-dark) !important;
}
/* Table-row action buttons (e.g. "View" order) must keep their own
   readable text color instead of inheriting the plain-link teal above,
   which was rendering as invisible teal-on-teal button text. */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button{
  color:#fff !important;
}
.woocommerce-account table.shop_table{ border-color:var(--line) !important; }
.woocommerce-account table.shop_table th{ border-bottom:2px solid var(--line) !important; }
.woocommerce-account table.shop_table td{ border-bottom:1px solid var(--line) !important; }


/* ==========================================================================
   10g. WOOCOMMERCE FORM FIELDS + FIELDSETS
   Native browser fieldsets/inputs (e.g. the "Password change" box on
   Account Details, plain text/email fields on Addresses/Account forms)
   were rendering with default square-corner, stark-white browser chrome
   that clashes with the rest of the site. These bring every outlined
   block in line with the same rounded, thin-teal/line-bordered language
   used elsewhere (cut-panel, notices, bottom bar).
   ========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content fieldset,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address,
.woocommerce form fieldset{
  border:1.5px solid var(--line) !important;
  border-radius:var(--radius) !important;
  padding:1.5rem 1.75rem 1.75rem !important;
  margin:0 0 1.5rem !important;
  background:var(--panel);
}
.woocommerce-account .woocommerce-MyAccount-content legend,
.woocommerce form fieldset legend{
  font-family:var(--mono-font); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--safety); padding:0 .6em;
}
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content input[type="url"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-address-form input,
.wc-block-components-address-form select,
.wc-block-components-combobox input,
.wc-block-checkout__contact-fields input,
[class*="wc-block-components-text-input"] input,
select.wc-block-components-select__select{
  background:#ffffff !important;
  color:#000000 !important;
  border:1.5px solid var(--line) !important;
  border-radius:var(--radius) !important;
  padding:.75em .9em !important;
  font-family:var(--body-font);
  width:100%;
}
/* Labels/placeholders floating inside these fields (WC Blocks uses an
   animated floating label overlapping the input) also need to stay dark
   so they're readable against the new white fill. */
.wc-block-components-text-input label,
.wc-block-components-address-form label,
.wc-block-checkout__contact-fields label{
  color:#eaeaea !important;
}
/* WooCommerce Blocks' checkout text fields (email, address lines, etc.)
   use a "floating label" pattern where the label sits absolutely
   positioned INSIDE the input, overlapping the typed value once filled —
   different from the classic My Account fields, where the label is a
   normal block element sitting above the box. Forcing this to a flex
   column with the label reordered first makes every checkout field match
   that same "label on top" style regardless of WooCommerce's internal
   floating/active-state classes. */
.wc-block-components-text-input{
  display:flex !important;
  flex-direction:column !important;
  position:relative !important;
}
.wc-block-components-text-input label{
  order:-1 !important;
  position:static !important;
  transform:none !important;
  display:block !important;
  font-size:.8rem !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  margin:0 0 .35em !important;
  pointer-events:none;
}
.wc-block-components-text-input input{
  order:0 !important;
  margin-top:0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus{
  outline:none !important;
  border-color:var(--teal) !important;
}
.woocommerce-account .woocommerce-MyAccount-content label{
  color:var(--text) !important; font-size:.9rem;
}
.woocommerce-account .woocommerce-MyAccount-content .password-input .show-password-input{
  border:none !important;
}


/* ==========================================================================
   10h. "ADDED TO CART" MODAL
   The WooCommerce success notice gets moved (by assets/js/theme.js) out of
   the normal page flow into this centered modal dialog instead of sitting
   as a plain banner at the top of the page.
   ========================================================================== */
.vld-modal-backdrop{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease;
}
.vld-modal-backdrop.is-open{ opacity:1; visibility:visible; }
.vld-modal-panel{
  position:relative;
  width:100%; max-width:480px;
  background:var(--panel);
  border:1px solid var(--safety);
  border-radius:var(--radius);
  padding:2rem 1.75rem 1.75rem;
  transform:translateY(12px) scale(.98);
  transition:transform .2s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.vld-modal-backdrop.is-open .vld-modal-panel{ transform:translateY(0) scale(1); }
.vld-modal-close{
  position:absolute; top:.6rem; right:.75rem;
  background:none; border:none; cursor:pointer;
  font-size:1.6rem; line-height:1; color:var(--paper-dim);
  padding:.25rem .5rem; border-radius:6px;
}
.vld-modal-close:hover{ color:var(--safety); }
.vld-modal-panel .woocommerce-message{
  margin:0 !important; border:none !important; padding:0 !important;
  background:transparent !important;
  display:flex !important; flex-direction:column; align-items:center;
  text-align:center; gap:.9rem;
  list-style:none !important;
}
.vld-modal-panel .woocommerce-message::before{ display:none; }
/* WooCommerce's own default stylesheet renders the notice as a <ul> with
   the actual text inside an <li> that carries its OWN border/background —
   our override above only strips the outer <ul>, leaving that inner box
   visible. Strip it here too, without touching the "View cart" button's
   own (intentional) styling. */
.vld-modal-panel .woocommerce-message li{
  border:none !important; background:transparent !important;
  padding:0 !important; margin:0 !important;
  display:flex !important; flex-direction:column; align-items:center;
  gap:.9rem; text-align:center;
}
.vld-modal-panel .woocommerce-message a{ margin-left:0 !important; }
/* Belt-and-suspenders: WooCommerce's own base stylesheet (loaded by the
   WooCommerce plugin itself, not this theme) can still be adding a
   border/box-shadow/outline to SOME element inside the notice that isn't
   accounted for by name above — strip it from literally every descendant,
   regardless of exact tag/class, without touching background (so the
   "View cart" button keeps its own teal gradient fill). */
.vld-modal-panel .woocommerce-message,
.vld-modal-panel .woocommerce-message *{
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}