/**
 * l3-shop.css — HIBRID: dark cinematic hero-banner (kategorija) + SVETLI shop/PDP.
 * Enqueue samo na WooCommerce shop/category/product (functions.php).
 * Tokeni iz style.css :root (el-accent #2196F3, el-accent-2 #38BDF8, el-bg-0 #070D16).
 * Portovano iz alatishop l3-shop.css → recolor za elektronika plavu paletu.
 * HIBRID pravilo: dark SAMO na hero-banner; kartice/grid/PDP su SVETLI (crn tekst na belom).
 */

/* Svetla površina (shop/kategorija/PDP) — svetlo-siva umesto čisto bele da ne bude hladno */
:root {
    --elx-shop-warm: #F4F7FB;
    --elx-shop-warm-soft: #EDF2F8;
    /* Light-mode bridge tokeni — mapirani na svetle vrednosti za shop stranice */
    --accent:        #2196F3;
    --accent-2:      #38BDF8;
    --accent-hover:  #1976D2;
    --text:          #0D1626;
    --text-muted:    #4A6080;
    --border:        #D6E4F0;
    --surface-card:  #FFFFFF;
    --bg-soft:       #EDF2F8;
    --dark-bg:       #070D16;
}

/* ── Override Astra dark background na shop stranicama ── */
body.woocommerce,
body.woocommerce-page,
body.woocommerce #page,
body.woocommerce-page #page,
body.woocommerce #content,
body.woocommerce-page #content,
.woocommerce .ast-container,
.ast-woocommerce-container,
body.woocommerce .site,
body.woocommerce-page .site {
    background-color: var(--elx-shop-warm) !important;
    color: var(--text);
    border: none !important;
}
body.woocommerce,
body.woocommerce-page { overflow-x: clip; }
body.woocommerce img,
body.woocommerce video { max-width: 100%; height: auto; }

/* Full-bleed na archive (shop/kategorija) za hero-banner */
body.post-type-archive-product #content .ast-container,
body.tax-product_cat #content .ast-container,
body.woocommerce-shop #content .ast-container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.post-type-archive-product .ast-article-single,
body.post-type-archive-product .ast-article-inner,
body.tax-product_cat .ast-article-single,
body.tax-product_cat .ast-article-inner,
body.woocommerce-shop .ast-article-single,
body.woocommerce-shop .ast-article-inner {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}
/* Sakrij Astra default page title bar (imamo sopstveni hero) */
body.woocommerce .ast-archive-description .ast-archive-title,
body.woocommerce-page.archive .page-title { display: none; }

