/* ========================================================= KS THEME — ULTRA PREMIUM CLEAN (SANS ONLY) + CONSISTENCY FIXES Desktop-first. Mobile tweaks later. ========================================================= */ /* ========================= 0) FONTS + ROOT TOKENS ========================= */ /* Google Fonts są teraz ładowane przez WordPress (wp_enqueue_style) jako w , co eliminuje render-blocking @import. Preconnect dodany w header.php. */ :root{ /* Map design tokens (from tokens.css) */ --bg:var(--color-bg);--bg2:var(--color-bg-alt);--card:var(--color-card);--card2:var(--color-card-alt); --text:var(--color-text);--muted:var(--color-text-muted);--muted2:var(--color-text-muted-light); --gold:var(--color-primary);--gold2:var(--color-primary-light);--win:var(--color-accent); --line:var(--color-line);--shadow:var(--shadow-default);--shadow2:var(--shadow-elevated); --radius:var(--radius-base);--radius2:var(--radius-lg); /* Ultra‑premium layout container (WIDER + stable) */ --gutter:clamp(14px,2vw,24px); --max:min(1680px,calc(100vw - calc(var(--gutter) * 2))); --section-gap:72px; --ease:var(--animation-ease); --ks-header-h:74px; /* SANS ONLY */ --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; } /* ========================= 1) RESET + BACKGROUND ========================= */ html,body{overflow-x:hidden;width:100%;margin: 0 !important;padding: 0 !important} *{box-sizing:border-box} a{color:inherit;text-decoration:none} /* Skip link – niewidoczny domyślnie, pojawia się na focus (dostępność + Lighthouse) */ .skip-link.screen-reader-text{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; } .skip-link.screen-reader-text:focus{ position:fixed; top:8px;left:8px; width:auto;height:auto; padding:12px 20px; overflow:visible;clip:auto;clip-path:none; white-space:normal; background:#fff; color:#0b2a20; font-weight:600; font-size:14px; border-radius:6px; box-shadow:0 2px 12px rgba(0,0,0,.25); z-index:99999; text-decoration:none; } img,video,svg,canvas{max-width:100%;height:auto;display:block} body{ position:relative; background:none!important; font-family:var(--font-sans); font-weight:400; letter-spacing:.1px; color:var(--text); } /* Background (consider switching to WebP later for speed) */ body::before{ content:""; position:fixed; inset:0; z-index:-2; background:url("https://ksiegarniasmakow.pl/wp-content/uploads/2026/01/background.webp") center top/cover no-repeat; transform:translateZ(0); } body::after{ content:""; position:fixed; inset:0; z-index:-1; background:rgba(7,28,21,.72); } /* subtle noise overlay */ .noise{ pointer-events:none; position:fixed; inset:0; z-index:0; opacity:.10; mix-blend-mode:overlay; background-size:240px 240px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); } /* layout */ .wrap{max-width:98%;margin:0 auto;padding:0 var(--gutter)} .grid{display:grid;gap:18px} #historia{padding:0} /* Wider homepage canvas with softly blended panel edges on large screens. */ @media (min-width: 1200px){ main.hero > .wrap > #bestsellery > .wrap, main.hero > .wrap > #historia > .wrap{ max-width:none; padding-inline:0; } main.hero .heroCard, main.hero #historia .panel, main.hero #prezenty > .panel, main.hero #kontakt > .panel, main.hero .ks-premium__container, #kontakt2 > .wrap > .panel{ border-left-color:rgba(201,171,99,.06); border-right-color:rgba(201,171,99,.06); box-shadow: 0 28px 64px rgba(0,0,0,.34), -42px 0 76px -58px rgba(11,42,32,.96), 42px 0 76px -58px rgba(11,42,32,.96); } } /* =================================================================== Premium features card styling =================================================================== */ /* The split card on the home page presents four benefits of shopping with Księgarnia Smaków. These rules give it a luxurious appearance by employing generous padding, rounded corners, subtle shadows and a refined colour palette. */ .ks-split__card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius2); padding:var(--space-8); box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; } .ks-features{ display:flex; flex-direction:column; gap:var(--space-7); } .ks-feature{ display:flex; align-items:flex-start; gap:var(--space-5); } .ks-ico{ flex:0 0 auto; width:60px; height:60px; border-radius:50%; background:rgba(213,184,117,.14); color:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 0 0 1px rgba(213,184,117,.24); } .ks-ico svg{ width:28px; height:28px; fill:currentColor; } .ks-feature h3{ margin:0 0 4px 0; font-size:var(--font-size-lg); font-weight:400; } .ks-feature p{ margin:0; color:var(--muted); font-size:var(--font-size-base); line-height:1.6; } /* ========================= 2) TYPOGRAPHY (SANS ONLY) ========================= */ h1,h2,h3,h4,h5,h6,.ks-premium-title{ font-family:var(--font-sans); letter-spacing:-.2px; } h1,h2,h3,h4,h5,h6{font-weight:400} h1{font-weight:400} h2,h3{font-weight:350} .lead{margin:0;color:var(--muted);font-size:15px;line-height:1.75;max-width:54ch} /* ========================= 3) TOPBAR + HEADER + NAV ========================= */ .topbar{ height:40px;display:flex;align-items:center;font-size:12px;color:var(--muted2); border-bottom:1px solid rgba(201,171,99,.12); background:linear-gradient(180deg,rgba(11,42,32,.55),rgba(11,42,32,.10)); position:relative;z-index:10020; } .topbar .row{display:flex;align-items:center;justify-content:space-between;gap:14px} .topbarMenu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:12px} .topbarMenu li{margin:0;padding:0} .topbarMenu a{ display:inline-flex;align-items:center;padding:6px 8px;border-radius:12px;border:1px solid transparent; color:var(--muted2);transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease); } .topbarMenu a:hover{color:var(--text);background:rgba(7,28,21,.25);border-color:rgba(201,171,99,.18)} .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid rgba(201,171,99,.22);border-radius:999px;background:rgba(7,28,21,.35);backdrop-filter:blur(10px)} .dot{width:6px;height:6px;border-radius:99px;background:var(--gold);box-shadow:0 0 0 6px rgba(201,171,99,.12)} .site-header{ position:sticky;top:0;z-index:20000!important; backdrop-filter:blur(14px);border-bottom:1px solid rgba(201,171,99,.14); background: rgba(11, 42, 32, .85); } body.admin-bar .site-header{top:46px} @media (min-width:783px){body.admin-bar .site-header{top:32px}} .nav{ height:var(--ks-header-h);display:flex;align-items:center;justify-content:space-between; gap:18px;position:relative;z-index:20001; } /* logo */ .brand{display:flex;align-items:center;gap:12px;min-width:220px} .logoMark { width: 300px; height: 85px; border-radius: 14px; border: 0; /* background: radial-gradient(16px 16px at 30% 30%, rgba(201, 171, 99, .22), transparent 60%), linear-gradient(180deg, rgba(11, 42, 32, .85), rgba(11, 42, 32, .35));*/ display: flex; align-items: center; justify-content: space-around; /* box-shadow: var(--shadow2); */ overflow: hidden; flex: 0 0 auto; } .logoMark img{height:100%;object-fit:cover;object-position:center;padding:0;transform:none;filter:saturate(1.05) contrast(1.05)} .logoMark .custom-logo-link{display:block;width:100%;height:100%} .logoMark:after{content:"";position:absolute;inset:0;border-radius:inherit; /*box-shadow:inset 0 0 0 1px rgba(201,171,99,.22),inset 0 0 0 2px rgba(0,0,0,.18);*/pointer-events:none} .logoMark:before{ content:"";position:absolute;inset:0; background:linear-gradient(120deg,transparent 35%,rgba(226,201,135,.22),transparent 65%); transform:rotate(0deg) translateX(-25%);opacity:0;transition:opacity .35s var(--ease),transform .85s var(--ease);pointer-events:none; } .brand:hover .logoMark:before{opacity:1;transform:rotate(0deg) translateX(35%)} /* nav links */ .links{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:13px;position:relative;z-index:20001;flex:1;justify-content:center} .links a{position:relative;padding:10px 8px;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)} .links a:after{ content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px; background:linear-gradient(90deg,transparent,rgba(201,171,99,.7),transparent); transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease);opacity:.9; } .links a:hover{color:var(--text)} .links a:hover:after{transform:scaleX(1)} /* ═══════════════════════════════════════════════════════════ NAV MENU — STRUCTURE ═══════════════════════════════════════════════════════════ */ .links .navMenu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:8px} .links .navMenu>li{position:relative;margin:0;padding:0} .links .navMenu>li>a{ display:inline-flex;align-items:center;gap:8px;white-space:nowrap; min-height:42px;padding:10px 14px;border-radius:14px; border:1px solid transparent; color:rgba(244,239,231,.78); font-weight:650;letter-spacing:.01em; } .links .navMenu>li>a:hover{ color:rgba(244,239,231,.96); background:rgba(255,255,255,.035); border-color:rgba(201,171,99,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } .links .navMenu>li.current-menu-item>a, .links .navMenu>li.current-menu-ancestor>a, .links .navMenu>li.current-menu-parent>a, .links .navMenu>li.menu-item-has-children:hover>a, .links .navMenu>li.menu-item-has-children:focus-within>a, .links .navMenu>li.ks-dd-open>a{ color:rgba(255,247,229,.98); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), radial-gradient(circle at top left, rgba(201,171,99,.12), transparent 58%); border-color:rgba(201,171,99,.30); box-shadow: 0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05); } /* Animated chevron — replaces old ▾ */ .links .navMenu>li.menu-item-has-children>a:before{ content:"";display:inline-block; width:5px;height:5px; border-right:1.5px solid rgba(201,171,99,.75); border-bottom:1.5px solid rgba(201,171,99,.75); border-left:0;border-top:0; transform:rotate(45deg) translateY(-2px); transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .28s ease; opacity:.75; } .links .navMenu>li.menu-item-has-children.ks-dd-open>a:before{ transform:rotate(-135deg) translateY(1px); opacity:1; } .links .navMenu>li.menu-item-has-children:hover>a:before, .links .navMenu>li.menu-item-has-children:focus-within>a:before{ transform:rotate(-135deg) translateY(1px); opacity:1; } /* ═══════════════════════════════════════════════════════════ REGULAR DROPDOWN — Subtle elegant panel ═══════════════════════════════════════════════════════════ */ .links .navMenu .sub-menu{ position:absolute;top:calc(100% + 4px);left:-14px; min-width:220px;padding:5px;margin:0;list-style:none; border-radius:14px; background:linear-gradient(160deg,rgba(11,40,28,.97) 0%,rgba(6,20,13,.98) 100%); border:1px solid rgba(201,171,99,.14); box-shadow: 0 16px 44px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04); opacity:0;visibility:hidden; transform:translateY(8px) scale(.98); transform-origin:top left; transition: opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), visibility .22s; z-index:20002!important; pointer-events:none; overflow:hidden; } /* Subtle top accent line */ .links .navMenu .sub-menu:after{ content:"";position:absolute;top:0;left:20px;right:20px;height:1px; background:linear-gradient(90deg,transparent,rgba(201,171,99,.30),transparent); } /* No triangle arrow */ .links .navMenu .sub-menu:before{display:none} .links .navMenu .sub-menu li{margin:0;padding:0} /* Items — staggered entrance via nth-child */ .links .navMenu .sub-menu>li>a{ display:flex;align-items:center;gap:12px; padding:11px 16px;border-radius:14px; color:rgba(244,239,231,.82); font-size:13.5px;font-weight:500;letter-spacing:.01em; background:transparent; border:1px solid transparent; position:relative;overflow:hidden; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; } /* Animated left gold bar */ .links .navMenu .sub-menu>li>a:before{ content:""; position:absolute;left:0;top:50%; width:2px;height:0; background:linear-gradient(180deg,rgba(201,171,99,.9),rgba(201,171,99,.3)); transform:translateY(-50%);border-radius:2px; transition:height .22s cubic-bezier(.16,1,.3,1); } /* Right arrow — replaces the global :after underline */ .links .navMenu .sub-menu>li>a:after{ content:"→"; position:static !important; left:auto !important;right:auto !important;bottom:auto !important; height:auto !important;background:none !important; margin-left:auto; font-size:13px;opacity:0; color:rgba(201,171,99,.85); transform:translateX(-5px) scaleX(0) !important; transform-origin:left !important; transition:opacity .2s ease,transform .2s ease !important; display:inline-block !important; } .links .navMenu .sub-menu>li>a:hover{ background:rgba(201,171,99,.07); border-color:rgba(201,171,99,.18); color:rgba(244,239,231,1); transform:translateX(4px); } .links .navMenu .sub-menu>li>a:hover:before{height:60%} .links .navMenu .sub-menu>li>a:hover:after{ opacity:1 !important; transform:translateX(0) scaleX(1) !important; } /* Staggered item entrance (nth-child delays) */ .links .navMenu>li.ks-dd-open>.sub-menu>li:nth-child(1)>a{transition-delay:.03s} .links .navMenu>li.ks-dd-open>.sub-menu>li:nth-child(2)>a{transition-delay:.06s} .links .navMenu>li.ks-dd-open>.sub-menu>li:nth-child(3)>a{transition-delay:.09s} .links .navMenu>li.ks-dd-open>.sub-menu>li:nth-child(4)>a{transition-delay:.12s} .links .navMenu>li.ks-dd-open>.sub-menu>li:nth-child(5)>a{transition-delay:.15s} .links .navMenu>li.ks-dd-open>.sub-menu>li:nth-child(n+6)>a{transition-delay:.18s} /* ═══════════════════════════════════════════════════════════ OPEN STATE — desktop click-to-open via .ks-dd-open ═══════════════════════════════════════════════════════════ */ @media (min-width:981px){ .links .navMenu>li{ position:relative; } .links .navMenu>li::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px; background:transparent; } .links .navMenu li:hover > .sub-menu, .links .navMenu li:focus-within > .sub-menu{ opacity:1; visibility:visible; pointer-events:auto; } .links .navMenu>li:hover>.sub-menu{ opacity:0; visibility:hidden; pointer-events:none; } .links .navMenu>li.ks-mega:hover>.sub-menu{ opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(10px) scale(.98); } .links .navMenu>li.ks-mega:focus-within>.sub-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1); } .links .navMenu>li.ks-dd-open>.sub-menu{ opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto; } .links .navMenu>li.ks-dd-open.ks-mega>.sub-menu{ transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto; } .links .navMenu>li:not(.ks-mega)>.sub-menu{ left:50%; min-width:auto; width:max-content; max-width:min(92vw, 360px); transform:translateX(-50%) translateY(8px) scale(.98); transform-origin:top center; } .links .navMenu>li:not(.ks-mega):focus-within>.sub-menu{ transform:translateX(-50%) translateY(0) scale(1); } /* nested levels */ .links .navMenu .sub-menu>li{position:relative} .links .navMenu .sub-menu>li>.sub-menu{ top:0;left:calc(100% + 12px); transform-origin:top left; margin-top:-6px; } .links .navMenu .sub-menu>li>.sub-menu.ks-sub-left{left:auto;right:calc(100% + 12px);transform-origin:top right} .links .navMenu>li:not(.ks-mega)>.sub-menu>li>a{ justify-content:center; text-align:center; padding-inline:20px; } .links .navMenu>li:not(.ks-mega)>.sub-menu>li>a:before{ display:none; } .links .navMenu>li:not(.ks-mega)>.sub-menu>li>a:after{ display:none !important; } .links .navMenu>li:not(.ks-mega)>.sub-menu>li>a:hover{ transform:none; } } /* ═══════════════════════════════════════════════════════════ MEGA MENU — Full-width luxury panel ═══════════════════════════════════════════════════════════ */ @media (min-width:981px){ .links .navMenu{position:relative} .links .navMenu>li.ks-mega{position:static} .links .navMenu>li.ks-mega>.sub-menu{ left:50%; transform:translateX(-50%) translateY(10px) scale(.98); transform-origin:top center; width:min(1120px,calc(100vw - 56px)); padding:0;border-radius:24px; background: radial-gradient(640px 240px at 0% 0%, rgba(201,171,99,.09), transparent 70%), linear-gradient(160deg,rgba(9,36,26,.985) 0%,rgba(5,18,12,.995) 100%); border:1px solid rgba(201,171,99,.16); box-shadow: 0 28px 64px rgba(0,0,0,.52), 0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05); display:flex; gap:0; grid-template-columns:repeat(3,1fr); overflow:hidden; } /* Subtle gold top accent line */ .links .navMenu>li.ks-mega>.sub-menu:after{ content:"";position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent 0%,rgba(201,171,99,.28) 30%,rgba(201,171,99,.45) 50%,rgba(201,171,99,.28) 70%,transparent 100%); z-index:1; } /* Hover-bridge: transparent strip above the panel so mouse can travel from nav to panel */ .links .navMenu>li.ks-mega>.sub-menu:before{ content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:transparent;border:0;transform:none;width:100%; } /* Each top-level column */ .links .navMenu>li.ks-mega>.sub-menu>li{ margin:0;padding:20px 18px 18px; border-right:1px solid rgba(201,171,99,.07); position:relative; } .links .navMenu>li.ks-mega>.sub-menu>li:last-child{border-right:none} /* Column heading link */ .links .navMenu>li.ks-mega>.sub-menu>li>a{ display:flex;align-items:center;gap:8px; padding:0 0 12px;margin:0; border:0;border-bottom:1px solid rgba(201,171,99,.12); background:transparent; color:rgba(201,171,99,.80); font-weight:600;letter-spacing:.10em;font-size:10.5px;line-height:1.2; text-transform:uppercase;font-family:var(--font-sans); transition:color .2s ease; overflow:visible; } /* heading dot */ .links .navMenu>li.ks-mega>.sub-menu>li>a:before{ content:"";display:inline-block; width:5px;height:5px;border-radius:50%;flex-shrink:0; background:rgba(201,171,99,.8); position:static;transform:none; } .links .navMenu>li.ks-mega>.sub-menu>li>a:after{display:none !important} .links .navMenu>li.ks-mega>.sub-menu>li>a:hover{ color:rgba(201,171,99,1);transform:none;background:transparent;border-color:rgba(201,171,99,.35); } /* Sub-items list inside mega */ .links .navMenu>li.ks-mega>.sub-menu>li>.sub-menu{ position:static;opacity:1;visibility:visible; transform:none;min-width:0; padding:14px 0 0;margin:0; background:transparent;border:0;box-shadow:none;border-radius:0; display:flex;flex-direction:column;gap:2px; overflow:visible; pointer-events:auto; } .links .navMenu>li.ks-mega>.sub-menu>li>.sub-menu:after{display:none} .links .navMenu>li.ks-mega>.sub-menu>li>.sub-menu:before{display:none} .links .navMenu>li.ks-mega>.sub-menu>li>.sub-menu>li>a{ display:flex;align-items:center;gap:8px; padding:8px 8px 8px 0; border:0;border-radius:0;background:transparent; color:rgba(244,239,231,.65);font-size:13.5px;font-weight:400;line-height:1.35; font-family:var(--font-sans); border-bottom:1px solid rgba(255,255,255,.03); transition:color .18s ease,padding-left .18s ease,border-color .18s ease; position:relative;overflow:visible; } /* Sub-item mini indicator */ .links .navMenu>li.ks-mega>.sub-menu>li>.sub-menu>li>a:before{ content:"";flex-shrink:0; width:4px;height:4px;border-radius:50%; background:rgba(201,171,99,.35); position:static;transform:none;height:auto; display:inline-block; transition:background .18s ease,transform .18s ease; } .links .navMenu>li.ks-mega>.sub-menu>li>.sub-menu>li>a:after{display:none !important} .links .navMenu>li.ks-mega>.sub-menu>li>.sub-menu>li>a:hover{ color:rgba(244,239,231,1); padding-left:8px; border-bottom-color:rgba(201,171,99,.18); background:transparent;transform:none;border-radius:0;border-left:0; } .links .navMenu>li.ks-mega>.sub-menu>li>.sub-menu>li>a:hover:before{ background:rgba(201,171,99,.85); transform:scale(1.3); } /* ── MEGA FLAT (no 3rd level — card tiles) ── */ .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat{ display:grid; grid-template-columns:repeat(var(--ks-mega-flat-columns, 3), minmax(220px, 1fr)); width:min(calc((var(--ks-mega-flat-columns, 3) * 228px) + 44px), calc(100vw - 56px)); max-width:min(860px, calc(100vw - 56px)); padding:18px; gap:14px; overflow:hidden; align-items:stretch; } .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat.ks-mega-flat--compact{ max-width:min(620px, calc(100vw - 56px)); } .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat>li{ border-right:0; padding:0; min-width:0; } .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat>li>a{ display:flex;align-items:center;justify-content:space-between; min-height:72px; padding:18px 20px;border-radius:20px; border:1px solid rgba(201,171,99,.14); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)), radial-gradient(circle at top left, rgba(201,171,99,.11), transparent 58%); color:rgba(244,239,231,.9);font-weight:600;font-size:14px;line-height:1.3; text-decoration:none;font-family:var(--font-sans); transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease; overflow:hidden;position:relative; border-bottom:1px solid rgba(201,171,99,.10) !important; text-transform:none;letter-spacing:normal; white-space:normal; } /* Shimmer overlay on hover */ .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat>li>a:before{ content:"";position:absolute;inset:0; background:linear-gradient(120deg,transparent 28%,rgba(201,171,99,.08) 50%,transparent 72%); transform:translateX(-100%); transition:transform .5s ease; width:100%;height:100%;border-radius:0; top:0;left:0; } .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat>li>a:after{ content:"↗" !important; position:static !important; left:auto !important;right:auto !important;bottom:auto !important; height:auto !important;background:none !important; font-size:12px;opacity:.42; color:rgba(201,171,99,.9); transform:translateY(2px) !important; display:inline-block !important; transition:opacity .2s ease,transform .2s ease !important; flex-shrink:0; margin-left:18px; } .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat>li>a:hover{ transform:translateY(-3px); background: linear-gradient(180deg, rgba(201,171,99,.10), rgba(201,171,99,.045)), radial-gradient(circle at top left, rgba(255,244,214,.07), transparent 62%); border-color:rgba(201,171,99,.30) !important; box-shadow: 0 18px 36px rgba(0,0,0,.30), 0 4px 12px rgba(201,171,99,.08), inset 0 1px 0 rgba(255,255,255,.04); color:rgba(255,249,237,1); } .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat>li>a:hover:before{transform:translateX(100%)} .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat>li>a:hover:after{ opacity:1 !important; transform:translate(2px,-2px) !important; } } @media (min-width:981px) and (max-width:1180px){ .links .navMenu>li.ks-mega>.sub-menu{ width:min(980px,calc(100vw - 40px)); } .links .navMenu>li.ks-mega>.sub-menu.ks-mega-flat{ grid-template-columns:repeat(2,minmax(220px,1fr)); } } .actions{display:flex;align-items:center;gap:10px;min-width:220px;justify-content:flex-end} /* ========================= 4) HEADER SEARCH + ACCOUNT ========================= */ .headerSearch{position:relative} .searchPanel{ position:absolute;right:0;top:calc(100% + 10px); width:min(420px,calc(100vw - 32px)); padding:12px;border-radius:18px; background:radial-gradient(340px 140px at 15% 15%,rgba(201,171,99,.18),transparent 62%),linear-gradient(180deg,rgba(13,51,39,.90),rgba(11,36,27,.92)); border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 42px rgba(0,0,0,.42); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s var(--ease); z-index:20002!important; } .headerSearch.is-open .searchPanel{opacity:1;visibility:visible;transform:translateY(0)} .searchPanel form{display:flex;gap:10px} .searchPanel input[type="search"],.searchPanel input[type="text"]{ flex:1;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.22);color:rgba(244,239,231,.95);padding:0 14px;outline:none; } .searchPanel input[type="search"]:focus,.searchPanel input[type="text"]:focus{border-color:rgba(201,171,90,.55);box-shadow:0 0 0 3px rgba(201,171,90,.12)} .searchPanel button,.searchPanel input[type="submit"]{ height:44px;padding:0 14px;border-radius:14px;border:1px solid rgba(201,171,90,.35); background:rgba(201,171,90,.12);color:rgba(244,239,231,.95);font-weight:900;cursor:pointer; font-family:var(--font-sans); } .searchPanel button:hover,.searchPanel input[type="submit"]:hover{background:rgba(201,171,90,.18);border-color:rgba(201,171,90,.55)} .headerAccount{position:relative;display:inline-flex} .headerAccount .accountMenu{ position:absolute;top:calc(100% + 12px);right:0;min-width:220px;padding:10px;border-radius:20px; background:rgba(13,51,39,.98);border:1px solid rgba(201,171,99,.18);box-shadow:0 24px 60px rgba(0,0,0,.35); opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:20002!important; } .headerAccount.is-open .accountMenu{opacity:1;transform:translateY(0);pointer-events:auto} .headerAccount .accountMenu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;color:rgba(244,239,231,.92)} .headerAccount .accountMenu a:hover{background:rgba(201,171,99,.08)} .headerAccount .accountMenu a.is-danger{color:rgba(255,210,210,.95)} .headerAccount .accountMenu__sep{display:block;height:1px;margin:8px 4px;background:rgba(255,255,255,.10)} /* ========================= 5) BUTTONS + ICONS ========================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:11px 14px;border-radius:999px;border:1px solid var(--gold); background:radial-gradient(18px 18px at 30% 20%,rgba(201,171,99,.35),transparent 55%),linear-gradient(180deg,rgba(201,171,99,.14),rgba(7,28,21,.25)); color:var(--text);font-size:13px;cursor:pointer; transition:transform .18s var(--ease),border-color .25s var(--ease);box-shadow:0 18px 35px rgba(0,0,0,.25); font-family:var(--font-sans); font-weight:650; } .btn:hover{transform:translateY(-1px);border-color:rgba(201,171,99,.5)} .btn.gold{ border-color:var(--gold); background:linear-gradient(180deg,var(--gold),var(--gold2)); color:#1b120a; box-shadow:0 22px 45px rgba(201,171,99,.18); max-width:300px; position:relative; overflow:hidden; } .btn.gold:hover{transform:translateY(-2px)} .btn.ghost{background:rgba(7,28,21,.35);box-shadow:none} .iconBtn{ width:40px;height:40px;border-radius:14px;border:1px solid rgba(201,171,99,.22); background:rgba(7,28,21,.35);display:inline-flex;align-items:center;justify-content:center; cursor:pointer;transition:transform .18s var(--ease),border-color .25s var(--ease); position:relative;overflow:visible; } .iconBtn:hover{transform:translateY(-1px);border-color:rgba(201,171,99,.45)} .iconBtn--account{gap:8px} .iconBtn--account .iconText{display:none} @media (min-width:1100px){ .iconBtn--account{width:auto;padding:0 12px} .iconBtn--account .iconText{display:inline-block;font-size:13px;opacity:.85;white-space:nowrap} } .cartCount{ position:absolute;top:0;right:0;transform:translate(35%,-35%); min-width:18px;height:18px;padding:0 6px;border-radius:999px; background:rgba(201,171,99,.92);color:#1b120a;display:grid;place-items:center; font-size:11px;font-weight:750;border:1px solid rgba(0,0,0,.2);pointer-events:none; } /* Gold button shimmer (keep only once) */ .btn.gold::before{ content:""; position:absolute; top:0; left:-150%; width:250%; height:100%; background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 100%); transform:skewX(-20deg); animation:ksBtnGoldShine 4s infinite; pointer-events:none; } @keyframes ksBtnGoldShine{ 0%{transform:translateX(-100%) skewX(-20deg);} 50%{transform:translateX(100%) skewX(-20deg);} 100%{transform:translateX(100%) skewX(-20deg);} } /* ========================= 6) HERO (home) ========================= */ .hero{position:relative;z-index:1;padding-top: 30px;} .heroCard{ border:1px solid rgba(201,171,99,.20); background:radial-gradient(800px 400px at 15% 10%,rgba(201,171,99,.16),transparent 55%),radial-gradient(700px 400px at 90% 20%,rgba(139,94,60,.14),transparent 55%),linear-gradient(180deg,rgba(11,42,32,.70),rgba(7,28,21,.45)); box-shadow:var(--shadow);overflow:hidden;position:relative;border-radius:var(--radius2); width:100%;max-width:none;margin:0 auto; min-width:0; } .heroGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(560px,.92fr);gap:0;min-height:520px} .heroCopy{padding:42px 40px 40px;display:flex;flex-direction:column;justify-content:center;gap:16px} .kicker{display:inline-flex;align-items:center;gap:10px;color:rgba(201,171,99,.95);font-size:12px;letter-spacing:.6px;text-transform:uppercase} .kicker .line{width:42px;height:1px;background:rgba(201,171,99,.55)} h1{ margin:0;font-size:44px;line-height:1.05;letter-spacing:.2px; background:linear-gradient(90deg,#c9ab63 0%,#e8d69a 22%,#c9ab63 48%,#f2e6bd 62%,#c9ab63 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 10px 24px rgba(201,171,99,.12)); position:relative;display:inline-block; padding: 15px; } h1::after{ content:"";position:absolute;inset:-4px -10px;pointer-events:none; background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,0) 44%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 56%,transparent 100%); transform:translateX(-160%) skewX(-14deg);opacity:.55;mix-blend-mode:soft-light; animation:ksGoldShineSoft 7.5s ease-in-out infinite; } @keyframes ksGoldShineSoft{ 0%{transform:translateX(-160%) skewX(-14deg);opacity:0} 12%{opacity:.55} 26%{transform:translateX(160%) skewX(-14deg);opacity:.45} 32%{opacity:0} 100%{transform:translateX(160%) skewX(-14deg);opacity:0} } .heroCtas{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px} .miniStats{margin-top:16px;display:flex;gap:14px;flex-wrap:wrap;color:var(--muted2);font-size:12px} .stat{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid rgba(201,171,99,.16);background:rgba(7,28,21,.25);backdrop-filter:blur(10px)} .stat b{color:var(--text);font-weight:650} /* hero carousel */ .heroMedia{ position:relative; min-height:520px; border-left:1px solid rgba(201,171,99,.12); overflow:hidden; background: radial-gradient(560px 300px at 50% 44%,rgba(201,171,99,.12),transparent 62%), linear-gradient(180deg,rgba(7,28,21,.78),rgba(7,28,21,.92)); } .heroMedia::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(90deg,rgba(7,28,21,.34),transparent 24%,transparent 70%,rgba(7,28,21,.18)), linear-gradient(180deg,rgba(7,28,21,.08),transparent 54%,rgba(7,28,21,.36)); } .carousel{position:absolute;inset:0;display:grid;place-items:stretch} .slide{ position:absolute;inset:0;opacity:0; transform:scale(1.02); transition:opacity .75s var(--ease),transform 1.2s var(--ease); } .slide.active{opacity:1;transform:scale(1)} .slide img{ width:100%; height:100%; object-fit:cover; object-position:center center; filter:saturate(1.06) contrast(1.08); } .carouselUi{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:2} .dots{display:flex;gap:8px} .dots button{ width:30px;height:8px;border-radius:999px;border:1px solid rgba(201,171,99,.25); background:rgba(7,28,21,.35);cursor:pointer; transition:width .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease); } .dots button.active{width:44px;background:rgba(201,171,99,.85);border-color:rgba(201,171,99,.75)} .arrow{display:flex;gap:10px} .arrow .iconBtn{width:42px;height:42px} /* ========================= 7) SECTIONS COMMON ========================= */ section{margin-top:60px} .sectionHead{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:24px;margin-bottom:50px; } .sectionHead h2{ margin:0;font-size:42px;letter-spacing:-.2px; background:linear-gradient(90deg,var(--color-text),var(--color-primary-light)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block; } .sectionHead p{margin:0;color:var(--color-text-muted);font-size:16px;max-width:680px;line-height:1.8} .sectionHead>a.btn{margin-top:24px} .panel{ border:1px solid rgba(201,171,99,.22); background:radial-gradient(600px 240px at 10% 15%,rgba(201,171,99,.18),transparent 60%),linear-gradient(180deg,var(--color-card),var(--color-card-alt)); border-radius:calc(var(--radius2) + 6px); box-shadow:var(--shadow2); overflow:hidden; width:100%; max-width:var(--max); margin:0 auto; } /* ========================= 8) COLLECTIONS ========================= */ #kolekcje{width:100%;margin:0 auto;padding-top:28px;align-items:center} .collections{grid-template-columns:repeat(12,1fr)} .colCard{ grid-column:span 4; position:relative; border-radius:calc(var(--radius) + 10px); overflow:hidden; min-height:180px; border:1px solid rgba(201,171,99,.20); background:rgba(7,28,21,.25); cursor:pointer; transition:transform .25s var(--ease),border-color .25s var(--ease); } .colCard:hover{transform:translateY(-4px);border-color:rgba(201,171,99,.35)} .colCard img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05);transform:scale(1.03);transition:transform .7s var(--ease)} .colCard:hover img{transform:scale(1.08)} .colCard:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(7,28,21,.85));z-index:1} .colMeta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:10px} .colMeta strong{display:block;font-size:14px;letter-spacing:.2px} .colMeta span{display:block;font-size:12px;color:var(--muted2);margin-top:4px} .tag{ display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px; border:1px solid rgba(201,171,99,.25);background:rgba(7,28,21,.35); color:rgba(201,171,99,.95);font-size:11px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap; font-family:var(--font-sans); } /* ========================= 9) PRODUCTS (home cards) ========================= */ #bestsellery{width:100%;margin:0;padding-top:28px} .products{padding:18px;min-height:480px} .productGrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px} .pCard{ grid-column:span 3; border:1px solid rgba(201,171,99,.20); border-radius:calc(var(--radius) + 10px); background:radial-gradient(240px 140px at 20% 0%,rgba(201,171,99,.14),transparent 65%),linear-gradient(180deg,rgba(13,51,39,.55),rgba(7,28,21,.35)); overflow:hidden; cursor:pointer; transition:transform .22s var(--ease),border-color .25s var(--ease); min-height:340px; display:flex; flex-direction:column; } .pCard:hover{transform:translateY(-4px);border-color:rgba(201,171,99,.38)} .pMedia{height:185px;position:relative;overflow:hidden} .pMedia img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform .7s var(--ease)} .pCard:hover .pMedia img{transform:scale(1.10)} .pMedia:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(7,28,21,.85));z-index:1} .pBadge{ position:absolute;left:12px;top:12px;z-index:2;padding:7px 10px;border-radius:999px; border:1px solid rgba(201,171,99,.25);background:rgba(7,28,21,.35);backdrop-filter:blur(10px); color:rgba(201,171,99,.95);font-size:11px;letter-spacing:.5px;text-transform:uppercase; font-family:var(--font-sans); } .pBody{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .pTitle{margin:0;font-size:14px;line-height:1.35} .pDesc{margin:0;color:var(--muted2);font-size:12px;line-height:1.6;flex:1} .pRow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px} .price{font-weight:750;letter-spacing:.3px} .old{color:rgba(244,239,231,.45);text-decoration:line-through;font-weight:500;margin-left:8px;font-size:12px} .add{ display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:999px; border:1px solid rgba(201,171,99,.28);background:rgba(7,28,21,.35); cursor:pointer;transition:transform .18s var(--ease),border-color .25s var(--ease); font-size:12px;color:var(--gold2); font-family:var(--font-sans); } .add:hover{transform:translateY(-1px);border-color:rgba(201,171,99,.45)} .add svg{opacity:.9} /* ========================= 10) STORY / HISTORIA ========================= */ .story{display:grid;grid-template-columns:.05fr .95fr;gap:0;min-height:420px} .storyMedia{ position:relative;overflow:hidden;border-right:1px solid rgba(201,171,99,.12);width:360px; } .storyMedia img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.05);transform:scale(1.04);transition:transform 1.2s var(--ease)} .panel:hover .storyMedia img{transform:scale(1.08)} .storyMedia:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,28,21,.85),transparent 55%);z-index:1} .storyCopy{ padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:center;gap:14px; background:radial-gradient(600px 260px at 10% 15%,rgba(201,171,99,.12),transparent 60%),linear-gradient(180deg,var(--color-card),var(--color-card-alt)); } .storyCopy h3{ margin:0 0 16px;font-size:28px;letter-spacing:-.2px; background:linear-gradient(90deg,var(--color-text),var(--color-primary-light)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .storyCopy p{margin:0;color:var(--muted);font-size:13px;line-height:1.75;min-width: 75ch; max-width:90ch} .bulletRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px} .bullet{border:1px solid rgba(201,171,99,.14);background:rgba(7,28,21,.25);border-radius:18px;padding:12px;display:flex;gap:10px;align-items:flex-start} .bullet i{width:34px;height:34px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(201,171,99,.25);color:rgba(201,171,99,.95);background:rgba(7,28,21,.35);flex:0 0 auto} .bullet b{display:block;font-size:12px} .bullet span{display:block;margin-top:4px;color:var(--muted2);font-size:12px;line-height:1.55} /* Podstawowe style dla mobile */ @media screen and (max-width: 768px) { .story { grid-template-columns: 1fr; min-height: auto; gap: 0; } .storyMedia { width: 100%; height: 280px; border-right: none; border-bottom: 1px solid rgba(201, 171, 99, 0.12); } .storyMedia:before { background: linear-gradient(180deg, rgba(7, 28, 21, 0.85), transparent 55%); } .storyCopy { padding: 24px 20px 30px; gap: 12px; background: radial-gradient(400px 200px at 20% 10%, rgba(201, 171, 99, 0.12), transparent 70%), linear-gradient(180deg, var(--color-card), var(--color-card-alt)); } .storyCopy h3 { font-size: 24px; margin: 0 0 12px; letter-spacing: -0.15px; } .storyCopy p { font-size: 14px; max-width: 100%; } .bulletRow { grid-template-columns: 1fr; gap: 10px; margin-top: 6px; } .bullet { padding: 10px; } .bullet i { width: 30px; height: 30px; border-radius: 12px; } .bullet b { font-size: 13px; } .bullet span { font-size: 12px; margin-top: 3px; } } /* Dodatkowe style dla mniejszych telefonów */ @media screen and (max-width: 480px) { .storyMedia { height: 240px; } .storyCopy { padding: 20px 16px 25px; } .storyCopy h3 { font-size: 22px; margin: 0 0 10px; } .storyCopy p { font-size: 13px; line-height: 1.6; } .bullet { padding: 8px; } .bullet i { width: 28px; height: 28px; border-radius: 10px; } .bullet b { font-size: 12px; } .bullet span { font-size: 11px; } } /* Opcjonalnie - style dla tabletów */ @media screen and (min-width: 769px) and (max-width: 1024px) { .story { grid-template-columns: 0.4fr 0.6fr; } .storyMedia { width: 100%; height: 380px; } .storyCopy { padding: 28px 24px 30px; } .storyCopy h3 { font-size: 26px; } .bulletRow { grid-template-columns: repeat(2, 1fr); } } /* ========================= 11) NEWSLETTER ========================= */ .newsletter{padding:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .newsText h3{margin:0;font-size:18px;color:#c9ab63} .newsText p{margin:6px 0 0;color:var(--muted2);font-size:13px;line-height:1.6} .form{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .input{ width:min(360px,80vw);padding:12px 14px;border-radius:999px;border:1px solid rgba(201,171,99,.22); background:rgba(7,28,21,.35);color:var(--text);outline:none;transition:border-color .25s var(--ease); font-family:var(--font-sans); } .input:focus{border-color:rgba(201,171,99,.55)} .toast{ position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(20px); opacity:0;padding:12px 14px;border-radius:999px;border:1px solid rgba(201,171,99,.25); background:rgba(7,28,21,.65);backdrop-filter:blur(10px); color:var(--text);font-size:13px;z-index:20;transition:opacity .35s var(--ease),transform .35s var(--ease); } .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ========================= 12) CONTACT + MAP ========================= */ #prezenty{width:100%;margin:0 auto;padding-top:28px;align-items:center} /* FIX: was 100vw */ .contactWrap{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;padding:18px} .contactCard{ border:1px solid rgba(201,171,99,.18);border-radius:var(--radius2); background:radial-gradient(520px 260px at 15% 10%,rgba(201,171,99,.12),transparent 60%),linear-gradient(180deg,var(--color-card),var(--color-card-alt)); box-shadow:var(--shadow2);overflow:hidden; } .contactCard .inner{padding:18px} .contactTitle{ margin:0;font-size:32px;letter-spacing:-.4px; background:linear-gradient(90deg,var(--color-text),var(--color-primary-light)); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .contactSub{margin:8px 0 0;color:var(--color-text-muted);font-size:16px;line-height:1.8} .formGrid{margin-top:14px;display:grid;grid-template-columns:repeat(12,1fr);gap:10px} .field{grid-column:span 6}.field.full{grid-column:span 12} .label{display:block;font-size:12px;color:rgba(244,239,231,.70);margin:0 0 6px 6px} .input2,.textarea,.select{ width:100%;padding:12px 14px;border-radius:16px;border:1px solid rgba(201,171,99,.22); background:rgba(7,28,21,.35);color:var(--text);outline:none; transition:border-color .25s var(--ease),transform .18s var(--ease); font-family:var(--font-sans); } .textarea{min-height:120px;resize:vertical} .input2:focus,.textarea:focus,.select:focus{border-color:rgba(201,171,99,.55)} .checkRow{margin-top:10px;display:grid;gap:8px;color:rgba(244,239,231,.70);font-size:12px;line-height:1.5} .checkRow label{display:flex;gap:10px;align-items:flex-start} .checkRow input{margin-top:2px;width:16px;height:16px;accent-color:var(--gold)} .formActions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between} .helper{color:rgba(244,239,231,.55);font-size:12px} .mapFrame{width:100%;height:320px;border:0;display:block;filter:saturate(1.02) contrast(1.02)} .mapTop{display:flex;align-items:flex-end;justify-content:space-between;gap:10px} .mapBadge{ display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid rgba(201,171,99,.25); background:rgba(7,28,21,.35);color:rgba(201,171,99,.95);font-size:11px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap; font-family:var(--font-sans); } .kvRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px} .kv{border:1px solid rgba(201,171,99,.14);border-radius:18px;padding:12px;background:rgba(7,28,21,.25)} .kv b{display:block;font-size:12px;letter-spacing:.2px} .kv span{display:block;margin-top:4px;color:var(--muted2);font-size:12px;line-height:1.55} /* ========================= 13) FOOTER (PRO / PREMIUM) ========================= */ .ks-footer{ padding: clamp(44px, 5vw, 72px) 0 54px; color: var(--muted2); border-top: 1px solid rgba(201,171,99,.14); position: relative; z-index: 1; } /* tło + “gold glow” */ .ks-footer::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(900px 380px at 15% 10%, rgba(201,171,99,.14), transparent 60%), radial-gradient(900px 380px at 85% 65%, rgba(201,171,99,.10), transparent 62%), linear-gradient(180deg, rgba(2,10,8,0), rgba(2,10,8,.58)); } .ks-footer .wrap{ position:relative; z-index:2; } .ks-footerCard{ border-radius: 26px; border: 1px solid rgba(201,171,99,.16); background: rgba(7,28,21,.62); backdrop-filter: blur(14px); box-shadow: 0 26px 70px rgba(0,0,0,.42); overflow: hidden; } /* TOP */ .ks-footerTop{ display:grid; grid-template-columns: 1.25fr .95fr; gap: 18px; padding: 22px 22px 18px; border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(520px 220px at 18% 10%, rgba(201,171,99,.10), transparent 65%), linear-gradient(180deg, rgba(13,51,39,.52), rgba(7,28,21,.28)); } .ks-footerBrandTitle{ margin: 0 0 8px; font-family: var(--font-sans); font-weight: 850; letter-spacing: -.25px; font-size: 20px; background: linear-gradient(135deg, rgba(244,239,231,.98), rgba(231,214,161,.92), rgba(201,171,99,.95)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color: transparent; } .ks-footerBrandDesc{ margin: 0; color: rgba(244,239,231,.72); font-size: 13px; line-height: 1.75; max-width: 70ch; } .ks-footerBadges{ margin-top: 14px; display:flex; flex-wrap:wrap; gap: 8px; } .ks-footBadge{ display:inline-flex; align-items:center; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(201,171,99,.22); background: rgba(7,28,21,.35); color: rgba(231,214,161,.90); font-size: 11px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; } /* Kontakt box */ .ks-footerContact .footTitle{ margin-bottom: 10px; } .ks-footerContactBox{ border: 1px solid rgba(201,171,99,.14); background: rgba(0,0,0,.18); border-radius: 18px; padding: 14px 14px 12px; } .ks-footerContactText{ margin: 0; color: rgba(244,239,231,.72); font-size: 13px; line-height: 1.75; } .ks-footerLinkStrong{ color: rgba(244,239,231,.92); font-weight: 750;gap: 22px; text-decoration: none; border-bottom: 1px solid rgba(201,171,99,.30); } .ks-footerLinkStrong:hover{ border-bottom-color: rgba(201,171,99,.55); } .ks-footerActions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; } .ks-footerBtn{ display:inline-flex; align-items:center; justify-content:center; height: 42px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(201,171,99,.28); background: rgba(201,171,99,.16); color: rgba(244,239,231,.94); font-weight: 800; font-size: 13px; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; box-shadow: 0 18px 38px rgba(0,0,0,.22); } .ks-footerBtn:hover{ transform: translateY(-2px); border-color: rgba(201,171,99,.45); background: rgba(201,171,99,.22); } .ks-footerBtn--ghost{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; } .ks-footerBtn--ghost:hover{ border-color: rgba(201,171,99,.45); background: rgba(201,171,99,.10); } /* LINK GRID (3 kolumny) */ .ks-footerGrid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; padding: 18px 22px 10px; } .footTitle{ color: rgba(244,239,231,.92); font-weight: 850; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 10px; font-family: var(--font-sans); } .foot ul,.footMenu{ list-style:none; margin:0; padding:0; } .footMenu li{ margin:0; padding:0; } .foot a{ display:flex; align-items:center; gap: 10px; padding: 8px 0; color: rgba(244,239,231,.62); transition: color .18s ease, transform .18s ease; } .foot a::after{ content:"›"; opacity:.35; margin-left:auto; transition: transform .18s ease, opacity .18s ease; font-size: 18px; } .foot a:hover{ color: rgba(244,239,231,.92); transform: translateX(2px); } .foot a:hover::after{ transform: translateX(4px); opacity:.9; } /* BOTTOM */ .ks-footerBottom{ margin-top: 8px; padding: 14px 22px 18px; border-top: 1px solid rgba(255,255,255,.08); display:flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 12px; color: rgba(244,239,231,.45); } .ks-footerMeta a{ color: rgba(231,214,161,.92); } .ks-footerMeta a:hover{ color: rgba(244,239,231,.95); } /* MOBILE */ @media (max-width: 900px){ .ks-footerTop{ grid-template-columns: 1fr; } .ks-footerGrid{ grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 480px){ .ks-footerCard{ border-radius: 22px; } .ks-footerTop{ padding: 18px 16px 14px; } .ks-footerGrid{ padding: 14px 16px 6px; } .ks-footerBottom{ padding: 12px 16px 16px; } } /* TRUST BAR (płatności + dostawa) */ .ks-footbar{ padding: 0 22px 14px; } .ks-footbar__inner{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(201,171,99,.14); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .ks-footbar__item{ display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(7,28,21,.28); color: rgba(244,239,231,.72); transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease; } .ks-footbar__item:hover{ transform: translateY(-2px); border-color: rgba(201,171,99,.35); background: rgba(201,171,99,.10); color: rgba(244,239,231,.92); } .ks-footbar__ico{ width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: rgba(201,171,99,.12); border: 1px solid rgba(201,171,99,.20); color: rgba(231,214,161,.95); } .ks-footbar__text{ font-size: 12px; font-weight: 850; letter-spacing: .4px; text-transform: uppercase; } .ks-footbar__divider{ width: 1px; height: 26px; background: rgba(255,255,255,.10); margin: 0 4px; opacity: .8; } @media (max-width: 480px){ .ks-footbar{ padding: 0 16px 12px; } .ks-footbar__inner{ padding: 10px 12px; } .ks-footbar__divider{ display:none; } } /* ========================= 14) MOBILE DRAWER ========================= */ #drawer.drawer{position:fixed;left:0;right:0;top:var(--ks-header-stack,var(--ks-header-h));bottom:0;z-index:20000;display:none} #drawer.drawer.open{display:block} #drawer.drawer::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)} #drawer .drawerPanel{ position:absolute;top:0;right:0;height:100%;width:min(420px,92vw); background:rgba(7,28,21,.92);border-left:1px solid rgba(201,171,99,.18); box-shadow:-20px 0 60px rgba(0,0,0,.45);padding:18px 16px;overflow:auto; display:flex;flex-direction:column;gap:14px; } #drawer .drawerLinks{position:relative!important;inset:auto!important;transform:none!important;margin:0!important;display:block} #drawer .drawerMenu{list-style:none;margin:0;padding:0;display:grid;gap:10px} #drawer .drawerMenu>li{position:relative} #drawer .drawerMenu>li>a{ width:100%;display:flex;align-items:center;justify-content:flex-start;padding:14px;border-radius:14px; border:1px solid rgba(201,171,99,.14);background:rgba(13,51,39,.35); color:rgba(244,239,231,.92);font-weight:600; font-family:var(--font-sans); } #drawer .drawerMenu>li>a:hover,#drawer .drawerMenu>li>a:focus-visible{background:rgba(201,171,99,.12);border-color:rgba(201,171,99,.32);outline:none} #drawer .drawerMenu .sub-menu{list-style:none;margin:8px 0 0;padding:0 0 0 10px;display:none;gap:8px} #drawer .drawerMenu li.ks-sub-open>.sub-menu{display:grid} #drawer .drawerMenu .sub-menu a{ width:100%;display:flex;align-items:center;padding:12px 14px;border-radius:14px; border:1px solid rgba(201,171,99,.12);background:rgba(13,51,39,.25); color:rgba(244,239,231,.88);font-weight:550;font-size:14px; font-family:var(--font-sans); } #drawer .drawerMenu .sub-menu a:hover{background:rgba(201,171,99,.10);border-color:rgba(201,171,99,.28)} #drawer .drawerSubToggle{ position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:12px; border:1px solid rgba(201,171,99,.12);background:rgba(7,28,21,.25); color:rgba(244,239,231,.9);display:grid;place-items:center; } #drawer .drawerSubToggle:hover{background:rgba(201,171,99,.10);border-color:rgba(201,171,99,.28)} #drawer .drawerSubToggle::before{content:"▾";transform:translateY(-1px);font-size:14px;opacity:.9} #drawer .drawerMenu li.ks-sub-open>.drawerSubToggle::before{content:"▴"} /* ========================= 15) CART DRAWER ========================= */ .ks-cartOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:20000} .ks-cartOverlay.open{opacity:1;pointer-events:auto} .ks-cartDrawer{ position:fixed;top:0;right:0;height:100%;width:min(420px,92vw); transform:translateX(110%);transition:transform .28s cubic-bezier(.2,.8,.2,1); z-index:20000;background:rgba(7,28,21,.98); border-left:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px); display:flex;flex-direction:column; } .ks-cartDrawer.open{transform:translateX(0)} .ks-cartDrawer__head{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.08)} .ks-cartDrawer__title{font-weight:800;letter-spacing:.2px;font-family:var(--font-sans)} .ks-cartDrawer__close{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(244,239,231,.95);cursor:pointer;font-size:22px;line-height:1} .ks-cartDrawer__body{padding:14px 18px;overflow:auto;flex:1} .ks-cartDrawer__foot{padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:10px} .ks-cartDrawer__btn{display:flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(244,239,231,.95);font-weight:700;font-family:var(--font-sans)} .ks-cartDrawer__btn--primary{background:rgba(201,171,90,.12);border-color:rgba(201,171,90,.35)} html.ks-cart-open,html.ks-cart-open body{overflow:hidden} /* mini-cart */ .ks-cartDrawer{--ks-mini-thumb:76px;--ks-mini-gap:12px} .ks-cartDrawer .woocommerce-mini-cart{list-style:none;margin:0;padding:0;display:grid;gap:12px} .ks-cartDrawer .woocommerce-mini-cart-item{position:relative;padding:12px;border-radius:18px;background:rgba(13,51,39,.42);border:1px solid rgba(201,171,99,.14)} .ks-cartDrawer .woocommerce-mini-cart-item a.remove{ position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:12px; display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10); color:rgba(244,239,231,.85);font-size:18px;line-height:1; } .ks-cartDrawer .woocommerce-mini-cart-item a.remove:hover{background:rgba(201,171,99,.12);border-color:rgba(201,171,99,.35)} .ks-cartDrawer .woocommerce-mini-cart-item>a:not(.remove){display:flex;align-items:center;gap:var(--ks-mini-gap);color:rgba(244,239,231,.94);font-weight:650;font-size:14px;line-height:1.25;font-family:var(--font-sans)} .ks-cartDrawer .woocommerce-mini-cart-item img{width:var(--ks-mini-thumb);height:var(--ks-mini-thumb);border-radius:16px;object-fit:cover;background:rgba(0,0,0,.15);border:1px solid rgba(255,255,255,.08)} .ks-cartDrawer .woocommerce-mini-cart-item .quantity{display:block;margin-top:6px;margin-left:calc(var(--ks-mini-thumb) + var(--ks-mini-gap));color:rgba(244,239,231,.72);font-size:13px} .ks-cartDrawer .woocommerce-mini-cart__total{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:space-between;font-weight:700} .ks-cartDrawer .woocommerce-mini-cart__total strong{color:rgba(244,239,231,.78)} .ks-cartDrawer .woocommerce-mini-cart__total .amount{color:var(--gold2)} .ks-cartDrawer .woocommerce-mini-cart__buttons{display:none!important} /* ========================= 16) MENU TYGODNIA (ONE CLEAN VERSION) ========================= */ .ks-weekMenu{ position:relative;border-radius:var(--radius2);padding:28px; border:1px solid var(--line); background:radial-gradient(1200px 600px at 50% 0%,rgba(201,171,99,.18),transparent 55%),linear-gradient(180deg,rgba(13,51,39,.78),rgba(11,42,32,.78)); overflow:hidden;box-shadow:var(--shadow2); } .ks-weekMenu--hasBg::before{ content:"";position:absolute;inset:-2px; background-image:var(--ksWeekMenuBg);background-size:cover;background-position:center; filter:saturate(1.05);opacity:.22;transform:scale(1.02); } .ks-weekMenu::after{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(7,28,21,.92),rgba(7,28,21,.55),rgba(7,28,21,.92)); pointer-events:none; } .ks-weekMenu__inner{position:relative;z-index:2} .ks-weekMenu__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px} .ks-weekMenu__kicker{font-size:22px;letter-spacing:.02em;color:var(--gold2);margin-bottom:4px;font-family:var(--font-sans);font-weight:800} .ks-weekMenu__subtitle{font-size:14px;color:var(--muted);max-width:720px} .ks-weekMenu__note{margin-top:10px;font-size:13px;color:var(--muted2);line-height:1.5} .ks-weekMenu__mark{ width:64px;height:64px;border-radius:18px;border:1px solid var(--line); background:linear-gradient(180deg,rgba(201,171,99,.22),rgba(201,171,99,.08)); display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(0,0,0,.25); } .ks-weekMenu__logoImg{width:40px;height:70px;object-fit:contain;opacity:1;filter:saturate(.9);user-select:none} .ks-weekMenu__tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} .ks-weekMenu__tile{ border-radius:18px;border:1px solid rgba(201,171,99,.18); background:linear-gradient(180deg,rgba(13,51,39,.72),rgba(11,36,27,.58)); padding:14px 14px 16px;box-shadow:0 14px 34px rgba(0,0,0,.28); backdrop-filter:blur(6px); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; min-height:132px; } .ks-weekMenu__tile:hover{transform:translateY(-2px);border-color:rgba(201,171,99,.36);box-shadow:0 20px 46px rgba(0,0,0,.36)} .ks-weekMenu__day{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin-bottom:8px;display:flex;align-items:center;gap:10px} .ks-weekMenu__day::before{content:"";width:10px;height:10px;border-radius:999px;background:rgba(201,171,99,.65);box-shadow:0 0 0 6px rgba(201,171,99,.08)} .ks-weekMenu__text{font-size:13px;line-height:1.45;color:rgba(244,239,231,.9)} .ks-weekMenu__tile.reveal{transition-delay:calc(var(--i) * 90ms)} @media (prefers-reduced-motion:reduce){.ks-weekMenu__tile.reveal{transition-delay:0ms!important}} /* split layout (video + tiles) */ .ks-weekMenu--split .ks-weekMenu__split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:stretch} .ks-weekMenu--split .ks-weekMenu__col--menu{display:flex;flex-direction:column;justify-content:center} .ks-weekMenu--split .ks-weekMenu__tiles{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start} .ks-weekMenu--split .ks-weekMenu__tile{flex:1 1 calc(50% - 12px);min-height:120px} .ks-weekMenuVideo{ height:100%;border-radius:18px;border:1px solid rgba(201,171,99,.18); background:linear-gradient(180deg,rgba(13,51,39,.72),rgba(11,36,27,.58)); box-shadow:0 20px 55px rgba(0,0,0,.38); overflow:hidden;display:flex;flex-direction:column;max-height:600px; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; } .ks-weekMenuVideo__frame{width:100%;height:clamp(540px,55vw,960px);min-height:960px;max-height:980px;position:relative;overflow:hidden;background:rgba(0,0,0,.18)} .ks-weekMenuVideo__el{width:100%;height:100%;display:block;object-fit:cover;transition:transform .55s ease;will-change:transform} .ks-weekMenuVideo__frame::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease; background:radial-gradient(520px 260px at 40% 10%,rgba(201,171,99,.22),transparent 60%),linear-gradient(180deg,rgba(7,28,21,.05),rgba(7,28,21,.55)); } .ks-weekMenuVideo__copy{padding:14px 14px 16px} .ks-weekMenuVideo__kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(226,201,135,.92);margin-bottom:6px;font-family:var(--font-sans)} .ks-weekMenuVideo__title{font-size:20px;line-height:1.2;margin:0 0 8px;color:var(--text);font-family:var(--font-sans);font-weight:800} .ks-weekMenuVideo__text{margin:0;color:rgba(244,239,231,.86);line-height:1.55;font-size:14px} .ks-weekMenuVideo:hover{ transform:translateY(-2px);border-color:rgba(201,171,99,.34); box-shadow:0 24px 70px rgba(0,0,0,.48),0 0 0 1px rgba(201,171,99,.18),0 0 60px rgba(201,171,99,.10); } .ks-weekMenuVideo:hover .ks-weekMenuVideo__el{transform:scale(1.035)} .ks-weekMenuVideo:hover .ks-weekMenuVideo__frame::after{opacity:1} /* ========================= 17) UTILS + ULTRA CONSISTENCY ========================= */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:translateY(0)} /* ✅ MOBILE: animacja reveal jest opcjonalna — sekcje muszą być zawsze widoczne na mobile */ @media (max-width:980px){ .reveal{opacity:1!important;transform:translateY(0)!important;transition:none!important} } .ks-pageWrap{padding:40px 0;} .ks-pageWrap--narrow{max-width:900px} .ks-pageWrap--tight{padding:28px 0} .ks-pageWrap--xl{padding:60px 0} /* ========================================================= AGE VERIFICATION (WINE 18+) — Premium modal ========================================================= */ .ks-ageGate{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:18px} .ks-ageGate.is-open{display:flex} .ks-ageGate__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(8px)} .ks-ageGate__modal{position:relative;width:min(560px,92vw);border-radius:22px;padding:22px 22px 18px; background:linear-gradient(180deg,rgba(13,51,39,.92),rgba(7,28,21,.94)); border:1px solid rgba(201,171,99,.22); box-shadow:0 40px 120px rgba(0,0,0,.65); } .ks-ageGate__x{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:12px; border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.06);color:var(--text); cursor:pointer;font-size:22px;line-height:1} .ks-ageGate__top h3{margin:6px 0 8px;font-size:22px;letter-spacing:.2px} .ks-ageGate__top p{margin:0 0 14px;color:var(--muted);line-height:1.45} .ks-ageGate__badge{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:46px;padding:0 12px; border-radius:999px;border:1px solid rgba(201,171,99,.35); background:linear-gradient(90deg,rgba(201,171,99,.22),rgba(226,201,135,.16)); color:var(--text);font-weight:700} .ks-ageGate__form{display:flex;flex-direction:column;gap:10px} .ks-ageGate__label{font-size:13px;color:var(--muted2)} .ks-ageGate__input{height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18);color:var(--text);padding:0 12px;outline:none} .ks-ageGate__input:focus{border-color:rgba(201,171,99,.45);box-shadow:0 0 0 4px rgba(201,171,99,.10)} .ks-ageGate__actions{display:flex;gap:10px;margin-top:6px} .ks-ageGate__btn{height:44px;padding:0 14px;border-radius:14px;border:1px solid rgba(201,171,99,.28); background:linear-gradient(90deg,rgba(201,171,99,.32),rgba(226,201,135,.22)); color:var(--text);font-weight:700;cursor:pointer;flex:1} .ks-ageGate__btn--ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);font-weight:600} .ks-ageGate__hint{margin-top:6px;font-size:12px;color:rgba(244,239,231,.55)} .ks-ageGate__error{min-height:18px;font-size:13px;color:#ffd7d7} .ks-panelPad{padding:28px}.ks-panelPad--sm{padding:18px 22px} /* Align key blocks to same container rhythm */ main.hero > .wrap{padding-inline:var(--gutter)} .site-header .wrap,.topbar .wrap,#kontakt2 .wrap{padding-inline:var(--gutter)} .sectionHead,section > .panel,section > .ks-weekMenu{max-width:var(--max);margin-inline:auto} /* split section helpers */ .ks-overflowHidden{overflow:hidden} .ks-flexWrap{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .ks-flexWrap .btn{min-width:180px} /* editorial split section */ /* ===== KS — PREMIUM HERO (PRO FIX) ===== */ .ks-premium, .ks-premium * { box-sizing: border-box; } .ks-premium{ /* tokens */ --ks-bg: #061c15; --ks-bg2: #0b1512; --ks-surface: rgba(10, 14, 13, .78); --ks-surface2: rgba(18, 24, 22, .62); --ks-text: rgba(244,239,231,.94); --ks-muted: rgba(244,239,231,.70); --ks-mute2: rgba(244,239,231,.50); --ks-gold: #c9ab63; --ks-gold2: #e7d6a1; --ks-line: rgba(201,171,99,.18); --ks-radius: 28px; position: relative; border-radius: 25px; margin-top: var(--section-gap, clamp(24px, 4vw, 72px)); font-family: 'Inter', system-ui, -apple-system, sans-serif; overflow: hidden; background: radial-gradient(120% 100% at 70% 0%, rgba(201,171,99,.12) 0%, transparent 55%), radial-gradient(100% 80% at 15% 85%, rgba(201,171,99,.10) 0%, transparent 60%), linear-gradient(180deg, var(--ks-bg) 0%, #030806 100%); } /* background helpers (zostają, ale ładniej) */ .ks-premium__background{ position:absolute; inset:0; z-index:0; pointer-events:none; } .ks-premium__gradient{ position:absolute; inset:-20%; background: radial-gradient(1100px 700px at 70% 25%, rgba(201,171,99,.16) 0%, transparent 55%), radial-gradient(900px 560px at 10% 70%, rgba(201,171,99,.10) 0%, transparent 60%), linear-gradient(145deg, #061c15 0%, #07110e 55%, #030806 100%); filter: saturate(1.02); } .ks-premium__pattern{ position:absolute; inset:0; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.035) 0 1px, transparent 1px), radial-gradient(circle at 80% 60%, rgba(201,171,99,.04) 0 1px, transparent 1px); background-size: 46px 46px, 64px 64px; opacity: .35; } /* ===== “SHELL” ===== */ .ks-premium__container{ position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(22px, 4vw, 58px); align-items: center; padding: clamp(22px, 4vw, 54px); border-radius: var(--ks-radius); background: radial-gradient(120% 120% at 80% 25%, rgba(201,171,99,.12) 0%, transparent 55%), radial-gradient(140% 120% at 10% 90%, rgba(255,255,255,.06) 0%, transparent 60%), linear-gradient(180deg, rgba(8,12,11,.84) 0%, rgba(8,12,11,.62) 100%); border: 1px solid rgba(201,171,99,.12); box-shadow: 0 45px 95px rgba(0,0,0,.55); overflow: hidden; isolation: isolate; } /* winieta + “grain” */ .ks-premium__container::before{ content:""; position:absolute; inset:0; background: radial-gradient(120% 85% at 50% 50%, transparent 0%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.62) 100%); opacity: .62; z-index: 0; } .ks-premium__container::after{ content:""; position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: .22; z-index: 0; } /* ===== LEWA KOLUMNA ===== */ .ks-premium__content{ position: relative; z-index: 2; color: var(--ks-text); max-width: 640px; display: grid; gap: 0; } .ks-premium__label{ display:flex; align-items:center; gap: 14px; margin-bottom: clamp(18px, 2vw, 28px); } .ks-premium__label-line{ width: 74px; height: 1px; background: linear-gradient(90deg, rgba(201,171,99,0), rgba(201,171,99,.55), rgba(201,171,99,0)); } .ks-premium__label-line:last-child{ display:none; } /* jak na screenie */ .ks-premium__label-text{ font-size: 0.78rem; letter-spacing: 4px; font-weight: 600; color: rgba(201,171,99,.92); text-transform: uppercase; white-space: nowrap; } .ks-premium__title{ margin: 0 0 18px; line-height: 1.06; } .ks-premium__title-light{ display:block; font-size: clamp(2.05rem, 3.7vw, 3.25rem); font-weight: 300; color: rgba(244,239,231,.92); letter-spacing: -0.02em; } .ks-premium__title-bold{ display:block; font-size: clamp(2.55rem, 4.6vw, 4.05rem); font-weight: 750; letter-spacing: -0.03em; background: linear-gradient(135deg, #ffffff 0%, #e7d6a1 55%, #c9ab63 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ks-premium__desc{ margin: 0 0 26px; font-size: 1.02rem; line-height: 1.7; color: var(--ks-muted); max-width: 520px; border-left: 2px solid rgba(201,171,99,.28); padding-left: 18px; } .ks-premium__highlights{ display:flex; flex-wrap:wrap; gap: 10px; margin: 0 0 28px; } .ks-premium__highlight{ display:inline-flex; align-items:center; min-height: 42px; padding: 0.7rem 1rem; border-radius: 999px; border: 1px solid rgba(201,171,99,.18); background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%); color: rgba(244,239,231,.88); font-size: 0.83rem; letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } /* stats – bardziej “premium”, równe baseline */ .ks-premium__stats{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; } .ks-premium__stat{ display:flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 18px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 100%); border: 1px solid rgba(201,171,99,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .ks-premium__stat-number{ font-size: 1.75rem; font-weight: 750; line-height: 1.05; color: var(--ks-gold); text-shadow: 0 10px 35px rgba(201,171,99,.18); } .ks-premium__stat-label{ font-size: 0.66rem; letter-spacing: 1.8px; color: var(--ks-mute2); text-transform: uppercase; } .ks-premium__stat-divider{ display:none; } /* buttons */ .ks-premium__actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .ks-premium__btn{ display:inline-flex; align-items:center; gap: 10px; padding: 0.95rem 1.65rem; border-radius: 999px; font-weight: 600; text-decoration:none; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; font-size: 0.95rem; border: 1px solid transparent; cursor:pointer; user-select:none; will-change: transform; } .ks-premium__btn--primary{ background: linear-gradient(135deg, var(--ks-gold) 0%, var(--ks-gold2) 100%); color: #0b0f0d; box-shadow: 0 18px 40px -18px rgba(201,171,99,.55); } .ks-premium__btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 26px 55px -22px rgba(201,171,99,.62); } .ks-premium__btn--secondary{ background: rgba(255,255,255,.04); color: var(--ks-text); border-color: rgba(255,255,255,.12); backdrop-filter: blur(10px); } .ks-premium__btn--secondary:hover{ border-color: rgba(201,171,99,.45); background: rgba(201,171,99,.08); transform: translateY(-2px); } /* ===== PRAWA KOLUMNA ===== */ .ks-premium__media{ position: relative; z-index: 2; min-height: 0; width: 100%; display:grid; gap: 18px; } .ks-premium__eyebrow{ display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 100%); border: 1px solid rgba(201,171,99,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .ks-premium__eyebrow-kicker{ display:inline-flex; align-items:center; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(201,171,99,.12); border: 1px solid rgba(201,171,99,.25); color: var(--ks-gold2); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; white-space: nowrap; } .ks-premium__eyebrow-text{ margin: 0; max-width: 320px; color: rgba(244,239,231,.72); font-size: 0.88rem; line-height: 1.6; text-align: right; } /* główna karta obrazu – bez “sztywnej” wysokości */ .ks-premium__media-main{ position: relative; width: min(100%, 470px); justify-self: end; aspect-ratio: 4 / 5; z-index: 1; } .ks-premium__media-frame{ width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #070a09; border: 1px solid rgba(201,171,99,.14); box-shadow: 0 35px 70px rgba(0,0,0,.55); position: relative; } .ks-premium__media-frame::before{ content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 35%), radial-gradient(70% 70% at 70% 15%, rgba(201,171,99,.14) 0%, transparent 60%); opacity: .55; pointer-events:none; z-index: 2; } .ks-premium__media-img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform .8s ease; filter: contrast(1.05) saturate(1.02); } .ks-premium__media-frame:hover .ks-premium__media-img{ transform: scale(1.05); } .ks-premium__media-overlay{ position:absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; background: linear-gradient(to top, rgba(0,0,0,.70), transparent); z-index: 3; display:grid; gap: 10px; } .ks-premium__media-badge{ background: rgba(10,14,13,.62); backdrop-filter: blur(10px); padding: 0.42rem 1rem; border-radius: 999px; font-size: 0.74rem; color: var(--ks-text); border: 1px solid rgba(201,171,99,.22); display: inline-flex; gap: 8px; } .ks-premium__media-title{ display:block; max-width: 280px; color: rgba(255,255,255,.94); font-size: 1.05rem; line-height: 1.35; text-shadow: 0 10px 24px rgba(0,0,0,.34); } /* floating product cards – “czyściej” ustawione */ .ks-premium__card{ position:absolute; background: rgba(12,16,15,.78); backdrop-filter: blur(14px); border: 1px solid rgba(201,171,99,.14); border-radius: 18px; padding: 14px 14px; box-shadow: 0 24px 46px rgba(0,0,0,.45); z-index: 3; } .ks-premium__card--1{ left: 0; bottom: 86px; width: 285px; transform: translateX(-8px); } .ks-premium__card--2{ right: 0; top: 0; width: 255px; transform: translateX(10px); } .ks-premium__product{ display:flex; gap: 12px; align-items:flex-start; } .ks-premium__product-badge{ background: rgba(201,171,99,.14); color: var(--ks-gold2); padding: 0.22rem 0.72rem; border-radius: 999px; font-size: 0.65rem; font-weight: 700; letter-spacing: .6px; white-space: nowrap; border: 1px solid rgba(201,171,99,.28); } .ks-premium__product-badge--gold{ background: linear-gradient(135deg, var(--ks-gold) 0%, var(--ks-gold2) 100%); color: #0b0f0d; border-color: rgba(0,0,0,.0); } .ks-premium__product-title{ color: var(--ks-text); font-size: 0.94rem; font-weight: 700; margin: 0 0 4px; line-height: 1.15; } .ks-premium__product-meta{ color: rgba(244,239,231,.52); font-size: 0.72rem; margin: 0 0 6px; } .ks-premium__product-price{ color: var(--ks-gold); font-weight: 750; font-size: 0.92rem; } /* location pill */ .ks-premium__location{ position:relative; justify-self: end; background: rgba(10,14,13,.72); backdrop-filter: blur(10px); border: 1px solid rgba(201,171,99,.22); border-radius: 999px; padding: 0.62rem 1.05rem; display:flex; align-items:center; gap: 10px; color: var(--ks-text); font-size: 0.88rem; z-index: 4; box-shadow: 0 16px 35px rgba(0,0,0,.35); } .ks-premium__location svg{ color: var(--ks-gold); } /* delikatne “premium float” (opcjonalne, ale robi klimat) */ @media (prefers-reduced-motion: no-preference){ .ks-premium__card--1{ animation: ksFloat1 6.5s ease-in-out infinite; } .ks-premium__card--2{ animation: ksFloat2 7.2s ease-in-out infinite; } @keyframes ksFloat1{ 0%,100%{ transform: translateX(-8px) translateY(0); } 50%{ transform: translateX(-8px) translateY(-6px);} } @keyframes ksFloat2{ 0%,100%{ transform: translateX(10px) translateY(0); } 50%{ transform: translateX(10px) translateY(6px);} } } /* ===== RESPONSIVE ===== */ @media (max-width: 1100px){ .ks-premium__container{ grid-template-columns: 1fr; gap: 34px; text-align: center; } .ks-premium__content{ margin: 0 auto; } .ks-premium__label{ justify-content:center; } .ks-premium__desc{ margin-left:auto; margin-right:auto; text-align: left; } .ks-premium__highlights{ justify-content:center; } .ks-premium__actions{ justify-content:center; } .ks-premium__stats{ max-width: 700px; margin-left: auto; margin-right: auto; } .ks-premium__media{ justify-items:center; } .ks-premium__eyebrow{ width: min(100%, 760px); text-align: left; } .ks-premium__eyebrow-text{ text-align: right; } .ks-premium__media-main{ justify-self: center; } .ks-premium__location{ justify-self: center; } } @media (max-width: 640px){ .ks-premium{ padding: 22px 12px; } .ks-premium__container{ padding: 20px; border-radius: 22px; } .ks-premium__desc{ padding-left: 14px; } .ks-premium__highlights{ justify-content:center; margin-bottom: 22px; } .ks-premium__highlight{ justify-content:center; width: 100%; } .ks-premium__stats{ grid-template-columns: 1fr; } .ks-premium__stat-number{ font-size: 1.45rem; } .ks-premium__eyebrow{ flex-direction: column; align-items: stretch; text-align: left; } .ks-premium__eyebrow-text{ max-width: none; text-align: left; } .ks-premium__media-main{ width: min(320px, 100%); } /* Ukryj dynamiczne kafelki produktów w sekcji .ks-premium na małych ekranach */ .ks-premium__cards{ display:none; } } /* ===== KS — PREMIUM HERO (MOBILE FIX) ===== */ @media screen and (max-width: 768px) { .ks-premium { padding: 20px 12px 30px; margin-top: var(--section-gap, 20px); background: radial-gradient(150% 120% at 30% 0%, rgba(201,171,99,.12) 0%, transparent 70%), linear-gradient(180deg, var(--ks-bg) 0%, #030806 100%); } .ks-premium__gradient { background: radial-gradient(800px 500px at 50% 20%, rgba(201,171,99,.16) 0%, transparent 70%), linear-gradient(145deg, #061c15 0%, #07110e 70%, #030806 100%); } .ks-premium__pattern { background-size: 32px 32px, 44px 44px; opacity: 0.25; } .ks-premium__container { grid-template-columns: 1fr; gap: 24px; padding: 20px 16px 30px; border-radius: 22px; background: radial-gradient(120% 100% at 50% 15%, rgba(201,171,99,.12) 0%, transparent 70%), linear-gradient(180deg, rgba(8,12,11,.84) 0%, rgba(8,12,11,.70) 100%); box-shadow: 0 25px 50px rgba(0,0,0,.5); } /* Content */ .ks-premium__content { max-width: 100%; text-align: center; } .ks-premium__label { justify-content: center; gap: 10px; margin-bottom: 16px; } .ks-premium__label-line { width: 50px; } .ks-premium__label-text { font-size: 0.7rem; letter-spacing: 3px; } .ks-premium__title { margin: 0 0 12px; } .ks-premium__title-light { font-size: clamp(1.8rem, 6vw, 2.2rem); } .ks-premium__title-bold { font-size: clamp(2.2rem, 7vw, 2.8rem); } .ks-premium__desc { margin: 0 auto 20px; font-size: 0.95rem; line-height: 1.6; max-width: 100%; border-left: none; padding-left: 0; text-align: center; border-top: 2px solid rgba(201,171,99,.2); padding-top: 16px; } /* Stats */ .ks-premium__stats { justify-content: center; gap: 12px; margin-bottom: 22px; flex-direction: column; align-items: center; } .ks-premium__stat { min-width: auto; width: 100%; max-width: 240px; align-items: center; text-align: center; gap: 2px; padding: 10px 0; border-bottom: 1px solid rgba(201,171,99,.12); } .ks-premium__stat:last-child { border-bottom: none; } .ks-premium__stat-number { font-size: 1.6rem; } .ks-premium__stat-label { font-size: 0.6rem; letter-spacing: 1.5px; } .ks-premium__stat-divider { display: none; } /* Actions */ .ks-premium__actions { justify-content: center; gap: 10px; margin-top: 4px; flex-direction: column; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; } .ks-premium__btn { padding: 0.85rem 1.4rem; font-size: 0.9rem; width: 100%; justify-content: center; } /* ===== MEDIA SEKCJA - NOWY UKŁAD ===== */ .ks-premium__media { position: relative; min-height: auto; margin-top: 30px; display: flex; flex-direction: column; gap: 20px; width: 100%; } /* Główny obraz */ .ks-premium__media-main { position: relative; top: auto; right: auto; left: auto; transform: none; width: 100%; max-width: 280px; margin: 0 auto; aspect-ratio: 3/4; } .ks-premium__media-frame { border-radius: 20px; box-shadow: 0 25px 45px rgba(0,0,0,.6); } .ks-premium__media-overlay { padding: 12px 14px; } .ks-premium__media-badge { padding: 0.35rem 0.9rem; font-size: 0.7rem; backdrop-filter: blur(8px); } /* ✅ KARTY PRODUKTÓW - wymuszamy grid */ .ks-premium .ks-premium__cards { display: grid !important; position: relative !important; inset: auto !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin: 20px 0 10px !important; padding: 0 !important; pointer-events: auto !important; z-index: 10 !important; width: 100% !important; height: auto !important; } /* Karty wewnątrz gridu */ .ks-premium .ks-premium__cards .ks-premium__card { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: 100% !important; margin: 0 !important; padding: 16px 14px !important; background: rgba(20, 25, 23, 0.98) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(201, 171, 99, 0.25) !important; border-radius: 18px !important; box-shadow: 0 12px 25px -8px rgba(0, 0, 0, 0.5) !important; display: block !important; opacity: 1 !important; animation: none !important; transition: transform 0.2s ease, border-color 0.2s ease !important; } .ks-premium .ks-premium__cards .ks-premium__card:nth-child(4n+2), .ks-premium .ks-premium__cards .ks-premium__card:nth-child(4n+3) { transform: translateY(16px) !important; } /* Hover efekt */ .ks-premium .ks-premium__cards .ks-premium__card:hover { transform: translateY(-4px) !important; border-color: rgba(201, 171, 99, 0.45) !important; } .ks-premium .ks-premium__cards .ks-premium__card:nth-child(4n+2):hover, .ks-premium .ks-premium__cards .ks-premium__card:nth-child(4n+3):hover { transform: translateY(12px) !important; } /* Produkt wewnątrz karty */ .ks-premium .ks-premium__product { display: flex !important; flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; } /* Badge */ .ks-premium .ks-premium__product-badge { display: inline-block !important; padding: 0.25rem 0.8rem !important; font-size: 0.65rem !important; font-weight: 600 !important; letter-spacing: 0.4px !important; background: rgba(201, 171, 99, 0.18) !important; color: var(--ks-gold2) !important; border-radius: 999px !important; border: 1px solid rgba(201, 171, 99, 0.3) !important; margin-bottom: 2px !important; line-height: 1.2 !important; } .ks-premium .ks-premium__product-badge--gold { background: linear-gradient(135deg, var(--ks-gold) 0%, var(--ks-gold2) 100%) !important; color: #0b0f0d !important; border-color: transparent !important; } /* Tytuł produktu */ .ks-premium .ks-premium__product-title { font-size: 0.95rem !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 0 2px !important; color: var(--ks-text) !important; word-break: break-word !important; } /* Meta (kategoria, pojemność) */ .ks-premium .ks-premium__product-meta { font-size: 0.7rem !important; margin: 0 0 4px !important; line-height: 1.3 !important; color: rgba(244, 239, 231, 0.65) !important; word-break: break-word !important; } /* Cena */ .ks-premium .ks-premium__product-price { font-size: 0.95rem !important; font-weight: 750 !important; color: var(--ks-gold) !important; margin-top: 4px !important; display: block !important; } /* Location pill */ .ks-premium__location { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; margin: 20px auto 0 !important; width: fit-content !important; padding: 0.6rem 1.2rem !important; font-size: 0.85rem !important; background: rgba(10, 14, 13, 0.9) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(201, 171, 99, 0.25) !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; z-index: 20 !important; color: var(--ks-text) !important; } .ks-premium__location svg { color: var(--ks-gold) !important; width: 16px !important; height: 16px !important; } /* Usuń wszystkie animacje */ .ks-premium__card--1, .ks-premium__card--2 { animation: none !important; } } /* ===== MAŁE EKRANY (poniżej 480px) ===== */ @media screen and (max-width: 480px) { .ks-premium { padding: 0px 0px 0px; } .ks-premium__container { padding: 16px 12px 24px; gap: 20px; } .ks-premium__label { gap: 8px; margin-bottom: 14px; } .ks-premium__label-line { width: 35px; } .ks-premium__label-text { font-size: 0.65rem; letter-spacing: 2.5px; } .ks-premium__title-light { font-size: clamp(1.6rem, 5vw, 1.9rem); } .ks-premium__title-bold { font-size: clamp(1.9rem, 6vw, 2.3rem); } .ks-premium__desc { font-size: 0.9rem; margin-bottom: 16px; padding-top: 12px; } .ks-premium__stats { gap: 8px; margin-bottom: 18px; } .ks-premium__stat { max-width: 200px; padding: 8px 0; } .ks-premium__stat-number { font-size: 1.4rem; } .ks-premium__stat-label { font-size: 0.55rem; letter-spacing: 1.2px; } .ks-premium__actions { max-width: 280px; gap: 8px; } .ks-premium__btn { padding: 0.75rem 1.2rem; font-size: 0.85rem; } /* 1 kolumna na bardzo małych ekranach */ .ks-premium .ks-premium__cards { grid-template-columns: 1fr !important; gap: 10px !important; } .ks-premium__media-main { max-width: 240px; } .ks-premium .ks-premium__cards .ks-premium__card { padding: 14px 12px !important; } .ks-premium .ks-premium__product-title { font-size: 0.9rem !important; } .ks-premium .ks-premium__product-meta { font-size: 0.65rem !important; } .ks-premium .ks-premium__product-price { font-size: 0.9rem !important; } .ks-premium__location { font-size: 0.8rem !important; padding: 0.5rem 1rem !important; } } /* ===== TABLETY (481px - 768px) ===== */ @media screen and (min-width: 481px) and (max-width: 768px) { .ks-premium .ks-premium__cards { grid-template-columns: repeat(2, 1fr) !important; } .ks-premium__media-main { max-width: 320px; } } /* ===== LANDSCAPE ===== */ @media screen and (max-width: 900px) and (orientation: landscape) { .ks-premium__media { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } .ks-premium__media-main { width: 30%; margin: 0; } .ks-premium .ks-premium__cards { width: 65%; grid-template-columns: repeat(3, 1fr) !important; margin-top: 0 !important; } } /* WYŁĄCZAMY WSZYSTKIE STARE REGUŁY KTÓRE MOGĄ PRZESZKADZAĆ */ @media (max-width: 1100px) { .ks-premium__cards { display: grid !important; } } @media (max-width: 640px) { .ks-premium__cards { display: none !important; } .ks-premium__card--1, .ks-premium__card--2 { display: none !important; } } /* ===== KS PREMIUM — homepage alignment override ===== */ .ks-premium{ font-family: var(--font-sans); background: transparent; } .ks-premium__container{ max-width: var(--max); padding: clamp(24px, 3vw, 38px); border-radius: calc(var(--radius2) + 6px); background: radial-gradient(600px 240px at 10% 15%, rgba(201,171,99,.15), transparent 60%), linear-gradient(180deg, rgba(13,51,39,.72), rgba(11,36,27,.58)); border: 1px solid rgba(201,171,99,.22); box-shadow: var(--shadow2); } .ks-premium__content{ display: block; } .ks-premium__kicker{ margin-bottom: 16px; } .ks-premium__title{ line-height: 1.08; } .ks-premium__title-light{ font-size: clamp(2rem, 3.8vw, 3rem); font-weight: 400; letter-spacing: 0; } .ks-premium__title-bold{ font-size: clamp(2.35rem, 4.8vw, 3.8rem); font-weight: 800; letter-spacing: -.01em; background: linear-gradient(90deg,#c9ab63 0%,#e8d69a 22%,#c9ab63 48%,#f2e6bd 62%,#c9ab63 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ks-premium__desc{ margin: 0 0 18px; max-width: 56ch; color: var(--muted); border-left: 0; padding-left: 0; } .ks-premium__highlights, .ks-premium__eyebrow, .ks-premium__media-title{ display: none; } .ks-premium__stats{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .ks-premium__actions{ gap: 12px; } .ks-premium__cta{ min-width: 210px; } .ks-premium__media{ gap: 16px; align-content: center; } .ks-premium__location{ justify-self: start; font-size: 0.82rem; padding: 0.58rem .95rem; } .ks-premium .ks-premium__cards{ margin: 0; } .ks-premium .ks-premium__cards .ks-premium__card{ min-height: 190px; } @media (max-width: 1100px){ .ks-premium__kicker{ justify-content: center; } .ks-premium__desc{ margin-left: auto; margin-right: auto; text-align: center; } .ks-premium__stats, .ks-premium__actions{ justify-content: center; } .ks-premium__location{ justify-self: center; } } @media (max-width: 640px){ .ks-premium__container{ padding: 20px; } .ks-premium__desc{ text-align: left; } .ks-premium__stats{ justify-content: flex-start; } .ks-premium__cta{ min-width: 0; width: 100%; justify-content: center; } .ks-premium .ks-premium__cards .ks-premium__card{ min-height: 0; } } /* Wholesale form fields (grid-friendly) */ .ksWholesaleFields{ grid-column: 1 / -1; margin-top: 10px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; } .ksWholesaleFields[hidden]{display:none !important;} /* ========================= 8a) HOME VIDEO GALLERY (admin: Filmy) ========================= */ .ks-videoPanel{padding:18px} .ks-videoGallery{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;align-items:stretch} .ks-videoFeatured{appearance:none;position:relative;border-radius:calc(var(--radius) + 14px);overflow:hidden;border:1px solid rgba(201,171,99,.22);background:rgba(7,28,21,.25);cursor:pointer;min-height:420px;padding:0;text-align:left;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)} .ks-videoFeatured:hover{transform:translateY(-4px);border-color:rgba(201,171,99,.38);box-shadow:0 22px 50px rgba(0,0,0,.42)} .ks-videoFeatured img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform .9s var(--ease);filter:saturate(1.05) contrast(1.05)} .ks-videoFeatured:hover img{transform:scale(1.08)} .ks-videoFeatured::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(7,28,21,.92));z-index:1} .ks-videoPlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none} .ks-videoPlay__btn{width:64px;height:64px;border-radius:999px;display:grid;place-items:center;background:rgba(7,28,21,.55);border:1px solid rgba(201,171,99,.38);backdrop-filter:blur(8px);box-shadow:0 18px 45px rgba(0,0,0,.55);transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)} .ks-videoFeatured:hover .ks-videoPlay__btn{transform:scale(1.06);border-color:rgba(201,171,99,.55);background:rgba(7,28,21,.68)} .ks-videoPlay__btn svg{width:24px;height:24px;color:rgba(201,171,99,.95)} .ks-videoFeatured__meta{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;display:flex;flex-direction:column;gap:6px} .ks-videoFeatured__kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);display:flex;align-items:center;gap:10px} .ks-videoFeatured__kicker::before{content:"";width:10px;height:10px;border-radius:999px;background:rgba(201,171,99,.65);box-shadow:0 0 0 6px rgba(201,171,99,.08)} .ks-videoFeatured__title{font-size:18px;letter-spacing:.2px;font-weight:850;line-height:1.15;color:whitesmoke;} .ks-videoFeatured__sub{font-size:13px;color:var(--muted2)} .ks-videoList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:0;align-content:stretch} .ks-videoList li{display:flex;min-height:0} /* ── Editorial card tile ── */ .ks-videoTile{ appearance:none;position:relative;display:block; width:100%;flex:1; border-radius:calc(var(--radius) + 8px); border:1px solid rgba(201,171,99,.18); overflow:hidden;cursor:pointer;text-align:left; background:rgba(7,26,19,.6); min-height:185px; transition:transform .38s var(--ease),border-color .38s var(--ease),box-shadow .38s var(--ease); } .ks-videoTile:hover{ transform:translateY(-5px) scale(1.012); border-color:rgba(201,171,99,.45); box-shadow:0 22px 55px rgba(0,0,0,.45),0 0 0 1px rgba(201,171,99,.10),0 0 28px rgba(201,171,99,.06); } /* Full-bleed image background */ .ks-videoTile__thumb{ position:absolute;inset:0; flex:none;border-radius:0;border:0;overflow:hidden; } .ks-videoTile__thumb img{ width:100%;height:100%;object-fit:cover; transform:scale(1.06); transition:transform 1s var(--ease); filter:saturate(1.05) contrast(1.02); } .ks-videoTile:hover .ks-videoTile__thumb img{transform:scale(1.14)} /* Dark gradient overlay — lighter on hover */ .ks-videoTile__thumb::before{ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(6,22,15,.08) 0%,rgba(6,22,15,.65) 55%,rgba(6,22,15,.90) 100%); transition:background .4s ease; } .ks-videoTile:hover .ks-videoTile__thumb::before{ background:linear-gradient(180deg,rgba(6,22,15,.04) 0%,rgba(6,22,15,.45) 45%,rgba(6,22,15,.82) 100%); } /* Gold shimmer sweep on hover */ .ks-videoTile::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(120deg,transparent 30%,rgba(201,171,99,.10) 50%,transparent 70%); transform:translateX(-110%); transition:transform .0s ease; } .ks-videoTile:hover::after{ transform:translateX(110%); transition:transform .65s cubic-bezier(.25,.46,.45,.94); } /* Play icon — hidden by default, fades in centered */ .ks-videoTile__icon{ position:absolute;inset:0;z-index:3; display:grid;place-items:center;pointer-events:none; opacity:0; transition:opacity .35s ease; } .ks-videoTile:hover .ks-videoTile__icon{opacity:1} .ks-videoTile__icon svg{ width:38px;height:38px; color:rgba(201,171,99,.95); filter:drop-shadow(0 4px 16px rgba(0,0,0,.55)); transform:scale(.7); transition:transform .38s var(--ease); } .ks-videoTile:hover .ks-videoTile__icon svg{transform:scale(1)} /* Text overlay at bottom */ .ks-videoTile__body{ position:absolute;left:0;right:0;bottom:0; z-index:4; display:flex;flex-direction:column;gap:3px; padding:10px 14px 12px; min-width:0; transform:translateY(0); transition:transform .38s var(--ease); } .ks-videoTile:hover .ks-videoTile__body{transform:translateY(-4px)} .ks-videoTile__kicker{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(201,171,99,.85)} .ks-videoTile__title{ display:block;font-size:13px;font-weight:600;line-height:1.3;color:rgba(244,239,231,.95); overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; } .ks-videoTile__sub{font-size:11px;color:rgba(244,239,231,.45);margin-top:1px} .ks-videoFeatured:focus-visible,.ks-videoTile:focus-visible{outline:2px solid rgba(201,171,99,.70);outline-offset:3px} html.ks-video-open,html.ks-video-open body{overflow:hidden} .ks-videoModal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:clamp(14px,2vw,28px)} .ks-videoModal.is-open{display:flex} .ks-videoModal__bg{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)} .ks-videoModal__panel{position:relative;width:min(980px,100%);border-radius:calc(var(--radius2) + 10px);overflow:hidden;border:1px solid rgba(201,171,99,.25);background:rgba(7,28,21,.82);box-shadow:0 30px 80px rgba(0,0,0,.55)} .ks-videoModal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)} .ks-videoModal__title{font-size:14px;color:rgba(244,239,231,.92)} .ks-videoModal__close{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(201,171,99,.25);color:rgba(201,171,99,.95);cursor:pointer;transition:transform .2s var(--ease),border-color .2s var(--ease)} .ks-videoModal__close:hover{transform:translateY(-1px);border-color:rgba(201,171,99,.45)} .ks-videoModal__stage{background:#000} .ks-videoModal__stage video,.ks-videoModal__stage iframe{width:100%;aspect-ratio:16/9;display:block;background:#000} @media(max-width:980px){.ks-videoGallery{grid-template-columns:1fr}.ks-videoFeatured{min-height:300px}.ks-videoList{grid-template-columns:repeat(2,1fr)}.ks-videoTile{min-height:140px}} /* ========================================================= KS CATERING — PREMIUM DARK / GOLD / EMERALD ========================================================= */ /* ========================================================= KS CATERING — PREMIUM DARK / GOLD / EMERALD Refactor: lepszy design, animacje, mobile, wydajność ========================================================= */ /* ========================= DESIGN TOKENS ========================= */ .ks-catering { /* Zaokrąglenie */ border-radius: 30px; /* Kolory */ --ks-bg: #04110e; --ks-bg-2: #071a15; --ks-surface: #081f19; --ks-surface-2: #0c2820; --ks-card: #0a201a; --ks-card-hover: #0e2d24; --ks-line: rgba(201, 162, 74, .16); --ks-line-strong: rgba(201, 162, 74, .32); /* Tekst */ --ks-text: #f4ecda; --ks-text-soft: rgba(244, 236, 218, .78); --ks-muted: rgba(244, 236, 218, .50); /* Złoto */ --ks-gold: #caa24a; --ks-gold-2: #e8cc7a; --ks-gold-deep: #9a7730; --ks-gold-glow: rgba(202, 162, 74, .18); /* Cienie */ --ks-shadow: 0 28px 72px rgba(0, 0, 0, .38); --ks-shadow-soft: 0 16px 40px rgba(0, 0, 0, .22); --ks-shadow-gold: 0 0 0 1px rgba(202, 162, 74, .12), 0 20px 50px rgba(0, 0, 0, .30); /* Promień */ --ks-r-xl: 36px; --ks-r-lg: 26px; --ks-r-md: 18px; --ks-r-sm: 12px; /* Przejścia */ --ks-ease: cubic-bezier(.22, .68, 0, 1.2); --ks-ease-out: cubic-bezier(.16, 1, .3, 1); /* Layout */ position: relative; padding: clamp(32px, 5vw, 72px) 0 clamp(48px, 7vw, 96px); color: var(--ks-text); overflow: hidden; /* Tło — głębszy gradient z aurami */ background: radial-gradient(ellipse 60% 40% at 8% 15%, rgba(202, 162, 74, .09) 0%, transparent 55%), radial-gradient(ellipse 50% 35% at 92% 10%, rgba(20, 88, 64, .18) 0%, transparent 50%), radial-gradient(ellipse 70% 50% at 50% 110%, rgba(202, 162, 74, .07) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 20% 80%, rgba(10, 46, 37, .20) 0%, transparent 60%), linear-gradient(165deg, #05130f 0%, #061612 45%, #040f0c 100%); } /* Siatka tła */ .ks-catering::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(202, 162, 74, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(202, 162, 74, .025) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%); } /* Efekt halo na górze */ .ks-catering::after { content: ""; position: absolute; top: -1px; left: 50%; translate: -50% 0; } /* ========================================================= KS PRODUCT PREMIUM uniwersalny komponent opisu produktu: - wędliny - sery ========================================================= */ .ks-product-premium { --kspp-bg: linear-gradient(180deg, rgba(4, 42, 33, 0.78) 0%, rgba(3, 30, 24, 0.92) 100%); --kspp-surface: linear-gradient(135deg, rgba(18, 70, 55, 0.36) 0%, rgba(3, 38, 30, 0.82) 100%); --kspp-surface-strong: linear-gradient(135deg, rgba(28, 88, 69, 0.34) 0%, rgba(6, 46, 36, 0.92) 100%); --kspp-border: rgba(201, 168, 111, 0.20); --kspp-border-strong: rgba(201, 168, 111, 0.34); --kspp-text: #f4ecdc; --kspp-text-soft: rgba(244, 236, 220, 0.78); --kspp-text-muted: rgba(228, 218, 196, 0.62); --kspp-accent: #d0b075; --kspp-accent-strong: #f1d59b; --kspp-chip-bg: rgba(208, 176, 117, 0.10); --kspp-note-bg: rgba(208, 176, 117, 0.08); --kspp-shadow: 0 20px 60px rgba(0, 0, 0, 0.20); --kspp-radius-xl: 28px; --kspp-radius-lg: 22px; --kspp-radius-md: 16px; position: relative; margin: 8px 0 4px; padding: 0; color: var(--kspp-text); background: transparent; border: 0; border-radius: 0; box-shadow: none; } .ks-product-premium::before { content: none; } .ks-product-premium > * { position: relative; z-index: 1; } /* ========================================================= HERO ========================================================= */ .ks-product-premium__hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr); gap: clamp(20px, 3vw, 42px); align-items: center; margin-bottom: 18px; padding: clamp(22px, 3vw, 38px); border: 1px solid var(--kspp-border); border-radius: var(--kspp-radius-xl); background: radial-gradient(circle at 92% 10%, rgba(208, 176, 117, .12), transparent 36%), linear-gradient(135deg, rgba(18, 70, 55, .34), rgba(3, 34, 27, .76)); } .ks-product-premium__title { display: grid; gap: 16px; } .ks-product-premium__h2 { margin: 0; font-size: clamp(1.65rem, 2vw, 2.35rem); line-height: 1.12; font-weight: 650; letter-spacing: -0.03em; color: var(--kspp-text); text-wrap: balance; } .ks-product-premium__h2::before { content: "Poznaj produkt"; display: block; margin-bottom: 10px; color: var(--kspp-accent); font-size: .68rem; line-height: 1; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .ks-product-premium__lead { margin: 0; max-width: 72ch; font-size: .98rem; line-height: 1.75; color: var(--kspp-text-soft); } /* ========================================================= BADGES ========================================================= */ .ks-product-premium__badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-height: 0; background: transparent; border: 0; border-radius: 0; } .ks-product-premium__badges li { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(201, 168, 111, 0.22); background: var(--kspp-chip-bg); color: var(--kspp-accent-strong); font-size: 0.78rem; line-height: 1.2; font-weight: 600; letter-spacing: 0.01em; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } /* ========================================================= GŁÓWNY GRID ========================================================= */ .ks-product-premium__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } /* ========================================================= KARTY ========================================================= */ .ks-product-premium__card { padding: clamp(20px, 2.2vw, 28px); background: rgba(4, 35, 27, .40); border: 1px solid var(--kspp-border); border-radius: var(--kspp-radius-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); } .ks-product-premium__card--wide { background: radial-gradient(circle at 100% 0%, rgba(208, 176, 117, .08), transparent 32%), rgba(4, 35, 27, .44); } .ks-product-premium__h3 { margin: 0 0 14px; font-size: 1.16rem; line-height: 1.25; font-weight: 750; color: var(--kspp-text); letter-spacing: -0.02em; } .ks-product-premium__h4 { margin: 0 0 12px; font-size: 1rem; line-height: 1.3; font-weight: 700; color: var(--kspp-accent-strong); letter-spacing: 0.01em; } .ks-product-premium__card p { margin: 0 0 14px; color: var(--kspp-text-soft); line-height: 1.8; } .ks-product-premium__card p:last-child { margin-bottom: 0; } /* ========================================================= LISTY ========================================================= */ .ks-product-premium__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; } .ks-product-premium__list li { padding: 11px 0; border-bottom: 1px solid rgba(201, 168, 111, 0.12); color: var(--kspp-text-soft); line-height: 1.7; } .ks-product-premium__list li:last-child { border-bottom: 0; padding-bottom: 0; } .ks-product-premium__list strong { color: var(--kspp-text); font-weight: 700; } /* ========================================================= NOTE ========================================================= */ .ks-product-premium__note { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--kspp-note-bg); border: 1px solid rgba(201, 168, 111, 0.16); color: var(--kspp-text-soft); line-height: 1.7; } .ks-product-premium__note strong { color: var(--kspp-accent-strong); } /* ========================================================= KOLUMNY W SZEROKIEJ KARCIe ========================================================= */ .ks-product-premium__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 54px); margin-top: 18px; } .ks-product-premium__cols > div { min-width: 0; } /* ========================================================= CHIPS ========================================================= */ .ks-product-premium__chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .ks-product-premium__chips li { padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(201, 168, 111, 0.24); background: rgba(201, 168, 111, 0.08); color: var(--kspp-text); font-size: 0.92rem; line-height: 1.2; font-weight: 600; } /* ========================================================= LINKI ========================================================= */ .ks-product-premium__links { margin: 0; color: var(--kspp-text-muted); line-height: 1.7; } .ks-product-premium__links a { color: var(--kspp-accent-strong); text-decoration: none; border-bottom: 1px solid rgba(201, 168, 111, 0.28); transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; } .ks-product-premium__links a:hover, .ks-product-premium__links a:focus { color: #fff2cf; border-color: rgba(241, 213, 155, 0.70); outline: none; } /* ========================================================= MODYFIKATORY KATEGORII ========================================================= */ .ks-product-premium--deli { --kspp-bg: linear-gradient(180deg, rgba(7, 40, 29, 0.78) 0%, rgba(3, 27, 20, 0.94) 100%); --kspp-surface: linear-gradient(135deg, rgba(34, 82, 58, 0.34) 0%, rgba(5, 35, 26, 0.88) 100%); --kspp-surface-strong: linear-gradient(135deg, rgba(47, 95, 68, 0.30) 0%, rgba(6, 40, 30, 0.94) 100%); } .ks-product-premium--cheese { --kspp-bg: linear-gradient(180deg, rgba(17, 46, 33, 0.76) 0%, rgba(8, 31, 23, 0.94) 100%); --kspp-surface: linear-gradient(135deg, rgba(72, 98, 60, 0.22) 0%, rgba(9, 39, 29, 0.88) 100%); --kspp-surface-strong: linear-gradient(135deg, rgba(88, 110, 67, 0.18) 0%, rgba(8, 41, 31, 0.94) 100%); } /* ========================================================= TYPOGRAFIA W ŚRODKU TREŚCI ========================================================= */ .ks-product-premium em { color: var(--kspp-text-soft); font-style: italic; } .ks-product-premium strong { color: var(--kspp-text); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1024px) { .ks-product-premium__hero { grid-template-columns: 1fr; } .ks-product-premium__grid { grid-template-columns: 1fr; } .ks-product-premium__cols { grid-template-columns: 1fr; } } @media (max-width: 767px) { .ks-product-premium { margin-top: 4px; padding: 0; border-radius: 0; } .ks-product-premium__hero { padding: 20px; } .ks-product-premium__h2 { font-size: 1.55rem; } .ks-product-premium__lead { font-size: 0.97rem; line-height: 1.7; } .ks-product-premium__badges { padding: 14px; gap: 8px; } .ks-product-premium__badges li, .ks-product-premium__chips li { font-size: 0.86rem; padding: 8px 12px; } .ks-product-premium__card { padding: 18px; border-radius: 20px; } .ks-product-premium__h3 { font-size: 1.1rem; margin-bottom: 12px; } .ks-product-premium__list li { padding: 8px 0; line-height: 1.6; } .ks-product-premium__note { padding: 12px 14px; border-radius: 14px; } } /* ========================================================= OPCJONALNIE: jeżeli WordPress wrzuca ten blok do opisu produktu i dodaje domyślne marginesy do pierwszego / ostatniego elementu ========================================================= */ .ks-product-premium > :first-child { margin-top: 0; } .ks-product-premium > :last-child { margin-bottom: 0; } /* ========================================================= EXCLUSIVE PRODUCT DESCRIPTION Styles the HTML stored in WooCommerce product descriptions. ========================================================= */ .woocommerce-tabs .ks-product-premium { --kspp-text: #f3eee5; --kspp-text-soft: rgba(243, 238, 229, .68); --kspp-text-muted: rgba(243, 238, 229, .46); --kspp-accent: #cdb37a; --kspp-accent-strong: #dcc58f; --kspp-border: rgba(205, 179, 122, .17); --kspp-soft-line: rgba(243, 238, 229, .075); margin: 0; } .woocommerce-tabs .ks-product-premium__hero { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: clamp(28px, 5vw, 70px); align-items: end; margin: 0 0 14px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--kspp-border); border-radius: 16px; background: linear-gradient(90deg, rgba(205, 179, 122, .04), transparent 42%), rgba(2, 24, 17, .22); box-shadow: none; } .woocommerce-tabs .ks-product-premium__title { gap: 15px; } .woocommerce-tabs .ks-product-premium__h2 { max-width: 25ch; color: var(--kspp-text); font-size: clamp(1.65rem, 2.4vw, 2.4rem); line-height: 1.12; font-weight: 520; letter-spacing: -.028em; } .woocommerce-tabs .ks-product-premium__h2::before { margin-bottom: 13px; color: var(--kspp-accent); font-size: .58rem; letter-spacing: .23em; } .woocommerce-tabs .ks-product-premium__lead { max-width: 68ch; color: var(--kspp-text-soft); font-size: .93rem; line-height: 1.82; } .woocommerce-tabs .ks-product-premium__badges { display: flex; align-content: flex-end; gap: 6px; padding: 0; } .woocommerce-tabs .ks-product-premium__badges li { min-height: 0; padding: 7px 10px; border: 1px solid rgba(205, 179, 122, .17); border-radius: 999px; background: transparent; color: rgba(220, 197, 143, .86); box-shadow: none; font-size: .68rem; font-weight: 580; letter-spacing: .03em; } .woocommerce-tabs .ks-product-premium__grid { gap: 14px; margin-bottom: 14px; } .woocommerce-tabs .ks-product-premium__card { position: relative; padding: clamp(24px, 3vw, 34px); border: 1px solid var(--kspp-border); border-radius: 16px; background: rgba(2, 24, 17, .16); box-shadow: none; } .woocommerce-tabs .ks-product-premium__card::before { content: ""; position: absolute; top: 0; left: 28px; width: 34px; height: 1px; background: var(--kspp-accent); opacity: .62; } .woocommerce-tabs .ks-product-premium__card--wide { background: linear-gradient(90deg, rgba(205, 179, 122, .025), transparent 44%), rgba(2, 24, 17, .18); } .woocommerce-tabs .ks-product-premium__h3 { margin-bottom: 17px; color: var(--kspp-text); font-size: 1.04rem; font-weight: 590; letter-spacing: -.012em; } .woocommerce-tabs .ks-product-premium__h4 { margin-bottom: 13px; color: var(--kspp-accent-strong); font-size: .76rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; } .woocommerce-tabs .ks-product-premium__card p { color: var(--kspp-text-soft); font-size: .86rem; line-height: 1.78; } .woocommerce-tabs .ks-product-premium__list li { padding: 10px 0; border-color: var(--kspp-soft-line); color: var(--kspp-text-soft); font-size: .82rem; line-height: 1.65; } .woocommerce-tabs .ks-product-premium__list strong { color: rgba(243, 238, 229, .87); font-weight: 590; } .woocommerce-tabs .ks-product-premium__note { margin-top: 17px; padding: 13px 15px; border: 1px solid rgba(205, 179, 122, .14); border-radius: 10px; background: rgba(205, 179, 122, .045); color: var(--kspp-text-soft); font-size: .79rem; line-height: 1.65; } .woocommerce-tabs .ks-product-premium__note strong { color: var(--kspp-accent-strong); font-weight: 600; } .woocommerce-tabs .ks-product-premium__cols { gap: clamp(30px, 5vw, 68px); margin-top: 20px; } .woocommerce-tabs .ks-product-premium__chips { gap: 6px; } .woocommerce-tabs .ks-product-premium__chips li { padding: 7px 10px; border-color: rgba(205, 179, 122, .15); background: transparent; color: rgba(243, 238, 229, .72); font-size: .72rem; font-weight: 540; } .woocommerce-tabs .ks-product-premium__links { color: var(--kspp-text-muted); font-size: .76rem; } .woocommerce-tabs .ks-product-premium__links a { color: var(--kspp-accent-strong); border-color: rgba(205, 179, 122, .25); } @media (max-width: 1024px) { .woocommerce-tabs .ks-product-premium__hero { grid-template-columns: 1fr; align-items: start; } .woocommerce-tabs .ks-product-premium__badges { max-width: 560px; } } @media (max-width: 767px) { .woocommerce-tabs .ks-product-premium__hero, .woocommerce-tabs .ks-product-premium__card { padding: 21px 18px; border-radius: 13px; } .woocommerce-tabs .ks-product-premium__h2 { font-size: 1.5rem; } .woocommerce-tabs .ks-product-premium__lead { font-size: .86rem; line-height: 1.72; } .woocommerce-tabs .ks-product-premium__badges { padding: 0; } } /* ========================================================= EDITORIAL TASTING DESCRIPTION Stronger visual change for product descriptions. ========================================================= */ .woocommerce-tabs .ks-product-premium__hero { position: relative; grid-template-columns: minmax(0, 1.45fr) minmax(220px, .55fr); align-items: center; padding: clamp(30px, 4.4vw, 54px); border: 0; border-radius: 14px; background: linear-gradient(90deg, rgba(241, 231, 211, .96) 0 68%, #12382c 68% 100%); overflow: hidden; } .woocommerce-tabs .ks-product-premium__hero::after { content: "KS"; position: absolute; right: 4%; bottom: -18%; color: rgba(241, 231, 211, .075); font-size: clamp(7rem, 13vw, 12rem); line-height: 1; font-weight: 700; letter-spacing: -.08em; pointer-events: none; } .woocommerce-tabs .ks-product-premium__title { max-width: 760px; z-index: 1; } .woocommerce-tabs .ks-product-premium__h2, .woocommerce-tabs .ks-product-premium__lead { color: #153329; } .woocommerce-tabs .ks-product-premium__h2 { max-width: 23ch; font-size: clamp(1.75rem, 2.7vw, 2.65rem); font-weight: 580; } .woocommerce-tabs .ks-product-premium__h2::before { color: #8d6f31; content: "Nota degustacyjna"; } .woocommerce-tabs .ks-product-premium__lead { max-width: 62ch; font-size: .92rem; line-height: 1.75; opacity: .78; } .woocommerce-tabs .ks-product-premium__hero .ks-product-premium__lead strong { color: #23483c; font-weight: 650; } .woocommerce-tabs .ks-product-premium__badges { position: relative; z-index: 1; align-content: center; justify-content: flex-start; } .woocommerce-tabs .ks-product-premium__badges li { border-color: rgba(241, 231, 211, .22); color: rgba(241, 231, 211, .84); } .woocommerce-tabs .ks-product-premium__grid { counter-reset: tasting-card; gap: 12px; margin-top: 12px; } .woocommerce-tabs .ks-product-premium__card { counter-increment: tasting-card; padding: clamp(26px, 3.2vw, 38px); border-color: rgba(205, 179, 122, .16); border-radius: 14px; background: #09291f; } .woocommerce-tabs .ks-product-premium__grid .ks-product-premium__card::after { content: "0" counter(tasting-card); position: absolute; top: 22px; right: 24px; color: rgba(205, 179, 122, .34); font-size: 11px; font-weight: 650; letter-spacing: .14em; } .woocommerce-tabs .ks-product-premium__card::before { left: 0; top: 28px; width: 2px; height: 28px; background: #cdb37a; } .woocommerce-tabs .ks-product-premium__card--wide { padding-block: clamp(30px, 3.5vw, 42px); background: linear-gradient(90deg, #0b3025, #08261d); } .woocommerce-tabs .ks-product-premium__h3 { padding-right: 42px; font-size: 1.08rem; } .woocommerce-tabs .ks-product-premium__note { border-left: 2px solid rgba(205, 179, 122, .54); border-radius: 0 9px 9px 0; } @media (max-width: 1024px) { .woocommerce-tabs .ks-product-premium__hero { grid-template-columns: 1fr; background: linear-gradient(180deg, rgba(241, 231, 211, .96) 0 72%, #12382c 72% 100%); } .woocommerce-tabs .ks-product-premium__badges { padding-top: 24px; } } @media (max-width: 767px) { .woocommerce-tabs .ks-product-premium__hero { padding: 26px 20px; background: linear-gradient(180deg, rgba(241, 231, 211, .96) 0 76%, #12382c 76% 100%); } .woocommerce-tabs .ks-product-premium__hero::after { font-size: 7rem; } .woocommerce-tabs .ks-product-premium__badges { padding-top: 26px; } } /* ========================================================= GO UP BUTTON ========================================================= */ .ks-go-up { position: fixed; bottom: 28px; right: 24px; z-index: 990; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-primary); background: var(--color-card); color: var(--color-primary); cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.45); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, background .2s ease; pointer-events: none; } .ks-go-up.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .ks-go-up:hover, .ks-go-up:focus-visible { background: var(--color-primary); color: var(--color-dark-text); outline: none; } @media (max-width: 600px) { .ks-go-up { bottom: 18px; right: 14px; width: 40px; height: 40px; } }