/* Theme Name: 2in1 Theme (Auto Setup + SEO + Shipping) Author: Casper Aarnink Description: Converted from 2in1_fixed.html. Auto setup: pages, Woo settings, product import from CSV, categories, images, shipping methods, and SEO basics (no plugin). Version: 1.4.2 Text Domain: twoinone-theme Tags: custom, landing-page, woocommerce */

/* ==========================================================================
   8) ACCESSIBILITY / UX BASICS
   ========================================================================== */

/* Skip link (SEO/UX + toetsenbord) */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:100000;
  background:#fff;
  color:var(--global-palette4);
  padding:.75rem 1rem;
  border-radius:9999px;
  box-shadow:var(--global-shadow-md);
  text-decoration:none;
  font-weight:900;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* Better focus defaults for everything clickable */
:where(a, button, input, select, textarea, summary, .button, .wp-block-button__link):focus-visible{
  outline: .1875rem solid color-mix(in srgb, var(--global-palette2) 55%, #fff);
  outline-offset: .1875rem;
}

/* Visually hidden (SEO-friendly headings, screen readers) */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Reduce motion for people who hate floaty stuff (and for Core Web Vitals) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-image img{ animation:none !important; }
}

/* ==========================================================================
   9) LAYOUT UTILITIES (containers, spacing, cards)
   ========================================================================== */

:root{
  /* Spacing scale (rem-based, consistent) */
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  /* Common surfaces */
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, #fff 70%, var(--global-palette7));
  --border-soft: rgba(0,0,0,.10);

  /* Form */
  --field-bg: #fff;
  --field-border: rgba(0,0,0,.14);
  --field-border-focus: color-mix(in srgb, var(--global-palette2) 55%, #fff);

  /* Status */
  --ok: #16a34a;
  --warn: #f59e0b;
  --bad: #dc2626;
}

/* Generic container */
.container,
.site-container,
.max-width-container{
  max-width: var(--global-content-width);
  margin-inline:auto;
  padding-inline: var(--global-content-edge-padding);
}

/* Section helper */
.section{
  padding: clamp(2.25rem, 4vw, 4rem) 0;
}

/* Card helper */
.card{
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--global-radius-lg);
  box-shadow: var(--global-shadow-sm);
}

/* Better typography defaults (keep your vibe, slightly safer) */
h1{ font-size: clamp(1.65rem, 3.6vw, 2.4rem); }
h2{ font-size: clamp(1.35rem, 3vw, 2rem); }
h3{ font-size: clamp(1.2rem, 2.3vw, 1.6rem); }

/* ==========================================================================
   10) FORMS (GLOBAL + Woo checkout fields)
   ========================================================================== */

:where(input[type="text"],
       input[type="email"],
       input[type="tel"],
       input[type="number"],
       input[type="password"],
       input[type="search"],
       select,
       textarea){
  width:100%;
  background: var(--field-bg);
  border:1px solid var(--field-border);
  border-radius: 1rem;
  padding:.85rem 1rem;
  font-size: 1rem;
  line-height: 1.35;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

:where(input, select, textarea):focus{
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--global-palette2) 18%, transparent);
  outline: none;
}

