/* VeronaTextil – custom color utilities (extends Hyvä parent CSS) */

/* ══ GLOBAL COLOR OVERRIDE — replace Hyva default blue with VeronaTextil teal ══ */
:root {
    --color-primary:         oklch(59% 0.05 187);
    --color-primary-lighter: oklch(72% 0.045 190);
    --color-primary-darker:  oklch(44% 0.048 185);
}

/* Focus ring */
*:focus-visible { outline-color: #6B8E8A; }

/* Form input focus */
input:focus, textarea:focus, select:focus {
    border-color: #6B8E8A !important;
    box-shadow: 0 0 0 2px rgba(107,142,138,.15) !important;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked { accent-color: #6B8E8A; }

/* "Dodaj do koszyka" — zmień żółty na teal */
.tocart,
button.tocart,
a.tocart {
    background-color: #6B8E8A !important;
    border-color: #6B8E8A !important;
    color: #fff !important;
}
.tocart:hover,
button.tocart:hover,
a.tocart:hover {
    background-color: #4d6b68 !important;
    border-color: #4d6b68 !important;
}

/* Pagination active */
.pagination [aria-current],
.pages .current strong { background-color: #6B8E8A; color: #fff; border-color: #6B8E8A; }

/* Messages — info */
.message.info, .message-info { border-color: #6B8E8A; background: #f0f7f6; }

/* ── Homepage: remove top padding from main content so room nav touches header ─ */
.cms-index-index .page-main,
.cms-index-index #maincontent,
.cms-index-index main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ═══ MOBILE RESPONSIVE — CSS media queries as primary mechanism ═══ */
/* ═══ MOBILE — breakpoint 1024px (covers phones + tablets + narrow laptops) ═══ */
@media (max-width: 1023px) {
    /* Header: hide desktop elements, show mobile */
    #vt-topbar-d { display: none !important; }
    #vt-topbar-m { display: block !important; text-align: center; font-size: 11px; }
    #vt-contact  { display: none !important; }
    #vt-srch     { display: none !important; }
    #vt-nav      { display: none !important; }
    #vt-pnav     { display: none !important; }
    #vt-fdel     { display: none !important; }
    #vt-lsub     { display: none !important; }
    #vt-klbl     { display: none !important; }
    #vt-kslbl    { display: none !important; }
    #vt-hbg      { display: flex !important; }
    #vt-srch-m   { display: flex !important; }

    /* Product slider: 2 columns on mobile/tablet */
    .vt-snap-track {
        grid-auto-columns: calc((100% - 16px) / 2) !important;
    }

    /* Footer: 2 columns */
    #vt-footer-grid { grid-template-columns: 1fr 1fr !important; }

    /* Product slider: smaller padding */
    .product-slider, .vt-slider-section { padding: 2rem 0 !important; }
}

@media (max-width: 599px) {
    /* Very small phones: footer single column */
    #vt-footer-grid { grid-template-columns: 1fr !important; }

    /* Product cards: still 2 columns but tighter */
    .vt-snap-track {
        grid-auto-columns: calc((100% - 10px) / 2) !important;
        gap: 10px !important;
    }
}

/* ═══ DESKTOP — 1024px+ ═══ */
@media (min-width: 1024px) {
    #vt-topbar-d { display: flex !important; }
    #vt-topbar-m { display: none !important; }
    #vt-contact  { display: block !important; }
    #vt-srch     { display: flex !important; }
    #vt-nav      { display: block !important; }
    #vt-pnav     { display: block !important; }
    #vt-hbg      { display: none !important; }
    #vt-srch-m   { display: none !important; }
    #vt-klbl     { display: block !important; }
    #vt-kslbl    { display: block !important; }
    #vt-fdel     { display: flex !important; }
    #vt-lsub     { display: block !important; }

    /* Product slider: 4 columns desktop */
    .vt-snap-track { grid-auto-columns: calc((100% - 48px) / 4) !important; }
}

/* ── Product slider sections ────────────────────────────────── */
.product-slider {
    padding: 3rem 0;
    background: #fff;
}
.product-slider.vt-bg-cream {
    background: #faf8f5;
}
/* Section heading alignment — match homepage.html style */
.product-slider > .flex {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
.product-slider h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    color: #111827;
}
/* Product cards grid wrapper */
.snap-track {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}
/* Section subtitle above heading */
.product-slider .vt-subtitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B8E8A;
    margin-bottom: 4px;
    display: block;
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Sage palette ───────────────────────────────────────────── */
.bg-sage          { background-color: #6B8E8A; }
.bg-sage-dark     { background-color: #4d6b68; }
.bg-sage-light    { background-color: #8fb5b0; }
.bg-sage-pale     { background-color: #d4e4e2; }
.text-sage        { color: #6B8E8A; }
.text-sage-dark   { color: #4d6b68; }
.text-sage-light  { color: #8fb5b0; }

.hover\:bg-sage:hover       { background-color: #6B8E8A; }
.hover\:bg-sage-dark:hover  { background-color: #4d6b68; }
.hover\:bg-sage-pale:hover  { background-color: #d4e4e2; }
.hover\:text-sage:hover     { color: #6B8E8A; }
.hover\:text-sage-dark:hover { color: #4d6b68; }
.hover\:border-sage:hover   { border-color: #6B8E8A; }
.border-sage  { border-color: #6B8E8A; }
.divide-sage  > * + * { border-color: #6B8E8A; }

/* Opacity variants used in hero overlay */
.bg-sage\/80   { background-color: rgba(107, 142, 138, 0.8); }
.bg-sage\/70   { background-color: rgba(107, 142, 138, 0.7); }

/* ── Cream ──────────────────────────────────────────────────── */
.bg-cream  { background-color: #faf8f5; }
.text-cream { color: #faf8f5; }

/* ── Display font ───────────────────────────────────────────── */
.font-display, h1.font-display, h2.font-display, p.font-display {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── SVG icon sizing – fallback when Tailwind scan misses file ─ */
svg.w-3\.5 { width: 0.875rem; height: 0.875rem; }
svg.w-4    { width: 1rem;     height: 1rem; }
svg.w-5    { width: 1.25rem;  height: 1.25rem; }
svg.w-6    { width: 1.5rem;   height: 1.5rem; }
svg.w-7    { width: 1.75rem;  height: 1.75rem; }
svg.h-3\.5 { height: 0.875rem; }
svg.h-4    { height: 1rem; }
svg.h-5    { height: 1.25rem; }
svg.h-6    { height: 1.5rem; }
svg.h-7    { height: 1.75rem; }

/* explicit fallbacks for contact/footer icon containers */
.vt-icon-sm svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.vt-icon-md svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ── Hero gradient ──────────────────────────────────────────── */
.hero-gradient {
    background: linear-gradient(105deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 50%, transparent 100%);
}

/* ── Product card hover ─────────────────────────────────────── */
.product-card .add-to-cart {
    opacity: 0;
    transform: translateY(8px);
    transition: all 0.25s ease;
}
.product-card:hover .product-img  { transform: scale(1.06); }
.product-img { transition: transform 0.5s ease; }
.product-card:hover .add-to-cart  {
    opacity: 1;
    transform: translateY(0);
}

/* ── Navigation ─────────────────────────────────────────────── */
.vt-nav-sage     { background-color: #6B8E8A; color: #fff; }
.vt-nav-dark     { background-color: #111827; color: #fff; }
.vt-nav-item:hover { background-color: #4d6b68; }

/* ── white opacity helpers ──────────────────────────────────── */
.text-white\/80  { color: rgba(255,255,255,0.80); }
.text-white\/70  { color: rgba(255,255,255,0.70); }
.text-white\/65  { color: rgba(255,255,255,0.65); }
.divide-white\/20 > * + * { border-color: rgba(255,255,255,0.20); }
.bg-black\/30  { background-color: rgba(0,0,0,0.30); }
.bg-black\/40  { background-color: rgba(0,0,0,0.40); }
.bg-black\/50  { background-color: rgba(0,0,0,0.50); }
.bg-black\/55  { background-color: rgba(0,0,0,0.55); }
.bg-white\/10  { background-color: rgba(255,255,255,0.10); }
.border-white\/50 { border-color: rgba(255,255,255,0.50); }
.border-white\/60 { border-color: rgba(255,255,255,0.60); }

.text-white { color: #ffffff; }

/* ── Static pages — mobile padding ──────────────────────────── */
@media(max-width:639px){
    /* hero sections */
    .vt-about-hero,
    .vt-contact-hero,
    [style*="background:#111827"][style*="padding:4rem"] {
        padding-top:2.5rem !important;
        padding-bottom:2.5rem !important;
        padding-left:1.25rem !important;
        padding-right:1.25rem !important;
    }
    /* main content areas */
    .vt-about-main,
    .vt-contact-main {
        padding:2rem 1.25rem !important;
    }
    /* prevent any element from breaking out of viewport */
    body { overflow-x:hidden; }
}

/* ── Cart page — remove border-radius from Hyvä card component ── */
.checkout-cart-index .card,
.checkout-cart-index [class*="rounded"] {
    border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT PAGE (PDP) — premium redesign
   ═══════════════════════════════════════════════════════════════ */
.catalog-product-view {
    --vt-teal:#6B8E8A; --vt-teal-d:#4d6b68; --vt-teal-dd:#39524f;
    --vt-ink:#232b29; --vt-muted:#7c8884; --vt-line:#ece9e4; --vt-cream:#f6f3ef;
}

.catalog-product-view .breadcrumbs { font-size:.8rem; color:var(--vt-muted); }

/* ── Galeria — bez ramki/tła ── */

/* Bez zaokrągleń na całym PDP (ostre rogi, spójnie z resztą sklepu) */
.catalog-product-view #gallery img,
.catalog-product-view .vt-avail .stock,
.catalog-product-view .vt-qty,
.catalog-product-view .vt-qty-btn,
.catalog-product-view .vt-qty-input,
.catalog-product-view .vt-buybar #product-addtocart-button,
.catalog-product-view .vt-addto button,
.catalog-product-view .vt-addto a,
.catalog-product-view .vt-trust-ico,
.catalog-product-view section .card,
.catalog-product-view section > h2::after,
.catalog-product-view [class*="rounded"] { border-radius:0 !important; }

/* ── Kolumna informacji ── */
.catalog-product-view .vt-pdp { padding:.25rem 0 .5rem; }
.catalog-product-view .vt-pdp-head [class*="text-3xl"] {
    font-size:2rem; line-height:1.15; font-weight:700;
    color:var(--vt-ink); letter-spacing:-.01em;
}
.catalog-product-view .vt-rating { font-size:.85rem; }

/* Cena */
.catalog-product-view .vt-price { margin:1.1rem 0 .5rem; }
.catalog-product-view .vt-price .price {
    font-size:2.25rem; line-height:1; font-weight:800;
    color:var(--vt-ink); letter-spacing:-.02em;
}
.catalog-product-view .vt-price .old-price .price {
    font-size:1.1rem; font-weight:500; color:var(--vt-muted); text-decoration:line-through;
}

/* Dostępność jako „pigułka” */
.catalog-product-view .vt-avail { margin:.25rem 0 1.25rem; }
.catalog-product-view .vt-avail .text-right { text-align:left; }
.catalog-product-view .vt-avail .stock {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.3rem .8rem; border-radius:9999px; font-size:.8rem; font-weight:600;
}
.catalog-product-view .vt-avail .stock.available   { background:#e7f3ee; color:#1f7a55; }
.catalog-product-view .vt-avail .stock.unavailable { background:#fdecec; color:#c0392b; }

/* Specyfikacja */
.catalog-product-view .vt-specs { margin:0 0 1.5rem; border-top:1px solid var(--vt-line); }
.catalog-product-view .vt-spec-row {
    display:flex; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--vt-line);
}
.catalog-product-view .vt-spec-label { flex:0 0 42%; color:var(--vt-muted); font-weight:500; }
.catalog-product-view .vt-spec-value { flex:1; color:var(--vt-ink); font-weight:600; }

/* Pasek zakupu */
.catalog-product-view .vt-buybar { display:flex; gap:.75rem; align-items:stretch; margin:.25rem 0 1rem; }

/* Stepper ilości */
.catalog-product-view .vt-qty {
    display:inline-flex; align-items:stretch; height:3.5rem;
    background:#fff; border:1px solid #dcdcd6; border-radius:.75rem; overflow:hidden;
}
.catalog-product-view .vt-qty-btn {
    width:2.75rem; display:flex; align-items:center; justify-content:center;
    color:var(--vt-teal-d); background:#fff; transition:background .15s,color .15s;
}
.catalog-product-view .vt-qty-btn:hover { background:var(--vt-cream); color:var(--vt-teal-dd); }
.catalog-product-view .vt-qty-btn svg { width:1.1rem; height:1.1rem; }
.catalog-product-view .vt-qty-input {
    width:3rem; border:0; background:#fff; text-align:center;
    font-weight:700; font-size:1rem; color:var(--vt-ink); -moz-appearance:textfield;
}
.catalog-product-view .vt-qty-input::-webkit-outer-spin-button,
.catalog-product-view .vt-qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.catalog-product-view .vt-qty-input:focus { outline:none; box-shadow:none; }

/* Dodaj do koszyka */
.catalog-product-view .vt-buybar #product-addtocart-button {
    flex:1 1 auto; height:3.5rem; min-height:3.5rem; border:0; border-radius:.75rem;
    font-size:1.02rem; font-weight:700; letter-spacing:.01em; gap:.6rem; justify-content:center;
    color:#fff; background:linear-gradient(180deg,var(--vt-teal) 0%,var(--vt-teal-d) 100%);
    box-shadow:0 10px 20px -8px rgba(77,107,104,.6);
    transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.catalog-product-view .vt-buybar #product-addtocart-button:hover {
    filter:brightness(1.05); transform:translateY(-1px);
    box-shadow:0 14px 26px -8px rgba(77,107,104,.7);
}
.catalog-product-view .vt-buybar #product-addtocart-button:active { transform:translateY(0); }
.catalog-product-view .vt-buybar #product-addtocart-button span { display:inline-block; }

/* Ulubione / porównanie */
.catalog-product-view .vt-addto { display:flex; align-items:center; gap:.6rem; margin:.25rem 0 1.25rem; }
.catalog-product-view .vt-addto button,
.catalog-product-view .vt-addto a {
    margin:0 !important; width:2.75rem; height:2.75rem;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid #e3e0db; border-radius:9999px; background:#fff; color:var(--vt-teal-d);
    transition:.15s;
}
.catalog-product-view .vt-addto button:hover,
.catalog-product-view .vt-addto a:hover { border-color:var(--vt-teal); background:var(--vt-cream); }

/* Pasek zaufania */
.catalog-product-view .vt-trust {
    list-style:none; margin:1.25rem 0 0; padding:1.25rem 0 0;
    border-top:1px solid var(--vt-line);
    display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem;
}
.catalog-product-view .vt-trust-item { display:flex; align-items:center; gap:.7rem; }
.catalog-product-view .vt-trust-ico {
    flex:0 0 auto; width:2.5rem; height:2.5rem; border-radius:.75rem;
    display:flex; align-items:center; justify-content:center;
    background:var(--vt-cream); color:var(--vt-teal-d);
}
.catalog-product-view .vt-trust-ico svg { width:1.35rem; height:1.35rem; }
.catalog-product-view .vt-trust-txt { display:flex; flex-direction:column; line-height:1.2; }
.catalog-product-view .vt-trust-t { font-weight:700; font-size:.85rem; color:var(--vt-ink); }
.catalog-product-view .vt-trust-s { font-size:.72rem; color:var(--vt-muted); }

/* ── Sekcje pod galerią (Opis, recenzje) ── */
.catalog-product-view section > h2 {
    position:relative; text-align:center; font-size:1.6rem; font-weight:700;
    color:var(--vt-ink); letter-spacing:-.01em; border:0; padding:0 0 1rem; margin:0 0 1.75rem;
}
.catalog-product-view section > h2::after {
    content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
    width:64px; height:3px; border-radius:3px; background:var(--vt-teal);
}
.catalog-product-view section > h2 span { color:var(--vt-teal-d); }

.catalog-product-view section .card {
    border:1px solid var(--vt-line); border-radius:1.25rem; padding:2.5rem;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.catalog-product-view section .card .prose {
    max-width:68ch; margin:0 auto; line-height:1.8; color:#3f4a47;
}

/* Formularz opinii */
.catalog-product-view #review-form .text-xl { font-weight:700; color:var(--vt-ink); }

/* ── Mobile ── */
@media (max-width:639px) {
    .catalog-product-view .vt-trust { grid-template-columns:1fr; }
    .catalog-product-view .vt-price .price { font-size:2rem; }
    .catalog-product-view section .card { padding:1.5rem; }
    .catalog-product-view section > h2 { font-size:1.35rem; }
}