/* =========================================================
   Inkvely — Custom Shop Page Styles
   Enqueue this file (see functions-snippet.php)
   ========================================================= */

:root{
  --inkvely-orange:#ff5a1f;
  --inkvely-dark:#1a1a1a;
  --inkvely-gray:#6b6b6b;
  --inkvely-border:#e7e5e0;
  --inkvely-bg:#faf9f7;
  --inkvely-sale:#e0392f;
}

.inkvely-shop-wrap{ max-width:1280px; margin:0 auto; padding:0 4px 32px; }
@media (min-width: 640px){ .inkvely-shop-wrap{ padding:0 16px 60px; } }

/* Astra's own content-column class (.ast-grid-common-col) ships with
   20px of left/right padding baked in, and Astra still wraps the shop
   page's main content area in it. That's on top of the 4px we already
   set above on .inkvely-shop-wrap, effectively double-padding the
   page on mobile. Scoped to WooCommerce archive pages only (shop /
   category / tag) via the body classes WooCommerce adds, so normal
   pages/posts elsewhere on the site keep Astra's default spacing. */
body.woocommerce.archive .ast-grid-common-col{
  padding-left:2px !important;
  padding-right:2px !important;
}

/* ---------- HERO ---------- */
.inkvely-hero{
  background:linear-gradient(120deg,var(--inkvely-dark) 0%,var(--inkvely-dark) 45%,var(--inkvely-orange) 100%);
  color:#fff; border-radius:0 0 18px 18px; margin:0 -4px 24px; padding:36px 20px 44px; text-align:center;
}
@media (min-width: 640px){ .inkvely-hero{ margin:0 -16px 24px; } }
.inkvely-hero-inner{ max-width:640px; margin:0 auto; }
.inkvely-hero-logo{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; }
.logo-badge{ background:#fff; color:var(--inkvely-orange); font-weight:800; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.logo-text{ font-weight:700; font-size:20px; }
.inkvely-hero-title{ font-size:30px; font-weight:800; letter-spacing:.5px; margin:0 0 8px; }
.inkvely-hero-title span{ color:var(--inkvely-orange); }
.inkvely-hero-sub{ opacity:.85; margin:0 0 20px; font-size:14px; }
.inkvely-hero-badges{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:18px; padding:0; margin:0 0 22px; font-size:12px; font-weight:600; }
.inkvely-hero-badges small{ font-weight:400; opacity:.75; display:block; font-size:10px; }
.inkvely-shop-btn{ display:inline-block; background:var(--inkvely-orange); color:#fff; font-weight:700; padding:12px 34px; border-radius:6px; text-decoration:none; letter-spacing:.5px; }
.inkvely-shop-btn:hover{ background:#e14e15; color:#fff; }

/* ---------- TOOLBAR ---------- */
.inkvely-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--inkvely-border); }
.inkvely-filter-toggle{ display:flex; align-items:center; gap:6px; background:none; border:none; font-weight:600; font-size:15px; cursor:pointer; color:var(--inkvely-dark); }
.inkvely-result-count{ font-size:14px; color:var(--inkvely-gray); margin:0; }

.inkvely-filters{ padding:16px 0; border-bottom:1px solid var(--inkvely-border); }
.inkvely-filters-empty{ font-size:13px; color:var(--inkvely-gray); }

/* ---------- PROMO STRIP ---------- */
.inkvely-promo-strip{
  background:#d9f2e3; color:#1c5c34; font-size:13px; font-weight:600;
  padding:10px 16px; border-radius:8px; margin:16px 0; display:flex; align-items:center; justify-content:center; gap:10px; position:relative; text-align:center;
}
.inkvely-promo-close{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:16px; cursor:pointer; color:#1c5c34; }

/* ---------- SEARCH BAR ---------- */
.inkvely-search-bar{ display:flex; align-items:center; gap:10px; margin:0 0 22px; }
.inkvely-search-bar input[type="search"]{ flex:1; border:1px solid var(--inkvely-border); border-radius:20px; padding:9px 16px; font-size:14px; }
.inkvely-search-bar button[type="submit"]{ background:none; border:none; cursor:pointer; color:var(--inkvely-dark); }
.inkvely-cart-icon{ position:relative; color:var(--inkvely-dark); display:flex; }
.inkvely-cart-count{ position:absolute; top:-6px; right:-8px; background:var(--inkvely-orange); color:#fff; font-size:10px; border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; }

/* ---------- PRODUCT GRID ---------- */
.inkvely-product-grid{ display:block; }
.inkvely-product-grid ul.products{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:8px !important;
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
@media (min-width: 480px){ .inkvely-product-grid ul.products{ gap:4px !important; } }
@media (min-width: 640px){ .inkvely-product-grid ul.products{ grid-template-columns:repeat(3,1fr) !important; gap:4px !important; } }
@media (min-width: 960px){ .inkvely-product-grid ul.products{ grid-template-columns:repeat(4,1fr) !important; gap:4px !important; } }

/* Card — flat white surface, soft resting shadow (not just a border)
   so it reads as a distinct product tile even before hovering; the
   border stays but goes lighter, the shadow does the main work.
   Radius/shadow trimmed down a touch so tiles feel crisp rather than
   "puffy" once two of them sit side by side on a narrow screen. */
.inkvely-product-card{
  border:1px solid #ececea; border-radius:10px; overflow:hidden;
  background:#fff; list-style:none;
  box-shadow:0 1px 2px rgba(20,20,20,.04);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  /* Column layout so the Add to Cart button always sits flush with
     the card's bottom edge, lined up with every other card in the
     row, no matter how many lines the title/category above it took. */
  display:flex; flex-direction:column; height:100%;
}
.inkvely-product-card:hover{
  box-shadow:0 12px 26px rgba(20,20,20,.10);
  border-color:#e2ded6;
  transform:translateY(-3px);
}

/* Image sits on its own light tile with a little breathing room
   around it (instead of bleeding to the card's edges) and zooms
   slightly on hover — makes the card feel like one cohesive object
   rather than an image glued on top of a text block. Padding trimmed
   so the photo itself reads bigger inside a narrow 2-column tile. */
.inkvely-product-image{
  display:block; background:var(--inkvely-bg);
  aspect-ratio:1/1; overflow:hidden; position:relative;
  padding:6px;
}
.inkvely-product-image img{ width:100%; height:100%; object-fit:cover; border-radius:6px; transition:transform .35s ease; }
.inkvely-product-card:hover .inkvely-product-image img{ transform:scale(1.05); }
.inkvely-badge-sale{ position:absolute; top:9px; left:9px; background:var(--inkvely-sale); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; z-index:2; letter-spacing:.02em; }
.inkvely-badge-soldout{ background:#6b6b6b; }

.inkvely-product-info{
  padding:2px 7px 6px;
  display:flex; flex-direction:column; flex:1;
  /* Everything above the button can vary in height card to card;
     the button itself stays pinned to the bottom of the card. */
}


.inkvely-product-cat{
  display:block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#b6b0a4; margin:0 0 4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.inkvely-product-title{
  font-size:13.5px; font-weight:700; margin:0 0 6px; line-height:1.3; color:var(--inkvely-dark);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em;
}
.inkvely-product-title a{ color:inherit; text-decoration:none; }
.inkvely-product-title a:hover{ color:var(--inkvely-orange); }
.inkvely-product-title a:focus-visible,
.inkvely-product-image:focus-visible{ outline:2px solid var(--inkvely-orange); outline-offset:2px; border-radius:4px; }

/* ---------- RATING ----------
   Only rendered by PHP when review count > 0, so no CSS-level
   hiding needed here — the markup itself just won't be present. */
.inkvely-product-rating{
  display:flex; align-items:center; gap:3px;
  font-size:11.5px; font-weight:700; color:var(--inkvely-dark);
  margin:0 0 6px;
}
.inkvely-rating-star{ color:#f5a623; font-size:12px; line-height:1; }
.inkvely-rating-count{ font-weight:500; color:var(--inkvely-gray); }

.inkvely-swatches{ display:flex; align-items:center; gap:7px; margin-bottom:8px; flex-wrap:wrap; min-height:22px; }
.swatch-dot{
  width:20px; height:20px; border-radius:50%;
  border:2px solid #fff;
  display:inline-block;
  box-shadow:0 0 0 1.5px #ddd8cf, 0 1px 3px rgba(20,20,20,.15);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
/* Light/near-white swatches (e.g. white, cream) get a visibly darker
   ring so they read as a distinct chip instead of blending into the
   card's white background — flagged from PHP via luminance, not a
   hardcoded color list. */
.swatch-dot.swatch-light{
  box-shadow:0 0 0 1.5px #c9c5bc, inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(20,20,20,.1);
}
.swatch-dot:hover{ transform:scale(1.15); box-shadow:0 0 0 1.5px var(--inkvely-dark), 0 2px 6px rgba(20,20,20,.25); }
/* Reserved for a future "currently selected variation" state — add/remove
   this class via JS when swatches become interactive; no JS included here. */
.swatch-dot.is-selected{ box-shadow:0 0 0 2px var(--inkvely-dark), 0 2px 6px rgba(20,20,20,.25); }
.swatch-more{ font-size:10.5px; color:var(--inkvely-gray); font-weight:600; }

.inkvely-product-price{ font-size:14px; font-weight:800; color:#111; margin-bottom:8px; }
.inkvely-product-price del{ color:var(--inkvely-sale); opacity:1; font-weight:500; font-size:11.5px; margin-right:6px; }
.inkvely-product-price ins{ text-decoration:none; color:#111; }

/* ---------- ADD TO CART (product card) ----------
   Always visible (never a hover-only reveal) so it works the same
   way on a tap-only phone as it does with a mouse. Pinned to the
   bottom of the card via margin-top:auto so every button in a row
   lines up regardless of how tall the title/category text above it
   ran. 44px+ tall to meet the standard mobile tap-target size. */
.inkvely-add-to-cart-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:42px; margin-top:auto;
  padding:10px 10px; border:none; border-radius:7px;
  background:var(--inkvely-dark); color:#fff;
  font-size:12.5px; font-weight:700; letter-spacing:.02em;
  text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s ease, transform .1s ease, opacity .15s ease;
}
.inkvely-add-to-cart-btn:hover{ background:var(--inkvely-orange); color:#fff; }
.inkvely-add-to-cart-btn:active{ transform:scale(.97); }
.inkvely-add-to-cart-btn.is-loading{ opacity:.7; cursor:wait; pointer-events:none; }
.inkvely-add-to-cart-btn.is-added{ background:#1c5c34; }
.inkvely-add-to-cart-btn.is-error{ background:var(--inkvely-sale); }
.inkvely-atc-link.inkvely-atc-disabled{ background:#c9c5bc; color:#fff; cursor:not-allowed; pointer-events:none; }

/* ---------- VIEW MORE / BACK TO TOP ---------- */
.inkvely-view-more{
  display:block; width:100%; margin:28px 0 0; padding:14px; background:var(--inkvely-dark); color:#fff;
  border:none; border-radius:8px; font-weight:700; letter-spacing:.5px; cursor:pointer; font-size:14px;
}
.inkvely-view-more:hover{ background:#000; }
.inkvely-view-more.is-loading{ opacity:.6; cursor:wait; }

/* ---------- TABLET / DESKTOP — a little more breathing room now that
   the grid itself has fewer, narrower gaps, plus a slightly bigger
   radius so cards read as a premium product tile rather than a plain
   box once there's more room per column. ---------- */
@media (min-width: 640px){
  .inkvely-product-card{ border-radius:12px; }
  .inkvely-product-image{ padding:9px; }
  .inkvely-product-image img{ border-radius:8px; }
  .inkvely-product-info{ padding:4px 4px 4px; }
  .inkvely-product-title{ font-size:14.5px; }
  .inkvely-product-price{ font-size:15px; }
}

/* ---------- SMALL PHONES ---------- */
@media (max-width:400px){
  .inkvely-shop-wrap{ padding:0 3px 28px; }
  .inkvely-product-grid ul.products{ gap:6px !important; }
  .inkvely-product-image{ padding:5px; }
  .inkvely-product-info{ padding:2px 6px 6px; }
  .inkvely-product-title{ font-size:12.5px; margin-bottom:5px; }
  .inkvely-product-cat{ font-size:9.5px; margin-bottom:3px; }
  .inkvely-product-price{ font-size:13px; margin-bottom:6px; }
  .inkvely-add-to-cart-btn{ font-size:11.5px; padding:9px 6px; min-height:38px; }
  .swatch-dot{ width:17px; height:17px; }
  .inkvely-product-rating{ font-size:11px; margin-bottom:5px; }
  .inkvely-swatches{ gap:5px; margin-bottom:6px; }
}

/* ---------- TOOLBAR / SEARCH — tighten on mobile so they line up
   with the now-narrower grid instead of feeling wider than it ---------- */
@media (max-width:480px){
  .inkvely-toolbar{ padding:10px 0; }
  .inkvely-search-bar{ margin:0 0 16px; gap:8px; }
  .inkvely-search-bar input[type="search"]{ padding:8px 14px; font-size:13.5px; }
  .inkvely-hero{ margin:0 -3px 18px; padding:28px 16px 34px; border-radius:0 0 14px 14px; }
  .inkvely-hero-title{ font-size:24px; }
  .inkvely-hero-badges{ gap:12px; }
}