/* ============================================================ LUXINN — DESIGN TOKENS (wyciągnięte z luxinn.pl) Blocksy + Elementor · premium fashion ============================================================ */ :root{ --ivory:#fdfbf8; /* tło strony */ --cream:#f7f3ee; /* karty / miękkie sekcje */ --sand:#efe9e0; /* delikatne wypełnienie */ --beige:#e6ddd0; /* drugi plan */ --line:#e6ddcf; /* włoskie hairline */ --line-strong:#d4c8b8; --taupe:#c0ae96; /* cena przekreślona / wygaszone */ --mocha:#8a7264; /* tekst drugorzędny / linki */ --espresso:#28180e; /* ciemne przyciski / mocny tekst */ --coffee:#3a2a1e; /* przycisk główny / nagłówek */ --ink:#4a4a4a; /* tekst podstawowy */ --gold:#a8884a; /* akcent / cena */ --gold-soft:#c9a96a; --champagne:#e8d9b8; --ok:#5b7d5b; --serif:"Playfair Display",Georgia,serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --shadow:0 24px 60px -28px rgba(40,24,14,.30); --shadow-sm:0 10px 30px -18px rgba(40,24,14,.35); --maxw:1320px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--ivory);color:var(--ink); font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--espresso);margin:0;line-height:1.12} /* utilities -------------------------------------------------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px} .eyebrow{ font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:.22em; text-transform:uppercase;color:var(--gold);margin:0 0 14px; } .kicker{ font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha); } .price{font-family:var(--sans);font-size:14px;letter-spacing:.06em;color:var(--gold);font-weight:400} .price--lg{font-size:18px} .price-old{font-family:var(--sans);font-size:13px;font-weight:300;color:var(--taupe);text-decoration:line-through;margin-right:8px} /* buttons ---------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:.16em;text-transform:uppercase; padding:15px 30px;border:1px solid transparent;border-radius:0;background:var(--coffee);color:var(--ivory); transition:background .35s ease,color .35s ease,border-color .35s ease,transform .2s ease; } .btn:hover{background:var(--espresso)} .btn:active{transform:translateY(1px)} .btn--block{display:flex;width:100%} .btn--gold{background:var(--gold);color:#fff} .btn--gold:hover{background:#977636} .btn--ghost{background:transparent;color:var(--espresso);border-color:var(--line-strong)} .btn--ghost:hover{background:var(--cream);border-color:var(--mocha)} .btn--sm{padding:12px 22px;font-size:11px;letter-spacing:.14em} .link-cta{ font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mocha); border-bottom:1px solid var(--line-strong);padding-bottom:3px;transition:color .3s,border-color .3s; } .link-cta:hover{color:var(--espresso);border-color:var(--espresso)} /* form fields ------------------------------------------------ */ label.fld{display:block;margin-bottom:18px} .fld > span{ display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--mocha);margin-bottom:8px; } .fld input,.fld select,.fld textarea{ width:100%;font-family:var(--sans);font-size:14px;font-weight:300;color:var(--espresso); padding:13px 15px;background:#fff;border:1px solid var(--line);border-radius:0;outline:none; transition:border-color .3s,box-shadow .3s; } .fld input:focus,.fld select:focus,.fld textarea:focus{ border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,136,74,.12); } .fld--inline{display:flex;gap:18px} .fld--inline > label{flex:1;margin-bottom:0} /* ============================================================ PROMO BAR + HEADER ============================================================ */ .promo{ background:var(--espresso);color:var(--champagne);text-align:center; font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase; padding:9px 16px;font-weight:300; } .promo b{color:#fff;font-weight:500} header.site{position:sticky;top:0;z-index:40;background:rgba(253,251,248,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 32px;max-width:var(--maxw);margin:0 auto} .nav-left,.nav-right{display:flex;align-items:center;gap:28px} .nav-right{justify-content:flex-end} .nav a.menu{font-family:var(--sans);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--espresso);font-weight:400;transition:color .3s} .nav a.menu:hover{color:var(--gold)} .brand{font-family:var(--serif);font-size:30px;letter-spacing:.30em;text-transform:uppercase;color:var(--espresso);text-align:center;padding-left:.30em} .icon-btn{background:none;border:none;color:var(--espresso);display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase} .icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.4} .cart-pill{position:relative} .cart-count{position:absolute;top:-8px;right:-12px;background:var(--gold);color:#fff;font-family:var(--sans);font-size:10px;font-weight:600;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;letter-spacing:0} .elementor-widget-luxinn_minicart{line-height:1} .luxinn-cart-widget.icon-btn{ position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:24px !important; min-width:24px !important; height:24px !important; min-height:24px !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; color:var(--espresso) !important; box-shadow:none !important; line-height:1 !important; appearance:none !important; } .luxinn-cart-widget.icon-btn:hover, .luxinn-cart-widget.icon-btn:focus{ background:transparent !important; color:var(--gold) !important; box-shadow:none !important; } .luxinn-cart-widget.icon-btn svg{ display:block !important; width:20px !important; height:20px !important; stroke:currentColor !important; fill:none !important; stroke-width:1.4 !important; pointer-events:none !important; } .luxinn-cart-widget .cart-count{ pointer-events:none !important; } /* page intro ------------------------------------------------- */ .pagehead{padding:54px 0 10px;text-align:center} .pagehead h1{font-size:46px;letter-spacing:.01em} .crumbs{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);margin-top:16px} .crumbs a:hover{color:var(--gold)} .crumbs span{margin:0 9px;color:var(--line-strong)} /* product placeholder tile (makieta zdjęcia) ----------------- */ .ph{position:relative;aspect-ratio:3/4;background: linear-gradient(160deg,#f3ece1 0%,#e8ddcc 48%,#ddcfb9 100%);overflow:hidden;display:grid;place-items:center} .ph::after{content:"";position:absolute;inset:0;background: radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.5),transparent 60%)} .ph .mono{font-family:var(--serif);font-size:40px;color:rgba(40,24,14,.16);letter-spacing:.05em;position:relative;z-index:1} .ph .ph-brand{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:var(--sans);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(40,24,14,.42);z-index:1} .badge-sale{position:absolute;top:12px;left:12px;z-index:2;background:var(--espresso);color:var(--champagne);font-family:var(--sans);font-size:10px;letter-spacing:.1em;padding:5px 9px} /* footer ----------------------------------------------------- */ footer.site{background:var(--cream);border-top:1px solid var(--line);margin-top:80px;padding:64px 0 30px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} footer h4{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--espresso);margin-bottom:18px} footer ul{list-style:none;margin:0;padding:0} footer li{margin-bottom:11px;font-size:13px;color:var(--mocha)} footer li a:hover{color:var(--gold)} .foot-brand{font-family:var(--serif);font-size:26px;letter-spacing:.28em;text-transform:uppercase;color:var(--espresso);padding-left:.28em;margin-bottom:14px} .foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe)} /* ============================================================ VIEW SWITCHER (tylko do podglądu makiet) ============================================================ */ .switcher{ position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:90; background:var(--espresso);border-radius:0;display:flex;gap:2px;padding:6px;box-shadow:var(--shadow); } .switcher button{ background:transparent;border:none;color:#cdbfa9;font-family:var(--sans);font-size:11px;letter-spacing:.12em; text-transform:uppercase;padding:10px 16px;transition:all .25s; } .switcher button:hover{color:#fff} .switcher button.on{background:var(--gold);color:#fff} .switch-tag{position:fixed;left:50%;transform:translateX(-50%);bottom:74px;z-index:90;font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)} /* views toggle */ .view{display:none} .view.active{display:block;animation:fade .5s ease} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ============================================================ 1 · STRONA SKLEPU (sidebar + siatka) ============================================================ */ .shop-layout{display:grid;grid-template-columns:288px 1fr;gap:48px;padding:0 0 2em;align-items:start} /* --- panel boczny / filtry --- */ .shop-layout > .sidebar{position:static} .search-box{position:relative;margin-bottom:30px} .search-box input{ width:100%;font-family:var(--sans);font-size:13px;font-weight:300;color:var(--espresso); padding:15px 44px 15px 16px;background:#fff;border:1px solid var(--line);outline:none; letter-spacing:.02em;transition:border-color .3s,box-shadow .3s; } .search-box input::placeholder{font-family:var(--sans);font-weight:300;color:var(--taupe);letter-spacing:.06em;opacity:1} .search-box input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,136,74,.12)} .search-box svg{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--mocha);fill:none;stroke-width:1.5;pointer-events:none} .facet{border-top:1px solid var(--line);padding:24px 0} .facet:first-of-type{border-top:none;padding-top:6px} .facet-h{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none} .facet-h h4{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--espresso);font-weight:500} .facet-h .chev{width:14px;height:14px;stroke:var(--mocha);fill:none;stroke-width:1.6;transition:transform .3s} .facet.collapsed .chev{transform:rotate(-90deg)} .facet-body{margin-top:16px;transition:.3s} .facet.collapsed .facet-body{display:none} .opt{display:flex;align-items:center;gap:11px;padding:7px 0;font-family:var(--sans);font-size:13px;font-weight:300;color:var(--ink);cursor:pointer} .opt input{appearance:none;width:16px;height:16px;border:1px solid var(--line-strong);background:#fff;position:relative;flex:none;transition:.2s} .opt input:checked{background:var(--espresso);border-color:var(--espresso)} .opt input:checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)} .opt .n{margin-left:auto;font-size:11px;color:var(--taupe);letter-spacing:.04em} .opt:hover{color:var(--espresso)} .opt--brand{font-family:var(--serif);font-size:15px;color:var(--espresso);letter-spacing:.04em} /* swatches kolor */ .swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px} .sw{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);cursor:pointer;position:relative;overflow:visible;transition:transform .2s,box-shadow .2s,border-color .2s} .sw:hover{transform:scale(1.1)} .sw.on{border-color:var(--espresso)} .sw.on::before{content:"";position:absolute;inset:-4px;border:1px solid var(--espresso);border-radius:50%} .sw-tooltip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(6px);opacity:0;pointer-events:none;white-space:nowrap;background:#28180e;color:#fff;padding:8px 14px;border-radius:20px;font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;z-index:10;transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 18px 32px rgba(0,0,0,.16)} .sw:hover .sw-tooltip{transform:translateX(-50%) translateY(0);opacity:1} .sw-tooltip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#28180e} /* rozmiary */ .sizes{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} .size-chip{min-width:42px;text-align:center;padding:9px 6px;border:1px solid var(--line);background:#fff;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--espresso);cursor:pointer;transition:.2s} .size-chip:hover{border-color:var(--mocha)} .size-chip.on{background:var(--espresso);color:#fff;border-color:var(--espresso)} /* price range */ .range-vals{display:flex;justify-content:space-between;font-family:var(--sans);font-size:12px;color:var(--mocha);margin-bottom:12px;letter-spacing:.04em} .range{width:100%;-webkit-appearance:none;height:1px;background:var(--line-strong);outline:none} .range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 4px rgba(40,24,14,.3)} .sidebar-cta{margin-top:8px} /* --- toolbar + siatka --- */ .shop-toolbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:30px} .shop-toolbar .count{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha)} .toolbar-right{display:flex;align-items:center;gap:18px} .sortsel{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--espresso);border:1px solid var(--line);background:#fff;padding:10px 14px} .active-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px} .chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--espresso);background:var(--cream);border:1px solid var(--line);padding:7px 12px} .chip button{background:none;border:none;color:var(--mocha);font-size:13px;line-height:1;padding:0} .chip-clear{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);align-self:center;border-bottom:1px solid transparent} .chip-clear:hover{border-color:var(--gold)} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px} .card{position:relative;background:transparent} .card-media{position:relative;margin-bottom:16px;overflow:hidden} .card-media .ph{transition:transform .6s ease} .card:hover .card-media .ph{transform:scale(1.04)} .card-fav{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;background:rgba(253,251,248,.85);display:grid;place-items:center;opacity:0;transition:opacity .3s} .card:hover .card-fav{opacity:1} .card-fav svg{width:17px;height:17px;stroke:var(--espresso);fill:none;stroke-width:1.4} .card-quick{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;transform:translateY(14px);opacity:0;transition:transform .35s ease,opacity .35s ease} .card:hover .card-quick{opacity:1;transform:none} /* urządzenia dotykowe — brak hovera: przycisk zawsze widoczny pod zdjęciem */ @media(hover:none),(pointer:coarse){ .card-quick{position:static;opacity:1;transform:none;left:auto;right:auto;margin-top:12px} .card-fav{opacity:1} } .card .brandlbl{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha);margin-bottom:7px} .card h3{font-size:16px;line-height:1.28;margin-bottom:10px;min-height:42px} .card h3 a:hover{color:var(--gold)} .card .pr{display:flex;align-items:baseline;gap:0} .card-foot{margin-top:14px} .pagination{display:flex;justify-content:center;gap:8px;margin-top:54px} .pagination a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);font-family:var(--sans);font-size:13px;color:var(--espresso);transition:.2s} .pagination a:hover{border-color:var(--mocha)} .pagination a.on{background:var(--espresso);color:#fff;border-color:var(--espresso)} .empty-grid{grid-column:1/-1;text-align:center;padding:70px 0;color:var(--mocha);font-size:14px} .empty-grid h3{font-size:24px;margin-bottom:10px} /* ============================================================ 2 · STRONA KOSZYKA ============================================================ */ .cart-layout{display:grid;grid-template-columns:1fr 380px;gap:56px;padding:30px 0 10px;align-items:start} .cart-list{border-top:1px solid var(--line)} .cart-row{display:grid;grid-template-columns:104px 1fr auto;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);align-items:center} .cart-row .ph{aspect-ratio:3/4;width:104px} .cart-row .ph .mono{font-size:24px} .cart-row .ph .ph-brand{display:none} .ci-brand{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha);margin-bottom:6px} .ci-name{font-family:var(--serif);font-size:18px;color:var(--espresso);margin-bottom:8px;line-height:1.25} .ci-meta{font-family:var(--sans);font-size:12px;color:var(--mocha);font-weight:300} .ci-meta b{color:var(--espresso);font-weight:400} .ci-remove{margin-top:12px;font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);background:none;border:none;padding:0;display:inline-flex;align-items:center;gap:6px} .ci-remove:hover{color:var(--gold)} .ci-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:16px} .qty{display:inline-flex;align-items:center;border:1px solid var(--line)} .qty button{width:36px;height:38px;background:#fff;border:none;color:var(--espresso);font-size:16px;line-height:1} .qty button:hover{background:var(--cream)} .qty input{width:42px;height:38px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-family:var(--sans);font-size:14px;color:var(--espresso);outline:none} .ci-line-total{font-family:var(--sans);font-size:16px;letter-spacing:.04em;color:var(--espresso)} .cart-tools{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:18px;flex-wrap:wrap} .coupon{display:flex;gap:0;max-width:360px;flex:1} .coupon input{flex:1;border:1px solid var(--line);border-right:none;padding:13px 15px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--espresso);outline:none;background:#fff} .coupon input::placeholder{color:var(--taupe)} /* podsumowanie (współdzielone) */ .summary{background:var(--cream);border:1px solid var(--line);padding:32px} .summary h3{font-family:var(--serif);font-size:24px;margin-bottom:24px} .sum-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-family:var(--sans);font-size:14px;font-weight:300;color:var(--ink)} .sum-row .lbl{letter-spacing:.02em} .sum-row b{font-weight:400;color:var(--espresso)} .sum-row.muted{color:var(--mocha)} .sum-free{color:var(--ok);font-size:12px;letter-spacing:.04em} .sum-div{border-top:1px solid var(--line);margin:14px 0} .sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0 22px} .sum-total .lbl{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha)} .sum-total .val{font-family:var(--serif);font-size:30px;color:var(--espresso)} .sum-note{font-family:var(--sans);font-size:11px;color:var(--mocha);text-align:center;margin-top:16px;letter-spacing:.03em;line-height:1.6} .trust-row{display:flex;justify-content:center;gap:22px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)} .trust-row span{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mocha)} .trust-row svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.4} /* progress do darmowej dostawy */ .ship-bar{margin:0 0 22px} .ship-bar p{font-family:var(--sans);font-size:12px;color:var(--espresso);margin:0 0 9px;letter-spacing:.02em} .ship-bar p b{color:var(--gold)} .ship-track{height:3px;background:var(--beige);position:relative;overflow:hidden} .ship-fill{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:78%} /* polecane */ .cross-sell{margin-top:64px;border-top:1px solid var(--line);padding-top:48px} .cross-sell .eyebrow{text-align:center} .cross-sell h2{text-align:center;font-size:34px;margin-bottom:36px} .cross-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px} body.woocommerce-cart .cart-layout{display:grid;grid-template-columns:1fr 380px;gap:56px;padding:30px 0 10px;align-items:start !important} body.woocommerce-cart .cart-list{border-top:1px solid var(--line) !important} body.woocommerce-cart .cart-row{display:grid;grid-template-columns:104px 1fr auto;gap:22px;padding:26px 0;border-bottom:1px solid var(--line);align-items:center !important} body.woocommerce-cart .cart-row .ph{aspect-ratio:3/4;width:104px !important} body.woocommerce-cart .ci-brand{font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha);margin-bottom:6px !important} body.woocommerce-cart .ci-name{font-family:var(--serif);font-size:18px;color:var(--espresso);margin-bottom:8px;line-height:1.25 !important} body.woocommerce-cart .ci-meta{font-family:var(--sans);font-size:12px;color:var(--mocha);font-weight:300 !important} body.woocommerce-cart .ci-remove{margin-top:12px;font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);background:none;border:none;padding:0;display:inline-flex;align-items:center;gap:6px !important} body.woocommerce-cart .ci-remove:hover{color:var(--gold) !important} body.woocommerce-cart .ci-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:16px !important} body.woocommerce-cart .qty{display:inline-flex;align-items:center;border:1px solid var(--line) !important} body.woocommerce-cart .qty button{width:36px;height:38px;background:#fff;border:none;color:var(--espresso);font-size:16px;line-height:1 !important} body.woocommerce-cart .qty button:hover{background:var(--cream) !important} body.woocommerce-cart .qty input{width:42px;height:38px;border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-family:var(--sans);font-size:14px;color:var(--espresso);outline:none !important} body.woocommerce-cart .ci-line-total{font-family:var(--sans);font-size:16px;letter-spacing:.04em;color:var(--espresso) !important} body.woocommerce-cart .cart-tools{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:18px;flex-wrap:wrap !important} body.woocommerce-cart .coupon{display:flex;gap:0;max-width:360px;flex:1 !important} body.woocommerce-cart .coupon input{flex:1;border:1px solid var(--line);border-right:none;padding:13px 15px;font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--espresso);outline:none;background:#fff !important} body.woocommerce-cart .coupon input::placeholder{color:var(--taupe) !important} body.woocommerce-cart .coupon button{border:1px solid var(--line);border-left:none;background:var(--coffee);color:var(--ivory);padding:0 20px;cursor:pointer;transition:.2s !important} body.woocommerce-cart .coupon button:hover{background:var(--espresso) !important} body.woocommerce-cart .summary{background:var(--cream);border:1px solid var(--line);padding:32px !important} body.woocommerce-cart .summary h3{font-family:var(--serif);font-size:24px;margin-bottom:24px !important} body.woocommerce-cart .summary .ship-bar{margin:0 0 22px !important} body.woocommerce-cart .summary .ship-bar p{font-family:var(--sans);font-size:12px;color:var(--espresso);margin:0 0 9px;letter-spacing:.02em !important} body.woocommerce-cart .summary .ship-bar p b{color:var(--gold) !important} body.woocommerce-cart .summary .ship-track{height:3px;background:var(--beige);position:relative;overflow:hidden !important} body.woocommerce-cart .summary .ship-fill{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:78% !important} body.woocommerce-cart .summary .sum-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-family:var(--sans);font-size:14px;font-weight:300;color:var(--ink) !important} body.woocommerce-cart .summary .sum-row .lbl{letter-spacing:.02em !important} body.woocommerce-cart .summary .sum-total{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0 22px !important} body.woocommerce-cart .summary .sum-total .lbl{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mocha) !important} body.woocommerce-cart .summary .sum-total .val{font-family:var(--serif);font-size:30px;color:var(--espresso) !important} body.woocommerce-cart .summary .btn{width:100%;margin-top:8px !important} body.woocommerce-cart .summary .sum-note{font-family:var(--sans);font-size:11px;color:var(--mocha);text-align:center;margin-top:16px;letter-spacing:.03em;line-height:1.6 !important} body.woocommerce-cart .cross-sell{margin-top:64px;border-top:1px solid var(--line);padding-top:48px !important} body.woocommerce-cart .cross-sell .eyebrow{text-align:center !important} body.woocommerce-cart .cross-sell h2{text-align:center;font-size:34px;margin-bottom:36px !important} body.woocommerce-cart .cross-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px !important} /* ============================================================ 3 · CHECKOUT ============================================================ */ .checkout-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:60px;padding:24px 0 10px;align-items:start;width:100%} .checkout-layout > div{min-width:0} .checkout-coupon-banner{display:flex;gap:14px;align-items:center;padding:18px 20px;background:#f2f0eb;border:1px solid var(--line);margin-bottom:28px} .checkout-coupon-banner .coupon-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--espresso);font-size:18px;flex:none} .checkout-coupon-banner p{margin:0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--espresso)} .checkout-coupon-banner .checkout-coupon-toggle{border:none;background:none;color:var(--espresso);font-family:var(--sans);font-size:13px;letter-spacing:.04em;padding:0;text-decoration:underline;cursor:pointer} .checkout-coupon-banner .checkout-coupon-toggle:hover{text-decoration:none} .woocommerce .woocommerce-form-coupon-toggle, .woocommerce .woocommerce-form-coupon, .woocommerce .woocommerce-checkout .woocommerce-form-coupon, #woocommerce-checkout-form-coupon, .woocommerce-form-coupon-toggle{display:none !important} .woocommerce .woocommerce-checkout .checkout-coupon-banner{margin-bottom:36px !important} .woocommerce .woocommerce-checkout #customer_details{display:grid;grid-template-columns:1fr;gap:24px} .woocommerce .woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:24px} .woocommerce .woocommerce-checkout .col-1, .woocommerce .woocommerce-checkout .col-2{display:block !important;width:100% !important} .woocommerce .woocommerce-checkout .woocommerce-billing-fields__field-wrapper, .woocommerce .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce .woocommerce-checkout .woocommerce-additional-fields__field-wrapper{display:grid !important;grid-template-columns:1fr 1fr;gap:22px 24px} .woocommerce .woocommerce-checkout .form-row{margin:0 0 18px !important;padding:0 !important;clear:none !important;float:none !important;width:100% !important;box-sizing:border-box !important} .woocommerce .woocommerce-checkout .form-row-first, .woocommerce .woocommerce-checkout .form-row-last{width:100% !important;float:none !important} .woocommerce .woocommerce-checkout .form-row-wide{grid-column:1/-1 !important;width:100% !important;clear:none !important;float:none !important} .woocommerce .woocommerce-checkout .woocommerce-billing-fields > h3, .woocommerce .woocommerce-checkout .woocommerce-shipping-fields > h3, .woocommerce .woocommerce-checkout .woocommerce-additional-fields > h3{display:none !important} .woocommerce .woocommerce-checkout .input-text, .woocommerce .woocommerce-checkout select, .woocommerce .woocommerce-checkout textarea{ width:100% !important; border:1px solid var(--line) !important; background:#fff !important; color:var(--espresso) !important; font-family:var(--sans) !important; font-size:13px !important; padding:16px 14px !important; line-height:1.4 !important; box-shadow:none !important; border-radius:0 !important; } .woocommerce .woocommerce-checkout input[type="text"], .woocommerce .woocommerce-checkout input[type="email"], .woocommerce .woocommerce-checkout input[type="tel"], .woocommerce .woocommerce-checkout input[type="password"], .woocommerce .woocommerce-checkout input[type="number"]{ height:50px !important; } .woocommerce .woocommerce-checkout select{appearance:none !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238a7264' stroke-width='1.6'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:calc(100% - 14px) center !important;background-size:14px !important;padding-right:42px !important} .woocommerce .woocommerce-checkout label{display:block !important;font-family:var(--sans) !important;font-size:11px !important;letter-spacing:.16em !important;text-transform:uppercase !important;color:var(--mocha) !important;margin-bottom:8px !important} .woocommerce .woocommerce-checkout .woocommerce-privacy-policy-text, .woocommerce .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin-top:18px !important} .woocommerce .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .input-checkbox{margin:0 12px 0 0 !important} .woocommerce .woocommerce-checkout .button.alt, .woocommerce .woocommerce-checkout #place_order{ width:100% !important; padding:16px 24px !important; font-family:var(--sans) !important; font-size:13px !important; letter-spacing:.16em !important; text-transform:uppercase !important; } .woocommerce .woocommerce-checkout .woocommerce-checkout-review-order-table th, .woocommerce .woocommerce-checkout .woocommerce-checkout-review-order-table td{ padding:14px 0 !important; border-bottom:1px solid var(--line) !important; } .woocommerce .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child td{border:none !important} .woocommerce .woocommerce-checkout .order-total td{font-size:18px !important;font-weight:700 !important} .woocommerce .woocommerce-checkout .wc_shipping_methods{display:grid;gap:12px;margin-top:16px !important} .woocommerce .woocommerce-checkout .wc_shipping_methods li{border:1px solid var(--line);border-radius:0;background:#fff;padding:18px;transition:.25s} .woocommerce .woocommerce-checkout .wc_shipping_methods li:hover{border-color:var(--line-strong)} .woocommerce .woocommerce-checkout .wc_shipping_methods input[type="radio"]{margin-right:14px;flex:none} .woocommerce .woocommerce-checkout .wc_shipping_methods label{display:flex;align-items:flex-start;gap:14px;font-family:var(--sans);font-size:13px;color:var(--espresso);line-height:1.4} .woocommerce .woocommerce-checkout .wc_shipping_methods .shipping_method{flex:1} .woocommerce .woocommerce-checkout .wc_shipping_methods .shipping_method .method-title{display:block;font-weight:700;margin-bottom:4px} .woocommerce .woocommerce-checkout .wc_shipping_methods .shipping_method .method-label{font-weight:400;color:var(--mocha)} .woocommerce .woocommerce-checkout .wc_payment_methods li{margin-bottom:14px !important;list-style:none} .woocommerce .woocommerce-checkout .wc_payment_methods li label{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--line);background:#fff;padding:18px;cursor:pointer;transition:.25s;border-radius:0;font-family:var(--sans);font-size:13px;color:var(--espresso);margin:0 !important} .woocommerce .woocommerce-checkout .wc_payment_methods li label:hover{border-color:var(--line-strong)} .woocommerce .woocommerce-checkout .wc_payment_methods input[type="radio"]:checked + label{border-color:var(--gold);border-width:2px} .woocommerce .woocommerce-checkout .wc_payment_methods input[type="radio"]{margin:4px 0 0 0 !important;flex:none;cursor:pointer} .woocommerce .woocommerce-checkout .wc_payment_methods .payment-method-title{display:block;font-weight:700;margin-bottom:4px} .woocommerce .woocommerce-checkout .wc_payment_methods .payment-method-desc{display:block;font-size:12px;color:var(--mocha);font-weight:400} .woocommerce .woocommerce-checkout #ship-to-different-address-checkbox{width:auto;margin-right:8px;margin-top:2px} .shipping-fields{margin-top:18px} .woocommerce .woocommerce-checkout .shipping-fields .form-row{margin:0 0 18px;padding:0;clear:none;float:none;width:100%} @media(max-width:1024px){ .checkout-layout{grid-template-columns:1fr !important} .co-summary{position:static;top:auto !important} .woocommerce .woocommerce-checkout .col2-set{grid-template-columns:1fr !important} .woocommerce .woocommerce-checkout .form-row-first, .woocommerce .woocommerce-checkout .form-row-last{width:100% !important;margin-right:0 !important} } .co-section{margin-bottom:42px} .co-section > h3{font-family:var(--serif);font-size:24px;margin-bottom:6px;display:flex;align-items:baseline;gap:14px} .co-step{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--gold);font-weight:500} .co-section > .sub{font-family:var(--sans);font-size:12.5px;color:var(--mocha);margin:0 0 24px;font-weight:300} .form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .form-grid2 .full{grid-column:1/-1} /* metody dostawy / płatności */ .method{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:#fff;padding:17px 18px;margin-bottom:12px;cursor:pointer;transition:.25s} .method:hover{border-color:var(--line-strong)} .method.on{border-color:var(--gold);background:#fff;box-shadow:0 0 0 1px var(--gold) inset} .method .radio{width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong);flex:none;position:relative} .method.on .radio{border-color:var(--gold)} .method.on .radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold)} .method .mt{flex:1} .method .mt-name{font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--espresso);font-weight:400} .method .mt-desc{font-family:var(--sans);font-size:11.5px;color:var(--mocha);font-weight:300;margin-top:3px} .method .mt-price{font-family:var(--sans);font-size:13px;color:var(--espresso);letter-spacing:.04em} .method .mt-ico{width:30px;text-align:center;color:var(--mocha)} .method .mt-ico svg{width:22px;height:22px;stroke:var(--espresso);fill:none;stroke-width:1.3} /* mini lista produktów w podsumowaniu */ .co-summary{position:sticky;top:96px} .co-summary .summary{background:#f5efe5;border:1px solid var(--line);padding:28px 26px;display:flex;flex-direction:column;gap:18px} /* Usuń domyślny border/background z #order_review i jego zawartości */ body.woocommerce-checkout #order_review, body.woocommerce-checkout .woocommerce-checkout-review-order, body.woocommerce-checkout .co-summary #order_review, body.woocommerce-checkout .co-summary .woocommerce-checkout-review-order, body.woocommerce-checkout .co-summary .woocommerce-checkout-review-order-table, body.woocommerce-checkout .co-summary .luxinn-review-order-fragment, body.woocommerce-checkout .co-summary .luxinn-review-order-content { background:transparent !important; border:none !important; padding:0 !important; box-shadow:none !important; margin:0 !important; outline:0 !important; min-width:0 !important; } .co-summary .summary h3{font-family:var(--serif);font-size:24px;margin:0 0 12px} .co-summary .summary .woocommerce-checkout-review-order-table{background:transparent;border:none} .co-summary .summary .woocommerce-checkout-review-order-table th, .co-summary .summary .woocommerce-checkout-review-order-table td{padding:12px 0 !important;border-color:var(--line) !important} .co-summary .summary .woocommerce-checkout-review-order-table tfoot tr:last-child td{border:none !important} .co-summary .summary .wc_payment_methods{margin-top:26px !important} .co-summary .summary .woocommerce-checkout-payment{margin-top:24px !important} .co-summary .summary .woocommerce-terms-and-conditions-wrapper{margin-top:20px !important} .co-summary .summary .button.alt, .co-summary .summary #place_order{width:100% !important} .co-summary .summary .woocommerce-message, .co-summary .summary .woocommerce-error, .co-summary .summary .woocommerce-info{margin:0 0 18px} .co-summary .summary .form-row{margin:0 0 12px} .co-summary .summary .order-total td{font-size:18px !important;font-weight:700 !important} .co-summary .summary .wc_payment_methods li{margin-bottom:16px !important} .co-summary .summary .payment_method label{font-family:var(--sans) !important;font-size:13px !important;color:var(--espresso) !important} .woocommerce .woocommerce-checkout .woocommerce-form-coupon{display:none !important} .co-items{margin:0 0 8px} .co-item{display:grid;grid-template-columns:58px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center} .co-item .ph{width:58px;aspect-ratio:3/4} .co-item .ph .mono{font-size:16px}.co-item .ph .ph-brand{display:none} .co-item .qbadge{position:absolute;top:-8px;right:-8px;background:var(--espresso);color:#fff;width:20px;height:20px;border-radius:50%;font-family:var(--sans);font-size:10px;display:grid;place-items:center;z-index:3} .co-item .ci-wrap{position:relative} .co-iname{font-family:var(--serif);font-size:14px;color:var(--espresso);line-height:1.25} .co-imeta{font-family:var(--sans);font-size:11px;color:var(--mocha);margin-top:3px} .co-iprice{font-family:var(--sans);font-size:13px;color:var(--espresso);letter-spacing:.03em;white-space:nowrap} .co-coupon{display:flex;margin:18px 0} .co-coupon input{flex:1;border:1px solid var(--line);border-right:none;padding:12px 14px;font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;outline:none} .terms{display:flex;gap:11px;align-items:flex-start;margin:6px 0 22px;font-family:var(--sans);font-size:11.5px;color:var(--mocha);font-weight:300;line-height:1.6} .terms input{appearance:none;width:16px;height:16px;border:1px solid var(--line-strong);background:#fff;position:relative;flex:none;margin-top:2px} .terms input:checked{background:var(--espresso);border-color:var(--espresso)} .terms input:checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)} .terms a{color:var(--gold);border-bottom:1px solid var(--line-strong)} /* ============================================================ KOSZYK BOCZNY (drawer) ============================================================ */ .overlay{position:fixed;inset:0;background:rgba(40,24,14,.38);opacity:0;visibility:hidden;transition:.4s;z-index:60} .overlay.open{opacity:1;visibility:visible} .drawer{position:fixed;top:0;right:0;bottom:0;width:418px;max-width:92vw;background:var(--ivory);z-index:70; transform:translateX(100%);transition:transform .45s cubic-bezier(.4,0,.1,1);display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(40,24,14,.4)} .drawer.open{transform:none} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--line)} .drawer-head h3{font-family:var(--serif);font-size:22px} .drawer-head .cc{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mocha);margin-left:10px} .drawer-close{background:none;border:none;width:34px;height:34px;display:grid;place-items:center} .drawer-close svg{width:20px;height:20px;stroke:var(--espresso);stroke-width:1.4;fill:none} .drawer .ship-bar{padding:18px 26px 0;margin:0} .drawer-body{flex:1;overflow-y:auto;padding:8px 26px} .d-row{display:grid;grid-template-columns:72px 1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start} .d-row .ph{width:72px;aspect-ratio:3/4}.d-row .ph .mono{font-size:18px}.d-row .ph .ph-brand{display:none} .d-name{font-family:var(--serif);font-size:15px;color:var(--espresso);line-height:1.25} .d-meta{font-family:var(--sans);font-size:11px;color:var(--mocha);margin:5px 0 10px} .d-price{font-family:var(--sans);font-size:13px;color:var(--espresso);letter-spacing:.03em;white-space:nowrap} .qty--sm button{width:30px;height:32px}.qty--sm input{width:34px;height:32px;font-size:13px} .d-x{background:none;border:none;color:var(--taupe);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:0;margin-top:8px} .d-x:hover{color:var(--gold)} .drawer-foot{border-top:1px solid var(--line);padding:22px 26px;background:var(--cream)} .drawer-foot .sum-total{padding:0 0 18px} .drawer-foot .sum-total .val{font-size:26px} .drawer-foot .row2{display:flex;gap:12px;margin-top:6px} .drawer-foot .row2 .btn{flex:1} /* ============================================================ CHECKOUT — WC-native #payment output (sekcja 04) Dotyczy wyjścia woocommerce_checkout_payment() — bramki płatności, pole regulaminu i przycisk złóż zamówienie. ============================================================ */ /* kontener #payment — bez własnego tła */ .co-section--payment #payment{background:transparent;padding:0;border:none} /* lista metod płatności */ .co-section--payment #payment .wc_payment_methods{list-style:none;margin:0;padding:0} .co-section--payment #payment .wc_payment_methods > li{ margin-bottom:12px;border:1px solid var(--line);background:#fff;transition:border-color .25s; } .co-section--payment #payment .wc_payment_methods > li:hover{border-color:var(--line-strong)} .co-section--payment #payment .wc_payment_methods > li.payment_method--selected, .co-section--payment #payment .wc_payment_methods > li:has(input[type="radio"]:checked){ border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset; } /* label = wiersz metody */ .co-section--payment #payment .wc_payment_methods > li > label{ display:flex;align-items:center;gap:14px; padding:17px 18px;cursor:pointer;margin:0; font-family:var(--sans);font-size:13px;letter-spacing:.04em;color:var(--espresso);font-weight:400; } .co-section--payment #payment .wc_payment_methods > li > label img{ max-height:24px;width:auto;display:inline;margin:0; } /* radio custom */ .co-section--payment #payment .wc_payment_methods input[type="radio"]{ appearance:none;-webkit-appearance:none; width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong); background:#fff;flex:none;position:relative;transition:border-color .2s;cursor:pointer; } .co-section--payment #payment .wc_payment_methods input[type="radio"]:checked{border-color:var(--gold)} .co-section--payment #payment .wc_payment_methods input[type="radio"]:checked::after{ content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold); } /* gateway-specific fields (payment_box) */ .co-section--payment #payment .payment_box{ padding:0 18px 18px;font-family:var(--sans);font-size:13px;color:var(--mocha);line-height:1.6; } .co-section--payment #payment .payment_box p{margin:0 0 10px} .co-section--payment #payment .payment_box .input-text{ width:100%;border:1px solid var(--line);background:#fff;color:var(--espresso); font-family:var(--sans);font-size:13px;padding:13px 15px;border-radius:0;outline:none; transition:border-color .3s,box-shadow .3s; } .co-section--payment #payment .payment_box .input-text:focus{ border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,136,74,.12); } /* Regulamin wewnątrz #payment */ .co-section--payment #payment .woocommerce-terms-and-conditions-wrapper, .co-section--payment #payment .woocommerce-privacy-policy-text{ margin-top:22px;font-family:var(--sans);font-size:11.5px;color:var(--mocha);line-height:1.6; } /* Przycisk "Złóż zamówienie" / "Kupuję i płacę" */ .co-section--payment #payment .place-order{margin-top:18px;padding:0} .co-section--payment #payment #place_order, .co-section--payment #payment .button.alt{ width:100% !important; background:var(--gold) !important;color:#fff !important; font-family:var(--sans) !important;font-size:13px !important; font-weight:400 !important;letter-spacing:.16em !important;text-transform:uppercase !important; padding:16px 24px !important;border:none !important;border-radius:0 !important;cursor:pointer !important; transition:background .3s ease !important; } .co-section--payment #payment #place_order:hover, .co-section--payment #payment .button.alt:hover{background:#977636 !important} /* ============================================================ CHECKOUT — metody dostawy (#shipping_method) ============================================================ */ #shipping_method.woocommerce-shipping-methods{list-style:none;margin:0;padding:0;display:grid;gap:12px;margin-top:14px} #shipping_method .luxinn-ship-method{ border:1px solid var(--line);background:#fff;padding:17px 18px; display:flex;align-items:center;gap:14px;transition:border-color .25s; } #shipping_method .luxinn-ship-method:hover{border-color:var(--line-strong)} #shipping_method .luxinn-ship-method.chosen{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset} #shipping_method .luxinn-ship-method input[type="radio"]{ appearance:none;-webkit-appearance:none; width:18px;height:18px;border-radius:50%;border:1px solid var(--line-strong); background:#fff;flex:none;position:relative;transition:border-color .2s;cursor:pointer; } #shipping_method .luxinn-ship-method input[type="radio"]:checked{border-color:var(--gold)} #shipping_method .luxinn-ship-method input[type="radio"]:checked::after{ content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold); } #shipping_method .luxinn-ship-method label{ font-family:var(--sans);font-size:13px;color:var(--espresso);cursor:pointer; flex:1;display:flex;justify-content:space-between;margin:0;letter-spacing:.03em; } .luxinn-no-shipping{ font-family:var(--sans);font-size:13px;color:var(--mocha);padding:16px; border:1px solid var(--line);background:var(--cream);margin-top:14px; } /* "Wysłij na inny adres" checkbox */ .luxinn-ship-alt-label{ display:flex;align-items:center;gap:10px;cursor:pointer; font-family:var(--sans);font-size:13px;color:var(--espresso); margin:22px 0 10px;padding:14px 18px;border:1px solid var(--line);background:#fff; } .luxinn-ship-alt-label input[type="checkbox"]{ appearance:none;-webkit-appearance:none; width:17px;height:17px;border:1px solid var(--line-strong);background:#fff; flex:none;position:relative;transition:.2s;cursor:pointer; } .luxinn-ship-alt-label input[type="checkbox"]:checked{background:var(--espresso);border-color:var(--espresso)} .luxinn-ship-alt-label input[type="checkbox"]:checked::after{ content:"";position:absolute;left:5px;top:2px;width:4px;height:8px; border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg); } /* Mini-cart thumbnail (ph-mini) */ .ph-mini{width:72px;flex:none;aspect-ratio:3/4;overflow:hidden} .ph-mini img{width:100%;height:100%;object-fit:cover;display:block} /* Baner kupon na checkout */ .checkout-coupon-banner{ display:flex;gap:14px;align-items:center; padding:16px 20px;background:var(--cream);border:1px solid var(--line);margin-bottom:28px; } .checkout-coupon-banner .coupon-icon{font-size:18px;line-height:1;flex:none} .checkout-coupon-banner p{margin:0;font-family:var(--sans);font-size:13px;color:var(--espresso);line-height:1.5} .checkout-coupon-banner .checkout-coupon-toggle{ border:none;background:none;padding:0;font-family:var(--sans);font-size:13px; color:var(--gold);text-decoration:underline;cursor:pointer;display:inline; } .checkout-coupon-banner .checkout-coupon-toggle:hover{text-decoration:none} .checkout-coupon-form .woocommerce-form-coupon{ display:flex;gap:0; } .checkout-coupon-form .woocommerce-form-coupon .input-text{ flex:1;border:1px solid var(--line);border-right:none; padding:13px 15px;font-family:var(--sans);font-size:13px;color:var(--espresso); outline:none;background:#fff; } .checkout-coupon-form .woocommerce-form-coupon .button{ border:1px solid var(--line);border-left:none;background:var(--coffee);color:var(--ivory); padding:0 22px;font-family:var(--sans);font-size:11px;letter-spacing:.14em; text-transform:uppercase;cursor:pointer;transition:.2s; } .checkout-coupon-form .woocommerce-form-coupon .button:hover{background:var(--espresso)} /* Tabela zamówienia w prawej kolumnie */ .woocommerce-checkout-review-order-table{width:100%;border-collapse:collapse;font-family:var(--sans)} .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td{ padding:12px 0;border-bottom:1px solid var(--line);font-size:13px; vertical-align:middle; } .woocommerce-checkout-review-order-table th{ font-weight:400;letter-spacing:.04em;color:var(--mocha);text-align:left; } .woocommerce-checkout-review-order-table td{text-align:right;color:var(--espresso)} .woocommerce-checkout-review-order-table tfoot tr:last-child td{ border-bottom:none;font-family:var(--serif);font-size:20px; } .woocommerce-checkout-review-order-table .product-quantity{font-weight:300;color:var(--mocha)} /* ============================================================ BLOCKSY OVERRIDE — CHECKOUT PAGE get_header() używa require_once → nasz template renderuje się WEWNĄTRZ Blocksy's .entry-content (wąski kontener). Rozszerzamy hierarchię kontenerów Blocksy zamiast uciekać z nich. ============================================================ */ /* 1. Wyłącz sidebar na stronie checkout — Blocksy może mieć grid z sidebar */ body.woocommerce-checkout .ct-sidebar { display:none !important } body.woocommerce-checkout .ct-sidebar-container { display:block !important; grid-template-columns:1fr !important; max-width:none !important; } /* 2. Rozszerz kontenery Blocksy'ego w main content area (nie headera) */ body.woocommerce-checkout #main .ct-container, body.woocommerce-checkout .site-main .ct-container, body.woocommerce-checkout main > .ct-container, body.woocommerce-checkout main .ct-container { max-width:none !important; padding-left:0 !important; padding-right:0 !important; width:100% !important; } /* Blocksy Pro / różne wersje — pełna lista klas content area */ body.woocommerce-checkout .ct-main-content, body.woocommerce-checkout .ct-blog-grid, body.woocommerce-checkout .ct-blog-content, body.woocommerce-checkout article.type-page, body.woocommerce-checkout .entry-content, body.woocommerce-checkout .page-content, body.woocommerce-checkout .woocommerce, body.woocommerce-checkout .woocommerce-page { max-width:none !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; float:none !important; box-sizing:border-box !important; } /* Blocksy CSS variables override (Blocksy Pro / customizer values) */ body.woocommerce-checkout { --theme-page-width:1320px; --ct-content-width:100%; } /* *** KLUCZOWY FIX *** Blocksy dodaje .ct-woocommerce-checkout (grid: repeat(2,1fr)) do elementu który zawiera nasze .checkout-layout (też grid). Tworzy to "grid w gridzie" i ściska lewą kolumnę. Wymuszamy display:block na tym kontenerze. */ body.woocommerce-checkout .ct-woocommerce-checkout { display:block !important; grid-template-columns:unset !important; width:100% !important; } /* 3. Nasz .wrap — teraz po rozszerzeniu kontenerów, sam ustawia max-width i padding */ body.woocommerce-checkout .wrap { max-width:var(--maxw) !important; width:100% !important; padding:0 32px !important; margin:0 auto !important; box-sizing:border-box !important; position:static !important; } /* 4. Grid checkout — wymuszony */ body.woocommerce-checkout .checkout-layout { display:grid !important; grid-template-columns:minmax(0,1fr) 420px !important; gap:60px !important; align-items:start !important; width:100% !important; max-width:none !important; } body.woocommerce-checkout .checkout-layout > div { min-width:0 !important } body.woocommerce-checkout .co-summary { position:sticky !important; top:96px !important } /* 4. WC form-row — override Blocksy margin/padding/float */ body.woocommerce-checkout .woocommerce-checkout .form-row { margin:0 0 18px !important; padding:0 !important; clear:none !important; float:none !important; width:100% !important; } body.woocommerce-checkout .woocommerce-checkout .form-row-first, body.woocommerce-checkout .woocommerce-checkout .form-row-last { width:100% !important; float:none !important; } body.woocommerce-checkout .woocommerce-checkout .form-row-wide { width:100% !important; clear:none !important; } /* Dwu-kolumnowe pola adresu — tą samą siatką co .form-grid2 */ body.woocommerce-checkout .co-section:nth-child(3) .form-row-first, body.woocommerce-checkout .co-section:nth-child(3) .form-row-last { display:inline-block !important; width:calc(50% - 9px) !important; } body.woocommerce-checkout .co-section:nth-child(3) .form-row-first { margin-right:18px !important; } /* 5. Labels — override Blocksy (może resetować do system font / małego rozmiaru) */ body.woocommerce-checkout .woocommerce-checkout label, body.woocommerce-checkout .co-section label, body.woocommerce-checkout .form-row label { display:block !important; font-family:var(--sans) !important; font-size:10.5px !important; font-weight:400 !important; letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--mocha) !important; margin-bottom:8px !important; line-height:1.4 !important; } /* gwiazdka required */ body.woocommerce-checkout .woocommerce-checkout label .required, body.woocommerce-checkout .form-row label .required { color:var(--gold) !important; margin-left:2px !important; } /* 6. Inputs, selects, textareas — override Blocksy */ body.woocommerce-checkout .woocommerce-checkout .input-text, body.woocommerce-checkout .woocommerce-checkout input[type="text"], body.woocommerce-checkout .woocommerce-checkout input[type="email"], body.woocommerce-checkout .woocommerce-checkout input[type="tel"], body.woocommerce-checkout .woocommerce-checkout input[type="password"], body.woocommerce-checkout .woocommerce-checkout input[type="number"], body.woocommerce-checkout .woocommerce-checkout select, body.woocommerce-checkout .woocommerce-checkout textarea { width:100% !important; font-family:var(--sans) !important; font-size:14px !important; font-weight:300 !important; color:var(--espresso) !important; background:#fff !important; border:1px solid var(--line) !important; border-radius:0 !important; padding:13px 15px !important; outline:none !important; box-shadow:none !important; height:auto !important; line-height:1.4 !important; -webkit-appearance:none !important; appearance:none !important; transition:border-color .3s,box-shadow .3s !important; } body.woocommerce-checkout .woocommerce-checkout .input-text:focus, body.woocommerce-checkout .woocommerce-checkout input[type="text"]:focus, body.woocommerce-checkout .woocommerce-checkout input[type="email"]:focus, body.woocommerce-checkout .woocommerce-checkout input[type="tel"]:focus, body.woocommerce-checkout .woocommerce-checkout select:focus, body.woocommerce-checkout .woocommerce-checkout textarea:focus { border-color:var(--gold) !important; box-shadow:0 0 0 3px rgba(168,136,74,.12) !important; } /* select dropdown arrow */ body.woocommerce-checkout .woocommerce-checkout select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238a7264' stroke-width='1.6'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:calc(100% - 14px) center !important; background-size:14px !important; padding-right:42px !important; } /* 7. WooCommerce validation errors / required highlight */ body.woocommerce-checkout .woocommerce-checkout .woocommerce-invalid .input-text, body.woocommerce-checkout .woocommerce-checkout .woocommerce-invalid input { border-color:#c0392b !important; } body.woocommerce-checkout .woocommerce-checkout .woocommerce-invalid-required-field .input-text, body.woocommerce-checkout .woocommerce-checkout .woocommerce-invalid-required-field input { border-color:#c0392b !important; } /* 8. Co-section headings — reset Blocksy h3 styles */ body.woocommerce-checkout .co-section > h3 { font-family:var(--serif) !important; font-size:24px !important; font-weight:400 !important; color:var(--espresso) !important; margin:0 0 6px !important; line-height:1.12 !important; display:flex !important; align-items:baseline !important; gap:14px !important; border:none !important; padding:0 !important; } body.woocommerce-checkout .co-section > .sub { font-family:var(--sans) !important; font-size:12.5px !important; color:var(--mocha) !important; margin:0 0 24px !important; font-weight:300 !important; } /* 9. Metody dostawy — reset Blocksy list styles */ body.woocommerce-checkout #shipping_method { list-style:none !important; margin:14px 0 0 !important; padding:0 !important; } body.woocommerce-checkout #shipping_method .luxinn-ship-method { display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:0 14px !important; border:1px solid var(--line) !important; background:#fff !important; padding:17px 18px !important; margin-bottom:12px !important; cursor:pointer !important; transition:border-color .25s !important; } body.woocommerce-checkout #shipping_method .luxinn-ship-method.chosen { border-color:var(--gold) !important; box-shadow:0 0 0 1px var(--gold) inset !important; } body.woocommerce-checkout #shipping_method .luxinn-ship-method input[type="radio"] { appearance:none !important; -webkit-appearance:none !important; width:18px !important; height:18px !important; border-radius:50% !important; border:1px solid var(--line-strong) !important; background:#fff !important; flex:none !important; position:relative !important; cursor:pointer !important; margin:0 !important; } body.woocommerce-checkout #shipping_method .luxinn-ship-method input[type="radio"]:checked { border-color:var(--gold) !important; } body.woocommerce-checkout #shipping_method .luxinn-ship-method input[type="radio"]:checked::after { content:"" !important; position:absolute !important; inset:4px !important; border-radius:50% !important; background:var(--gold) !important; } body.woocommerce-checkout #shipping_method .luxinn-ship-method label { font-family:var(--sans) !important; font-size:13px !important; color:var(--espresso) !important; cursor:pointer !important; flex:1 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 !important; text-transform:none !important; letter-spacing:.03em !important; } body.woocommerce-checkout #shipping_method .luxinn-ship-method .ship-label { flex:1 !important; } body.woocommerce-checkout #shipping_method .luxinn-ship-method .ship-price { font-weight:500 !important; color:var(--espresso) !important; white-space:nowrap !important; font-size:13px !important; } /* Wtyczka (InPost, DPD) dodaje elementy po label przez woocommerce_after_shipping_rate. Dajemy im pełną szerokość (zawijają na nową linię) + wcięcie wyrównane z tekstem label. */ body.woocommerce-checkout #shipping_method .luxinn-ship-method > a, body.woocommerce-checkout #shipping_method .luxinn-ship-method > p, body.woocommerce-checkout #shipping_method .luxinn-ship-method > div:not(label) { flex:0 0 100% !important; margin-top:10px !important; padding-left:calc(18px + 14px) !important; } /* Link "Wybierz punkt odbioru" (InPost, itp.) */ body.woocommerce-checkout #shipping_method .luxinn-ship-method a { display:inline-block !important; font-family:var(--sans) !important; font-size:11.5px !important; font-weight:400 !important; color:var(--gold) !important; letter-spacing:.06em !important; text-decoration:none !important; border-bottom:1px solid var(--gold) !important; padding-bottom:1px !important; } body.woocommerce-checkout #shipping_method .luxinn-ship-method a:hover { color:var(--espresso) !important; border-bottom-color:var(--espresso) !important; } /* Tekst wybranego punktu (np. "WAW123P") obok/pod linkiem */ body.woocommerce-checkout #shipping_method .luxinn-ship-method .inpost_locker_number, body.woocommerce-checkout #shipping_method .luxinn-ship-method [class*="locker_number"], body.woocommerce-checkout #shipping_method .luxinn-ship-method [class*="selected_point"] { font-family:var(--sans) !important; font-size:11.5px !important; color:var(--mocha) !important; margin-left:8px !important; } /* 10. Metody płatności — layout: radio pozycjonowany absolutnie, label z paddingiem */ body.woocommerce-checkout #payment { background:transparent !important; border:none !important; padding:0 !important; } body.woocommerce-checkout #payment .wc_payment_methods { list-style:none !important; margin:0 !important; padding:0 !important; } body.woocommerce-checkout #payment .wc_payment_methods > li.wc_payment_method { margin-bottom:8px !important; border:1px solid var(--line) !important; background:#fff !important; border-radius:0 !important; padding:0 !important; float:none !important; position:relative !important; /* dla absolutnie pozycjonowanego radio */ display:block !important; transition:border-color .2s !important; } /* Zaznaczona metoda — złota ramka */ body.woocommerce-checkout #payment .wc_payment_methods > li.wc_payment_method.is-selected { border-color:var(--gold) !important; box-shadow:0 0 0 1px var(--gold) inset !important; } /* Radio — absolutnie wewnątrz li */ body.woocommerce-checkout #payment .wc_payment_method > input.input-radio[type="radio"] { -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; position:absolute !important; left:16px !important; top:17px !important; width:18px !important; height:18px !important; min-width:18px !important; border-radius:50% !important; border:1.5px solid var(--mocha) !important; background:#fff !important; cursor:pointer !important; margin:0 !important; padding:0 !important; z-index:2 !important; box-shadow:none !important; } /* Usuń pseudo-elementy które Blocksy może dodawać */ body.woocommerce-checkout #payment .wc_payment_method > input.input-radio[type="radio"]::before { display:none !important; content:none !important; } body.woocommerce-checkout #payment .wc_payment_method > input.input-radio[type="radio"]:checked { border-color:var(--gold) !important; } body.woocommerce-checkout #payment .wc_payment_method > input.input-radio[type="radio"]:checked::after { content:"" !important; display:block !important; position:absolute !important; inset:4px !important; border-radius:50% !important; background:var(--gold) !important; } /* Label — padding-left robi miejsce na radio */ body.woocommerce-checkout #payment .wc_payment_method > label { display:flex !important; align-items:center !important; justify-content:space-between !important; padding:15px 18px 15px 48px !important; cursor:pointer !important; margin:0 !important; font-family:var(--sans) !important; font-size:13px !important; font-weight:400 !important; letter-spacing:.02em !important; color:var(--espresso) !important; text-transform:none !important; background:transparent !important; width:100% !important; box-sizing:border-box !important; line-height:1.4 !important; } body.woocommerce-checkout #payment .wc_payment_method > label img { max-height:24px !important; width:auto !important; display:block !important; flex:none !important; margin-left:12px !important; } /* Gateway field — poniżej labela, pełna szerokość */ body.woocommerce-checkout #payment .payment_box { padding:0 18px 14px 48px !important; background:transparent !important; font-family:var(--sans) !important; font-size:12px !important; color:var(--mocha) !important; margin:0 !important; border-top:1px solid var(--line) !important; line-height:1.6 !important; } body.woocommerce-checkout #payment .payment_box p { margin:10px 0 0 !important } /* .place-order — przenoszony przez JS do #co-summary-actions */ body.woocommerce-checkout #payment .place-order { display:none !important } /* Po przeniesieniu przez JS: .co-summary-actions .place-order */ body.woocommerce-checkout .co-summary-actions .place-order { display:block !important; padding:0 !important; margin:0 !important; } /* Regulamin — wrapper: block (nie flex, żeby policy i checkbox były pod sobą) */ body.woocommerce-checkout .co-summary-actions .woocommerce-terms-and-conditions-wrapper { margin:16px 0 0 !important; display:block !important; font-family:var(--sans) !important; font-size:11.5px !important; color:var(--mocha) !important; line-height:1.6 !important; } /* Policy text — wyśrodkowany, pod totals, nad checkboxem */ body.woocommerce-checkout .co-summary-actions .woocommerce-privacy-policy-text { font-size:10.5px !important; color:var(--mocha) !important; text-align:center !important; line-height:1.6 !important; margin:0 0 14px !important; padding:0 !important; } body.woocommerce-checkout .co-summary-actions .woocommerce-privacy-policy-text p { margin:0 !important; font-size:10.5px !important; } /* Wiersz checkboxa + tekst regulaminu */ body.woocommerce-checkout .co-summary-actions .woocommerce-terms-and-conditions-wrapper > p.form-row, body.woocommerce-checkout .co-summary-actions .woocommerce-form-row--wide.validate-required { display:flex !important; align-items:flex-start !important; gap:10px !important; margin:0 0 16px !important; padding:0 !important; } body.woocommerce-checkout .co-summary-actions .woocommerce-terms-and-conditions-wrapper label { display:flex !important; align-items:flex-start !important; gap:10px !important; cursor:pointer !important; font-size:11.5px !important; color:var(--mocha) !important; line-height:1.5 !important; text-transform:none !important; letter-spacing:0 !important; font-weight:300 !important; margin:0 !important; } body.woocommerce-checkout .co-summary-actions .woocommerce-terms-and-conditions-wrapper .input-checkbox { width:15px !important; height:15px !important; min-width:15px !important; margin:2px 0 0 !important; -webkit-appearance:auto !important; appearance:auto !important; flex:none !important; padding:0 !important; cursor:pointer !important; } /* Przycisk "Kupuję i płacę" */ body.woocommerce-checkout .co-summary-actions #place_order, body.woocommerce-checkout .co-summary-actions .button.alt, body.woocommerce-checkout .co-summary-actions button[name="woocommerce_checkout_place_order"] { display:block !important; width:100% !important; background:var(--gold) !important; color:#fff !important; font-family:var(--sans) !important; font-size:12.5px !important; font-weight:400 !important; letter-spacing:.2em !important; text-transform:uppercase !important; padding:17px 24px !important; border:none !important; border-radius:0 !important; cursor:pointer !important; transition:background .3s !important; line-height:1 !important; height:auto !important; text-align:center !important; } body.woocommerce-checkout .co-summary-actions #place_order:hover { background:#977636 !important } /* 10b. select2 — pole kraj (WC zastępuje