/* ── L3 base ── */
.als-l3 { --accent2: #F44336; }
.als-l3 .als-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) 24px;
}
.als-l3 .als-eyebrow {
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin: 0 0 14px;
}
.als-l3 .als-h2 {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(28px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -.02em;
    color: var(--text);
    margin: 0 0 18px;
}
.als-l3 .als-lead {
    color: var(--text-muted);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.6;
    max-width: 640px;
}

/* ── DARK cinematic hero-banner (kategorija / shop landing) — izuzetak, ostaje taman ── */
.als-shop-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: 0;
    background: var(--dark-bg);
}
.als-shop-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.als-shop-hero-bg img,
.als-shop-hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.als-shop-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(7, 13, 22, .35) 0%,
        rgba(7, 13, 22, .60) 55%,
        rgba(7, 13, 22, .92) 100%
    );
}
.als-shop-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px 40px;
}
.als-shop-hero .als-eyebrow { color: var(--accent-2); }
.als-shop-hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(32px, 6vw, 60px);
    line-height: 1.04;
    letter-spacing: -.02em;
    color: #fff;
    margin: 8px 0 12px;
}
.als-shop-hero .als-shop-count {
    color: var(--accent-2);
    font-weight: 700;
    font-size: 15px;
}
.als-shop-hero .als-lead { color: #cce0f5; }
.als-shop-crumbs {
    color: #8aafcc;
    font-size: 13px;
    margin-bottom: 6px;
}
.als-shop-crumbs a { color: #8aafcc; text-decoration: none; }
.als-shop-crumbs a:hover { color: var(--accent-2); }
/* Touch meta 44px bez pomeranja layouta (rendgen 25.07): breadcrumb linkovi su
   bili visoki 16px. Padding uvecava metu, negativna margina ponistava vizuelni
   efekat pa hero ostaje identican kao na verifikovanim shotovima. */
@media (max-width: 782px) {
  .als-shop-crumbs a {
    display: inline-block;
    padding: 14px 4px;
    margin: -14px 0;
  }
}

/* ── Svetli product grid (Veloro/Mango nivo) ── */
.als-section { background: var(--elx-shop-warm); }
.als-prod-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.als-prod-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .3s ease;
}
.als-prod-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 16px 36px rgba(33, 150, 243, .14);
}
/* Bela pločica za sliku — contain → ceo proizvod, ništa ne "doskače" */
.als-prod-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.als-prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
    transition: transform .5s ease;
}
.als-prod-card:hover .als-prod-thumb img { transform: scale(1.05); }
.als-prod-thumb .als-prod-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
}
.als-prod-thumb .als-prod-placeholder svg {
    width: 54px;
    height: 54px;
    color: var(--accent);
    opacity: .5;
}
.als-prod-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(33, 150, 243, .35);
}
.als-prod-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.als-prod-cat {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.als-prod-title {
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
}
.als-prod-price {
    margin-top: auto;
    color: var(--accent);
    font-size: 19px;
    font-weight: 900;
}
.als-prod-price del {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
    margin-right: 8px;
    opacity: .8;
}
.als-prod-cta {
    margin-top: 12px;
    display: inline-block;
    text-align: center;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    padding: 11px 16px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s ease;
}
.als-prod-card:hover .als-prod-cta { background: var(--accent-hover); }

/* ── Pagination (light) ── */
.als-pagination {
    margin: 48px 0 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.als-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
}
.als-pagination .page-numbers.current {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.als-pagination .page-numbers:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.als-pagination .page-numbers.current:hover { color: #fff; }

/* ── Empty state ── */
.als-shop-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 60px 24px;
}
.als-shop-empty h2 { color: var(--text); }
.als-shop-empty svg { color: var(--accent); margin-bottom: 16px; }

/* ══════════════ PDP — SVETLI ══════════════ */
.woocommerce div.product { color: var(--text); }
.woocommerce div.product .product_title { color: var(--text); font-weight: 900; }
.woocommerce div.product p.price,
.woocommerce div.product span.price,
body.single-product .summary .price {
    color: var(--accent) !important;
    font-weight: 900;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
    color: var(--text-muted) !important;
    font-weight: 600;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--text);
}

/* Galerija na beloj pločici */
.woocommerce div.product .woocommerce-product-gallery {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
    border-radius: 8px;
}
/* ===== Custom PDP galerija (shs) — cela slika uvek vidljiva, thumb-switch + lightbox ===== */
/* TODO (sledeca sesija): vratiti dvokolonski PDP (galerija levo / kupovina desno).
   Pokusana brza float-zakrpa polomila raspored (delivery badge + Viber CTA su POSLE
   .summary kao zasebni div-ovi pa se uvlace oko floata). Pravi fix = dati wrapper-u
   Woo `images` + `woocommerce-product-gallery--columns-N` klasu (Woo two-column CSS to
   trazi), ILI floatovati i sve summary-pratece blokove + clear na tabove. Za sada je
   galerija full-width a kupovina ispod — funkcionalno, slika cela. */
.shs-gallery__stage{
    position: relative;
    margin: 0;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    min-height: 320px;
}
.shs-gallery__main{
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
    transition: opacity .2s ease;
}
.shs-gallery__zoom{
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(7, 13, 22, .60);
    border-radius: 50%;
    pointer-events: none;
}
.shs-gallery__thumbs{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.shs-thumb{
    width: 66px;
    height: 66px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.shs-thumb img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.shs-thumb:hover{ transform: translateY(-2px); }
.shs-thumb.is-active{
    border-color: var(--shs-accent, #15B8A6);
    box-shadow: 0 0 0 1px var(--shs-accent, #15B8A6) inset;
}

/* Lightbox (full slika preko celog ekrana) */
.shs-lightbox{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background: rgba(7, 13, 22, .92);
}
.shs-lightbox.is-open{ display: flex; }
.shs-lightbox__img{
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.shs-lightbox__close{
    position: absolute;
    top: 18px;
    right: 24px;
    font-size: 42px;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .8;
}
.shs-lightbox__close:hover{ opacity: 1; }

/* Plavi Add-to-cart */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce .als-shop .button,
.woocommerce-page div.product .single_add_to_cart_button {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    text-transform: none !important;
    padding: 14px 28px !important;
    transition: background .2s ease !important;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
    background: var(--accent-hover) !important;
}

/* Quantity input (light) */
.woocommerce div.product form.cart .quantity .qty {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* ── Tabs (light, SR labele dolaze iz functions.php filtera) ── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--border);
    padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border-color: var(--border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: #fff;
    border-bottom: 2px solid var(--accent);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: var(--text);
    font-weight: 700;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--accent);
}
.woocommerce div.product .woocommerce-Tabs-panel {
    color: var(--text);
    line-height: 1.75;
    padding-top: 18px;
}
.woocommerce div.product .woocommerce-Tabs-panel p,
.woocommerce div.product .woocommerce-Tabs-panel li { color: var(--text); }
.woocommerce div.product .woocommerce-Tabs-panel h2,
.woocommerce #reviews h2 { color: var(--text); }

/* ── Related / upsell / loop products → SVETLE kartice ── */
.woocommerce .related.products > h2,
.woocommerce .upsells.products > h2 {
    color: var(--text);
    font-weight: 900;
    font-size: clamp(22px, 3vw, 32px);
    margin-bottom: 28px;
}
.woocommerce .related.products ul.products li.product,
.woocommerce .upsells.products ul.products li.product,
.woocommerce ul.products li.product {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    overflow: hidden;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
    box-shadow: 0 16px 36px rgba(33, 150, 243, .14);
}
.woocommerce ul.products li.product a img {
    border-radius: 10px;
    background: #fff;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--text) !important;
    font-weight: 700;
    font-size: 15px;
}
.woocommerce ul.products li.product .price {
    color: var(--accent) !important;
    font-weight: 900;
}
.woocommerce ul.products li.product .price del {
    color: var(--text-muted) !important;
}
.woocommerce ul.products li.product .button {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    text-transform: none !important;
}
.woocommerce ul.products li.product .button:hover {
    background: var(--accent-hover) !important;
}

/* Breadcrumb / notices (light) */
.woocommerce .woocommerce-breadcrumb { color: var(--text-muted); }
.woocommerce .woocommerce-breadcrumb a { color: var(--text-muted); }
.woocommerce .woocommerce-breadcrumb a:hover { color: var(--accent); }
.woocommerce-message,
.woocommerce-info {
    background: var(--bg-soft);
    color: var(--text);
    border-top-color: var(--accent);
}

/* ── Desktop responsive ── */
@media (min-width: 600px) { .als-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .als-prod-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
@media (min-width: 768px) {
    .als-prod-title { font-size: 16px; }
    .als-shop-hero { min-height: 48vh; }
}

/* ===================================================================
   VELVET DUSK light-bridge override (warm ivory shop grid, on-brand).
   Loads after base :root -> wins. Keeps light grid for white product photos.
   =================================================================== */
:root{
  --elx-shop-warm:      #FBF7F1;   /* topli ivory umesto hladnog plavo-sivog */
  --elx-shop-warm-soft: #F3ECE2;
  --accent:        #15B8A6;        /* teal */
  --accent-2:      #C9962E;        /* zlatni/sampanj-deep za citljivost na svetlom */
  --accent-hover:  #0F8C7E;
  --text:          #241F1B;        /* topli near-black tekst */
  --text-muted:    #6E6258;
  --border:        #E7DDCF;
  --surface-card:  #FFFFFF;
  --bg-soft:       #F3ECE2;
  --dark-bg:       #14110F;
}
/* sale badge -> bordo na shop kkarticama */
.als-l3 .als-prod-badge,
.als-l3 .onsale,
.als-prod-card .onsale { background: #7B2A3B !important; color:#fff !important; }
/* price accent -> bordo (citljivo na belom), regularna cena precrtana */
.als-prod-card .price, .als-prod-price, .als-l3 .price { color:#7B2A3B; }
.als-l3 .als-eyebrow { color:#0F8C7E; }
.als-l3 .als-prod-badge{box-shadow:0 2px 8px rgba(123,42,59,.35)!important}

/* ===================================================================
   CALM GRID — fix kategorije "epi napad" (smiri haos boje).
   Nekropovana slika contain na belom + neutralan eyebrow + ghost CTA + vazduh.
   =================================================================== */
.als-l3 .als-section{ background:#FBF7F1 !important; padding-top:48px !important; }
.als-prod-grid{ gap:26px !important; }
.als-prod-card{
  background:#fff !important; border:1px solid #ECE3D6 !important; border-radius:16px !important;
  box-shadow:0 1px 3px rgba(20,17,15,.05) !important; overflow:hidden !important;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.als-prod-card:hover{ transform:translateY(-4px) !important; box-shadow:0 18px 40px rgba(20,17,15,.13) !important; border-color:#E7C79B !important; }
.als-prod-thumb{
  background:#fff !important; aspect-ratio:1/1 !important; height:auto !important; min-height:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  padding:20px !important; border-bottom:1px solid #F1E9DC !important;
}
.als-prod-thumb img{ width:100% !important; height:100% !important; object-fit:contain !important; transform:none !important; }
.als-prod-card:hover .als-prod-thumb img{ transform:scale(1.04) !important; }
.als-prod-body{ padding:14px 18px 20px !important; }
.als-prod-cat{ color:#A89A8B !important; font-weight:600 !important; letter-spacing:.07em !important; text-transform:uppercase !important; font-size:11px !important; }
.als-prod-title{ color:#241F1B !important; font-weight:600 !important; line-height:1.4 !important; }
.als-prod-price{ color:#7B2A3B !important; font-weight:700 !important; }
.als-prod-price del{ color:#B7A497 !important; font-weight:400 !important; }
.als-prod-cta{
  background:transparent !important; color:#0F8C7E !important; border:1px solid rgba(21,184,166,.4) !important;
  border-radius:999px !important; font-weight:600 !important;
}
.als-prod-card:hover .als-prod-cta{ background:#15B8A6 !important; color:#04201C !important; border-color:#15B8A6 !important; }

/* ===================================================================
   PDP POLISH — da "diše" (fix "uleglo" opis/recenzije/summary).
   =================================================================== */
.single-product div.product .entry-summary{ padding-left:8px; }
.single-product div.product .product_title{ font-family:var(--elx-font-display,'Fraunces',serif) !important; font-size:30px !important; line-height:1.2 !important; color:#241F1B !important; margin-bottom:10px !important; }
.single-product div.product p.price, .single-product div.product span.price{ font-size:26px !important; font-weight:700 !important; color:#7B2A3B !important; margin:6px 0 14px !important; display:block; }
.single-product div.product p.price del{ font-size:17px !important; color:#B7A497 !important; }
.single-product .woocommerce-product-details__short-description{ font-size:15.5px; line-height:1.7; color:#4A413A; margin:10px 0 18px; padding:14px 16px; background:#FBF7F1; border-radius:10px; border:1px solid #EFE6D8; }
.single-product div.product form.cart{ margin:18px 0 8px; }
.single-product div.product form.cart .quantity input{ height:48px; }
.single-product div.product .single_add_to_cart_button{ height:48px; padding:0 30px !important; font-size:16px !important; }
/* TABS — da nisu sitni/uleknuti */
.woocommerce-tabs{ margin-top:46px !important; clear:both; }
.woocommerce-tabs ul.tabs{ border-bottom:1px solid #E7DDCF !important; padding:0 !important; margin:0 0 0 0 !important; display:flex; gap:8px; }
.woocommerce-tabs ul.tabs::before{ border:none !important; }
.woocommerce-tabs ul.tabs li{ background:transparent !important; border:none !important; border-radius:0 !important; margin:0 !important; padding:0 !important; }
.woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after{ display:none !important; }
.woocommerce-tabs ul.tabs li a{ padding:14px 20px !important; font-size:16px !important; font-weight:600 !important; color:#8A7D70 !important; border-bottom:2px solid transparent !important; display:block; }
.woocommerce-tabs ul.tabs li.active a{ color:#7B2A3B !important; border-bottom-color:#7B2A3B !important; }
.woocommerce-tabs .woocommerce-Tabs-panel{ padding:26px 4px 8px !important; max-width:820px; font-size:15.5px; line-height:1.75; color:#3a332e; }
.woocommerce-tabs .woocommerce-Tabs-panel h2{ font-family:var(--elx-font-display,'Fraunces',serif); font-size:22px; margin-bottom:14px; color:#241F1B; }
.woocommerce-tabs .woocommerce-Tabs-panel ul li{ margin:6px 0; }
/* related products header breathe */
.related.products > h2, .upsells.products > h2{ font-family:var(--elx-font-display,'Fraunces',serif); font-size:26px; margin:50px 0 22px; color:#241F1B; }

/* ===================================================================
   STARATLAS ACCENT — per-product color (from product image -> _shs_accent).
   Calm grid stays calm; the product's own color appears on hover (grid)
   and washes the PDP on open. Add-to-cart keeps brand color (contrast-safe).
   =================================================================== */
/* Grid: card lights up in its OWN color on hover (glow + drawn-in underline) */
.als-prod-card:hover{
  border-color: var(--shs-accent, #E7C79B) !important;
  box-shadow: 0 18px 46px rgba(var(--shs-accent-rgb, 231,199,155), .30) !important;
}
.als-prod-thumb{ position:relative; }
.als-prod-thumb::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:3;
  background: var(--shs-accent, #15B8A6);
  transform: scaleX(0); transform-origin:left; transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.als-prod-card:hover .als-prod-thumb::after{ transform: scaleX(1); }

/* ===================================================================
   GALLERY SIZING — RESENO (2026-06-09). shs_product_gallery() render
   (object-fit:contain, max-height:480px) — cela slika uvek vidljiva.
   PDP COLOR-WASH UKLONJEN 2026-06-10 (Djordje: strana/kategorije NE smeju da
   menjaju boju kad udjes u proizvod -> drzi konzistentnu brand paletu).
   =================================================================== */
.single-product div.product{ position:relative; }
.single-product div.product .woocommerce-product-gallery{
  background:#fff; position:relative;
  border:1px solid var(--border) !important;
  box-shadow:0 18px 48px rgba(20,17,15,.10) !important;
}
.single-product .shs-thumb.is-active{
  border-color:#15B8A6 !important;
  box-shadow:0 0 0 1px #15B8A6 inset !important;
}

/* ===================================================================
   PDP DVOKOLONSKI RASPORED — vracen 2026-06-10 (fix "proizvod razvucen preko
   cele strane"). Galerija levo / kupovina (.shs-pdp-right = summary+dostava+CTA)
   desno; tabovi/recenzije/related/demo idu full-width ispod. Mobilni = stack.
   =================================================================== */
@media (min-width: 993px){
  .single-product div.product{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(32px,4vw,56px);
    align-items:start;
  }
  .single-product div.product > .woocommerce-product-gallery{
    grid-column:1; grid-row:1; float:none !important; width:auto !important; margin:0 !important;
  }
  .single-product div.product > .shs-pdp-right{
    grid-column:2; grid-row:1; float:none !important; width:auto !important; min-width:0;
  }
  .single-product div.product > .shs-pdp-right .summary{
    float:none !important; width:auto !important; margin:0 !important;
  }
  .single-product div.product > .shs-demo,
  .single-product div.product > .woocommerce-tabs,
  .single-product div.product > .related,
  .single-product div.product > .up-sells,
  .single-product div.product > .upsells{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){
  .single-product div.product .woocommerce-product-gallery{ animation:none; }
}

/* ===================================================================
   KATEGORIJA-NAV STRIP (2026-06-10) — svih 10 kategorija na shop/kategorija
   arhivi, da kupac ne mora kroz 80+ strana od 1028 proizvoda.
   =================================================================== */
.shs-catnav{ background:#FBF7F1; border-bottom:1px solid #EFE6D8; }
.shs-catnav-inner{ max-width:1200px; margin:0 auto; padding:32px 24px 8px; }
.shs-catnav-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.shs-catnav-head h2{ font-family:var(--elx-font-display,'Fraunces',serif); font-size:25px; color:#241F1B; margin:0; }
.shs-catnav-head span{ color:#8A7D70; font-size:13.5px; }
.shs-catnav-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.shs-catchip{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px;
  background:#fff; border:1px solid #E7DDCF; border-radius:999px; text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.shs-catchip:hover{ border-color:#15B8A6; box-shadow:0 8px 22px rgba(21,184,166,.16); transform:translateY(-2px); }
.shs-catchip.is-current{ background:#15B8A6; border-color:#15B8A6; }
.shs-catchip-name{ color:#241F1B; font-weight:600; font-size:14.5px; }
.shs-catchip.is-current .shs-catchip-name{ color:#04201C; }
.shs-catchip-count{ color:#7B2A3B; font-weight:700; font-size:12.5px; background:#F3ECE2; padding:2px 9px; border-radius:999px; line-height:1.5; }
.shs-catchip.is-current .shs-catchip-count{ background:rgba(4,32,28,.18); color:#04201C; }
@media (max-width:600px){
  .shs-catnav-inner{ padding:22px 16px 4px; }
  .shs-catnav-head h2{ font-size:21px; }
}