::placeholder{ color: color-mix(in srgb, var(--global-palette5) 70%, #fff); font-weight:700; }

/* Required asterisk + errors */
.woocommerce form .form-row.woocommerce-invalid input,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea{
  border-color: color-mix(in srgb, var(--bad) 70%, #fff);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bad) 18%, transparent);
}

/* ==========================================================================
   11) WOO: NOTICES, CART, CHECKOUT, PAYMENT, ACCOUNT
   ========================================================================== */

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
  border:1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--global-shadow-sm);
  font-weight: 800;
}

.woocommerce-message{ border-left: .35rem solid var(--ok); }
.woocommerce-info{ border-left: .35rem solid var(--global-palette2); }
.woocommerce-error{ border-left: .35rem solid var(--bad); }

.woocommerce-error li{ font-weight:800; }

/* Cart table */
.woocommerce-cart table.shop_table{
  border-collapse: separate;
  border-spacing: 0;
  border:1px solid var(--border-soft);
  border-radius: 1.25rem;
  overflow:hidden;
  background:#fff;
  box-shadow: var(--global-shadow-sm);
}
.woocommerce-cart table.shop_table th{
  background: color-mix(in srgb, var(--global-palette7) 70%, #fff);
  font-weight: 900;
  color: var(--global-palette4);
  padding: 1rem;
}
.woocommerce-cart table.shop_table td{
  padding: 1rem;
  vertical-align: middle;
  border-top: 1px solid rgba(0,0,0,.06);
}
.woocommerce-cart .product-name a{
  font-weight: 900;
  text-decoration: none;
  color: var(--global-palette4);
}
.woocommerce-cart .product-name a:hover{ text-decoration: underline; }
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal{
  font-weight: 900;
  color: var(--global-palette4);
}

/* Quantity */
.woocommerce .quantity input.qty{
  max-width: 5.5rem;
  text-align:center;
  font-weight:900;
  border-radius: 9999px;
}

/* Cart actions */
.woocommerce-cart .coupon{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap:wrap;
}
.woocommerce-cart .coupon input{
  max-width: 16rem;
}
.woocommerce-cart .actions button,
.woocommerce-cart .actions .button{
  border-radius: 9999px;
  font-weight: 900;
}

/* Cart totals */
.woocommerce-cart .cart-collaterals .cart_totals{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: var(--global-shadow-sm);
}
.woocommerce-cart .cart_totals h2{
  margin: 0 0 1rem;
}
.woocommerce-cart .cart_totals table{
  margin:0 0 1rem;
}
.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th{
  font-weight: 900;
  font-size: 1.1rem;
}

/* Checkout layout */
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout #customer_details{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: var(--global-shadow-sm);
}

/* Checkout headings */
.woocommerce-checkout h3{
  margin: 0 0 1rem;
  font-weight: 900;
}

/* Payment box */
.woocommerce-checkout #payment{
  background: color-mix(in srgb, var(--global-palette7) 55%, #fff);
  border-radius: 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(0,0,0,.08);
}
.woocommerce-checkout #payment ul.payment_methods{
  margin:0;
  padding:0;
  list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  padding: .9rem 1rem;
  margin: 0 0 .75rem;
}
.woocommerce-checkout #payment div.payment_box{
  background: rgba(255,255,255,.8);
  border-radius: 1rem;
  padding: .9rem 1rem;
  margin-top: .75rem;
  border:1px solid rgba(0,0,0,.08);
  font-weight: 800;
}

/* Place order button: make it pop */
.woocommerce-checkout #place_order{
  width:100%;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  letter-spacing: .03em;
  border-radius: 1.25rem;
  font-weight: 900;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
}

/* Order received thank you */
.woocommerce-order-received .woocommerce-order{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: var(--global-shadow-sm);
}

/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: 1.25rem;
  padding: 1rem;
  box-shadow: var(--global-shadow-sm);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;
  padding:0;
  margin:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:flex;
  padding: .75rem .9rem;
  border-radius: .9rem;
  text-decoration:none;
  font-weight:900;
  color: var(--global-palette4);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background: color-mix(in srgb, var(--global-palette7) 60%, #fff);
}
.woocommerce-account .woocommerce-MyAccount-content{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: var(--global-shadow-sm);
}

/* ==========================================================================
   12) SHIPPING UX (methods, “fast delivery” badge, clean labels)
   ========================================================================== */

/* Make shipping methods readable */
.woocommerce ul#shipping_method,
.woocommerce ul.woocommerce-shipping-methods{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.75rem;
}

.woocommerce ul#shipping_method li,
.woocommerce ul.woocommerce-shipping-methods li{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 1rem;
  padding: .9rem 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  display:flex;
  align-items:flex-start;
  gap:.75rem;
}

