/* ============================================================
   WOOCOMMERCE — YLEISET
============================================================ */

/* Tuoteruudukko — 5 per rivi desktopissa */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  grid-auto-flow: dense !important;   /* täyttää aukot automaattisesti */
  align-items: stretch !important;
  justify-content: start !important;
  gap: 1.2rem !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Kategoriaitemit piilotetaan niin ettei ne varaa gridin paikkaa */
.woocommerce ul.products li.product-category,
.woocommerce-page ul.products li.product-category {
  display: none !important;
}

/* Kaikki product-itemit yhden solun levyisiä — ei poikkeuksia */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products.columns-6 li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  grid-column: span 1 !important;
}

@media (max-width: 900px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .8rem !important;
  }
}

/* ============================================================
   ALAKATEGORIARUUDUKKO — kortit
============================================================ */

/* Ruudukko: 5 per rivi, yhtäläinen rako */
.smowgli-subcat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
  width: 100%;
  perspective: 1200px;
}

/* Kortti — paksu pyöreäreunai­nen 3D-laatta */
.smowgli-subcat-item {
  background: linear-gradient(170deg, #272727 0%, #1e1e1e 55%, #171717 100%);
  border: 1.5px solid #2e2e2e;
  border-top-color:    rgba(255,255,255,.16); /* yläreuna kiiltää valoa vasten */
  border-bottom-color: #080808;               /* alareuna on laatan sivu */
  border-radius: 10px;
  overflow: hidden;
  /* GPU-renderöinti tasoittaa border-radius + overflow:hidden -rosoisuuden */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
  box-shadow:
    /* Sisäiset bevel-varjot — simuloivat pyöristyksen */
    0  4px 10px rgba(255,255,255,.08) inset,  /* yläreuna vaalea */
    0 -3px  8px rgba(0,0,0,.40)       inset,  /* alareuna tumma */
    3px 0   6px rgba(255,255,255,.04) inset,  /* vasen sivu */
   -3px 0   6px rgba(255,255,255,.04) inset,  /* oikea sivu */
    /* Laatan paksuus */
    0 8px 0 #080808,
    /* Kelluva varjo */
    0 14px 40px rgba(0,0,0,.70),
    0  5px 14px rgba(0,0,0,.52);
  transition: transform .28s ease, box-shadow .28s ease,
              border-color .28s ease, border-top-color .28s ease;
}
.smowgli-subcat-item:hover {
  border-color:        var(--sm-gold);
  border-top-color:    rgba(236,164,0,.48);
  border-bottom-color: rgba(120,70,0,.9);
  transform: translateY(-12px) translateZ(0);
  box-shadow:
    0  4px 10px rgba(255,255,255,.08) inset,
    0 -3px  8px rgba(0,0,0,.40)       inset,
    3px 0   6px rgba(255,255,255,.04) inset,
   -3px 0   6px rgba(255,255,255,.04) inset,
    0 8px 0 #080808,
    0 28px 64px rgba(0,0,0,.80),
    0 10px 24px rgba(0,0,0,.60);
}

/* Linkki täyttää koko kortin, flex-sarake kuva + nimi */
.smowgli-subcat-link {
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
}

/* Kuva-alue: 1:1 suhde, yhtäläinen korkeus kaikille korteille */
.smowgli-subcat-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #1a1a1a;
  flex-shrink: 0;
  position: relative;
}

/* Kaartumisefekti: tummuvat reunat simuloivat kuperaa pintaa */
.smowgli-subcat-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 28%, transparent 72%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity .3s ease;
}
.smowgli-subcat-item:hover .smowgli-subcat-img-wrap::after {
  opacity: .7;
}

/* Kuva täyttää tilan tasaisesti — ei ikävää croppausta */
.smowgli-subcat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.smowgli-subcat-item:hover .smowgli-subcat-img {
  transform: scale(1.06);
}

/* Ei kuvaa: gradientti-placeholder */
.smowgli-subcat-no-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #181818 0%, #252525 100%);
}

