/*
Theme Name:   Blocksy Child - Off-Licence
Theme URI:
Description:  Custom child theme for a single UK off-licence WooCommerce store.
Author:       TechBytz
Template:     blocksy
Version:      1.1.0
Text Domain:  blocksy-child-offlicence
*/

/* ==========================================================================
   1. DESIGN TOKENS — Ink / Copper / Lime signature palette
   ========================================================================== */
:root {
  --tbol-ink: #0d0e12;          /* page + card background — trust, premium, night-shopping */
  --tbol-ink-raised: #1a1c24;   /* cards sitting on the ink background */
  --tbol-ink-inset: #262834;    /* image placeholders / inputs on ink */
  --tbol-text: #f4ede3;         /* primary text on dark — soft cream, not pure white */
  --tbol-text-soft: #a8a6a0;    /* secondary/muted text on dark */
  --tbol-accent: #d98a4a;       /* copper — pricing, primary CTAs, whisky/appetite cue */
  --tbol-accent-dark: #b8712f;  /* copper hover state */
  --tbol-accent-ink: #1a0f06;   /* text colour used ON TOP OF copper fills */
  --tbol-lime: #c8ff4d;         /* signature spark accent — badges, tags, "look here" only */
  --tbol-lime-ink: #17300a;     /* text colour used ON TOP OF lime fills */
  --tbol-whatsapp: #25d366;     /* kept as WhatsApp's own brand green for instant recognition */
  --tbol-whatsapp-dark: #1ebe5b;
  --tbol-danger: #ff6b6b;       /* legible red against dark backgrounds */
  --tbol-border: #24262f;
  --tbol-radius-sm: 8px;
  --tbol-radius-md: 14px;
  --tbol-radius-lg: 20px;
  --tbol-shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --tbol-shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --tbol-font-heading: 'Manrope', sans-serif;
  --tbol-font-body: 'Inter', sans-serif;
}

body.woocommerce,
body.woocommerce-page {
  background: var(--tbol-ink);
  font-family: var(--tbol-font-body);
  color: var(--tbol-text);
}

