/* ==========================================================================
   SUBZOTIC — Premium Storefront CSS (v2)
   Direction: warm off-white surfaces, quiet always-on shadow (not just hover),
   deep-green + gold accent instead of loud flash-sale coral, serif touch on
   price for a boutique feel. Lighter paint cost than v1 — fewer blanket
   transitions across many product images at once.
   ========================================================================== */

:root {
  --sz-ink: #1C2B22;              /* deep green-black for text — softer than pure black */
  --sz-green: #1F5C3F;            /* deep forest green — replaces bright #29A56C */
  --sz-green-soft: #F0F5F1;       /* warm sage tint for backgrounds */
  --sz-gold: #B8862E;             /* muted gold accent — the "premium" signal */
  --sz-gold-soft: #FBF3E4;
  --sz-cream: #FAF8F4;            /* card surface — warmer than pure white */
  --sz-text-muted: #8C8A82;
  --sz-border: #EAE6DD;
  --sz-radius: 14px;
  --sz-shadow-rest: 0 1px 3px rgba(28,43,34,0.06), 0 1px 2px rgba(28,43,34,0.04);
  --sz-shadow-hover: 0 6px 16px rgba(28,43,34,0.10);
}

body {
  background: #F5F3EE;
}

/* --------------------------------------------------------------------------
   1. PRODUCT CARD — quiet elevation at rest, not just on hover. This one
   change does more for "premium" than any color choice.
   -------------------------------------------------------------------------- */
.sh-product-card {
  border: 1px solid var(--sz-border) !important;
  border-radius: var(--sz-radius) !important;
  background: var(--sz-cream);
  overflow: hidden;
  box-shadow: var(--sz-shadow-rest);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sh-product-card:hover {
  box-shadow: var(--sz-shadow-hover);
  border-color: #D9D2C2 !important;
}

/* Only the image being hovered gets the zoom treatment — scoped narrowly
   so the browser isn't tracking a transition on every image on the page */
.sh-product-card:hover img {
  transform: scale(1.04);
  transition: transform 0.3s ease;
}

.pr-long-card {
  padding: 0px;
}

.pr-card-content {
  padding: 10px 12px 12px;
}

/* --------------------------------------------------------------------------
   2. DISCOUNT TAG — quiet gold ribbon instead of loud flash-sale coral.
   Premium stores signal a deal without shouting it.
   -------------------------------------------------------------------------- */
.sh-product-card-discount-tag {
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.3px;
  border-radius: 0px 0px 10px 0px !important;
  right: auto !important;
  top: 0px !important;
  left: 0px !important;
  background: var(--sz-ink) !important;
  color: var(--sz-gold-soft) !important;
  padding: 4px 10px !important;
}

.sh-product-discount-tag {
  font-weight: 500 !important;
  border-radius: 4px !important;
  background: var(--sz-gold-soft) !important;
  color: var(--sz-gold) !important;
  font-size: 11px !important;
  padding: 2px 7px !important;
}

/* --------------------------------------------------------------------------
   3. PRICE — a light serif touch on the current price is the single detail
   that shifts perception from "app" to "boutique". MRP stays quiet.
   -------------------------------------------------------------------------- */
.pr-card-content h3,
.pr-card-content .sh-product-card-price {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--sz-ink);
}

.pr-card-content del,
.pr-card-content s {
  color: var(--sz-text-muted) !important;
  font-weight: 400 !important;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   4. ADD BUTTON + STEPPER — filled deep green, not bright green. A dark
   fill reads more premium than a bright outline.
   -------------------------------------------------------------------------- */
.sh-solid-button {
  border-radius: 8px !important;
  font-weight: 500;
  letter-spacing: 0.2px;
  background: var(--sz-green) !important;
  border: 1px solid var(--sz-green) !important;
  transition: background 0.15s ease;
}
.sh-solid-button:hover {
  background: #16452E !important;
}
.sh-solid-button:active {
  transform: scale(0.97);
}

.sh-product-plus-minus-button {
  border-radius: 8px !important;
  border: 1px solid var(--sz-green) !important;
  color: var(--sz-green);
  font-weight: 600;
  min-width: 64px;
}

/* --------------------------------------------------------------------------
   5. CATEGORY CARDS — soft neutral cream instead of bright saturated
   pastels. Color comes from a single accent icon, not the whole tile.
   -------------------------------------------------------------------------- */
.sh-category-card > a > div {
  padding: 12px !important;
  border: 1px solid var(--sz-border) !important;
  border-radius: var(--sz-radius) !important;
  background-color: var(--sz-cream) !important;
  box-shadow: var(--sz-shadow-rest);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.sh-category-card > a > div:hover {
  border-color: var(--sz-gold) !important;
  box-shadow: var(--sz-shadow-hover);
}

.sh-category-card:nth-child(3n-2) > a > div { background-color: var(--sz-cream) !important; }
.sh-category-card:nth-child(3n-1) > a > div { background-color: var(--sz-cream) !important; }
.sh-category-card:nth-child(3n)   > a > div { background-color: var(--sz-cream) !important; }

.sh-category-card > a > div > p {
  line-height: 22px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sz-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 44px;
  margin-top: 8px;
}

@media only screen and (max-width: 600px) {
  .sh-category-card > a > div > p {
    line-height: 18px;
    font-size: 13px;
    min-height: 36px;
  }
}

/* --------------------------------------------------------------------------
   6. SECTION TITLES
   -------------------------------------------------------------------------- */
.sh-row-title-divider {
  display: none !important;
}

/* --------------------------------------------------------------------------
   7. GLOBAL — trimmed from v1: scoped to html only, no blanket selectors
   touching every element on the page.
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}