/*
Theme Name: Snibboo
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: Snibboo custom WooCommerce theme, converted from Shopify.
Version: 1.0.0
Text Domain: your-theme
*/

/* ============================================
   SNIBBOO — GLOBAL MOBILE-FIRST CSS
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body, 'Lato', sans-serif);
  font-size: var(--font-size-base, 15px);
  color: var(--color-text, #222);
  background: var(--color-background, #fff);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #fff !important;
  border-bottom: 1px solid #eee !important;
}

/* Logo */
.site-header img { max-width: 140px; height: auto; }

/* Icons touch targets */
.site-header a[aria-label] {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */
.announcement-bar {
  text-align: center;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
}

/* ============================================
   HERO / SLIDESHOW
   ============================================ */
.hero-slide,
section[style*="grid-template-columns:1fr 1fr"],
div[style*="grid-template-columns:1fr 1fr"] {
  display: grid;
}

/* ============================================
   COLLECTION GRID
   ============================================ */
div[style*="grid-template-columns:repeat(4,1fr)"],
div[style*="repeat(4, 1fr)"] {
  display: grid !important;
}

/* ============================================
   PRODUCT PAGE
   ============================================ */
#prod-track {
  display: flex;
  transition: transform 0.45s ease;
}

#prod-track img {
  width: 100%;
  object-fit: contain;
}

/* Size popup */
#size-popup {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  position: relative;
  overflow: hidden;
}

footer > div:nth-child(2) {
  display: grid;
  grid-template-columns: 240px repeat(4, 1fr);
  gap: 40px;
  padding: 56px 24px 40px;
  max-width: 1300px;
  margin: 0 auto;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 6px;
  font-family: var(--font-heading, 'Josefin Sans', sans-serif);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  border: none;
  letter-spacing: 0.04em;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }
.btn--primary { background: #222; color: #fff; }
.btn--primary:hover { background: #444; }
.btn--outline { background: #fff; color: #222; border: 1.5px solid #222; }
.btn--outline:hover { background: #f5f5f5; }
.btn--accent { background: #F4A261; color: #fff; }
.btn--accent:hover { opacity: 0.88; }

/* ============================================
   CART PAGE
   ============================================ */
.cart-main { padding: 40px 0 80px; }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }

/* ============================================
   CHECKOUT PAGE
   ============================================
   Moved into woocommerce/checkout/form-checkout.php as of the last
   update — that template now has its own <style> block scoped to
   .jc-checkout-wrap, so it doesn't depend on matching WooCommerce's
   default markup from here. Keeping duplicate rules in this file
   caused a double-nested-grid bug (this file's old grid on the
   <form> element, plus the template's own grid inside it), so this
   whole section was removed rather than left in place unused. */

/* ============================================
   UTILITIES
   ============================================ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* WooCommerce uses this exact class name for its own accessibility
   labels (e.g. the hidden "Product Name quantity" label next to
   quantity steppers) — without it, those labels show up visibly. */
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================
   TABLET — max 1024px
   ============================================ */
@media (max-width: 1024px) {

  /* Footer */
  footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 28px !important;
    padding: 40px 20px !important;
  }

  /* Collection grid 3 cols */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Hero text padding */
  section[style*="padding:64px"] > div > div:first-child {
    padding: 40px 32px !important;
  }
}

/* ============================================
   MOBILE — max 768px
   ============================================ */
@media (max-width: 768px) {

  /* ── Header ── */
  .site-header > div {
    padding: 10px 14px !important;
  }

  .site-header img {
    max-width: 100px !important;
  }

  /* ── Announcement bar ── */
  div[style*="padding:{{ section.settings.pad_v }}px 48px"],
  div[style*="padding:10px 48px"],
  div[style*="padding:8px 48px"],
  div[style*="padding:12px 48px"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 11px !important;
  }

  /* ── All 2-col grids → single col ── */
  div[style*="grid-template-columns:1fr 1fr"],
  section[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:240px"],
  section > div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Collection grid → 2 cols ── */
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="repeat(4, 1fr)"],
  div[style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ── Section padding ── */
  section { padding-left: 16px !important; padding-right: 16px !important; }
  section[style*="padding:64px 24px"] { padding: 36px 16px !important; }
  section[style*="padding:72px 24px"] { padding: 36px 16px !important; }
  section[style*="padding:48px 24px"] { padding: 28px 16px !important; }

  /* ── Large inner padding → mobile friendly ── */
  div[style*="padding:64px;"] { padding: 28px 20px !important; }
  div[style*="padding:60px 64px"] { padding: 28px 20px !important; }

  /* ── Headings ── */
  h1[style*="font-size:48px"] { font-size: 1.9rem !important; }
  h1[style*="font-size:2rem"] { font-size: 1.6rem !important; }
  h2[style*="font-size:32px"] { font-size: 1.4rem !important; }
  h2[style*="font-size:28px"] { font-size: 1.3rem !important; }

  /* ── About hero ── */
  div[style*="padding:48px 24px 24px"] {
    padding: 28px 16px 16px !important;
  }

  div[style*="padding:48px 24px 24px"] h1 {
    font-size: 1.8rem !important;
  }

  /* ── About hero image ── */
  img[style*="max-height:500px"] {
    max-height: 220px !important;
  }

  /* ── Brand story / about history image ── */
  div[style*="min-height:460px"] > div:last-child img,
  div[style*="min-height:400px"] > div:last-child img {
    max-height: 280px !important;
    object-fit: cover;
  }

  /* ── Product page ── */
  #prod-track > div {
    min-width: 100% !important;
  }

  #prod-track img {
    height: 300px !important;
  }

  div[style*="max-width:700px"] {
    padding: 24px 16px !important;
  }

  /* Add to bag — stack buttons */
  div[style*="display:flex;gap:0;margin-top:24px"] {
    flex-direction: column !important;
    max-width: 100% !important;
  }

  div[style*="display:flex;gap:0;margin-top:24px"] button:first-child {
    border-right: 1.5px solid #ddd !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
  }

  div[style*="display:flex;gap:0;margin-top:24px"] button:last-child {
    border-radius: 0 0 4px 4px !important;
  }

  /* ── Size popup ── */
  #size-popup > div {
    padding: 28px 18px !important;
    width: 94% !important;
  }

  /* ── Cart ── */
  .cart-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .cart-table__header { display: none !important; }

  .cart-item {
    grid-template-columns: 90px 1fr !important;
    gap: 14px !important;
    padding: 18px 0 !important;
  }

  .cart-item__image-wrap img {
    width: 90px !important;
    height: 90px !important;
  }

  .cart-item__bottom-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .cart-summary {
    position: static !important;
    border: none !important;
    background: #fafafa !important;
    border-radius: 16px !important;
    margin-top: 24px !important;
    padding: 20px 16px !important;
  }

  .cart-checkout-btn {
    padding: 18px !important;
    font-size: 1.05rem !important;
  }

  /* ── Footer ── */
  footer > div:nth-child(2) {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    padding: 32px 16px !important;
  }

  footer > div:nth-child(3) {
    flex-direction: column !important;
    text-align: center !important;
    padding: 16px !important;
    gap: 10px !important;
  }

  /* ── About collections grid ── */
  div[style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* ── Nav breadcrumb ── */
  nav[style*="justify-content:center"] {
    font-size: 0.72rem !important;
    gap: 4px !important;
  }
}

/* ============================================
   SMALL PHONES — max 480px
   ============================================ */
@media (max-width: 480px) {

  .site-header img { max-width: 85px !important; }

  h1[style*="font-size:48px"] { font-size: 1.6rem !important; }
  h2[style*="font-size:32px"] { font-size: 1.25rem !important; }

  section[style*="padding:64px 24px"] { padding: 28px 12px !important; }

  #prod-track img { height: 240px !important; }

  div[style*="max-width:700px"] { padding: 20px 12px !important; }

  #size-popup > div {
    padding: 24px 14px !important;
    width: 97% !important;
  }

  footer > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 14px !important;
  }

  .cart-item {
    grid-template-columns: 75px 1fr !important;
    gap: 10px !important;
  }

  .cart-item__image-wrap img {
    width: 75px !important;
    height: 75px !important;
  }

  div[style*="padding:64px;"] { padding: 24px 14px !important; }
  div[style*="padding:60px 64px"] { padding: 24px 14px !important; }
}

/* ============================================
   TOUCH IMPROVEMENTS
   ============================================ */
@media (hover: none) {
  .qty-btn { min-width: 44px; min-height: 44px; }
  .cart-item__remove { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  a, button { -webkit-tap-highlight-color: transparent; }
  .has-dropdown > ul { display: none !important; }
}