/* Kategrian nimi kortissa */
.smowgli-subcat-name {
  font-family: 'Special Elite', serif !important;
  color: var(--sm-gold);
  font-size: .85rem;
  margin: 0;
  padding: .7rem .6rem .85rem;
  line-height: 1.3;
}

/* Piilotetaan tuotemäärä-badge kaikkialla */
.smowgli-subcat-grid .count,
.woocommerce ul.products li.product-category .count,
.woocommerce-page ul.products li.product-category .count {
  display: none !important;
}

@media (max-width: 900px) {
  .smowgli-subcat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .smowgli-subcat-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .smowgli-subcat-name { font-size: .72rem; padding: .5rem .4rem .65rem; }
}

/* ============================================================
   PRODUCT CARDS — 3D
============================================================ */

/* Perspektiivi-konteksti ruudukolle */
.woocommerce ul.products,
.woocommerce-page ul.products {
  perspective: 1000px !important;
}

.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  grid-column: span 1 !important;
  /* Kupera pintaefekti: keskellä hieman vaaleampi → reunat tummuvat */
  background: radial-gradient(ellipse at 50% 35%, #252525 0%, #1c1c1c 65%, #151515 100%) !important;
  border: 1px solid var(--sm-border);
  /* Sileä kulma — ala ja sivuviiva kohtaavat oikeasti */
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  /* GPU-renderöinti: tasoittaa border-radius-reunat */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 4px 0 #0a0a0a,
    0 6px 18px rgba(0,0,0,.55),
    0 2px 5px  rgba(0,0,0,.35);
  transition: border-color .22s, transform .22s ease, box-shadow .22s ease;
}
.woocommerce ul.products li.product:hover {
  border-color: var(--sm-gold);
  transform: translateY(-5px) translateZ(0);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 4px 0 #0a0a0a,
    0 16px 36px rgba(0,0,0,.65),
    0 6px 12px rgba(0,0,0,.45);
}

/* Tuotekuvan linkki täyttää tilan */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1;
  width: 100%;
  text-decoration: none;
}

/* Tuotekuva — kiinteä korkeus, koko kuva näkyy aina */
.woocommerce ul.products li.product img {
  width: 100% !important;
  height: 180px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  flex-shrink: 0;
  background: #1a1a1a;
  padding: 8px !important;
  box-sizing: border-box !important;
}

/* Tuotenimi — normaali vaakateksti, joustaa */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Special Elite', serif !important;
  color: var(--sm-gold) !important;
  font-size: .9rem !important;
  padding: .6rem .75rem .25rem !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal !important;
  writing-mode: horizontal-tb !important;
  flex: 1;
}

/* Hinta */
.woocommerce ul.products li.product .price {
  color: var(--sm-orange) !important;
  font-family: 'Special Elite', serif !important;
  font-size: 1rem !important;
  padding: 0 .75rem .5rem !important;
  display: block;
}

/* Lisää koriin -nappi alhaalla */
.woocommerce ul.products li.product .button {
  margin: auto .75rem .75rem !important;
  display: block !important;
  text-align: center !important;
  width: calc(100% - 1.5rem) !important;
  padding: .5rem !important;
  font-size: .82rem !important;
}

/* Loppunut varastosta — harmaa, ei-klikattava */
.woocommerce ul.products li.product.outofstock .button {
  background: #1e1e1e !important;
  background-image: none !important;
  color: #555 !important;
  border: 1px solid #333 !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none !important;
  opacity: .75 !important;
}

/* ============================================================
   FILTTERIPALKKI
============================================================ */
.smowgli-all-products-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 1.2rem;
}
.smowgli-all-products-heading span {
  font-family: 'Special Elite', serif;
  color: var(--sm-muted);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.smowgli-all-products-heading::before,
.smowgli-all-products-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sm-border);
}