.woocommerce ul#shipping_method label,
.woocommerce ul.woocommerce-shipping-methods label{
  font-weight: 900;
  color: var(--global-palette4);
  cursor:pointer;
}

/* Optional delivery badge class you can output in PHP/shortcode */
.shipping-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .75rem;
  border-radius: 9999px;
  font-weight: 900;
  font-size: .9rem;
  background: color-mix(in srgb, var(--ok) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--ok) 28%, #fff);
  color: color-mix(in srgb, var(--ok) 75%, #000);
}
.shipping-badge.warn{
  background: color-mix(in srgb, var(--warn) 14%, #fff);
  border-color: color-mix(in srgb, var(--warn) 28%, #fff);
  color: color-mix(in srgb, var(--warn) 75%, #000);
}

/* ==========================================================================
   13) PRODUCT PAGE POLISH (tabs, variations, add-to-cart)
   ========================================================================== */

.single-product .product{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius: 1.25rem;
  box-shadow: var(--global-shadow-sm);
  padding: 1.25rem;
}

.single-product .product_title{
  font-weight: 900;
  color: var(--global-palette4);
}

.single-product .price{
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--global-palette4);
}

.woocommerce div.product form.cart{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  margin-top: 1rem;
}

.woocommerce div.product form.cart .single_add_to_cart_button{
  border-radius: 1.25rem;
  padding: .95rem 1.1rem;
  font-weight: 900;
}

.woocommerce div.product .woocommerce-tabs ul.tabs{
  padding:0;
  margin: 1.5rem 0 0;
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  border:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border:0;
  background:transparent;
  margin:0;
  padding:0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:inline-flex;
  padding:.7rem 1rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--global-palette7) 55%, #fff);
  text-decoration:none;
  font-weight: 900;
  color: var(--global-palette4);
  border:1px solid rgba(0,0,0,.08);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{
  background: var(--global-palette2);
  color:#fff;
}

.woocommerce div.product .woocommerce-tabs .panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 1.25rem;
  padding: 1.25rem;
  margin-top: 1rem;
}

/* ==========================================================================
   14) FAQ: make aria-expanded styling “just work”
   (if you toggle aria-expanded in JS, this becomes bulletproof)
   ========================================================================== */

.faq-question[aria-expanded="true"]{
  background:linear-gradient(90deg, #f97316, #facc15);
  color:#1F2937;
}
.faq-question[aria-expanded="true"] + .faq-answer{
  display:block;
}

/* ==========================================================================
   15) STICKY CTA: safe-area + nicer stacking
   ========================================================================== */

.sticky-cta{
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 920px){
  body{ padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   16) MICRO PERFORMANCE / CLEANUP
   ========================================================================== */

/* Avoid layout shifts for product images */
.woocommerce ul.products li.product img,
.single-product div.product div.images img{
  height:auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: color-mix(in srgb, var(--global-palette7) 55%, #fff);
  border-radius: 1rem;
}

/* Smoother hover without expensive paints */
.news-card,
.woocommerce-bestsellers-grid .product,
.faq-item,
.quickpick{
  will-change: transform;
}

/* Optional: make underlines less ugly on buttons pretending to be links */
a.cta-button,
a.sticky-cta__btn,
a.quickpick{
  text-decoration:none;
}

/* ==========================================================================
   17) RESPONSIVE EDGE CASES (Cart/Checkout on mobile)
   ========================================================================== */

@media (max-width: 768px){
  .woocommerce-cart table.shop_table thead{ display:none; }
  .woocommerce-cart table.shop_table tr{
    display:block;
    border-top:1px solid rgba(0,0,0,.08);
    padding: .75rem 0;
  }
  .woocommerce-cart table.shop_table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    border-top:0;
    padding: .6rem 1rem;
  }
  .woocommerce-cart table.shop_table td::before{
    content: attr(data-title);
    font-weight: 900;
    color: var(--global-palette5);
  }
  .woocommerce-checkout #place_order{ font-size: 1rem; }
}