/*
 Theme Name:   SideQuest Child Theme
 Theme URI:    https://sidequest.store
 Description:  Child theme for WooCommerce Storefront — SideQuest Store customizations
 Author:       SideQuest Team
 Template:     storefront
 Version:      1.0.1
 Text Domain:  sidequest-child
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — Trójca (SK4)
   ============================================================ */
:root {
  --sq-primary:         #4c1d95;
  --sq-accent:          #eab308;
  --sq-dark:            #1e1b4b;
  --sq-bg:              #f5f3ff;
  --sq-text:            #1e1b4b;
  --sq-muted:           #6b7280;
  --sq-border:          #c4b5fd;
  --sq-nav-bg:          #ffffff;
  --sq-bar-bg:          #4c1d95;
  --sq-bar-color:       #e9d5ff;
  --sq-card-bg:         #ffffff;
  --sq-btn-bg:          #4c1d95;
  --sq-btn-color:       #ffffff;
  --sq-footer-bg:       #4c1d95;
  --sq-footer-text:     #e9d5ff;
  --sq-footer-heading:  #ffffff;
  --sq-footer-border:   rgba(233,213,255,0.2);
  --sq-footer-copy:     rgba(233,213,255,0.5);
  /* hero eyebrow */
  --sq-eyebrow-bg:      #eab308;
  --sq-eyebrow-color:   #1e1b4b;
  --sq-eyebrow-border:  #eab308;
  --sq-eyebrow-radius:  4px;
  /* product loop */
  --sq-price-color:        #4c1d95;
  --sq-product-btn-bg:     #7c3aed;
  --sq-product-btn-color:  #ffffff;
  /* section title underline */
  --sq-section-title-border: #eab308;
  /* category chips */
  --sq-cats-bg:     #ede9fe;
  --sq-cats-border: #ddd6fe;
  --sq-cat-color:   #4c1d95;
  --sq-cat-border:  #ddd6fe;
  --sq-cat-bg:      #ede9fe;
}

/* Google Fonts loaded via wp_enqueue_style in functions.php */

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: 'Open Sans', Arial, sans-serif;
  background: var(--sq-bg);
  color: var(--sq-text);
  /* Prevent white gap when content is shorter than viewport */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Footer at end of flex body */
#colophon { margin-top: auto; }

h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  color: var(--sq-text);
}

/* ============================================================
   ANNOUNCE BAR  (Storefront store notice)
   ============================================================ */
.woocommerce-store-notice,
.demo_store {
  background:     var(--sq-bar-bg)    !important;
  color:          var(--sq-bar-color) !important;
  font-weight:    700;
  font-size:      0.75rem;
  letter-spacing: 0.08em;
  text-align:     center;
  padding:        0.5rem;
}
.woocommerce-store-notice a,
.demo_store a {
  color:           var(--sq-bar-color) !important;
  text-decoration: underline;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  background:    var(--sq-nav-bg);
  border-bottom: 3px solid var(--sq-primary);
  box-shadow:    0 1px 4px rgba(76,29,149,0.06);
  padding:       0 !important;
  margin-bottom: 0 !important;
}
.site-branding .site-title,
.site-branding .site-title a {
  font-family:     'Montserrat', Arial, sans-serif;
  font-weight:     900;
  font-size:       1.2rem;
  color:           var(--sq-dark);
  letter-spacing:  0.08em;
  text-transform:  uppercase;
  text-decoration: none;
}
.main-navigation ul li a {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size:   0.8rem;
  font-weight: 600;
  color:       var(--sq-muted);
  transition:  color 180ms;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--sq-primary);
}
/* Cart button */
.site-header-cart .cart-contents {
  background:  var(--sq-accent);
  color:       var(--sq-dark);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   0.75rem;
  padding:     8px 16px;
  border-radius: 6px;
  text-decoration: none;
}
.site-header-cart .cart-contents:hover { opacity: 0.9; }

/* ============================================================
   WooCommerce BUTTONS
   ============================================================ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background:    var(--sq-btn-bg);
  color:         var(--sq-btn-color);
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   800;
  border-radius: 6px;
  font-size:     0.78rem;
  border: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { opacity: 0.9; }
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
  background: var(--sq-primary);
  color:      #ffffff;
}

/* ============================================================
   PRODUCTS GRID
   ============================================================ */

/* Kill Storefront clearfix pseudo-elements — they become ghost grid items in CSS grid */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.sq-section ul.products::before,
.sq-section ul.products::after,
.site-main ul.products::before,
.site-main ul.products::after {
  display: none !important;
  content:  none !important;
}

/* Replace Storefront float-grid with CSS grid matching mockup .sq-products */
.woocommerce ul.products,
.sq-section ul.products,
.site-main ul.products {
  display:               grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap:                   1rem !important;
  float:                 none !important;
  margin:                0 auto !important;
  padding:               1.25rem 0 !important;
  clear:                 both;
  max-width:             1100px;
  align-items:           start;
}
/* Reset Storefront's float-based li sizing — grid takes over */
.woocommerce ul.products li.product,
.sq-section ul.products li.product,
.site-main ul.products li.product,
.site-main ul.products.columns-3 li.product {
  width:      auto !important;
  float:      none !important;
  margin:     0 !important;
  clear:      none !important;
}