.smowgli-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.smowgli-filter-btn {
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border);
  border-radius: 999px;
  color: var(--sm-muted);
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .04em;
  padding: .4rem 1rem;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.smowgli-filter-btn:hover {
  border-color: var(--sm-gold);
  color: var(--sm-gold);
}
.smowgli-filter-btn.is-active {
  background: var(--sm-gold);
  border-color: var(--sm-gold);
  color: #111111;
}

/* ============================================================
   SHOP LAYOUT — ARCHIVE
============================================================ */
.smowgli-shop-page { padding: 2rem 0 4rem; }

.smowgli-shop-header {
  margin-bottom: 1.5rem;
}
.smowgli-shop-header h1 {
  font-family: 'Special Elite', serif;
  color: var(--sm-text);
  font-size: 2rem;
  margin-bottom: .5rem;
}

.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
  font-family: 'Special Elite', serif;
  color: var(--sm-text);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: .5rem;
}
.woocommerce .term-description {
  font-family: 'Special Elite', serif !important;
  color: rgba(245,245,237,.8);
  font-size: .95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Lajittelu */
.woocommerce-ordering select {
  background: #1a1a1a;
  color: #F5F5ED;
  border: 1px solid rgba(245,245,237,.35);
  border-radius: 10px;
  padding: 10px 14px;
}
.woocommerce-ordering select option {
  background: #1a1a1a;
  color: #F5F5ED;
}

/* Tulosinfo */
.woocommerce-result-count { color: var(--sm-muted); font-size: .85rem; }

/* ============================================================
   CART & CHECKOUT
============================================================ */
.woocommerce table.shop_table,
.woocommerce-cart table,
.woocommerce-checkout form {
  background: var(--sm-bg-card);
  border-color: var(--sm-border);
  color: var(--sm-text);
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border);
  padding: 1.5rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  background: var(--sm-bg);
  border-color: var(--sm-border);
  color: var(--sm-text);
}

/* ============================================================
   BREADCRUMBS
============================================================ */
.woocommerce-breadcrumb { color: var(--sm-muted); font-size: .82rem; margin-bottom: 1.5rem; }
.woocommerce-breadcrumb a { color: var(--sm-muted); }
.woocommerce-breadcrumb a:hover { color: var(--sm-gold); }

/* ============================================================
   NOTICES
============================================================ */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--sm-gold);
  background: var(--sm-bg-card);
  color: var(--sm-text);
}
.woocommerce-error {
  border-top-color: var(--sm-orange);
  background: var(--sm-bg-card);
  color: var(--sm-text);
}

/* ============================================================
   TUOTESIVU (single-product)
============================================================ */
.smowgli-product-page { padding: 1.5rem 0 4rem; }

.smowgli-breadcrumb { margin-bottom: 1.5rem; font-size: .82rem; color: var(--sm-muted); }
.smowgli-breadcrumb a { color: var(--sm-muted); }
.smowgli-breadcrumb a:hover { color: var(--sm-gold); }

.smowgli-product-wrap {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: 3.5rem;
  align-items: start;
  margin-bottom: 3rem;
}

/* Galleria */
.smowgli-product-gallery .woocommerce-product-gallery {
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border);
  padding: 1rem;
}
.smowgli-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform .3s ease;
}
.smowgli-product-gallery .woocommerce-product-gallery__image:hover img {
  transform: scale(1.04);
}
.smowgli-product-gallery .flex-control-thumbs {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.smowgli-product-gallery .flex-control-thumbs li {
  width: 70px;
  height: 70px;
  border: 1px solid var(--sm-border);
  overflow: hidden;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s, border-color .2s;
}
.smowgli-product-gallery .flex-control-thumbs li:hover,
.smowgli-product-gallery .flex-control-thumbs li.flex-active {
  opacity: 1;
  border-color: var(--sm-gold);
}
.smowgli-product-gallery .flex-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Summary */
.smowgli-product-summary { padding-top: .5rem; }

.smowgli-product-meta-top { margin-bottom: .6rem; }
.smowgli-product-cats {
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sm-muted);
}

