/**
 * 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 (--accent, --bg, --surface-card, --text, --text-muted, --border, --dark-bg).
 * Redizajn 2026-05-31 (spec: alatishop-veloro-redesign) — Đorđe: dark+belo "doskaču", opis nevidljiv.
 */

/* Topla mlečno-bež površina (kategorije/shop) — Đorđe: "ne bih voleo da bude belo". Kartice ostaju bele za kontrast. */
:root { --als-warm: #F5F1EA; --als-warm-soft: #EFE9DF; }

/* ── Topla površina na shop stranicama (override eventualnih Astra dark mod-ova) ── */
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(--als-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 SAMO na archive (shop/kategorija) — hero-banner preko cele širine; grid se centrira preko .als-section.
   PDP (single-product) NE dira — tamo treba container padding. */
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 svoj hero) */
body.woocommerce .ast-archive-description .ast-archive-title,
body.woocommerce-page.archive .page-title { display: none; }

/* ── L3 base ── */
.als-l3 { --accent2: #FF3A4D; }
.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: 42vh; 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 { width:100%; height:100%; object-fit:cover; }
.als-shop-hero::after { content:''; position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, rgba(10,10,10,.30) 0%, rgba(10,10,10,.6) 55%, rgba(10,10,10,.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(--accent2); }
.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(--accent2); font-weight:700; font-size:15px; }
.als-shop-hero .als-lead { color: #d8d8dc; }
.als-shop-crumbs { color: #b8b8be; font-size:13px; margin-bottom: 6px; }
.als-shop-crumbs a { color: #b8b8be; text-decoration:none; }
.als-shop-crumbs a:hover { color: var(--accent2); }

/* ── Topli product grid (Veloro/Mango nivo, mlečno-bež podloga) ── */
.als-section { background: var(--als-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(0,0,0,.12); }
/* Foto na čistoj beloj pločici (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(215,38,56,.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 ══════════════ */
/* ── PDP layout fix (2026-06-01) — summary se preklapao (naslov/cena/dugme jedno preko drugog),
   dno (tabovi) bio centriran na 820px dok su kolone iznad šire → „neskladno". Vraćamo
   2-kolonski flex (galerija | summary) + vertikalni ritam u summary-ju + tabove preko cele širine. ── */
@media (min-width: 768px) {
    .woocommerce div.product { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 44px; }
    .woocommerce div.product > .woocommerce-product-gallery { flex: 0 1 46%; max-width: 46%; margin: 0 !important; }
    .woocommerce div.product > .summary.entry-summary { flex: 1 1 0; min-width: 300px; width: auto !important; margin: 0 !important; }
    .woocommerce div.product > .woocommerce-tabs,
    .woocommerce div.product > .alatishop-delivery-badge,
    .woocommerce div.product > .alatishop-product-cta,
    .woocommerce div.product > .related,
    .woocommerce div.product > .upsells { flex: 1 1 100%; width: 100%; }
}
/* Summary: jednoličan vertikalni razmak — kraj preklapanja */
.woocommerce div.product .summary.entry-summary { display: flex; flex-direction: column; gap: 14px; }
.woocommerce div.product .summary.entry-summary > * { float: none !important; margin: 0 !important; }
.woocommerce div.product .summary .product_title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.woocommerce div.product .summary .price { font-size: 26px; line-height: 1.2; }
.woocommerce div.product .summary .price del { font-size: 17px; font-weight: 600; margin-right: 10px; }
.woocommerce div.product .summary .price ins { text-decoration: none; }
.woocommerce div.product .summary .woocommerce-product-details__short-description { line-height: 1.6; }
.woocommerce div.product .summary .stock { font-weight: 700; }
/* Ceo PDP centriran u kontejner sa paddingom (single-product NEMA .ast-container →
   bez ovoga je sve zalepljeno za levu ivicu i razvučeno preko celog ekrana). */
body.single-product div.product {
    max-width: 1240px; margin-left: auto !important; margin-right: auto !important;
    padding-left: 24px; padding-right: 24px; box-sizing: border-box;
}
.woocommerce div.product .woocommerce-tabs { margin-top: 8px; }
.woocommerce div.product .woocommerce-Tabs-panel { max-width: 820px; }

.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; }
.woocommerce div.product .flex-control-thumbs { margin-top: 12px; display:flex; gap:8px; flex-wrap:wrap; }
.woocommerce div.product .flex-control-thumbs li { width: 64px !important; }
.woocommerce div.product .flex-control-thumbs img { border:1px solid var(--border); border-radius:6px; opacity:.7; transition: opacity .2s, border-color .2s; }
.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active { opacity:1; border-color: var(--accent); }

/* Brand-red 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 — čist underline stil (SR labele iz functions.php filtera).
   Uklanjamo WooCommerce default rounded „tab" pseudo-okvire (::before/::after) koji
   su izgledali nestilizovano/ružno; ostaje moderan underline tab. ── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    list-style: none; margin: 0 0 4px; padding: 0; display: flex; gap: 6px;
    border-bottom: 1px solid var(--border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after { content: none !important; display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important; border: none !important; margin: 0 !important;
    padding: 0 !important; border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; border: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block; padding: 12px 20px; color: var(--text-muted) !important; font-weight: 700;
    text-decoration: none; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--text) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--accent) !important; border-bottom-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(0,0,0,.12); }
.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 ── */
@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; } }