.woocommerce ul.products li.product,
.sq-section ul.products li.product,
.site-main ul.products li.product {
  background:    var(--sq-card-bg);
  border-radius: 8px;
  border:        1px solid var(--sq-border);
  padding:       1rem;
  transition:    box-shadow 200ms, transform 200ms;
}
.woocommerce ul.products li.product:hover,
.sq-section ul.products li.product:hover,
.site-main ul.products li.product:hover {
  box-shadow: 0 4px 16px rgba(124,58,237,0.10);
  transform:  translateY(-2px);
}
/* Product card thumbnail — scale to fit, never crop, neutral background */
.woocommerce ul.products li.product a img.attachment-woocommerce_thumbnail,
.sq-section ul.products li.product a img.attachment-woocommerce_thumbnail,
.site-main ul.products li.product a img.attachment-woocommerce_thumbnail {
  margin-bottom: 0;
  object-fit: contain;
  background: #ffffff;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.sq-section ul.products li.product .woocommerce-loop-product__title,
.site-main ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  font-size:   0.875rem;
  color:       var(--sq-text);
}
.woocommerce ul.products li.product .price,
.sq-section ul.products li.product .price,
.site-main ul.products li.product .price {
  color:       var(--sq-price-color);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   1.05rem;
}
/* Product loop add-to-cart button — outline style per mockup */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button,
.sq-section ul.products li.product a.button,
.sq-section ul.products li.product button.button,
.site-main ul.products li.product a.button,
.site-main ul.products li.product button.button {
  background:    transparent;
  color:         #4c1d95;
  border:        2px solid #4c1d95;
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   700;
  font-size:     0.72rem;
  padding:       6px;
  border-radius: 6px;
  width:         100%;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product button.button:hover,
.sq-section ul.products li.product a.button:hover,
.site-main ul.products li.product a.button:hover {
  background: #4c1d95;
  color:      #fff;
}
/* "Zobacz koszyk" link that appears on product card after AJAX add-to-cart */
.woocommerce ul.products li.product a.added_to_cart,
.sq-section ul.products li.product a.added_to_cart,
.site-main ul.products li.product a.added_to_cart {
  display:         block;
  margin-top:      4px;
  background:      var(--sq-accent, #eab308) !important;
  color:           #1e1b4b !important;
  border:          none !important;
  font-family:     'Montserrat', Arial, sans-serif;
  font-weight:     700;
  font-size:       0.72rem;
  text-align:      center;
  padding:         6px;
  border-radius:   6px;
  width:           100%;
  text-decoration: none;
  box-sizing:      border-box;
}
.woocommerce ul.products li.product a.added_to_cart:hover,
.sq-section ul.products li.product a.added_to_cart:hover,
.site-main ul.products li.product a.added_to_cart:hover {
  background: #ca9e04 !important;
  color:      #1e1b4b !important;
}
/* Sale badge */
.woocommerce span.onsale {
  background:    var(--sq-primary);
  border-radius: 4px;
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   800;
  font-size:     0.65rem;
  letter-spacing: 0.06em;
  min-height: unset;
  min-width:  unset;
  padding:    3px 8px;
  line-height: 1.6;
}

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product .product_title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 900;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color:       var(--sq-primary);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   1.4rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size:   0.8rem;
  color:       var(--sq-muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sq-primary); }

/* ============================================================
   BREADCRUMBS
   ============================================================ */

/* Hide breadcrumb bar on shop/category/tag archive pages — not in mockup */
.storefront-breadcrumb { display: none; }

/* Keep breadcrumb visible on single product pages — slim white bar */
.single-product .storefront-breadcrumb {
  display:       block;
  background:    #fff;
  border-bottom: none;
  padding:       0;
  margin-bottom: 0 !important;
}
.single-product .storefront-breadcrumb .col-full {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0.5rem 1.25rem;
}

.woocommerce-breadcrumb { font-size: 0.78rem; color: #6b7280; }
.woocommerce-breadcrumb a { color: #4c1d95; font-weight: 600; text-decoration: none; }
.woocommerce-breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   CART + CHECKOUT
   ============================================================ */

/* ---- Page header: white bg matching mockup ---- */
.woocommerce-cart .sq-page-hdr { background: #fff; }
.woocommerce-cart .sq-page-hdr-inner { padding-bottom: 0.5rem; }

/* Hide Storefront's duplicate page title on cart/checkout */
.woocommerce-cart .page-title,
.woocommerce-cart .entry-header,
.woocommerce-cart .entry-header .page-title,
.woocommerce-cart h1.page-title { display: none !important; }

/* Kill spacing above/below the cart content from Storefront's article/entry wrappers */
.woocommerce-cart .hentry,
.woocommerce-cart .entry-content {
  padding:    0 !important;
  margin:     0 !important;
}
/* Kill content-area margin-bottom that creates space above footer */
.woocommerce-cart .content-area,
.woocommerce-cart #primary { margin-bottom: 0 !important; }

/* Widen Storefront's col-full container on cart/checkout/account to match mockup 1100px */
.woocommerce-cart .col-full,
.woocommerce-checkout .col-full,
.woocommerce-order-pay .col-full,
.woocommerce-account .col-full {
  max-width: none;
  padding-left:  0;
  padding-right: 0;
}

/* Match checkout violet background on order-pay page */
.woocommerce-order-pay #content,
.woocommerce-order-pay .site-content,
.woocommerce-order-pay .col-full { background: var(--sq-bg) !important; }
/* Storefront sets #order_review to white — remove it */
.woocommerce-order-pay #order_review { background: transparent !important; }
/* Also ensure site-content has no side padding fighting our layout */
.woocommerce-cart .site-content,
.woocommerce-cart .site-main,
.woocommerce-cart #primary,
.woocommerce-checkout .site-content,
.woocommerce-checkout .site-main,
.woocommerce-checkout #primary,
.woocommerce-order-pay .site-content,
.woocommerce-order-pay .site-main,
.woocommerce-order-pay #primary,
.woocommerce-account .site-content,
.woocommerce-account .site-main,
.woocommerce-account #primary {
  padding:    0 !important;
  max-width:  none !important;
  width:      100% !important;
  float:      none !important;
  margin:     0 !important;
}
/* Kill Storefront's .hentry bottom margin and .site-main bottom margin on account pages */
.woocommerce-account .hentry,
.woocommerce-account .site-main {
  margin-bottom: 0 !important;
}

/* ---- Empty cart state ---- */

/*
 * When a removal notice (.woocommerce-message) is present in the notices wrapper,
 * suppress the redundant "cart is empty" box that immediately follows it.
 * The removal notice already conveys the cart state; two stacked boxes look awkward.
 * Uses :has() (baseline 2023 — all modern browsers).
 */
.woocommerce-notices-wrapper:has(.woocommerce-message) + .wc-empty-cart-message { display: none !important; }
.woocommerce-cart-empty .sq-page-hdr-subtitle { display: none; }
/* Remove default padding so notices sit flush under the header */
.woocommerce-cart-empty .entry-content,
.woocommerce-cart-empty .hentry {
  padding: 0 !important;
  margin:  0 !important;
}
/* Notices stay full-width naturally; just centre the empty message and button */
.woocommerce-cart .cart-empty {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  width:       100%;
  box-sizing:  border-box;
  margin:      0;
  padding:     0.875rem 1.5rem;
  color:       var(--sq-muted, #6b7280);
  font-size:   1rem;
}
.woocommerce-cart .cart-empty::before {
  flex-shrink: 0;
  position:    static !important;
  float:       none !important;
  top:         auto !important;
}
.woocommerce-cart .return-to-shop {
  text-align: center;
  padding:    0.75rem 0 0;
}
.woocommerce-cart .return-to-shop a.button {
  display:         inline-block;
  background:      var(--sq-primary, #4c1d95) !important;
  color:           #fff !important;
  font-family:     'Montserrat', Arial, sans-serif;
  font-weight:     700;
  font-size:       0.85rem;
  padding:         0.65rem 1.75rem;
  border-radius:   8px;
  border:          none !important;
  text-decoration: none;
}
.woocommerce-cart .return-to-shop a.button:hover {
  background: #3b1570 !important;
  color:      #fff !important;
}

/* ---- Two-column layout ---- */
.sq-cart-layout {
  display:               grid;
  grid-template-columns: 1fr 340px;
  gap:                   2rem;
  max-width:             1100px;
  margin:                2rem auto;
  padding:               0 1.25rem;
  box-sizing:            border-box;
  align-items:           start;
}

/* ---- Item rows (grid, border-bottom only — no card bg) ---- */
.sq-cart-item {
  display:               grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap:                   1rem;
  align-items:           center;
  padding:               1rem 0;
  border-bottom:         1px solid #ede9fe;
}

.sq-cart-item-img-wrap {
  width:           80px;
  height:          80px;
  background:      #ede9fe;
  border:          1px solid #ddd6fe;
  border-radius:   8px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}
.sq-cart-item-img-wrap img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.sq-cart-item-info {
  flex:        1;
  min-width:   0;
}
.sq-cart-item-name {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size:   0.88rem;
  color:       var(--sq-text);
  margin-bottom: 0.2rem;
}
.sq-cart-item-name a { color: inherit; text-decoration: none; }
.sq-cart-item-name a:hover { color: var(--sq-accent); }

.sq-cart-item-meta {
  font-size:  0.72rem;
  color:      #6b7280;
  margin-bottom: 0.3rem;
}
.sq-cart-item-price-unit {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size:   0.82rem;
  font-weight: 600;
  color:       #1e1b4b;
}
.sq-per-unit { font-weight: 400; color: #1e1b4b; }

/* Qty stepper */
.sq-cart-item-qty-ctrl {
  display:       flex;
  align-items:   center;
  border:        1px solid #ddd6fe;
  border-radius: 6px;
  overflow:      hidden;
  flex-shrink:   0;
}
.sq-cart-item-qty-btn {
  width:       30px;
  height:      30px;
  background:  #ede9fe;
  border:      none;
  font-size:   1rem;
  font-weight: 600;
  color:       #4c1d95;
  cursor:      pointer;
  padding:     0;
  line-height: 1;
}
.sq-cart-item-qty-btn:hover { background: #ddd6fe; }
.sq-cart-item-qty-ctrl .quantity { display: flex; align-items: center; }
.sq-cart-item-qty-ctrl .qty {
  width:         36px;
  text-align:    center;
  border:        none;
  border-left:   1px solid #ddd6fe;
  border-right:  1px solid #ddd6fe;
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   700;
  font-size:     0.85rem;
  color:         #1e1b4b;
  background:    transparent;
  padding:       0;
  height:        30px;
  -moz-appearance: textfield;
}
.sq-cart-item-qty-ctrl .qty::-webkit-inner-spin-button,
.sq-cart-item-qty-ctrl .qty::-webkit-outer-spin-button { -webkit-appearance: none; }

.sq-cart-item-total {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   0.95rem;
  color:       var(--sq-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.sq-cart-item-remove {
  font-size:       1.2rem;
  color:           #d1d5db;
  text-decoration: none;
  flex-shrink:     0;
  line-height:     1;
  transition:      color 0.15s;
}
.sq-cart-item-remove:hover { color: #ef4444; text-decoration: none; }

.sq-continue-shopping {
  display:         inline-block;
  margin-top:      1rem;
  font-size:       0.82rem;
  color:           #4c1d95;
  text-decoration: none;
  font-weight:     600;
}
.sq-continue-shopping:hover { text-decoration: underline; }

/* ---- Summary sidebar ---- */
.sq-cart-summary-col { position: sticky; top: 1.5rem; }

.sq-cart-summary-box {
  background:    #fff;
  border:        1px solid #ddd6fe;
  border-top:    3px solid #4c1d95;
  border-radius: 10px;
  padding:       1.5rem;
}

.sq-summary-title {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    800;
  font-size:      0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          #4c1d95;
  margin-bottom:  1rem;
  padding-bottom: 0.625rem;
  border-bottom:  2px solid #ede9fe;
}

.sq-summary-row {
  display:         flex;
  justify-content: space-between;
  font-size:       0.875rem;
  color:           #4b5563;
  padding:         0.375rem 0;
}
.sq-summary-row span:last-child { font-weight: 600; color: #1e1b4b; }
.sq-summary-row--discount { color: #16a34a; font-weight: 700; }
.sq-discount-val { color: #16a34a; }
.sq-shipping-tbd { color: #9ca3af; }

/* Kill WC's default shop_table inside totals */
.sq-cart-summary-box .shop_table { display: none !important; }

.sq-summary-divider {
  height:     1px;
  background: #ede9fe;
  margin:     0.75rem 0;
}

.sq-coupon-form {
  display: flex;
  gap:     0.5rem;
  margin:  0.5rem 0 0;
}
.sq-coupon-input {
  flex:          1;
  border:        1px solid #ddd6fe;
  border-radius: 6px;
  padding:       7px 10px;
  font-size:     0.8rem;
  color:         var(--sq-text);
  outline:       none;
}
.sq-coupon-input:focus { border-color: var(--sq-accent); }
.sq-coupon-btn {
  background:    #ede9fe;
  color:         #4c1d95;
  border:        1px solid #c4b5fd;
  border-radius: 6px;
  padding:       7px 14px;
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   700;
  font-size:     0.78rem;
  cursor:        pointer;
  white-space:   nowrap;
}
.sq-coupon-btn:hover { opacity: 0.88; }

.sq-summary-total-row {
  display:         flex;
  justify-content: space-between;
  padding-top:     0.875rem;
  border-top:      2px solid #eab308;
  margin-top:      0.5rem;
}
.sq-summary-total-label {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   0.95rem;
  color:       #1e1b4b;
}
.sq-summary-total-value {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 900;
  font-size:   1.2rem;
  color:       #4c1d95;
  text-align:  right;
}
/* WC wraps total in .woocommerce-Price-amount — inherit our styles */
.sq-summary-total-value .woocommerce-Price-amount,
.sq-summary-total-value .amount {
  font-family: inherit;
  font-weight: inherit;
  font-size:   inherit;
  color:       inherit;
}
/* Hide WC's "includes X VAT" suffix — we show our own note below */
.sq-summary-total-value small,
.sq-summary-total-value .includes_tax { display: none !important; }

.sq-vat-note {
  font-size:  0.72rem;
  color:      #9ca3af;
  margin-top: 0.25rem;
}

.sq-checkout-wrap .checkout-button,
.sq-checkout-wrap a.button {
  display:         block !important;
  width:           100% !important;
  text-align:      center !important;
  background:      #eab308 !important;
  color:           #1e1b4b !important;
  font-family:     'Montserrat', Arial, sans-serif !important;
  font-weight:     800 !important;
  font-size:       0.9rem !important;
  padding:         13px !important;
  border-radius:   8px !important;
  text-decoration: none !important;
  margin-top:      1rem !important;
  border:          none !important;
  cursor:          pointer !important;
  box-sizing:      border-box !important;
}
.sq-checkout-wrap .checkout-button:hover,
.sq-checkout-wrap a.button:hover { opacity: 0.9; }

.sq-trust-line {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  margin-top:      0.875rem;
  font-size:       0.72rem;
  color:           #9ca3af;
}
.sq-payment-badges {
  display:         flex;
  gap:             0.4rem;
  justify-content: center;
  flex-wrap:       wrap;
  margin-top:      0.6rem;
}
.sq-badge {
  font-size:     0.65rem;
  background:    #f3f4f6;
  padding:       3px 8px;
  border-radius: 3px;
  color:         #6b7280;
  font-weight:   700;
  font-family:   'Montserrat', Arial, sans-serif;
}

/* Hide WC cross-sells on cart page */
.woocommerce-cart .cross-sells { display: none !important; }

/* ---- Checkout button from WC default (non-sq-checkout-wrap context) ---- */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  background:    var(--sq-yellow);
  color:         var(--sq-dark);
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   800;
  border-radius: 8px;
  font-size:     0.9rem;
  padding:       14px 28px;
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */

/* Kill Storefront container constraints */
.woocommerce-checkout .hentry,
.woocommerce-checkout .entry-content,
.woocommerce-order-pay .hentry,
.woocommerce-order-pay .entry-content {
  padding: 0 !important;
  margin:  0 !important;
}
.woocommerce-checkout .content-area,
.woocommerce-checkout #primary,
.woocommerce-order-pay .content-area,
.woocommerce-order-pay #primary { margin-bottom: 0 !important; }

/* Two-column grid layout */
.sq-checkout-layout {
  display:               grid;
  grid-template-columns: 1fr 380px;
  gap:                   2.5rem;
  max-width:             1100px;
  margin:                0 auto;
  padding:               2rem 1.25rem 3rem;
  align-items:           start;
  box-sizing:            border-box;
}

/* Fieldset cards (billing, shipping, notes) — compact gap */
.woocommerce-checkout .sq-fieldset {
  background:    #fff;
  border:        1px solid #ddd6fe;
  border-radius: 10px;
  padding:       1.25rem;
  margin-bottom: 0.75rem;
}
.woocommerce-checkout .sq-fieldset-title {
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   800;
  font-size:     0.875rem;
  color:         #4c1d95;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin:        0 0 1.25rem;
  padding-bottom: 0.625rem;
  border-bottom: 3px solid #eab308;
}

/* WC form fields — map to mockup sq-input style */
.woocommerce-checkout .woocommerce-input-wrapper { display: block; }
.woocommerce-checkout .form-row { margin-bottom: 0.875rem; }
.woocommerce-checkout p.form-row label,
.woocommerce-checkout .woocommerce-form-row label {
  display:     block;
  font-size:   0.78rem;
  font-weight: 600;
  color:       #4b5563;
  margin-bottom: 4px;
}
.woocommerce-checkout p.form-row label .required,
.woocommerce-checkout .woocommerce-form-row label .required { color: #dc2626; }
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width:       100% !important;
  border:      1.5px solid #ddd6fe !important;
  border-radius: 6px !important;
  padding:     9px 11px !important;
  font-size:   0.875rem !important;
  color:       #1e1b4b !important;
  background:  #fff !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  box-sizing:  border-box !important;
  box-shadow:  none !important;
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline:    none !important;
  border-color: #4c1d95 !important;
  box-shadow: 0 0 0 3px rgba(76,29,149,0.1) !important;
}
.woocommerce-checkout textarea { height: 80px; resize: vertical; }

/* Side-by-side first/last name etc. (WC adds form-row-first / form-row-last) */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
  width:   calc(50% - 0.4375rem) !important;
  float:   left !important;
  clear:   none !important;
}
.woocommerce-checkout .form-row-first { margin-right: 0.875rem !important; }
.woocommerce-checkout .form-row-last  { clear: right !important; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper::after {
  content: ''; display: table; clear: both;
}
.woocommerce-checkout .form-row-wide { width: 100% !important; float: none !important; clear: both !important; }

/* Shipping field wrapper: grid layout — survives address-i18n.js class rewrites */
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  gap: 0 0.875rem;
  float: none !important;
}
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > * {
  width: 100% !important;
  float: none !important;
  clear: none !important;
  margin-right: 0 !important;
}
/* Country and address_1 span full width */
.woocommerce-checkout #shipping_country_field,
.woocommerce-checkout #shipping_address_1_field,
.woocommerce-checkout #shipping_state_field {
  grid-column: 1 / -1;
}
/* City left, postcode right — explicit columns, independent of DOM order set by address-i18n.js */
.woocommerce-checkout #shipping_city_field     { grid-column: 1; }
.woocommerce-checkout #shipping_postcode_field { grid-column: 2; }

/* Hide WC's own section headings (we render our own) */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3 { display: none !important; }
/* Hide "ship to a different address?" checkbox label if shipping section is already shown */
.woocommerce-checkout .woocommerce-shipping-fields > h3 { display: none !important; }

/* ---- Sidebar: order review items box ---- */
.sq-order-items {
  background:   #fff;
  border:        1px solid #ddd6fe;
  border-top:    3px solid #4c1d95;
  border-radius: 10px;
  padding:       1.5rem;
  margin-bottom: 1.25rem;
}
.sq-order-items .sq-summary-title {
  font-family:  'Montserrat', Arial, sans-serif;
  font-weight:  800;
  font-size:    0.875rem;
  color:        #4c1d95;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid #ede9fe;
}
.sq-order-item {
  display:     flex;
  gap:         0.875rem;
  padding:     0.5rem 0;
  border-bottom: 1px solid #ede9fe;
  align-items: center;
}
.sq-order-item:last-of-type { border-bottom: none; }
.sq-order-item-img {
  width:        44px;
  height:       44px;
  background:   #ede9fe;
  border-radius: 6px;
  border:       1px solid #c4b5fd;
  flex-shrink:  0;
  overflow:     hidden;
  display:      flex;
  align-items:  center;
  justify-content: center;
}
.sq-order-item-img img { width: 44px; height: 44px; object-fit: cover; }
.sq-order-item-img-inner { width: 28px; height: 28px; background: #c4b5fd; border-radius: 4px; opacity: 0.5; }
.sq-order-item-info { flex: 1; }
.sq-order-item-name { font-size: 0.82rem; font-weight: 600; color: #1e1b4b; }
.sq-order-item-qty  { font-size: 0.72rem; color: #9ca3af; }
.sq-order-item-price {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size:   0.875rem;
  color:       #4c1d95;
  white-space: nowrap;
}

/* Divider + rows shared with cart summary */
.sq-order-items .sq-summary-divider { height: 1px; background: #ede9fe; margin: 0.5rem 0; }
.sq-order-items .sq-summary-row {
  display:         flex;
  justify-content: space-between;
  font-size:       0.875rem;
  color:           #4b5563;
  padding:         0.375rem 0;
}
.sq-order-items .sq-summary-row span:last-child { font-weight: 600; color: #1e1b4b; }
.sq-order-items .sq-summary-total-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  padding:         0.75rem 0 0.25rem;
  border-top:      2px solid #eab308;
  margin-top:      0.25rem;
}
.sq-order-items .sq-summary-total-label {
  font-family:  'Montserrat', Arial, sans-serif;
  font-weight:  700;
  font-size:    0.875rem;
  color:        #1e1b4b;
}
.sq-order-items .sq-summary-total-value {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 900;
  font-size:   1.2rem;
  color:       #4c1d95;
}
/* Hide WC's "includes tax" note in total */
.sq-order-items .includes_tax,
.sq-order-items .woocommerce-Price-amount small { display: none !important; }

/* ---- Shipping row inside checkout review ---- */
.sq-checkout-shipping-row { display: block; }
.sq-checkout-shipping-row .shipping th,
.sq-checkout-shipping-row .shipping td { display: inline; padding: 0; }
.sq-checkout-shipping-row .shipping { display: flex; justify-content: space-between; width: 100%; font-size: 0.875rem; }

/* ---- Shipping method cards (same card style as payment) ---- */
.sq-shipping-methods { display: flex; flex-direction: column; gap: 0.625rem; }
.sq-shipping-methods .sq-payment-method > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

/* Generic sq-payment-method card — used for shipping method cards */
.woocommerce-checkout .sq-payment-method {
  border:        2px solid #ddd6fe;
  border-radius: 8px;
  padding:       0.75rem 1rem;
  cursor:        pointer;
  display:       block;
}
.woocommerce-checkout .sq-payment-method:has(input:checked) {
  border-color: #4c1d95;
  background:   #f5f3ff;
}
.woocommerce-checkout .sq-payment-method input[type="radio"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.woocommerce-checkout .sq-payment-method .sq-payment-method-label {
  font-weight: 700;
  font-size:   0.875rem;
  color:       #1e1b4b;
}
.woocommerce-checkout .sq-payment-method .sq-payment-method-desc {
  font-size:  0.78rem;
  color:      #6b7280;
  margin-top: 2px;
}

/* ---- Payment section: style WC's native <ul> as cards, inside our fieldset ---- */
/* Payment is now wrapped in .sq-fieldset-payment — remove #payment's own box styling */
.woocommerce-checkout .sq-fieldset-payment { padding-bottom: 0; }
.woocommerce-checkout .sq-fieldset-payment #payment {
  background:    transparent;
  border:        none;
  border-radius: 0;
  padding:       0;
  margin:        0;
}
/* Hide WC's own "Payment" h3 inside #payment — we use sq-fieldset-title */
.woocommerce-checkout #payment > h3 { display: none !important; }
/* Hide WC's "your order" heading above payment */
.woocommerce-checkout #order_review_heading { display: none !important; }

/* Override WC's float/width on #order_review inside our grid sidebar */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  width:   100% !important;
  float:   none !important;
  padding: 0 !important;
  margin:  0 !important;
}

.woocommerce-checkout .wc_payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.woocommerce-checkout .wc_payment_method { border: 2px solid #ddd6fe; border-radius: 8px; padding: 0.875rem 1rem; cursor: pointer; }
.woocommerce-checkout .wc_payment_method:has(input[type="radio"]:checked) { border-color: #4c1d95; background: #f5f3ff; }
.woocommerce-checkout .wc_payment_method > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.woocommerce-checkout .wc_payment_method > label {
  font-weight: 700;
  font-size:   0.875rem;
  color:       #1e1b4b;
  cursor:      pointer;
  display:     block;
}
.woocommerce-checkout .payment_box {
  font-size:  0.78rem;
  color:      #6b7280;
  margin-top: 4px;
  padding:    0;
}
/* "Payment method" label above the list — use same sq-fieldset-title style */
.woocommerce-checkout #payment > h3 {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    800;
  font-size:      0.875rem;
  color:          #4c1d95;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin:         0 0 1.25rem;
  padding-bottom: 0.625rem;
  border-bottom:  3px solid #eab308;
}

/* Place order button — in sidebar (hidden version in payment.php is display:none) */
.woocommerce-checkout .sq-place-order-btn {
  display:       block;
  width:         100%;
  background:    #eab308;
  color:         #1e1b4b;
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   800;
  font-size:     1rem;
  padding:       14px;
  border-radius: 8px;
  border:        none;
  cursor:        pointer;
  text-align:    center;
  margin-top:    1rem;
}
.woocommerce-checkout .sq-place-order-btn:hover { background: #ca8a04; }

/* Terms notice */
.woocommerce-checkout .sq-terms-notice {
  font-size:  0.72rem;
  color:      #9ca3af;
  text-align: center;
  margin-top: 0.75rem;
  line-height: 1.6;
}
.woocommerce-checkout .sq-terms-notice a { color: inherit; }

/* Hide WC's injected privacy policy notice on both checkout and order-pay — we use sq-terms-notice instead */
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-order-pay .woocommerce-privacy-policy-text { display: none !important; }

/* Secure badge */
.sq-secure-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  font-size:       0.72rem;
  color:           #9ca3af;
  margin-top:      0.5rem;
}

/* Payment badges */
.sq-payment-badges {
  display:         flex;
  gap:             0.5rem;
  justify-content: center;
  margin-top:      0.875rem;
  flex-wrap:       wrap;
}
.sq-badge {
  font-size:   0.65rem;
  background:  rgba(255,255,255,0.08);
  border:      1px solid #e5e7eb;
  padding:     3px 8px;
  border-radius: 3px;
  color:       #9ca3af;
  font-weight: 700;
}
.woocommerce-checkout .sq-badge { border: none; background: rgba(255,255,255,0.08); }

/* Compact WC native payment method cards */
.woocommerce-checkout .wc_payment_method { padding: 0.625rem 0.875rem; }
.woocommerce-checkout .payment_box { font-size: 0.75rem; color: #6b7280; margin-top: 2px; padding: 0; }
.woocommerce-checkout .payment_box p { margin: 0; }

/* Terms notice */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size:  0.72rem;
  color:      #9ca3af;
  text-align: center;
  margin-top: 0.75rem;
  line-height: 1.6;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: inherit; }

/* Trust / secure badge row (reuse cart styles already defined) */

/* Page header — same as cart */
.woocommerce-checkout .sq-page-hdr { background: #fff; }
.woocommerce-checkout .sq-page-hdr-inner { padding-bottom: 0.5rem; }
.woocommerce-checkout .entry-header,
.woocommerce-checkout h1.page-title { display: none !important; }

/* ============================================================
   SECTION TITLES
   ============================================================ */
.storefront-product-section > h2,
.storefront-bestsellers h2,
.storefront-recent-products h2,
.storefront-featured-products h2,
.storefront-on-sale h2 {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    800;
  font-size:      0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--sq-text);
  padding-bottom: 0.4rem;
  border-bottom:  2px solid var(--sq-section-title-border);
  display:        inline-block;
}

/* ============================================================
   SQ-SECTION  (front-page product sections)
   ============================================================ */
.sq-section {
  padding:    2.5rem 1.25rem;
  background: var(--sq-bg);
}
.sq-section.white { background: #fff; }
.sq-section-hdr {
  max-width:       1100px;
  margin:          0 auto 1.25rem;
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
}
.sq-section-title {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    800;
  font-size:      0.95rem;
  color:          var(--sq-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display:        flex;
  align-items:    center;
  gap:            10px;
}
.sq-section-title::after {
  content:    '';
  flex:       1;
  height:     2px;
  background: linear-gradient(to right, var(--sq-accent), transparent);
}
.sq-section-link {
  font-size:      0.78rem;
  color:          var(--sq-primary);
  font-weight:    700;
  text-decoration: none;
  white-space:    nowrap;
  flex-shrink:    0;
}
.sq-section-link:hover { text-decoration: underline; }
/* Product grid inside sq-section — centred */
.sq-section ul.products {
  margin-left:  auto !important;
  margin-right: auto !important;
}

/* ============================================================
   WC NOTICES (errors, info, success)
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  background: #1e1b4b !important;
  color:      #e9d5ff !important;
  border-top-color: var(--sq-primary) !important;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--sq-accent) !important;
}
.woocommerce-error { border-top-color: #dc2626 !important; }
.woocommerce-error::before { color: #dc2626 !important; }
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--sq-accent) !important;
}
/* "Zobacz koszyk" / "Kontynuuj zakupy" button inside notices */
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button {
  display:         inline-block;
  float:           right;
  background:      var(--sq-accent, #eab308) !important;
  color:           #1e1b4b !important;
  font-family:     'Montserrat', Arial, sans-serif !important;
  font-weight:     700 !important;
  font-size:       0.72rem !important;
  text-transform:  none;
  letter-spacing:  0;
  padding:         0.35rem 0.9rem !important;
  border-radius:   6px !important;
  border:          none !important;
  text-decoration: none !important;
  line-height:     1.5 !important;
  margin-left:     1rem;
  white-space:     nowrap;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover {
  background:  #ca9e04 !important;
  color:       #1e1b4b !important;
  text-decoration: none !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background:  var(--sq-footer-bg);
  color:       var(--sq-footer-text);
  border-top:  none;
}
.site-footer .widget-title {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    800;
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--sq-footer-heading);
  border-bottom:  1px solid rgba(255,255,255,0.10);
  padding-bottom: 0.5rem;
}
.site-footer a {
  color:           var(--sq-footer-text);
  text-decoration: none;
  font-size:       0.82rem;
}
.site-footer a:hover { color: var(--sq-accent); }
.site-info {
  border-top: 1px solid rgba(255,255,255,0.10);
  color:      rgba(255,255,255,0.50);
  font-size:  0.75rem;
}
.site-info a { color: rgba(255,255,255,0.50); }

/* ============================================================
   SQ-NAV  (header.php override)
   ============================================================ */
.sq-nav {
  position:    sticky;
  top:         0;
  z-index:     99;
  background:  var(--sq-nav-bg);
  border-bottom: 3px solid var(--sq-primary);
}
.admin-bar .sq-nav { top: 32px; }

.sq-nav-inner {
  max-width:      1100px;
  margin:         0 auto;
  padding:        0 24px;
  height:         58px;
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            16px;
}

/* Logo */
.sq-logo {
  font-family:    'Montserrat', Arial, sans-serif !important;
  font-weight:    900 !important;
  font-size:      1.2rem;
  color:          var(--sq-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  flex-shrink:    0;
}
.sq-logo span { color: var(--sq-primary); }
.sq-logo:hover { text-decoration: none; }

/* Reset Storefront margin/padding on nav li without breaking flex layout */
.sq-nav-menu li {
  display: list-item;
  float:   none;
  margin:  0;
  padding: 0;
}

/* Nav links */
.sq-nav-links {
  flex:            1;
  display:         flex;
  justify-content: center;
}
.sq-nav-menu {
  display:    flex;
  gap:        1.5rem;
  list-style: none;
  margin:     0;
  padding:    0;
}
.sq-nav-menu li { margin: 0; padding: 0; }
.sq-nav-menu li a {
  font-family:     'Open Sans', Arial, sans-serif;
  font-size:       0.8rem;
  font-weight:     600;
  color:           var(--sq-muted);
  text-decoration: none;
  padding:         4px 0;
  transition:      color 180ms, font-weight 180ms;
  display:         block;
}
.sq-nav-menu li a:hover,
.sq-nav-menu li.current-menu-item > a,
.sq-nav-menu li.current_page_item > a {
  color:       var(--sq-primary);
  font-weight: 700;
}

/* Cart — styled via .sq-cart-btn in NAV ACTIONS section below */

/* ============================================================
   CATEGORY CHIPS BAR  (template-parts/sq-cats.php)
   ============================================================ */
.sq-cats {
  background:    var(--sq-cats-bg);
  border-bottom: 1px solid var(--sq-cats-border);
}
.sq-cats-inner {
  max-width:   1100px;
  margin:      0 auto;
  padding:     0.875rem 24px;
  display:     flex;
  gap:         0.5rem;
  flex-wrap:   wrap;
  align-items: center;
}
.sq-cat {
  font-size:       0.75rem;
  font-weight:     600;
  color:           var(--sq-cat-color) !important;
  padding:         5px 14px;
  border-radius:   99px;
  border:          1px solid var(--sq-cat-border);
  background:      var(--sq-cat-bg);
  text-decoration: none !important;
  white-space:     nowrap;
  transition:      background 120ms, color 120ms, border-color 120ms;
}
.sq-cat:hover,
.sq-cat.active {
  background:      var(--sq-primary) !important;
  color:           #fff !important;
  border-color:    var(--sq-primary) !important;
}
.sq-cat-sale {
  color:           var(--sq-accent) !important;
  border-color:    var(--sq-accent);
}
.sq-cat-sale:hover {
  background:      var(--sq-accent) !important;
  border-color:    var(--sq-accent) !important;
  color:           var(--sq-dark) !important;
}
.sq-cats-sub {
  max-width:   1100px;
  margin:      0 auto;
  padding:     0.5rem 24px 0.625rem;
  display:     flex;
  gap:         0.4rem;
  flex-wrap:   wrap;
  align-items: center;
  border-top:  1px solid var(--sq-cats-border);
}
.sq-cat-sub {
  font-size:    0.7rem;
  padding:      3px 11px;
  opacity:      0.85;
}
.sq-cat-sub:hover,
.sq-cat-sub.active {
  opacity: 1;
}

/* ============================================================
   SQ-HERO  (template-parts/sq-hero.php)
   ============================================================ */
.sq-hero {
  background:    var(--sq-card-bg);
  border-bottom: 2px solid rgba(124,58,237,0.08);
  padding:       40px 24px;
}
.sq-hero-inner {
  max-width:             1100px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 280px;
  gap:                   2.5rem;
  align-items:           center;
}
.sq-hero-content { flex: 1; }

.sq-hero-eyebrow {
  display:        inline-block;
  background:     var(--sq-eyebrow-bg);
  color:          var(--sq-eyebrow-color);
  font-size:      0.7rem;
  font-weight:    700;
  padding:        3px 12px;
  border-radius:  var(--sq-eyebrow-radius);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom:  10px;
  border:         1px solid var(--sq-eyebrow-border);
}
/* alias kept for any legacy references */
.sq-hero-tag { display: none; }
.sq-hero-h1 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size:   clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 900;
  color:       var(--sq-primary);
  line-height: 1.1;
  margin:      0 0 0.875rem;
}
.sq-hero-h1 span,
.sq-hero-h1 em {
  font-style: normal;
  background: var(--sq-accent);
  color: var(--sq-dark);
  padding: 0 6px 2px;
  border-radius: 4px;
  display: inline;
}
.sq-hero-sub {
  font-size:   0.925rem;
  color:       var(--sq-muted);
  line-height: 1.75;
  max-width:   440px;
  margin:      0 0 1.5rem;
}
.sq-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }


/* HERO BUTTONS — v2sk4 fidelity */
.sq-hero-btn {
  background: #4c1d95;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 12px 26px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.sq-hero-btn:hover {
  opacity: 0.85;
  text-decoration: none;
}
.sq-hero-btn-alt {
  background: #eab308;
  color: #1e1b4b;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.sq-hero-btn-alt:hover {
  opacity: 0.85;
  text-decoration: none;
}

.sq-hero-visual {
  background:    linear-gradient(135deg, #f5f3ff, #ede9fe);
  border-radius: 12px;
  border:        1px solid #ddd6fe;
  height:        200px;
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.sq-hero-visual-inner {
  width:         80px;
  height:        80px;
  background:    var(--sq-primary);
  border-radius: 12px;
  opacity:       0.2;
}
/* Price badge children — hidden by default, revealed by sk5 */
.sq-hero-visual-label,
.sq-hero-visual-price,
.sq-hero-visual-sub { display: none; }

/* ============================================================
   SQ-PRODUCT  (woocommerce/content-product.php override)
   ============================================================ */
/* Reset WC default li.product padding/centering that fights our layout */
.woocommerce ul.products li.product.sq-product,
.sq-section ul.products li.product.sq-product {
  padding:    0;
  text-align: left;
  background: var(--sq-card-bg);
  border:     1px solid var(--sq-border);
  border-radius: 10px;
  overflow:   hidden;
  display:    flex;
  flex-direction: column;
  transition: box-shadow 200ms, transform 200ms;
}
.woocommerce ul.products li.product.sq-product:hover {
  box-shadow: 0 4px 16px rgba(124,58,237,0.10);
  transform:  translateY(-2px);
}

.sq-product-link {
  display:        block;
  text-decoration: none;
  color:          inherit;
}
.sq-product-link:hover { text-decoration: none; }

.sq-product-img {
  background: #ffffff;
  height:     160px;
  display:    flex;
  align-items: center;
  justify-content: center;
  overflow:   hidden;
  position:   relative;
}
.sq-product-img img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  padding:    12px;
}
/* WC sale badge inside our image block */
.sq-product-img .onsale {
  top:    8px;
  left:   8px;
  right:  auto;
}

.sq-product-body { padding: 0.875rem 1rem 0; }

.sq-product-cat {
  display:        inline-block;
  background:     #eab308;
  color:          #1e1b4b;
  font-size:      0.6rem;
  font-weight:    800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        2px 7px;
  border-radius:  3px;
  margin-bottom:  6px;
}

.sq-product-name {
  font-family:   'Montserrat', Arial, sans-serif;
  font-size:     0.875rem;
  font-weight:   600;
  color:         #1e1b4b;
  margin:        0 0 0.5rem;
  line-height:   1.4;
}

/* Pricing wrapper: price + old price + badge inline */
.sq-product-pricing {
  display:       flex;
  align-items:   center;
  gap:           6px;
  flex-wrap:     wrap;
  margin-bottom: 0; /* no gap before ATC — actions div provides its own padding */
}
/* Sale badge (inline in price row, matches mockup) */
.sq-product-badge {
  background:   #eab308;
  color:        #1e1b4b;
  font-size:    0.6rem;
  font-weight:  800;
  padding:      2px 6px;
  border-radius: 3px;
  white-space:  nowrap;
}

/* WC outputs <ins>new</ins> and optionally <del>old</del> inside .price */
.sq-product-price .price,
.single-product section.related ul.products li.product .price,
.single-product section.upsells ul.products li.product .price {
  margin-bottom: 0 !important; /* WC sets margin-bottom:.5em on .price in loop */
}
.sq-product-price .price {
  font-family:  'Montserrat', Arial, sans-serif;
  font-size:    1.05rem;
  font-weight:  800;
  color:        #4c1d95;
  display:      flex;
  align-items:  baseline;
  gap:          5px;
  margin:       0;
}
.sq-product-price .price ins  { text-decoration: none; order: 0; }
.sq-product-price .price del  { font-size: 0.78rem; color: #9ca3af; order: 1; }

.sq-product-actions {
  padding: 0 1rem 1rem;
}
.sq-product-actions .button,
.sq-product-actions .add_to_cart_button {
  display:         block;
  width:           100%;
  text-align:      center;
  background:      transparent;
  color:           #4c1d95;
  font-family:     'Montserrat', Arial, sans-serif;
  font-weight:     700;
  font-size:       0.72rem;
  padding:         6px 12px;
  border-radius:   6px;
  letter-spacing:  0.04em;
  text-decoration: none;
  border:          2px solid #4c1d95;
  cursor:          pointer;
  transition:      background 150ms, color 150ms;
  box-sizing:      border-box;
}
.sq-product-actions .button:hover,
.sq-product-actions .add_to_cart_button:hover {
  background: #4c1d95;
  color:      #fff;
}
/* Out-of-stock / disabled state — matches mockup .sq-product-unavailable */
.sq-product-actions .button.disabled,
.sq-product-actions .button.disabled:hover {
  background:  #f3f4f6;
  color:       #9ca3af;
  border-color: #f3f4f6;
  cursor:      not-allowed;
  pointer-events: none;
}



/* ============================================================
   NAV ACTIONS (.sq-nav-actions, .sq-account-link, .sq-cart-btn)
   ============================================================ */
.sq-nav-actions {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-shrink: 0;
}
.sq-account-link {
  font-size:      0.75rem;
  font-weight:    600;
  color:          var(--sq-muted);
  text-decoration: none;
  transition:     color 150ms;
}
.sq-account-link:hover { color: var(--sq-primary); text-decoration: none; }

.sq-cart-btn {
  background:     var(--sq-accent);
  color:          var(--sq-dark);
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    800;
  font-size:      0.75rem;
  padding:        8px 16px;
  border-radius:  6px;
  text-decoration: none;
  display:        flex;
  align-items:    center;
  gap:            6px;
  transition:     opacity 150ms;
}
.sq-cart-btn:hover { opacity: 0.85; text-decoration: none; color: var(--sq-dark); }

.sq-cart-count {
  background:    var(--sq-accent);
  color:         var(--sq-dark);
  font-size:     0.65rem;
  font-weight:   800;
  min-width:     18px;
  height:        18px;
  border-radius: 99px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       0 4px;
  line-height:   1;
}

/* ============================================================
   SQ-LOGO accent spans  (header + footer)
   ============================================================ */
.sq-logo .sq-side  { color: var(--sq-primary); }
.sq-logo .sq-accent  { color: var(--sq-primary); }
.sq-logo-dot {
  display:        inline-block;
  width:          7px;
  height:         7px;
  background:     var(--sq-accent);
  border-radius:  50%;
  margin-left:    2px;
  vertical-align: middle;
}
.sq-footer-logo .sq-accent { color: var(--sq-accent); }

/* ============================================================
   FOOTER
   ============================================================ */
.sq-footer {
  background:  var(--sq-footer-bg);
  color:       var(--sq-footer-text);
  /* Reset Storefront's .site-footer padding (1.618em 0 3.706em) */
  padding:     0;
  margin-top:  0;
}

.sq-footer-inner {
  max-width:   1100px;
  margin:      0 auto;
  padding:     3rem 24px 2rem;
  display:     grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap:         2.5rem;
}
@media (max-width: 900px) {
  .sq-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .sq-footer-inner { grid-template-columns: 1fr; }
}

.sq-footer .sq-footer-logo {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    900;
  font-size:      1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--sq-footer-heading) !important;
  text-decoration: none !important;
  display:        inline-block;
  margin-bottom:  0.75rem;
}
.sq-footer .sq-footer-logo:hover { color: var(--sq-footer-heading) !important; text-decoration: none !important; }

.sq-footer .sq-footer-tagline {
  font-size:   0.82rem;
  line-height: 1.7;
  color:       var(--sq-footer-text);
  max-width:   280px;
  margin:      0;
}

.sq-footer .sq-footer-col-title {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    700;
  font-size:      0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--sq-accent);
  margin-bottom:  0.875rem;
}

/* Footer nav menus — WP outputs <ul> */
.sq-footer-nav {
  list-style:    none;
  margin:        0;
  padding:       0;
  display:       flex;
  flex-direction: column;
  gap:           0.4rem;
}
.sq-footer-nav li { margin: 0; padding: 0; }
.sq-footer .sq-footer-nav a,
.sq-footer .sq-footer-nav-link {
  font-size:       0.82rem;
  color:           var(--sq-footer-text) !important;
  text-decoration: none !important;
  transition:      color 150ms;
  display:         block;
}
.sq-footer .sq-footer-nav a:hover,
.sq-footer .sq-footer-nav-link:hover {
  color:           #fff !important;
  text-decoration: none !important;
}

.sq-footer .sq-footer-bottom {
  max-width:      1100px;
  margin:         0 auto;
  padding:        1.5rem 24px 1rem;
  display:        flex;
  justify-content: space-between;
  align-items:    center;
  flex-wrap:      wrap;
  gap:            0.5rem;
  border-top:     1px solid var(--sq-footer-border);
  font-size:      0.75rem;
  color:          var(--sq-footer-copy);
}

/* Suppress Storefront's own site-footer widget output */
.site-footer > .col-full { display: none; }

/* Suppress sidebar on archive + single (our templates don't call it,
   but belt-and-suspenders in case any hook fires it) */
.blog #secondary,
.archive #secondary,
.search #secondary,
.single #secondary { display: none; }

.blog #primary.sq-page-content,
.archive #primary.sq-archive-content,
.single #primary.sq-page-content { float: none; width: 100%; }

/* ============================================================
   ARCHIVE / BLOG LIST
   ============================================================ */
.sq-page-hdr {
  background:    var(--sq-card-bg);
  border-bottom: 3px solid #4c1d95;
}
.sq-page-hdr-inner {
  max-width: 1100px;
  margin:    0 auto;
  padding:   1.5rem 24px;
}
.sq-page-title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   1.4rem;
  color:       #4c1d95;
  margin:      0 0 0.25rem;
}
.sq-page-desc,
.sq-page-hdr .woocommerce-result-count {
  font-size: 0.82rem;
  color:     #6b7280;
  margin:    0;
  float:     none;
}

.sq-archive-content {
  max-width: 1100px;
  margin:    0 auto;
  padding:   2rem 24px 3rem;
}

.sq-post-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   1.5rem;
}

.sq-post-card {
  background:    var(--sq-card-bg);
  border:        1px solid var(--sq-border);
  border-radius: 10px;
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  transition:    box-shadow 200ms, transform 200ms;
  margin:        0;
}
.sq-post-card:hover {
  box-shadow: 0 4px 16px rgba(124,58,237,0.10);
  transform:  translateY(-2px);
}
.sq-post-thumb-link { display: block; }
.sq-post-thumb {
  width:      100%;
  height:     180px;
  object-fit: cover;
  display:    block;
}
.sq-post-card-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sq-post-meta {
  display:     flex;
  gap:         0.75rem;
  font-size:   0.72rem;
  color:       var(--sq-muted);
  margin-bottom: 0.5rem;
  flex-wrap:   wrap;
}
.sq-post-meta a { color: var(--sq-primary); text-decoration: none; }
.sq-post-card-title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size:   1rem;
  color:       var(--sq-text);
  margin:      0 0 0.625rem;
  line-height: 1.35;
}
.sq-post-card-title a { color: inherit; text-decoration: none; }
.sq-post-card-title a:hover { color: var(--sq-primary); }
.sq-post-excerpt {
  font-size:   0.85rem;
  color:       var(--sq-muted);
  line-height: 1.7;
  flex:        1;
  margin:      0 0 0.875rem;
}
.sq-post-read-more {
  font-size:   0.78rem;
  font-weight: 600;
  color:       var(--sq-primary);
  text-decoration: none;
  margin-top:  auto;
}
.sq-post-read-more:hover { text-decoration: underline; }

/* --- Search results pagination (.sq-pagination wraps paginate_links output) --- */
.sq-pagination {
  margin-top:      2rem;
  display:         flex;
  justify-content: center;
}
.sq-pagination .nav-links,
.sq-pagination ul.page-numbers {
  display:         flex;
  gap:             0.375rem;
  flex-wrap:       wrap;
  justify-content: center;
  list-style:      none;
  margin:          0;
  padding:         0;
}
.sq-pagination ul.page-numbers li { display: contents; }
.sq-pagination .page-numbers:not(ul) {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  padding:         0;
  border-radius:   6px;
  border:          1px solid var(--sq-border);
  background:      var(--sq-card-bg);
  font-family:     'Montserrat', Arial, sans-serif;
  font-weight:     700;
  font-size:       0.8rem;
  color:           var(--sq-muted);
  text-decoration: none;
  box-sizing:      border-box;
}
.sq-pagination .page-numbers.dots {
  border:     none;
  background: transparent;
  cursor:     default;
}
.sq-pagination .page-numbers.current {
  background:   var(--sq-primary);
  color:        #fff;
  border-color: var(--sq-primary);
}
.sq-pagination a.page-numbers:hover:not(.current) { border-color: var(--sq-primary); color: var(--sq-primary); }
.sq-no-results { color: var(--sq-muted); font-size: 0.9rem; padding: 2rem 0; }

/* ============================================================
   WooCommerce FILTER BAR + PAGINATION
   ============================================================ */

/* Hide the Storefront-generated sorting div entirely — we output our own. */
.storefront-sorting { display: none !important; }

/* --- Filter bar (custom markup in archive-product.php) --- */
.sq-filter-bar {
  background:    #fff;
  border-bottom: 2px solid #ede9fe;
}
.sq-filter-bar-inner {
  max-width:    1100px;
  margin:       0 auto;
  padding:      0.5rem 1.25rem;
  display:      flex;
  align-items:  center;
  gap:          0.5rem;
  flex-wrap:    nowrap;
  overflow-x:   auto;
  scrollbar-width: none;
}
.sq-filter-bar-inner::-webkit-scrollbar { display: none; }
.sq-filter-chip {
  font-size:    0.72rem;
  font-weight:  600;
  color:        #6b7280;
  padding:      4px 12px;
  border-radius: 99px;
  border:       1px solid #e5e7eb;
  background:   #fff;
  cursor:       pointer;
  text-decoration: none;
}
.sq-filter-chip.active { background: #f5f3ff; color: #7c3aed; border-color: #c4b5fd; }
.sq-filter-label { font-size: 0.72rem; font-weight: 700; color: #374151; white-space: nowrap; }
.sq-attr-select {
  font-size:     0.78rem;
  color:         #1e1b4b;
  border:        1px solid #ddd6fe;
  border-radius: 6px;
  padding:       3px 24px 3px 10px;
  background:    #fff;
  cursor:        pointer;
  font-family:   'Montserrat', Arial, sans-serif;
  line-height:   1.4;
  max-width:     160px;
  min-width:     90px;
  flex-shrink:   0;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  appearance:    none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.sq-attr-select:focus {
  outline:      none;
  border-color: #7c3aed;
  box-shadow:   0 0 0 2px rgba(124,58,237,0.15);
}
.sq-sort-label { font-size: 0.72rem; color: #9ca3af; white-space: nowrap; }
.sq-sort-group { margin-left: auto; flex-shrink: 0; }
.sq-sort-form  { display: flex; align-items: center; gap: 0.375rem; margin: 0; }
.sq-sort-select {
  font-size:    0.78rem;
  color:        #1e1b4b;
  border:       1px solid #ddd6fe;
  border-radius: 6px;
  padding:      3px 6px;
  background:   #fff;
  cursor:       pointer;
  font-family:  'Montserrat', Arial, sans-serif;
  line-height:  1.4;
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */

/* Breadcrumb */
.woocommerce-breadcrumb {
  max-width:   1100px;
  margin:      0 auto;
  padding:     1rem 1.25rem 0;
  font-size:   0.78rem;
  display:     flex;
  align-items: center;
  gap:         0.4rem;
  flex-wrap:   wrap;
}
.woocommerce-breadcrumb a    { color: #4c1d95; font-weight: 600; text-decoration: none; }
.woocommerce-breadcrumb a:hover { text-decoration: underline; }
/* WC uses "/" as separator inline text — style the whole crumb muted */
.woocommerce-breadcrumb { color: #6b7280; }

/* 2-column product detail grid */
/* body overflow-x propagates to the viewport in CSS — suppresses the scrollbar
   caused by section.related full-bleed WITHOUT clipping any descendants. */
body.single-product { overflow-x: hidden; }
.single-product .content-area,
.single-product #primary,
.single-product .site-content,
.single-product .site-content > .col-full { background: #fff; }
/* site-main must be transparent so section.related's #f5f3ff shows through */
.single-product .site-main { background: transparent; }
/* Kill any top padding that shows the body background as a gap */
.single-product .content-area,
.single-product #primary { padding-top: 0 !important; margin-top: 0 !important; }
/* Kill bottom spacing so related section sits flush against footer */
.single-product .content-area,
.single-product #primary,
.single-product .site-main { padding-bottom: 0 !important; margin-bottom: 0 !important; }

.woocommerce div.product {
  max-width:      1100px;
  margin:         0 auto;
  display:        grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap:     2.5rem;
  row-gap:        0;     /* summary and tabs flow together; gallery spans both rows */
  padding:        2rem 1.25rem 0;
  align-items:    start;
}
/* Gallery: left column, spans both content rows */
.woocommerce div.product .woocommerce-product-gallery {
  grid-column: 1;
  grid-row:    1 / 3;
}
/* Summary: right column, row 1 */
.woocommerce div.product .summary {
  grid-column: 2;
  grid-row:    1;
}
/* Tabs: right column, row 2 (directly under summary) */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 2;
  grid-row:    2;
}
/* Related + upsells span full width below */
.woocommerce div.product section.related,
.woocommerce div.product section.upsells {
  grid-column: 1 / -1;
}

/* Gallery column */
.woocommerce div.product .woocommerce-product-gallery {
  float: none;
  width: auto;
  max-width: none;
}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  background:    #ede9fe;
  border-radius: 12px;
  border:        1px solid #c4b5fd;
  overflow:      hidden;
  display:       flex;
  align-items:   center;
  justify-content: center;
  min-height:    320px;
  width:         100%; /* fill column, don't grow to image intrinsic width */
}
.woocommerce div.product .woocommerce-product-gallery figure img {
  object-fit: contain;
  max-height: 320px;
  width:      100%;
}
/* Thumbnails */
.woocommerce div.product .flex-control-thumbs {
  display:   flex;
  gap:       0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding:   0;
  list-style: none;
}
.woocommerce div.product .flex-control-thumbs li {
  width:         64px;
  height:        64px;
  border-radius: 8px;
  overflow:      hidden;
  border:        2px solid transparent;
  cursor:        pointer;
}
.woocommerce div.product .flex-control-thumbs li img { width: 100%; height: 100%; object-fit: cover; }
.woocommerce div.product .flex-control-thumbs li.flex-active { border-color: #eab308; }

/* Summary column — flex column so we can reorder SKU before price */
.woocommerce div.product .summary {
  float:          none;
  width:          auto;
  max-width:      none;
  display:        flex;
  flex-direction: column;
}
/* Reorder summary children to match mockup: title → SKU → price → stock → form */
.woocommerce div.product .summary .product_title                              { order: 1; }
.woocommerce div.product .summary .woocommerce-product-rating                 { order: 2; display: none; }
.woocommerce div.product .summary .product_meta                               { order: 3; }
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary span.price                                  { order: 4; }
.woocommerce div.product .summary .woocommerce-product-details__short-description { order: 5; font-size: 0.82rem; color: #4b5563; line-height: 2; margin: 0.75rem 0 1.25rem; }
.woocommerce div.product .summary p.stock                                     { order: 6; }
.woocommerce div.product .summary form.cart                                   { order: 7; }

/* Title */
.woocommerce div.product .product_title {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   1.4rem;
  color:       #1e1b4b;
  margin:      0 0 0.5rem;
  line-height: 1.2;
}

/* SKU / meta — show SKU row, hide category/tag rows (not in mockup) */
.woocommerce div.product .product_meta {
  font-size:     0.75rem;
  color:         #9ca3af;
  margin-bottom: 1rem;
}
.woocommerce div.product .product_meta a { color: #9ca3af; }
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as { display: none; }

/* Price — large display */
.woocommerce div.product .summary .price {
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   900;
  font-size:     1.75rem;
  color:         #4c1d95;
  display:       flex;
  align-items:   baseline;
  gap:           0.5rem;
  flex-wrap:     wrap;
  margin-bottom: 0.5rem;
}
.woocommerce div.product .summary .price ins  { text-decoration: none; }
.woocommerce div.product .summary .price del  { font-size: 1rem; color: #9ca3af; }
/* Sale badge on single product */
.woocommerce div.product span.onsale {
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   800;
  font-size:     0.7rem;
  background:    #eab308;
  color:         #1e1b4b;
  padding:       3px 8px;
  border-radius: 3px;
  position:      static;
  display:       inline-block;
  min-height:    unset;
  min-width:     unset;
  line-height:   1.5;
}

/* Omnibus price */
.woocommerce div.product .woocommerce-price-suffix,
.woocommerce-variation-price,
p.woocommerce-bacs-bank-details,
.wc-block-components-product-price__regular { font-size: 0.82rem; }

/* Stock status */
.woocommerce div.product .stock {
  font-size:     0.8rem;
  font-weight:   700;
  margin-bottom: 1rem;
}
.woocommerce div.product .stock.in-stock     { color: #16a34a; }
.woocommerce div.product .stock.in-stock::before { content: '\2713\00a0'; }
.woocommerce div.product .stock.out-of-stock { color: #dc2626; }
.woocommerce div.product .stock.out-of-stock::before { content: '\2715\00a0'; }

/* Qty + ATC row */
.woocommerce div.product form.cart {
  display:       flex;
  align-items:   center;
  gap:           0.875rem;
  margin-bottom: 1rem;
  overflow:      visible;  /* prevent Storefront clearfix from clipping ATC */
  flex-wrap:     nowrap;
}
/* Quantity stepper — WC outputs just an input; we add +/- via JS below */
.woocommerce div.product form.cart .quantity {
  display:       flex;
  align-items:   center;
  border:        2px solid #ddd6fe;
  border-radius: 8px;
  overflow:      visible;
  flex-shrink:   0;
}
.sq-qty-dec,
.sq-qty-inc {
  width:       36px;
  height:      40px;
  background:  #ede9fe;
  border:      none;
  font-size:   1.1rem;
  color:       #4c1d95;
  cursor:      pointer;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.sq-qty-dec { border-radius: 6px 0 0 6px; }
.sq-qty-inc { border-radius: 0 6px 6px 0; }
.sq-qty-dec:hover, .sq-qty-inc:hover { background: #ddd6fe; }
.woocommerce div.product form.cart .quantity input.qty {
  width:       48px;
  height:      40px;
  border:      none;
  border-left: 2px solid #ddd6fe;
  border-right: 2px solid #ddd6fe;
  text-align:  center;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size:   0.9rem;
  color:       #1e1b4b;
  background:  #fff;
  -moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ATC button */
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex:          1;
  background:    #eab308;
  color:         #1e1b4b;
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   800;
  font-size:     0.9rem;
  padding:       11px 1.5rem;
  border-radius: 8px;
  border:        none;
  cursor:        pointer;
  text-align:    center;
  transition:    background 150ms;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: #ca8a04; }

/* Heart / wishlist button (decorative, not wired in K1) */
.sq-wishlist-btn {
  background:    transparent;
  border:        2px solid #ddd6fe;
  color:         #6b7280;
  font-size:     0.9rem;
  width:         42px;
  height:        42px;
  border-radius: 8px;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  transition:    border-color 150ms, color 150ms;
}
.sq-wishlist-btn:hover { border-color: #7c3aed; color: #7c3aed; }

/* Tabs */
.woocommerce-tabs.wc-tabs-wrapper {
  padding:        0;
  display:        flex;
  flex-direction: column; /* nav on top, panel below */
}
.woocommerce-tabs ul.tabs {
  display:       flex;
  border-bottom: 3px solid #ede9fe;
  margin:        0 0 0;
  padding:       0;
  list-style:    none;
}
.woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce-tabs ul.tabs li {
  border:        none;
  border-radius: 0;
  background:    transparent;
  margin:        0;
  padding:       0;
}
.woocommerce-tabs ul.tabs li a {
  font-family:       'Montserrat', Arial, sans-serif;
  font-weight:       700;
  font-size:         0.8rem;
  padding:           0.625rem 1.25rem;
  display:           block;
  color:             #6b7280;
  border-bottom:     3px solid transparent;
  margin-bottom:     -3px;
  text-decoration:   none;
  background:        transparent;
}
.woocommerce-tabs ul.tabs li.active a {
  color:             #4c1d95;
  border-bottom-color: #eab308;
}
.woocommerce-tabs .panel {
  display:     none;  /* WC JS shows active panel; we hide all by default */
  padding:     1.25rem 0;
  font-size:   0.9rem;
  line-height: 1.8;
  color:       #4b5563;
  border:      none;
}
.woocommerce-tabs .panel.active,
.woocommerce-tabs .panel[style*="display: block"] { display: block; }

/* Attributes table inside Description tab */
.woocommerce-product-attributes { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.woocommerce-product-attributes th {
  background:    #ede9fe;
  color:         #4c1d95;
  font-weight:   700;
  padding:       8px 12px;
  text-align:    left;
  border-bottom: 1px solid #ddd6fe;
  width:         35%;
}
.woocommerce-product-attributes td { padding: 8px 12px; border-bottom: 1px solid #ede9fe; color: #4b5563; }

/* Related products section — rendered OUTSIDE div.product via hook (woocommerce_after_single_product).
   Full-bleed background using negative margins; no overflow/grid fighting needed. */
.single-product section.related,
.single-product section.upsells {
  margin-left:   calc(50% - 50vw);
  margin-right:  calc(50% - 50vw);
  margin-bottom: 0;
  padding:       2.5rem max(1.25rem, calc((100vw - 1100px) / 2 + 1.25rem));
  background:    #f5f3ff;
  box-sizing:    border-box;
}
/* Force 4 columns to match mockup */
.single-product section.related ul.products,
.single-product section.upsells ul.products {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 0;
}
.single-product section.related h2,
.single-product section.upsells h2 {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    800;
  font-size:      0.95rem;
  color:          #1e1b4b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin:         0 0 1.25rem; /* reset top margin Storefront adds to h2 */
  padding:        0; /* some themes add padding to h2 */
  display:        flex;
  align-items:    center;
  gap:            10px;
}

/* ============================================================
   SINGLE POST
   ============================================================ */
.sq-single-post { max-width: 760px; margin: 0 auto; }
.sq-single-post-header { margin-bottom: 1.5rem; }
.sq-single-post-header .sq-post-meta { margin-bottom: 0.75rem; }
.sq-single-thumb { margin-bottom: 1.75rem; border-radius: 10px; overflow: hidden; }
.sq-single-thumb-img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.sq-single-content {
  font-size:   1rem;
  line-height: 1.8;
  color:       var(--sq-text);
}
.sq-single-content h2,
.sq-single-content h3,
.sq-single-content h4 { margin-top: 1.75rem; }
.sq-single-content a { color: var(--sq-primary); }
.sq-single-post-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--sq-border); }
.sq-post-nav .nav-links { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; }
.sq-post-nav .nav-links a { color: var(--sq-primary); font-weight: 600; text-decoration: none; }

/* ============================================================
   INNER PAGE FULL-WIDTH LAYOUT (page.php — no sidebar)
   ============================================================ */
#primary.sq-page-content {
  width:      100%;
  float:      none;
  max-width:  860px;
  margin:     0 auto;
  padding:    2rem 1.25rem 3rem;
}
#primary.sq-page-content .entry-title {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    800;
  font-size:      clamp(1.5rem, 4vw, 2.25rem);
  color:          var(--sq-dark);
  margin-bottom:  1.25rem;
}
#primary.sq-page-content .entry-content {
  font-size:   1rem;
  line-height: 1.75;
  color:       var(--sq-text);
}

/* ============================================================
   FRONT-PAGE FULL-WIDTH LAYOUT
   Suppresses the right sidebar on the static front page so
   .sq-full-width occupies the entire content column.
   ============================================================ */
.home #secondary { display: none; }
.home #primary.sq-full-width {
  width:   100%;
  float:   none;
  padding: 0;
}
/* Remove Storefront's default entry-header on front page */
.home .entry-header { display: none; }

/* ============================================================
   WC FULL-WIDTH PAGES (cart, checkout, my-account)
   ============================================================ */
.sq-wc-page {
  max-width:  1100px;
  margin:     0 auto;
  padding:    2rem 24px 3rem;
  width:      100%;
  box-sizing: border-box;
}
/* Suppress Storefront's .content-area width cap on these pages */
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area,
.woocommerce-page .content-area,
.woocommerce-shop .content-area,
.tax-product_cat .content-area,
.tax-product_tag .content-area,
.search .content-area {
  width:  100%;
  float:  none;
  margin: 0;
  max-width: none;
}

/* ============================================================
   AUTH CARD  (/my-account/ — login / register / forgot)
   ============================================================ */
.sq-auth-wrap {
  min-height:      calc(100vh - 200px);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         3rem 1rem;
}
.sq-auth-box {
  width:         100%;
  max-width:     440px;
  background:    var(--sq-surface, #fff);
  border-radius: 12px;
  box-shadow:    0 4px 32px rgba(0,0,0,0.10);
  overflow:      hidden;
}

/* Hide Storefront's page entry-header on my-account (auth card has its own titles) */
.woocommerce-account .entry-header { display: none !important; }

/* Tab strip */
.sq-auth-tabs {
  display:        flex;
  border-bottom:  2px solid var(--sq-border, #e5e7eb);
}
.sq-auth-tab {
  flex:           1;
  padding:        1rem 0.5rem;
  text-align:     center;
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    700;
  font-size:      0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--sq-muted, #9ca3af);
  cursor:         pointer;
  border:         none;
  background:     transparent;
  border-bottom:  3px solid transparent;
  margin-bottom:  -2px;
  transition:        color 200ms, border-color 200ms;
  text-decoration:   none !important;
}
.sq-auth-tab.active {
  color:              var(--sq-primary, #4c1d95);
  border-bottom-color: var(--sq-accent, #eab308);
}
.sq-auth-tab:hover:not(.active) { color: var(--sq-dark, #1e1b4b); }

/* Panels */
.sq-auth-panel { display: none; padding: 2rem; }
.sq-auth-panel.active { display: block; }

/* Typography */
.sq-auth-title {
  font-family:  'Montserrat', Arial, sans-serif;
  font-weight:  800;
  font-size:    1.35rem;
  color:        var(--sq-dark, #1e1b4b);
  margin:       0 0 0.25rem;
}
.sq-auth-subtitle {
  font-size:    0.875rem;
  color:        var(--sq-muted, #6b7280);
  margin:       0 0 1.5rem;
}
.sq-auth-switch {
  text-align:   center;
  font-size:    0.85rem;
  color:        var(--sq-muted, #6b7280);
  margin-top:   1rem;
}
.sq-auth-switch a {
  color:          var(--sq-primary, #4c1d95);
  font-weight:    600;
  text-decoration: none;
  cursor:         pointer;
}
.sq-auth-switch a:hover { text-decoration: underline; }

/* Form inputs inside auth card */
.sq-auth-panel .woocommerce-form-row label,
.sq-auth-panel .form-row label {
  display:        block;
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    600;
  font-size:      0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--sq-dark, #1e1b4b);
  margin-bottom:  0.4rem;
}
.sq-auth-panel .woocommerce-Input,
.sq-auth-panel .input-text {
  width:         100% !important;
  box-sizing:    border-box !important;
  padding:       0.7rem 1rem !important;
  border:        1.5px solid var(--sq-border, #e5e7eb) !important;
  border-radius: 8px !important;
  font-size:     0.95rem !important;
  color:         var(--sq-dark, #1e1b4b) !important;
  background:    #fff !important;
  transition:    border-color 200ms !important;
  outline:       none !important;
  box-shadow:    none !important;
}
.sq-auth-panel .woocommerce-Input:focus,
.sq-auth-panel .input-text:focus {
  border-color: var(--sq-primary, #4c1d95) !important;
}
.sq-auth-panel .woocommerce-form-row,
.sq-auth-panel .form-row { margin-bottom: 1rem; }

/* "Nie pamiętam hasła" link in label */
.sq-field-link {
  float:           right;
  font-size:       0.78rem;
  color:           var(--sq-primary, #4c1d95);
  text-decoration: none;
  font-weight:     600;
  margin-top:      0.25rem;
}
.sq-field-link:hover { text-decoration: underline; }

/* Field hint text */
.sq-field-hint {
  font-size:  0.78rem;
  color:      var(--sq-muted, #6b7280);
  margin-top: 0.3rem;
  display:    block;
}

/* Submit button */
.sq-auth-submit {
  width:          100%;
  padding:        0.85rem;
  border:         none;
  border-radius:  8px;
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    700;
  font-size:      0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor:         pointer;
  background:     var(--sq-primary, #4c1d95);
  color:          #fff;
  transition:     opacity 200ms;
  margin-top:     0.5rem;
  margin-bottom:  1rem;
  display:        block;
}
.sq-auth-submit:hover { opacity: 0.88; }

/* First + last name side by side in register panel */
.sq-reg-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.75rem;
}
.sq-reg-name-row .form-row { margin-bottom: 1rem; }

/* Hide WC's "remember me" row — not in mockup */
.sq-auth-panel .woocommerce-form-login__rememberme { display: none; }

/* Consent checkboxes */
.sq-consent {
  display:      flex;
  align-items:  flex-start;
  gap:          0.6rem;
  margin-bottom: 0.875rem;
  font-size:    0.82rem;
  color:        var(--sq-muted, #6b7280);
  line-height:  1.5;
}
.sq-consent input[type="checkbox"] {
  margin-top:   2px;
  width:        16px;
  height:       16px;
  flex-shrink:  0;
  accent-color: var(--sq-primary, #4c1d95);
  cursor:       pointer;
}
.sq-consent a { color: var(--sq-primary, #4c1d95); text-decoration: none; font-weight: 600; }
.sq-consent a:hover { text-decoration: underline; }

/* ============================================================
   404 PAGE
   ============================================================ */
.sq-page-hdr--404 { text-align: center; }
.sq-404-code {
  font-family:  'Montserrat', Arial, sans-serif;
  font-weight:  900;
  font-size:    clamp(4rem, 16vw, 9rem);
  line-height:  1;
  color:        var(--sq-primary);
  opacity:      0.15;
  margin-bottom: 0.25rem;
}
.sq-404-main {
  max-width:  560px;
  margin:     0 auto;
  padding:    2rem 1.25rem 4rem;
  text-align: center;
}
.sq-404-actions {
  display:    flex;
  gap:        1rem;
  flex-wrap:  wrap;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.sq-btn {
  display:          inline-block;
  padding:          0.65rem 1.5rem;
  border-radius:    var(--sq-radius);
  font-family:      'Montserrat', Arial, sans-serif;
  font-weight:      700;
  font-size:        0.9rem;
  text-decoration:  none;
  background:       var(--sq-primary);
  color:            #fff;
  transition:       opacity 0.15s;
}
.sq-btn:hover { opacity: 0.85; color: #fff; }
.sq-btn--outline {
  background:   transparent;
  border:       2px solid var(--sq-primary);
  color:        var(--sq-primary);
}
.sq-btn--outline:hover { background: var(--sq-primary); color: #fff; opacity: 1; }
.sq-404-search p { color: var(--sq-muted); font-size: 0.9rem; margin-bottom: 0.75rem; }

/* ============================================================
   SEARCH RESULTS
   ============================================================ */
.sq-no-results-block {
  max-width:  500px;
  margin:     2rem auto;
  text-align: center;
}
.sq-no-results-block .sq-no-results { margin-bottom: 1.25rem; }
.sq-no-results-hint {
  font-size:  0.82rem;
  color:      var(--sq-muted);
  margin:     0 0 1.5rem;
}
/* Post type label pill in search result cards */
.sq-post-type {
  display:          inline-block;
  padding:          0.15rem 0.5rem;
  border-radius:    3px;
  font-size:        0.7rem;
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   0.04em;
  background:       var(--sq-primary);
  color:            #fff;
}
/* Product grid on search results page */
.sq-search-products { margin-top: 1.5rem; }

/* ============================================================
   SEARCH TOGGLE + PANEL
   ============================================================ */
.sq-search-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border:          none;
  background:      transparent;
  color:           var(--sq-muted);
  border-radius:   6px;
  cursor:          pointer;
  padding:         0;
  transition:      color 150ms, background 150ms;
}
.sq-search-btn:hover {
  color:       var(--sq-primary);
  background:  rgba(124, 58, 237, 0.08);
}

/* Panel — hidden by default, sits below the sticky nav */
.sq-search-panel {
  position:     sticky;
  top:          56px; /* matches sq-nav-inner height */
  z-index:      98;
  background:   var(--sq-nav-bg);
  border-bottom: 1px solid var(--sq-border);
  box-shadow:   0 4px 16px rgba(0, 0, 0, 0.08);
  display:      none;
}
.admin-bar .sq-search-panel { top: calc(56px + 32px); }
.sq-search-panel.sq-search-open { display: block; }

.sq-search-panel-inner {
  max-width:       1100px;
  margin:          0 auto;
  padding:         0.625rem 24px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.75rem;
}

.sq-search-panel .sq-search-form { margin-bottom: 0; max-width: 480px; }

.sq-search-form {
  display:   flex;
  flex:      1;
  gap:       0;
  max-width: 640px;
}
.sq-search-form--inline {
  max-width:       400px;
  margin:          0 auto;
  justify-content: center;
}
.sq-search-input {
  flex:          1;
  height:        40px;
  padding:       0 1rem;
  border:        1px solid #ddd6fe;
  border-right:  none;
  border-radius: 6px 0 0 6px;
  background:    #f5f3ff;
  color:         var(--sq-text);
  font-family:   'Open Sans', Arial, sans-serif;
  font-size:     0.88rem;
  outline:       none;
  transition:    border-color 150ms;
}
.sq-search-panel .sq-search-input {
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.sq-search-input:focus { border-color: var(--sq-primary); }
.sq-search-panel .sq-search-input:focus { background: #f5f3ff; border-color: var(--sq-primary); }
.sq-search-input::placeholder { color: var(--sq-muted); }

.sq-search-submit {
  height:        40px;
  padding:       0 1rem;
  border:        1px solid var(--sq-primary);
  border-radius: 0 6px 6px 0;
  background:    var(--sq-primary);
  color:         #fff;
  font-family:   'Montserrat', Arial, sans-serif;
  font-weight:   700;
  font-size:     0.8rem;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  gap:           6px;
  transition:    opacity 150ms;
}
.sq-search-submit:hover { opacity: 0.88; background: var(--sq-primary); color: #fff; }

.sq-search-close {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border:          none;
  background:      transparent;
  color:           var(--sq-muted);
  border-radius:   6px;
  cursor:          pointer;
  padding:         0;
  flex-shrink:     0;
  transition:      color 150ms, background 150ms;
}
.sq-search-close:hover {
  color:      var(--sq-primary);
  background: rgba(124, 58, 237, 0.08);
}

/* ============================================================
   MY ACCOUNT — sidebar + dashboard layout
   ============================================================ */

/* ── Layout grid ── */
.sq-account-wrap {
  max-width:             1100px;
  margin:                0 auto;
  padding:               2.5rem 1rem 4rem;
  display:               grid;
  grid-template-columns: 220px 1fr;
  gap:                   2rem;
  align-items:           start;
}
@media (max-width: 700px) {
  .sq-account-wrap { grid-template-columns: 1fr; }
}

/* ── Sidebar ── */
.sq-acc-sidebar {
  background:    var(--sq-surface, #fff);
  border-radius: 12px;
  box-shadow:    0 2px 12px rgba(0,0,0,0.07);
  overflow:      hidden;
  position:      sticky;
  top:           80px;
}
.sq-acc-user-card {
  padding:       1.25rem 1rem;
  border-bottom: 1px solid var(--sq-border, #e5e7eb);
}
.sq-acc-avatar {
  width:          48px;
  height:         48px;
  border-radius:  50%;
  background:     var(--sq-primary, #4c1d95);
  color:          #fff;
  font-family:    'Montserrat', sans-serif;
  font-weight:    800;
  font-size:      1.1rem;
  display:        flex;
  align-items:    center;
  justify-content: center;
  margin-bottom:  0.65rem;
}
.sq-acc-user-name {
  font-family:   'Montserrat', sans-serif;
  font-weight:   700;
  font-size:     0.9rem;
  color:         var(--sq-dark, #1e1b4b);
  margin-bottom: 0.15rem;
}
.sq-acc-user-email {
  font-size: 0.75rem;
  color:     var(--sq-muted, #6b7280);
}
.sq-acc-nav-section {
  padding:        0.5rem 1rem 0.25rem;
  font-family:    'Montserrat', sans-serif;
  font-size:      0.65rem;
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--sq-muted, #9ca3af);
}
.sq-acc-nav-item {
  display:          block;
  padding:          0.7rem 1rem;
  font-family:      'Montserrat', sans-serif;
  font-weight:      600;
  font-size:        0.8rem;
  color:            var(--sq-dark, #374151);
  text-decoration:  none !important;
  border-left:      3px solid transparent;
  transition:       background 150ms, color 150ms, border-color 150ms;
  cursor:           pointer;
}
.sq-acc-nav-item:hover {
  background:      var(--sq-bg, #f8f8f8);
  color:           var(--sq-primary, #4c1d95);
  text-decoration: none !important;
}
.sq-acc-nav-item.active {
  border-left-color: var(--sq-primary, #4c1d95);
  background:        var(--sq-bg, #f3f0ff);
  color:             var(--sq-primary, #4c1d95);
}
.sq-acc-nav-item--k2 {
  opacity: 0.4;
  cursor:  not-allowed;
}
.sq-acc-nav-item--k2:hover {
  background: transparent;
  color:      var(--sq-dark, #374151);
}
.sq-acc-nav-pill {
  float:         right;
  background:    var(--sq-primary, #4c1d95);
  color:         #fff;
  border-radius: 99px;
  font-size:     0.65rem;
  font-weight:   700;
  padding:       1px 7px;
  margin-top:    1px;
}
.sq-acc-logout {
  display:         block;
  padding:         0.75rem 1rem;
  border-top:      1px solid var(--sq-border, #e5e7eb);
  font-family:     'Montserrat', sans-serif;
  font-size:       0.8rem;
  font-weight:     600;
  color:           #ef4444;
  text-decoration: none !important;
  cursor:          pointer;
  transition:      background 150ms;
}
.sq-acc-logout:hover { background: #fff5f5; color: #ef4444; }

/* K2 badge */
.sq-k2-badge {
  display:        inline-block;
  background:     #fef9c3;
  border:         1px solid #facc15;
  color:          #854d0e;
  font-family:    'Montserrat', sans-serif;
  font-size:      0.6rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding:        1px 6px;
  border-radius:  4px;
  margin-left:    4px;
  vertical-align: middle;
}

/* ── Main content area ── */
.sq-acc-main { min-width: 0; }

/* ── Common panel components ── */
.sq-acc-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size:   1.3rem;
  color:       var(--sq-dark, #1e1b4b);
  margin:      0 0 0.25rem;
}
.sq-acc-subheading {
  font-size: 0.875rem;
  color:     var(--sq-muted, #6b7280);
  margin:    0 0 1.5rem;
}
.sq-acc-card {
  background:    var(--sq-surface, #fff);
  border-radius: 12px;
  box-shadow:    0 2px 12px rgba(0,0,0,0.07);
  padding:       1.5rem;
  margin-bottom: 1.25rem;
}
.sq-acc-card-title {
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--sq-muted, #6b7280);
  margin-bottom:  0.75rem;
}
.sq-acc-empty {
  font-size: 0.875rem;
  color:     var(--sq-muted, #6b7280);
  margin:    0;
}

/* ── Dashboard stats ── */
.sq-dash-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
  margin-bottom:         1.25rem;
}
@media (max-width: 550px) { .sq-dash-stats { grid-template-columns: 1fr 1fr; } }
.sq-dash-stat {
  background:    var(--sq-surface, #fff);
  border-radius: 12px;
  box-shadow:    0 2px 12px rgba(0,0,0,0.07);
  padding:       1.25rem 1rem;
  text-align:    center;
}
.sq-dash-stat--k2 { opacity: 0.55; }
.sq-dash-stat-val {
  font-family:   'Montserrat', sans-serif;
  font-weight:   800;
  font-size:     1.8rem;
  color:         var(--sq-primary, #4c1d95);
  line-height:   1;
  margin-bottom: 0.3rem;
}
.sq-dash-stat-label {
  font-family:    'Montserrat', sans-serif;
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--sq-muted, #6b7280);
}

/* ── Order list (dashboard + orders panel) ── */
.sq-order-list { width: 100%; border-collapse: collapse; }
.sq-order-list th {
  text-align:     left;
  font-family:    'Montserrat', sans-serif;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--sq-muted, #9ca3af);
  padding:        0.5rem 0.75rem;
  border-bottom:  2px solid var(--sq-border, #e5e7eb);
}
.sq-order-list td {
  padding:        0.875rem 0.75rem;
  border-bottom:  1px solid var(--sq-border, #f3f4f6);
  font-size:      0.875rem;
  color:          var(--sq-dark, #374151);
  vertical-align: middle;
}
.sq-order-list tr:last-child td { border-bottom: none; }
.sq-order-list tr:hover td { background: var(--sq-bg, #f9f8ff); }

/* Status badges */
.sq-status-badge {
  display:        inline-block;
  padding:        2px 10px;
  border-radius:  99px;
  font-family:    'Montserrat', sans-serif;
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sq-status-green { background: #d1fae5; color: #065f46; }
.sq-status-amber { background: #fef3c7; color: #92400e; }
.sq-status-blue  { background: #dbeafe; color: #1e40af; }
.sq-status-muted { background: #f3f4f6; color: #6b7280; }
.sq-order-link {
  font-size:       0.8rem;
  color:           var(--sq-primary, #4c1d95);
  text-decoration: none !important;
  font-weight:     600;
}
.sq-order-link:hover { text-decoration: underline !important; }

/* Orders table actions cell — buttons + details link */
.sq-order-actions-cell { white-space: nowrap; }
.sq-order-actions-cell .sq-dl-btn {
  margin-right: 0.5rem;
  padding:      0.3rem 0.7rem;
  font-size:    0.72rem;
}
.sq-order-actions-cell .sq-dl-btn + .sq-order-link { margin-left: 0.25rem; }

/* ============================================================
   ORDER DETAIL — view-order.php
   ============================================================ */

.sq-order-detail-hdr {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  margin-bottom: 1.25rem;
  flex-wrap:     wrap;
}

.sq-order-back {
  font-size:       0.82rem;
  color:           var(--sq-primary, #4c1d95);
  text-decoration: none !important;
  font-weight:     600;
}
.sq-order-back:hover { text-decoration: underline !important; }

/* ── Status stepper ── */
.sq-order-stepper {
  display:    flex;
  gap:        0;
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.sq-step {
  flex:       1;
  text-align: center;
  position:   relative;
  padding:    0.75rem 0.5rem 0.5rem;
}

/* Connector line between dots */
.sq-step::before {
  content:    '';
  position:   absolute;
  top:        18px;
  left:       50%;
  right:      -50%;
  height:     2px;
  background: var(--sq-border, #e5e7eb);
  z-index:    0;
}
.sq-step:last-child::before { display: none; }

.sq-step-dot {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          2px solid var(--sq-border, #e5e7eb);
  background:      var(--sq-surface, #fff);
  margin:          0 auto 0.4rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  font-weight:     700;
  color:           var(--sq-muted, #9ca3af);
  position:        relative;
  z-index:         1;
}

.sq-step.done .sq-step-dot {
  background:   var(--sq-primary, #4c1d95);
  border-color: var(--sq-primary, #4c1d95);
  color:        #fff;
}
.sq-step.done::before { background: var(--sq-primary, #4c1d95); }

.sq-step.current .sq-step-dot {
  border-color: var(--sq-primary, #4c1d95);
  color:        var(--sq-primary, #4c1d95);
}

.sq-step-label {
  font-family: 'Montserrat', sans-serif;
  font-size:   0.68rem;
  font-weight: 600;
  color:       var(--sq-muted, #6b7280);
}
.sq-step.done .sq-step-label,
.sq-step.current .sq-step-label { color: var(--sq-dark, #1e1b4b); }

/* ── Items table ── */
.sq-order-items-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }

.sq-order-items-table th {
  font-family:    'Montserrat', sans-serif;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--sq-muted, #9ca3af);
  padding:        0.4rem 0.5rem;
  border-bottom:  2px solid var(--sq-border, #e5e7eb);
  text-align:     left;
}

.sq-order-items-table td {
  padding:        0.7rem 0.5rem;
  border-bottom:  1px solid var(--sq-border, #f3f4f6);
  font-size:      0.875rem;
  color:          var(--sq-dark, #374151);
  vertical-align: middle;
}
.sq-order-items-table tr:last-child td { border-bottom: none; }

/* ── Order totals ── */
.sq-order-summary-row {
  display:         flex;
  justify-content: space-between;
  padding:         0.3rem 0;
  font-size:       0.875rem;
  color:           var(--sq-dark, #374151);
}

.sq-order-summary-row.total {
  font-family:  'Montserrat', sans-serif;
  font-weight:  800;
  font-size:    1rem;
  color:        var(--sq-dark, #1e1b4b);
  border-top:   2px solid var(--sq-border, #e5e7eb);
  margin-top:   0.5rem;
  padding-top:  0.75rem;
}

/* Quick-link / download button */
.sq-dl-btn {
  display:         inline-block;
  padding:         0.55rem 1.1rem;
  border:          1.5px solid var(--sq-border, #e5e7eb);
  border-radius:   8px;
  font-family:     'Montserrat', sans-serif;
  font-weight:     600;
  font-size:       0.78rem;
  text-decoration: none !important;
  color:           var(--sq-dark, #374151);
  cursor:          pointer;
  transition:      border-color 150ms, color 150ms;
  background:      var(--sq-surface, #fff);
}
.sq-dl-btn:hover {
  border-color: var(--sq-primary, #4c1d95);
  color:        var(--sq-primary, #4c1d95);
}

/* Suppress WC default my-account nav (we replaced it with our sidebar) */
.woocommerce-account .woocommerce-MyAccount-navigation { display: none !important; }

/* ============================================================
   ORDER CONFIRM — checkout/thankyou.php
   ============================================================ */

/* Background — same violet as checkout / order-pay */
.woocommerce-order-received #content,
.woocommerce-order-received .site-content,
.woocommerce-order-received .col-full { background: var(--sq-bg) !important; }
.woocommerce-order-received #order_review { background: transparent !important; }

/* Centred single-column layout */
.sq-oc-wrap {
  max-width: 760px;
  margin:    0 auto;
  padding:   2rem 1rem 4rem;
}

/* White card with shadow */
.sq-oc-card {
  background:    #fff;
  border-radius: 12px;
  box-shadow:    0 2px 16px rgba(0,0,0,0.08);
  padding:       2rem;
  margin-bottom: 1.25rem;
}

/* Card section label */
.sq-oc-card-title {
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    700;
  font-size:      0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--sq-muted, #6b7280);
  margin-bottom:  1rem;
}

/* Success block */
.sq-oc-success {
  text-align: center;
  padding:    0.5rem 0 1rem;
}
.sq-oc-success-icon {
  width:           72px;
  height:          72px;
  border-radius:   50%;
  background:      #d1fae5;
  margin:          0 auto 1.25rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2rem;
  color:           #065f46;
}
.sq-oc-fail-icon {
  width:           72px;
  height:          72px;
  border-radius:   50%;
  background:      #fee2e2;
  margin:          0 auto 1.25rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       2rem;
  color:           #dc2626;
}
.sq-oc-success-h1 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   1.6rem;
  color:       var(--sq-dark, #1e1b4b);
  margin:      0 0 0.5rem;
}
.sq-oc-order-num {
  display:     inline-block;
  background:  var(--sq-bg, #f3f0ff);
  border:      1.5px solid var(--sq-primary, #4c1d95);
  color:       var(--sq-primary, #4c1d95);
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   1.1rem;
  padding:     0.5rem 1.25rem;
  border-radius: 8px;
  margin:      1rem 0;
}

/* Items table */
.sq-oc-items { width: 100%; border-collapse: collapse; }
.sq-oc-items th {
  font-family:    'Montserrat', Arial, sans-serif;
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--sq-muted, #9ca3af);
  padding:        0.4rem 0;
  border-bottom:  2px solid var(--sq-border, #e5e7eb);
  text-align:     left;
}
.sq-oc-items td {
  padding:        0.8rem 0;
  border-bottom:  1px solid var(--sq-border, #f3f4f6);
  font-size:      0.875rem;
  color:          var(--sq-dark, #374151);
  vertical-align: middle;
}
.sq-oc-items tr:last-child td { border-bottom: none; }

/* Summary rows */
.sq-oc-summary-row {
  display:         flex;
  justify-content: space-between;
  padding:         0.3rem 0;
  font-size:       0.875rem;
  color:           var(--sq-dark, #374151);
}
.sq-oc-summary-total {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 800;
  font-size:   1.05rem;
  color:       var(--sq-dark, #1e1b4b);
  border-top:  2px solid var(--sq-border, #e5e7eb);
  margin-top:  0.5rem;
  padding-top: 0.75rem;
}

/* Details 2-col grid */
.sq-oc-info-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}
@media (max-width: 540px) { .sq-oc-info-grid { grid-template-columns: 1fr; } }
.sq-oc-info-block-label {
  font-family:    'Montserrat', Arial, sans-serif;
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--sq-muted, #6b7280);
  margin-bottom:  0.4rem;
}
.sq-oc-info-block-val {
  font-size:   0.875rem;
  color:       var(--sq-dark, #374151);
  line-height: 1.7;
}

/* Guest account prompt */
.sq-oc-guest-prompt {
  background:  var(--sq-bg, #f3f0ff);
  border:      1.5px solid var(--sq-primary, #4c1d95);
  border-radius: 10px;
  padding:     1.25rem 1.5rem;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         1rem;
  flex-wrap:   wrap;
  margin-bottom: 0;
}
.sq-oc-guest-prompt-text {
  font-size:   0.875rem;
  color:       var(--sq-dark, #1e1b4b);
}
.sq-oc-guest-prompt-text strong {
  display:     block;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

/* CTA buttons */
.sq-oc-actions {
  display:         flex;
  gap:             0.75rem;
  flex-wrap:       wrap;
  justify-content: center;
}
.sq-oc-btn-primary {
  padding:        0.8rem 1.75rem;
  background:     var(--sq-primary, #4c1d95);
  color:          #fff;
  border:         none;
  border-radius:  8px;
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    800;
  font-size:      0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         pointer;
  text-decoration: none !important;
  display:        inline-block;
  transition:     opacity 200ms;
}
.sq-oc-btn-primary:hover { opacity: 0.88; }
.sq-oc-btn-secondary {
  padding:        0.8rem 1.75rem;
  background:     transparent;
  color:          var(--sq-dark, #374151);
  border:         1.5px solid var(--sq-border, #d1d5db);
  border-radius:  8px;
  font-family:    'Montserrat', Arial, sans-serif;
  font-weight:    700;
  font-size:      0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         pointer;
  text-decoration: none !important;
  display:        inline-block;
  transition:     border-color 200ms, color 200ms;
}
.sq-oc-btn-secondary:hover {
  border-color: var(--sq-primary, #4c1d95);
  color:        var(--sq-primary, #4c1d95);
}

/* Payment-method instructions card (e.g. BACS bank details) */
.sq-oc-payment-instructions {
  font-size: 0.9rem;
  color:     var(--sq-muted, #6b7280);
}
.sq-oc-payment-instructions h2,
.sq-oc-payment-instructions h3 {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--sq-dark, #1e1b4b);
  margin:      0 0 0.5rem;
}
.sq-oc-payment-instructions ul,
.sq-oc-payment-instructions ol { padding-left: 1.25rem; }

/* ============================================================
   PROFILE FORM — sq-form-grid, sq-field, sq-save-btn, sq-danger-btn
   ============================================================ */

.sq-form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-bottom:         1.25rem;
}
@media (max-width: 500px) { .sq-form-grid { grid-template-columns: 1fr; } }

.sq-field { margin-bottom: 0; }
.sq-field-full { grid-column: 1 / -1; }

.sq-field label {
  display:        block;
  font-family:    'Montserrat', sans-serif;
  font-weight:    600;
  font-size:      0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--sq-dark, #1e1b4b);
  margin-bottom:  0.4rem;
}
.sq-field label .required { color: #ef4444; margin-left: 2px; }

.sq-field input,
.sq-field select {
  width:        100%;
  box-sizing:   border-box;
  padding:      0.65rem 0.9rem;
  border:       1.5px solid var(--sq-border, #e5e7eb);
  border-radius: 8px;
  font-size:    0.9rem;
  font-family:  inherit;
  color:        var(--sq-dark, #1e1b4b);
  background:   var(--sq-surface, #fff);
  outline:      none;
  transition:   border-color 200ms;
}
.sq-field input:focus,
.sq-field select:focus { border-color: var(--sq-primary, #4c1d95); }

.sq-save-btn {
  margin-top:     1rem;
  padding:        0.7rem 1.75rem;
  border:         none;
  border-radius:  8px;
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         pointer;
  background:     var(--sq-primary, #4c1d95);
  color:          #fff;
  transition:     opacity 200ms;
}
.sq-save-btn:hover { opacity: 0.88; }

/* Danger zone card */
.sq-acc-card-title--danger { color: #ef4444; }
.sq-danger-desc {
  font-size:     0.875rem;
  color:         var(--sq-muted, #6b7280);
  margin:        0 0 1rem;
  line-height:   1.6;
}
.sq-danger-btn {
  display:        inline-block;
  padding:        0.65rem 1.25rem;
  border:         1.5px solid #ef4444;
  border-radius:  8px;
  background:     transparent;
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color:          #ef4444;
  text-decoration: none !important;
  cursor:         pointer;
  transition:     background 150ms;
}
.sq-danger-btn:hover { background: #fff5f5; color: #ef4444; }

/* ============================================================
   ADDRESSES PANEL — sq-addr-grid, sq-addr-card
   ============================================================ */

.sq-addr-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-bottom:         1rem;
}
@media (max-width: 550px) { .sq-addr-grid { grid-template-columns: 1fr; } }

.sq-addr-card {
  background:    var(--sq-surface, #fff);
  border:        1.5px solid var(--sq-border, #e5e7eb);
  border-radius: 10px;
  padding:       1.1rem;
  font-size:     0.875rem;
  color:         var(--sq-dark, #374151);
  line-height:   1.7;
  position:      relative;
  box-shadow:    0 2px 8px rgba(0,0,0,0.05);
}
.sq-addr-card--has-address { border-color: var(--sq-primary, #4c1d95); }

.sq-addr-label {
  font-family:    'Montserrat', sans-serif;
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--sq-primary, #4c1d95);
  margin-bottom:  0.5rem;
}
.sq-addr-body { font-style: normal; }
.sq-addr-empty {
  font-size: 0.875rem;
  color:     var(--sq-muted, #9ca3af);
  margin:    0;
}
.sq-addr-actions {
  display:    flex;
  gap:        0.5rem;
  margin-top: 0.75rem;
}
.sq-addr-action {
  font-family:     'Montserrat', sans-serif;
  font-size:       0.78rem;
  color:           var(--sq-primary, #4c1d95);
  font-weight:     600;
  cursor:          pointer;
  text-decoration: none;
}
.sq-addr-action:hover { text-decoration: underline; }

/* ============================================================
   LEGAL PAGES — page-legal.php template
   ============================================================ */

.sq-legal-wrap {
  max-width:    820px;
  margin:       0 auto;
  padding:      3rem 1rem 3rem;
  display:      grid;
  grid-template-columns: 220px 1fr;
  gap:          2.5rem;
  align-items:  start;
}
/* Suppress Storefront's article margin and #primary padding on legal pages */
.page-template-page-legal #primary          { padding-top: 0; padding-bottom: 0; }
.page-template-page-legal article.page      { margin-bottom: 0; }
@media (max-width: 720px) {
  .sq-legal-wrap { grid-template-columns: 1fr; }
  .sq-legal-toc  { display: none; }
}

/* Table of contents */
.sq-legal-toc {
  position:      sticky;
  top:           80px;
  background:    var(--sq-surface, #fff);
  border-radius: 10px;
  box-shadow:    0 2px 12px rgba(0,0,0,0.07);
  padding:       1rem 1.25rem 0.75rem;
}
.sq-legal-toc-title {
  font-family:    'Montserrat', sans-serif;
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color:          var(--sq-muted, #6b7280);
  margin-bottom:  0.5rem;
}
.sq-legal-toc-item {
  display:         block;
  font-size:       0.8rem;
  color:           var(--sq-dark, #374151);
  text-decoration: none !important;
  padding:         0.35rem 0 0.35rem 0.6rem;
  margin:          0;
  border-left:     2px solid transparent;
  transition:      border-color 150ms, color 150ms;
  line-height:     1.4;
}
.sq-legal-toc-item:hover {
  color:             var(--sq-primary, #4c1d95);
  border-left-color: var(--sq-primary, #4c1d95);
}
/* wpautop wraps TOC links in <p> with <br> — neutralise both */
.sq-legal-toc p  { margin: 0; padding: 0; }
.sq-legal-toc br { display: none; }

/* Body */
.sq-legal-page-title {
  font-family:  'Montserrat', sans-serif;
  font-weight:  800;
  font-size:    1.8rem;
  color:        var(--sq-dark, #1e1b4b);
  margin:       0 0 0.4rem;
  line-height:  1.2;
}
.sq-legal-page-meta {
  font-size:     0.8rem;
  color:         var(--sq-muted, #6b7280);
  margin-bottom: 2rem;
}
.sq-legal-section { margin-bottom: 2rem; }
.sq-legal-section-title {
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      1rem;
  color:          var(--sq-dark, #1e1b4b);
  margin:         0 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom:  2px solid var(--sq-border, #e5e7eb);
}
.sq-legal-body p {
  font-size:   0.9rem;
  color:       var(--sq-dark, #374151);
  line-height: 1.8;
  margin:      0 0 0.75rem;
}
.sq-legal-body ul {
  list-style:  disc;
  padding-left: 1.5rem;
  margin:      0.5rem 0 0.75rem;
}
.sq-legal-body ul li {
  font-size:     0.9rem;
  color:         var(--sq-dark, #374151);
  line-height:   1.8;
  margin-bottom: 0.3rem;
}
.sq-legal-body strong { color: var(--sq-dark, #1e1b4b); }

/* RODO rights cards */
.sq-rodo-cards {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
  margin-bottom:         1.5rem;
}
@media (max-width: 500px) { .sq-rodo-cards { grid-template-columns: 1fr; } }
.sq-rodo-card {
  background:    var(--sq-bg, #f8f7ff);
  border:        1.5px solid var(--sq-border, #e5e7eb);
  border-radius: 10px;
  padding:       1.1rem;
}
.sq-rodo-card-title {
  font-family:   'Montserrat', sans-serif;
  font-weight:   700;
  font-size:     0.85rem;
  color:         var(--sq-dark, #1e1b4b);
  margin-bottom: 0.4rem;
}
.sq-rodo-card-desc {
  font-size:     0.8rem;
  color:         var(--sq-muted, #6b7280);
  line-height:   1.6;
  margin-bottom: 0.75rem;
}
.sq-rodo-btn {
  padding:        0.55rem 1rem;
  background:     var(--sq-primary, #4c1d95);
  color:          #fff;
  border:         none;
  border-radius:  6px;
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     opacity 200ms;
}
.sq-rodo-btn:hover { opacity: 0.88; }

/* ============================================================
   RODO REQUEST FORM — account panel form fields
   ============================================================ */
.sq-form-row {
  display:        flex;
  flex-direction: column;
  gap:            0.35rem;
  margin-bottom:  1rem;
}
.sq-form-label {
  font-family:  'Montserrat', sans-serif;
  font-weight:  600;
  font-size:    0.82rem;
  color:        var(--sq-dark, #1e1b4b);
  letter-spacing: 0.03em;
}
.sq-form-select,
.sq-form-input,
.sq-form-textarea {
  width:         100%;
  padding:       0.55rem 0.75rem;
  border:        1px solid #d1d5db;
  border-radius: 8px;
  font-size:     0.9rem;
  color:         var(--sq-dark, #1e1b4b);
  background:    #fff;
  transition:    border-color 150ms;
  box-sizing:    border-box;
}
.sq-form-select:focus,
.sq-form-input:focus,
.sq-form-textarea:focus {
  outline:      none;
  border-color: var(--sq-accent, #6d28d9);
  box-shadow:   0 0 0 3px rgba(109,40,217,0.12);
}
.sq-form-textarea { resize: vertical; }

/* ============================================================
   INFO PAGES — page-info.php template (O nas, Kontakt)
   ============================================================ */
.page-template-page-info #primary { padding-top: 0; padding-bottom: 0; max-width: none; }
.page-template-page-info .content-area { max-width: none; padding-left: 0; padding-right: 0; }
.page-template-page-info article.page { margin-bottom: 0; }

.sq-info-wrap {
  max-width:  960px;
  margin:     0 auto;
  padding:    3rem 1rem 3rem;
}
.sq-info-page-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size:   1.8rem;
  color:       var(--sq-dark, #1e1b4b);
  margin:      0 0 0.4rem;
  line-height: 1.2;
}
.sq-info-page-sub {
  font-size:   1rem;
  color:       var(--sq-muted, #6b7280);
  margin:      0 0 2.5rem;
  line-height: 1.6;
}
.sq-info-card {
  background:    var(--sq-surface, #fff);
  border-radius: 12px;
  box-shadow:    0 2px 14px rgba(0,0,0,0.07);
  padding:       2rem;
  margin-bottom: 1.5rem;
}
.sq-info-card-title {
  font-family:   'Montserrat', sans-serif;
  font-weight:   700;
  font-size:     1rem;
  color:         var(--sq-dark, #1e1b4b);
  margin:        0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--sq-border, #e5e7eb);
}
.sq-info-card p {
  font-size:   0.9rem;
  color:       var(--sq-dark, #374151);
  line-height: 1.8;
  margin:      0 0 0.75rem;
}
.sq-info-card p:last-child { margin-bottom: 0; }

/* About — hero */
.sq-about-hero {
  background:    var(--sq-primary, #4c1d95);
  border-radius: 14px;
  padding:       3rem 2rem;
  color:         #fff;
  text-align:    center;
  margin-bottom: 1.5rem;
}
.sq-about-hero h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size:   2rem;
  margin:      0 0 0.5rem;
  color:       #fff;
}
.sq-about-hero p {
  font-size:   0.95rem;
  opacity:     0.85;
  max-width:   560px;
  margin:      0 auto;
  line-height: 1.7;
}

/* About — stats */
.sq-about-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1rem;
  margin-bottom:         1.5rem;
}
@media (max-width: 540px) { .sq-about-stats { grid-template-columns: 1fr 1fr; } }
.sq-about-stat {
  background:    var(--sq-surface, #fff);
  border-radius: 10px;
  box-shadow:    0 2px 10px rgba(0,0,0,0.07);
  padding:       1.25rem;
  text-align:    center;
}
.sq-about-stat-val {
  font-family:   'Montserrat', sans-serif;
  font-weight:   900;
  font-size:     2rem;
  color:         var(--sq-primary, #4c1d95);
  line-height:   1;
  margin-bottom: 0.3rem;
}
.sq-about-stat-label {
  font-family:    'Montserrat', sans-serif;
  font-size:      0.72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color:          var(--sq-muted, #6b7280);
}

/* Contact — layout */
.sq-contact-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.5rem;
  align-items:           start;
}
@media (max-width: 640px) { .sq-contact-grid { grid-template-columns: 1fr; } }
.sq-contact-info-row {
  display:       flex;
  align-items:   flex-start;
  gap:           0.75rem;
  margin-bottom: 1.1rem;
}
.sq-contact-icon {
  width:          36px;
  height:         36px;
  border-radius:  8px;
  background:     var(--sq-bg, #f3f0ff);
  color:          var(--sq-primary, #4c1d95);
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      1rem;
  flex-shrink:    0;
}
.sq-contact-info-label {
  font-family:    'Montserrat', sans-serif;
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--sq-muted, #9ca3af);
  margin-bottom:  0.15rem;
}
.sq-contact-info-val {
  font-size:   0.9rem;
  color:       var(--sq-dark, #1e1b4b);
  font-weight: 600;
}
.sq-contact-info-sub {
  font-size: 0.8rem;
  color:     var(--sq-muted, #6b7280);
}
.sq-map-placeholder {
  width:           100%;
  height:          180px;
  background:      linear-gradient(135deg, #e0d7ff 0%, #c4b5fd 100%);
  border-radius:   10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--sq-primary, #4c1d95);
  font-family:     'Montserrat', sans-serif;
  font-weight:     700;
  font-size:       0.85rem;
  letter-spacing:  0.05em;
  text-transform:  uppercase;
  margin-top:      1rem;
}

/* Contact — form fields */
.sq-field { margin-bottom: 1rem; }
.sq-field label {
  display:        block;
  font-family:    'Montserrat', sans-serif;
  font-weight:    600;
  font-size:      0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--sq-dark, #1e1b4b);
  margin-bottom:  0.35rem;
}
.sq-field input,
.sq-field textarea,
.sq-field select {
  width:         100%;
  box-sizing:    border-box;
  padding:       0.65rem 0.9rem;
  border:        1.5px solid var(--sq-border, #e5e7eb);
  border-radius: 8px;
  font-size:     0.9rem;
  color:         var(--sq-dark, #1e1b4b);
  background:    var(--sq-surface, #fff);
  outline:       none;
  transition:    border-color 200ms;
  font-family:   inherit;
}
.sq-field input:focus,
.sq-field textarea:focus,
.sq-field select:focus { border-color: var(--sq-primary, #4c1d95); box-shadow: 0 0 0 3px rgba(76,29,149,0.1); }
.sq-field textarea { resize: vertical; min-height: 100px; }
.sq-consent {
  display:       flex;
  align-items:   flex-start;
  gap:           0.6rem;
  margin-bottom: 1rem;
  font-size:     0.82rem;
  color:         var(--sq-muted, #6b7280);
  line-height:   1.5;
}
.sq-consent input[type="checkbox"] {
  margin-top:  2px;
  width:       16px;
  height:      16px;
  flex-shrink: 0;
  accent-color: var(--sq-primary, #4c1d95);
}
.sq-consent a { color: var(--sq-primary, #4c1d95); font-weight: 600; }
.sq-submit-btn {
  padding:        0.8rem 1.75rem;
  background:     var(--sq-primary, #4c1d95);
  color:          #fff;
  border:         none;
  border-radius:  8px;
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     opacity 200ms;
}
.sq-submit-btn:hover { opacity: 0.88; }

/* ============================================================
   ERROR PAGES — 404 / 500
   ============================================================ */

/* Zero out Storefront's padding-top on 404 body */
.error404 #primary {
  padding-top:    0;
  padding-bottom: 0;
}

.sq-error-wrap {
  min-height:      55vh;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         3rem 1rem;
}

/* http.cat image */
.sq-error-cat-wrap {
  width:         100%;
  max-width:     560px;
  aspect-ratio:  4 / 3;
  overflow:      hidden;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  box-shadow:    0 4px 24px rgba(76,29,149,0.12);
}
.sq-error-cat {
  width:         100%;
  height:        115%;
  object-fit:    cover;
  object-position: top;
  display:       block;
}

/* Ghost large code number — kept for non-cat contexts */
.sq-error-code {
  font-family:   'Montserrat', sans-serif;
  font-weight:   900;
  font-size:     7rem;
  line-height:   1;
  color:         var(--sq-primary, #4c1d95);
  opacity:       0.15;
  margin-bottom: -1rem;
}

.sq-error-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size:   1.6rem;
  color:       var(--sq-dark, #1e1b4b);
  margin:      0 0 0.5rem;
}

.sq-error-sub {
  font-size:   0.95rem;
  color:       var(--sq-muted, #6b7280);
  max-width:   420px;
  line-height: 1.7;
  margin:      0 0 2rem;
}

/* Inline search form on 404 */
.sq-error-search {
  display:       flex;
  gap:           0.5rem;
  max-width:     380px;
  width:         100%;
  margin-bottom: 1.5rem;
}

.sq-error-search input[type="search"] {
  flex:          1;
  padding:       0.7rem 1rem;
  border:        1.5px solid var(--sq-border, #e5e7eb);
  border-radius: 8px;
  font-size:     0.9rem;
  color:         var(--sq-dark, #1e1b4b);
  outline:       none;
  font-family:   inherit;
  background:    #fff;
}

.sq-error-search input[type="search"]:focus {
  border-color: var(--sq-primary, #4c1d95);
}

.sq-error-search button {
  padding:       0.7rem 1.1rem;
  background:    var(--sq-primary, #4c1d95);
  color:         #fff;
  border:        none;
  border-radius: 8px;
  font-family:   'Montserrat', sans-serif;
  font-weight:   700;
  font-size:     0.8rem;
  cursor:        pointer;
}

/* Quick navigation links */
.sq-error-links {
  display:         flex;
  gap:             0.75rem;
  flex-wrap:       wrap;
  justify-content: center;
}

.sq-error-link {
  padding:         0.65rem 1.25rem;
  border:          1.5px solid var(--sq-border, #e5e7eb);
  border-radius:   8px;
  font-family:     'Montserrat', sans-serif;
  font-weight:     700;
  font-size:       0.78rem;
  text-transform:  uppercase;
  letter-spacing:  0.05em;
  color:           var(--sq-dark, #374151);
  text-decoration: none;
  transition:      border-color 200ms, color 200ms;
}

.sq-error-link:hover {
  border-color: var(--sq-primary, #4c1d95);
  color:        var(--sq-primary, #4c1d95);
}

/* ============================================================
   ADDRESS EDIT FORM — skin WC default form-edit-address.php
   ============================================================ */

/* Card wrapper around the whole form */
.woocommerce-account .woocommerce-address-fields {
  background:    var(--sq-surface, #fff);
  border-radius: 12px;
  box-shadow:    0 2px 12px rgba(0,0,0,0.07);
  padding:       1.5rem;
  margin-bottom: 1.25rem;
}

/* Page heading (h2 inside the form) */
.woocommerce-account .woocommerce-address-fields > form > h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size:   1.1rem;
  color:       var(--sq-dark, #1e1b4b);
  margin:      0 0 1.25rem;
}

/* Field grid — match checkout 2-column layout */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0 1rem;
}
@media (max-width: 500px) {
  .woocommerce-account .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr;
  }
}
.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide {
  grid-column: 1 / -1;
}

/* Labels */
.woocommerce-account .woocommerce-address-fields .form-row label {
  display:        block;
  font-family:    'Montserrat', sans-serif;
  font-weight:    600;
  font-size:      0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color:          var(--sq-dark, #1e1b4b);
  margin-bottom:  0.4rem;
}

/* Inputs & selects */
.woocommerce-account .woocommerce-address-fields .form-row input.input-text,
.woocommerce-account .woocommerce-address-fields .form-row select {
  width:         100%;
  box-sizing:    border-box;
  padding:       0.65rem 0.9rem;
  border:        1.5px solid var(--sq-border, #e5e7eb);
  border-radius: 8px;
  font-size:     0.9rem;
  font-family:   inherit;
  color:         var(--sq-dark, #1e1b4b);
  background:    var(--sq-surface, #fff);
  outline:       none;
  transition:    border-color 200ms;
}
.woocommerce-account .woocommerce-address-fields .form-row input.input-text:focus,
.woocommerce-account .woocommerce-address-fields .form-row select:focus {
  border-color: var(--sq-primary, #4c1d95);
}

/* Submit button */
.woocommerce-account .woocommerce-address-fields button[name="save_address"] {
  margin-top:     1rem;
  padding:        0.7rem 1.75rem;
  border:         none;
  border-radius:  8px;
  font-family:    'Montserrat', sans-serif;
  font-weight:    700;
  font-size:      0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         pointer;
  background:     var(--sq-primary, #4c1d95);
  color:          #fff;
  transition:     opacity 200ms;
}
.woocommerce-account .woocommerce-address-fields button[name="save_address"]:hover {
  opacity: 0.88;
}

/* ============================================================
   NEWSLETTER TOGGLES
   ============================================================ */

.sq-toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1rem 0;
  border-bottom:   1px solid var(--sq-border, #f3f4f6);
}
.sq-toggle-row:last-of-type { border-bottom: none; }

.sq-toggle-info  { flex: 1; }
.sq-toggle-name  {
  font-family:   'Montserrat', sans-serif;
  font-weight:   700;
  font-size:     0.88rem;
  color:         var(--sq-dark, #1e1b4b);
  margin-bottom: 0.2rem;
}
.sq-toggle-desc  { font-size: 0.8rem; color: var(--sq-muted, #6b7280); }

.sq-toggle {
  position:   relative;
  width:      44px;
  height:     24px;
  flex-shrink: 0;
  margin-left: 1rem;
}
.sq-toggle input {
  opacity:  0;
  width:    0;
  height:   0;
  position: absolute;
}
.sq-toggle-track {
  position:      absolute;
  inset:         0;
  background:    #d1d5db;
  border-radius: 99px;
  transition:    background 200ms;
  cursor:        pointer;
}
.sq-toggle-track::after {
  content:       '';
  position:      absolute;
  width:         18px;
  height:        18px;
  border-radius: 50%;
  background:    #fff;
  top:           3px;
  left:          3px;
  transition:    transform 200ms;
  box-shadow:    0 1px 3px rgba(0,0,0,0.2);
}
.sq-toggle input:checked + .sq-toggle-track {
  background: var(--sq-primary, #4c1d95);
}
.sq-toggle input:checked + .sq-toggle-track::after {
  transform: translateX(20px);
}