.smowgli-stock-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .25rem .75rem;
  border-radius: 2px;
  margin-bottom: .75rem;
}
.smowgli-stock-in  { background: rgba(80,180,80,.15); color: #7ecf7e; border: 1px solid rgba(80,180,80,.3); }
.smowgli-stock-out { background: rgba(200,80,80,.15);  color: #cf7e7e; border: 1px solid rgba(200,80,80,.3); }

.smowgli-product-summary .product_title.entry-title {
  font-family: 'Special Elite', serif;
  color: var(--sm-gold);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.smowgli-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.smowgli-price-wrap .price {
  font-family: 'Special Elite', serif;
  font-size: 2rem;
  color: var(--sm-text);
}
.smowgli-price-wrap .price ins { text-decoration: none; }
.smowgli-price-wrap .price del { color: var(--sm-muted); font-size: 1.2rem; }
.smowgli-unit-price { font-size: .82rem; color: var(--sm-muted); }

.smowgli-product-summary .woocommerce-product-details__short-description {
  color: var(--sm-text);
  font-size: .95rem;
  line-height: 1.75;
  opacity: .85;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--sm-border);
  padding-bottom: 1.5rem;
}

.smowgli-attr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem 1.5rem;
  margin-bottom: 1.8rem;
  padding: 1.2rem;
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border);
}
.smowgli-attr-item { display: flex; flex-direction: column; gap: .15rem; }
.smowgli-attr-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sm-muted); }
.smowgli-attr-value { font-size: .92rem; color: var(--sm-text); font-weight: 500; }

.smowgli-add-to-cart-wrap .quantity input {
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border);
  color: var(--sm-text);
  width: 60px;
  text-align: center;
  font-size: 1rem;
  padding: .6rem;
}
.smowgli-add-to-cart-wrap .single_add_to_cart_button {
  background: var(--sm-gold);
  color: var(--sm-bg);
  font-family: 'Special Elite', serif;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: none;
  padding: .9rem 2.5rem;
  border-radius: 0;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.smowgli-add-to-cart-wrap .single_add_to_cart_button:hover {
  background: var(--sm-orange);
  transform: translateY(-1px);
}

.smowgli-trust-row {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  font-size: .8rem;
  color: var(--sm-muted);
}
.smowgli-trust-row span { white-space: nowrap; }

/* Välilehdet */
.smowgli-product-tabs {
  border-top: 1px solid var(--sm-border);
  margin-top: 1rem;
  padding-top: 2rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 1px solid var(--sm-border);
  margin-bottom: 2rem;
  padding: 0;
  display: flex;
  gap: 0;
  list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--sm-gold);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sm-muted);
  padding: .75rem 1.2rem;
  display: block;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sm-gold); }
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--sm-bg-card);
  border: 1px solid var(--sm-border);
  padding: 2rem;
  color: var(--sm-text);
  line-height: 1.75;
}

/* Mobiili — tuotesivu */
@media (max-width: 900px) {
  .smowgli-product-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .smowgli-attr-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .smowgli-attr-grid { grid-template-columns: 1fr; }
  .smowgli-trust-row { flex-direction: column; gap: .5rem; }
}

/* ============================================================
   LISÄKORJAUKSET
============================================================ */

/* Lisää koriin / Osta nyt -nappi oranssiksi */
.single_add_to_cart_button,
button.add_to_cart_button {
  background-color: #c8860a !important;
  border-color: #c8860a !important;
  color: #000 !important;
}

/* Piilota duplikaatti Description-otsikko välilehtipaneelissa */
.woocommerce-Tabs-panel h2:first-child {
  display: none !important;
}

/* Piilota Reviews-välilehti ja sen sisältö */
.woocommerce-tabs .reviews_tab,
#tab-reviews {
  display: none !important;
}

/* Tuotekortin hinta valkoiseksi ruudukossa */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount {
  color: #ffffff !important;
}

/* Poista tuotekuvan hover-zoom */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product:hover a img,
.woocommerce-loop-product__link img,
.woocommerce-loop-product__link:hover img,
.attachment-woocommerce_thumbnail {
  transform: none !important;
  transition: none !important;
}