/* ==========================================================================
   2. SHOP / ARCHIVE — PRODUCT CARDS
   ========================================================================== */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 640px) {
  ul.products { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  ul.products { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

ul.products li.product {
  position: relative;
  background: var(--tbol-ink-raised);
  border: 1px solid var(--tbol-border);
  border-radius: var(--tbol-radius-md);
  box-shadow: var(--tbol-shadow-sm);
  padding: 12px 12px 16px;
  transition: box-shadow .2s ease, transform .2s ease;
}

ul.products li.product:hover {
  box-shadow: var(--tbol-shadow-md);
  transform: translateY(-2px);
}

ul.products li.product a img {
  border-radius: var(--tbol-radius-sm);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  background: var(--tbol-ink-inset);
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--tbol-font-heading);
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 4px;
  line-height: 1.3;
  color: var(--tbol-text);
}

ul.products li.product .price {
  font-weight: 700;
  color: var(--tbol-accent);
  font-size: 14px;
}

ul.products li.product .price del {
  color: var(--tbol-text-soft);
  font-weight: 400;
  opacity: .7;
}

ul.products li.product .price ins {
  text-decoration: none;
  color: var(--tbol-accent);
}

ul.products li.product .star-rating {
  font-size: 12px;
  margin: 4px 0;
}

ul.products li.product .button.add_to_cart_button {
  width: 100%;
  margin-top: 10px;
  border-radius: var(--tbol-radius-sm) !important;
  background: var(--tbol-accent) !important;
  color: var(--tbol-accent-ink) !important;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 12px !important;
  border: none !important;
}

ul.products li.product .button.add_to_cart_button:hover {
  background: var(--tbol-accent-dark) !important;
}

/* ==========================================================================
   3. DISCOUNT BADGE — the one place lime is used at full strength
   ========================================================================== */
.tbol-discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  background: var(--tbol-lime);
  color: var(--tbol-lime-ink);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* ==========================================================================
   4. SINGLE PRODUCT — DESKTOP TWO-COLUMN LAYOUT
   ========================================================================== */
.single-product div.product {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 20px;
  color: var(--tbol-text);
}

@media (max-width: 900px) {
  .single-product div.product {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px 90px; /* bottom padding clears sticky bar */
  }
}

.single-product div.product .woocommerce-product-gallery {
  border-radius: var(--tbol-radius-lg);
  overflow: hidden;
  box-shadow: var(--tbol-shadow-sm);
  background: var(--tbol-ink-inset);
}

.single-product .product_title {
  font-family: var(--tbol-font-heading);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--tbol-text);
}

.single-product .woocommerce-product-rating {
  margin-bottom: 12px;
}

.single-product p.price {
  font-size: 22px;
  font-weight: 700;
  margin: 10px 0;
  color: var(--tbol-accent);
}

.single-product p.price del {
  font-size: 15px;
  opacity: .6;
  margin-right: 8px;
  color: var(--tbol-text-soft);
}

.single-product p.price ins {
  text-decoration: none;
  color: var(--tbol-accent);
}

.single-product .woocommerce-product-details__short-description {
  color: var(--tbol-text-soft);
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0;
}

.single-product .stock {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.single-product .stock.in-stock { background: rgba(200, 255, 77, .12); color: var(--tbol-lime); }
.single-product .stock.out-of-stock { background: rgba(255, 107, 107, .12); color: var(--tbol-danger); }

.single-product form.cart {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0;
}

.single-product form.cart .quantity input.qty {
  width: 64px;
  height: 44px;
  border-radius: var(--tbol-radius-sm);
  border: 1px solid var(--tbol-border);
  background: var(--tbol-ink-inset);
  color: var(--tbol-text);
  text-align: center;
}

.single-product form.cart .single_add_to_cart_button {
  flex: 1;
  min-width: 160px;
  height: 44px;
  border-radius: var(--tbol-radius-sm) !important;
  background: var(--tbol-accent) !important;
  color: var(--tbol-accent-ink) !important;
  font-weight: 700;
  border: none;
}

.single-product form.cart .single_add_to_cart_button:hover {
  background: var(--tbol-accent-dark) !important;
}

/* ==========================================================================
   5. WHATSAPP ORDER BUTTON — kept as WhatsApp's own brand green
   ========================================================================== */
.tbol-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  margin: 4px 0 16px;
  background: var(--tbol-whatsapp);
  color: #fff;
  border: none;
  border-radius: var(--tbol-radius-sm);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease;
}
.tbol-whatsapp-btn:hover { background: var(--tbol-whatsapp-dark); }
.tbol-wa-icon { flex-shrink: 0; }

/* ==========================================================================
   6. META BLOCK (SKU / category / delivery + age verification)
   ========================================================================== */
.tbol-meta-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--tbol-border);
  font-size: 13px;
  color: var(--tbol-text-soft);
}
.tbol-meta-row { display: flex; gap: 6px; margin-bottom: 4px; }
.tbol-meta-label { font-weight: 600; color: var(--tbol-text); }

.tbol-delivery-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--tbol-ink-raised);
  border-radius: var(--tbol-radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tbol-text-soft);
}

/* ==========================================================================
   7. ACCORDION (mobile tabs — description / additional info / reviews)
   ========================================================================== */
@media (max-width: 900px) {
  .woocommerce-tabs .tabs { display: none; } /* hide default tab nav, JS builds accordion headers */

  .tbol-accordion-item {
    border-bottom: 1px solid var(--tbol-border);
  }
  .tbol-accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 16px 4px;
    font-family: var(--tbol-font-heading);
    font-weight: 600;
    font-size: 15px;
    color: var(--tbol-text);
    cursor: pointer;
  }
  .tbol-accordion-trigger .tbol-accordion-icon {
    transition: transform .2s ease;
    color: var(--tbol-accent);
  }
  .tbol-accordion-trigger[aria-expanded="true"] .tbol-accordion-icon {
    transform: rotate(45deg);
  }
  .tbol-accordion-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
    padding: 0 4px;
    color: var(--tbol-text-soft);
  }
  .tbol-accordion-panel.tbol-open {
    max-height: 2000px;
    padding-bottom: 16px;
  }
}

/* ==========================================================================
   8. STICKY MOBILE ACTION BAR
   ========================================================================== */
.tbol-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--tbol-ink-raised);
  border-top: 1px solid var(--tbol-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .4);
}

.tbol-sticky-bar.tbol-visible {
  display: flex;
}

.tbol-sticky-btn {
  flex: 1;
  height: 46px;
  border-radius: var(--tbol-radius-sm);
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.tbol-sticky-cart {
  background: var(--tbol-accent);
  color: var(--tbol-accent-ink);
}

.tbol-sticky-whatsapp {
  background: var(--tbol-whatsapp);
  color: #fff;
}

@media (min-width: 901px) {
  .tbol-sticky-bar { display: none !important; } /* desktop never shows the bar */
}