.guest-section{margin-top:14px}
/* Order button base and tier colors */
.btn-order{position:relative;overflow:hidden;border:0;padding:10px 14px;border-radius:10px;color:white;font-weight:700;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,0.12);transition:transform .18s ease, box-shadow .18s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-order:focus{outline-offset:2px}
.btn-order:active{transform:translateY(1px)}

/* Shine pseudo-element (sweep animation) */
.btn-order::before{content:'';position:absolute;left:-120%;top:-10%;width:40%;height:120%;background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);transform:skewX(-18deg);opacity:0;pointer-events:none}
.btn-order:hover::before, .btn-order:focus::before{animation:btn-shine 1s ease-in-out;opacity:0.9}
@keyframes btn-shine{from{left:-120%}to{left:200%}}

/* Per-tier button colors */
.btn-order-standard{background:linear-gradient(90deg,#14b78b,#10a37f)}
.btn-order-premium{background:linear-gradient(90deg,#1e90ff,#1366d6)}
.btn-order-exclusive{background:linear-gradient(90deg,#f6c64b,#d4a017);color:#0a0a0a}

/* subtle hover scale */
.btn-order:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,0.18)}

/* Default light theme variables moved from the light-theme override into :root to enforce light-only UI */
:root{
  --bg: #f6f7fb;
  --card: #ffffff;
  --accent: #ff5f6d;
  --accent-2: #ffb86b;
  --accent-2-strong: #d07918; /* darker gold for text contrast */
  --accent-dark: #e04b57;
  --muted-2: #94a3b8;
  --radius: 12px;
  --header-height: 64px;
  --shadow-sm: 0 6px 18px rgba(2,6,23,0.12);
  --shadow-md: 0 18px 60px rgba(2,6,23,0.18);
  --shadow-lg: 0 36px 90px rgba(2,6,23,0.22);
  --muted: #6b7280;
  --white: #0b1220;
  --glass: rgba(11,17,32,0.04);
  --bg-start: #f6f7fb; /* light gradient start */
  --bg-end: #eef3f8;   /* light gradient end */
}
/* globally enable smooth scrolling for in-page navigation */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* style for file input when hidden but still accessible to screen readers */
.file-hidden { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:linear-gradient(180deg,var(--bg-start) 0%, var(--bg-end) 100%);color:var(--white);min-height:100vh}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03);position:sticky;top:0;z-index:110}
.homepage .site-header{position:fixed;left:0;right:0;top:0;z-index:110}
/* Smooth hide/show when hero is out of view */
.site-header{transition:transform .28s cubic-bezier(.2,.9,.2,1), opacity .24s ease}
.homepage .site-header.site-header--hidden{transform:translateY(-120%);opacity:0;pointer-events:none}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;position:relative}
.brand{font-weight:800;color:var(--white);text-decoration:none;font-size:22px;letter-spacing:0.4px;display:inline-flex;align-items:center;gap:10px}
.brand-logo{width:32px;height:32px;border-radius:6px;object-fit:contain}
.brand-logo{transition:filter .18s ease, transform .18s ease}
.topnav a{color:var(--muted);text-decoration:none;margin-left:16px;font-weight:600}
.topnav .cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:10px 14px;border-radius:8px;color:white;font-weight:700;margin-left:18px}

/* mobile navigation toggle styles */
.nav-toggle{display:inline-flex;background:transparent;border:none;color:var(--white);font-size:20px;padding:6px;margin-left:10px}
.topnav{display:flex;align-items:center;gap:12px}

@media (max-width:700px){
  /* slightly reduce price sizes on small screens to prevent overflow */
  .product-right .price-current{font-size:18px}
  .product-right .price-original{font-size:14px}
  .product-right .price-badge{font-size:12px;padding:4px 6px}
}

/* Collapse nav to hamburger only on phone widths (<=480px) */
/* Make desktop behave same as mobile: show nav via toggle */
.topnav{position:relative}
.topnav a{display:none;margin-left:0}
.topnav .cta{display:none}
.nav-toggle{display:inline-flex;position:absolute;right:12px;top:12px;z-index:140}
.topnav.open a{display:block;padding:8px 10px;border-radius:8px;background:transparent;margin:6px 0;color:var(--white)}
.topnav.open{display:block;position:absolute;right:12px;top:100%;background:var(--card);padding:10px;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,0.35);min-width:260px;z-index:130}

/* Nav toggle (hamburger) animation to X */
.nav-toggle{width:42px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
/* Ensure the toggle button uses white for the icon and is aligned */
.site-header .nav-toggle{color:var(--white);background:transparent;border:0;margin-left:8px}
.site-header .nav-toggle:focus{outline: 3px solid rgba(99,91,255,0.12);outline-offset:2px}
.nav-toggle svg rect{transition: transform 220ms ease, opacity 180ms ease; transform-origin:50% 50%;}
.nav-toggle.open svg rect:nth-child(1){transform: translateY(5px) rotate(45deg);}
.nav-toggle.open svg rect:nth-child(2){opacity:0;transform:scaleX(0.1);}
.nav-toggle.open svg rect:nth-child(3){transform: translateY(-5px) rotate(-45deg);} 

/* Footer: ensure links wrap on smaller screens to avoid overlap */
.footer-follow{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.footer-follow .footer-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.footer-follow .footer-links .btn-muted{margin-bottom:6px}
/* Guest page footer CTA */
.guest-footer-cta{display:flex;justify-content:center;gap:12px;margin-bottom:12px}
.guest-footer-cta .btn{padding:10px 14px;border-radius:10px}
/* share-style button used for guest CTA */
.btn-share{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:10px 14px;border-radius:10px;font-weight:700}
.btn-share-ghost{background:transparent;border:1px solid rgba(11,17,32,0.06);color:var(--white);padding:10px 14px;border-radius:10px;font-weight:700}
/* lightbox share/download layout */
.lightbox-actions{display:flex;gap:12px;align-items:center;margin-top:16px;justify-content:center;flex-direction:column}
.lightbox-download, .lightbox-share{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:10px;font-weight:700;font-size:15px;min-height:52px;min-width:220px;justify-content:center;color:#fff;border:none}
.lightbox-download{background:linear-gradient(90deg,#16a34a,#059669);color:#fff}
.lightbox-share{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
.lightbox-download img, .lightbox-share img{height:20px;width:20px;display:inline-block;filter:brightness(0) invert(1);opacity:0.98;margin-right:8px;object-fit:contain}
/* ensure consistent focus outline */
.lightbox-download:focus, .lightbox-share:focus{outline:3px solid rgba(99,91,255,0.12);outline-offset:4px}
/* other button icons to white */
.gallery-actions .btn img, .guest-footer-cta .btn img, .footer-links a img{filter:brightness(0) invert(1);opacity:0.9}
@media (max-width:480px){
  .footer-follow{justify-content:center}
  .footer-follow .footer-links{justify-content:center}
  .guest-footer-cta{margin-bottom:10px;flex-direction:column}
  .guest-footer-cta .btn{width:100%}
  .lightbox-actions{flex-direction:column;align-items:stretch}
  .lightbox-download, .lightbox-share{width:100%;justify-content:center;min-width:0}
}
.hero{padding:64px 24px;border-radius:0;margin-top:0;height:100vh;min-height:100vh;background-image:url('/images/drag.png');background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;box-shadow:0 8px 40px rgba(2,6,23,0.6);position:relative;overflow:hidden}
.hero-inner{max-width:980px;margin:0 auto;display:flex;justify-content:center;align-items:center}
/* hero center-height on homepage only so header overlay is accounted for */
.homepage .hero-inner{height:calc(100vh - var(--header-height));}

/* Vertical hero variant used on contact page and similar pages */
.hero-inner.hero-vertical{flex-direction:column;align-items:center;text-align:center}
.hero-inner.hero-vertical h1{margin-bottom:8px}
.hero-inner.hero-vertical p{margin-bottom:6px}

/* Guest page background: use an absolutely positioned background element so we can set image opacity without affecting content */
.guest-bg{position:fixed;inset:0;background-size:cover;background-position:center;opacity:0.3;z-index:0;pointer-events:none}
/* Ensure guest content sits above the faded background */

/* Shipping form visuals */
.shipping-method img{height:28px}
/* Delivery section (buy page) */
.delivery{margin-top:6px}
.delivery-title{font-weight:700;color:var(--muted);margin-bottom:6px}
.delivery-banner{background:linear-gradient(90deg, rgba(11,17,32,0.9), rgba(11,17,32,0.8));padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.delivery-banner img{height:28px;object-fit:contain}
.delivery-options{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
/* modern pill-style delivery options */
.delivery-option{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0;border-radius:14px;cursor:pointer}
.delivery-option::before{content:attr(data-icon);display:inline-block;width:34px;height:34px;line-height:34px;text-align:center;font-size:18px;border-radius:10px;background:transparent;color:var(--muted);margin-right:6px}
.delivery-option input{position:absolute;left:0;top:0;opacity:0;width:1px;height:1px;pointer-events:none}
.delivery-text{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--muted);font-weight:700;transition: all .12s ease;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;-webkit-background-clip:padding-box;background-clip:padding-box}
.delivery-option:hover .delivery-text{transform:translateY(-2px);box-shadow:0 8px 26px rgba(2,6,23,0.08)}
/* checked state (yellow/gold accent) */
.delivery-option input:checked + .delivery-text{background:linear-gradient(90deg,#d4a017,#f6c64b);color:#0b1220;border-color:transparent;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
/* focus for keyboard users */
.delivery-option:focus-within .delivery-text, .delivery-option input:focus + .delivery-text{outline:3px solid rgba(99,91,255,0.12);outline-offset:4px}
@media (max-width:700px){.delivery-options{gap:10px}.delivery-option::before{width:30px;height:30px;line-height:30px;font-size:16px}.delivery-text{padding:8px 10px;font-size:14px}}
.delivery-option a{color:var(--accent-2);text-decoration:underline}
.inpost-link{color:var(--accent-2);text-decoration:underline;font-weight:700;display:inline-block;margin-left:6px}
.inpost-link:hover{text-decoration:none;opacity:0.95}
.inpost-link:focus-visible{outline:3px solid rgba(99,91,255,0.12);outline-offset:4px;border-radius:4px}
.shipping-locker .card.note .inpost-link{margin-left:0}
.shipping-fields{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shipping-fields .shipping-home, .shipping-fields .shipping-locker{display:block}
.shipping-locker .card.note img{height:40px}
.shipping-helper{display:flex;align-items:center;justify-content:center;padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.02)}
.shipping-helper img{max-width:100%;max-height:240px;object-fit:contain;border-radius:8px}
@media (max-width:900px){.shipping-fields{grid-template-columns:1fr}}

/* Make buy inputs visually consistent with shipping sections */
.buy-page .shipping-fields .input-with-icon input,
.buy-page .shipping-fields .input-with-icon textarea{background:rgba(15,98,254,0.04)}
.guest-page .guest-hero-wrap, .guest-page .guest-hero, .guest-page .guest-card, .guest-page .container{position:relative;z-index:2}
/* Hero stripes removed: keeping only orbs in the hero decoration */
/* hero::before removed */
/* @keyframes hero-stripes{ 0%{ background-position: 0 0 } 100%{ background-position: 200px 200px } } */

/* hero shimmer keyframes removed as hero ::after and features reflector are deleted */

.hero-decor{position:absolute;inset:0;pointer-events:none}

/* Scroll arrow at bottom of hero */
.hero-scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;width:156px;height:156px;display:inline-flex;align-items:center;justify-content:center;background:transparent;box-shadow:none;border-radius:0;transition:transform .18s ease;z-index:30}
.hero-scroll img{width:72px;height:72px;display:block;object-fit:contain}
/* remove visible outline on mouse click; keep keyboard-only focus indicator */
.hero-scroll:focus{outline:none}
.hero-scroll:focus-visible{outline:3px solid rgba(99,91,255,0.12);outline-offset:6px;transform:translateX(-50%) translateY(-6px)}
/* keep centered on hover/click — do not remove the translateX centering */
.hero-scroll:hover{transform:translateX(-50%) translateY(0)}
.hero-scroll:active{transform:translateX(-50%) translateY(0)}
.hero-scroll{-webkit-tap-highlight-color:transparent}
@media (max-width:700px){.hero-scroll{width:132px;height:132px;bottom:18px}.hero-scroll img{width:56px;height:56px}}


/* Demo image above the demo button in the How-it-works area */
.demo-qr img.demo-pobrane{width:200px;height:200px;object-fit:contain;border-radius:8px;background:#fff;padding:6px;box-shadow:var(--shadow-sm)}

/* Product details block */
.product-details{display:flex;gap:22px;margin-top:26px;align-items:flex-start}
.product-what{flex:1;background:var(--card);color:var(--white);padding:22px;border-radius:12px;border:1px solid rgba(11,17,32,0.06);box-shadow:0 18px 40px rgba(2,6,23,0.06)}
.product-what h2{margin:0 0 12px 0;font-size:20px;color:var(--white)}
.features-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(1,1fr);gap:12px}
.feature-item{display:flex;align-items:center;gap:12px;color:var(--white);font-weight:700}
.feature-item .check-icon{color:var(--accent-2-strong);flex:0 0 20px}
.product-side{width:320px;min-width:220px;display:flex;flex-direction:column;gap:12px}
.product-side .specs,.product-side .shipping{background:var(--card);padding:16px;border-radius:10px;border:1px solid rgba(11,17,32,0.06);box-shadow:0 12px 30px rgba(2,6,23,0.04)}
.product-side .specs h3, .product-side .shipping h3{color:var(--white)}
.product-side h3{margin:0 0 8px 0;font-size:16px}
.product-side ul{margin:0;padding-left:18px}
.buy-note{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.buy-note .btn{align-self:stretch;padding:12px 16px}
.buy-note .small-muted{font-size:13px;color:var(--muted);text-align:center}

/* Contact page styles */
.contact-page{padding:48px 24px 72px 24px;display:flex;justify-content:center;align-items:flex-start}
.contact-card{max-width:980px;width:100%;display:grid;grid-template-columns:1fr 320px;gap:24px;padding:28px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;border:1px solid rgba(11,17,32,0.06);box-shadow:var(--shadow-sm)}
/* Centered variant for the contact card */
.contact-card--center{display:flex;align-items:center;justify-content:center;text-align:center;padding:36px}
.contact-card--center .contact-left{max-width:620px}
@media (max-width:900px){
  .contact-card{display:block;padding:20px}
  .contact-card--center{padding:20px}
}

.contact-card h1{margin:0 0 8px;font-size:28px;color:var(--white)}
.contact-card .lead{margin:0 0 14px;color:var(--muted);font-size:16px}
.contact-email-row{display:flex;gap:12px;align-items:center;margin-top:12px}
/* When contact card is centered, stack the email row and center the button */
.contact-card--center .contact-email-row{flex-direction:column;align-items:center;gap:10px}
.contact-card--center .contact-email-row svg{margin-bottom:6px}
.contact-card--center .contact-btn{display:inline-block}
.contact-btn.btn-primary{padding:10px 14px;border-radius:10px}
.contact-email{color:var(--white);font-weight:700;text-decoration:none}
.contact-note{margin-top:16px;color:var(--muted);font-size:13px;background:rgba(11,17,32,0.03);padding:12px;border-radius:8px;border:1px solid rgba(11,17,32,0.04)}
.right-card{background:var(--card);padding:18px;border-radius:10px;border:1px solid rgba(11,17,32,0.06);box-shadow:var(--shadow-sm);color:var(--white)}
.right-card h3{margin-top:0}
.right-card ul{margin:8px 0 0 18px;padding:0;color:var(--muted)}
.contact-btn:focus-visible{outline:3px solid rgba(99,91,255,0.12);outline-offset:4px}
@media (max-width:900px){.contact-card{grid-template-columns:1fr}.contact-side{order:2}.contact-left{order:1}}

/* Exclusive shipping badge */
.product-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:800;font-size:13px;margin-top:8px}
.product-badge svg{flex:0 0 16px}
.product-badge--shipping{background:linear-gradient(90deg,#0b63ff,#1366d6);color:#fff}
@media (max-width:700px){.product-badge{font-size:13px;padding:6px 10px}}

@media (max-width:900px){
  .product-details{flex-direction:column}
  .product-side{width:100%;min-width:unset}
}

/* Success page styles */
.success-hero{padding:32px 0 12px;text-align:center}
.success-hero .check-mark{width:96px;height:96px;border-radius:999px;background:linear-gradient(180deg,#1e7cff,#1366d6);display:inline-flex;align-items:center;justify-content:center;font-size:44px;color:white;margin:0 auto 14px;box-shadow:0 12px 30px rgba(19,102,255,0.12)}
.success-hero h1{margin:0;font-size:30px}
.success-hero .lead{color:var(--muted);margin-top:8px}
.success-card{max-width:720px;margin:18px auto 40px;background:var(--card);padding:18px;border-radius:12px;box-shadow:0 20px 50px rgba(2,6,23,0.12);border:1px solid rgba(11,17,32,0.04)}
.success-card .success-row{display:flex;gap:12px;align-items:center;justify-content:flex-start}
.success-card .muted{color:var(--muted)}
.success-card .code{font-family:monospace;font-weight:700;background:rgba(0,0,0,0.03);padding:6px 10px;border-radius:8px}
.success-card .success-row .btn{margin-right:8px}
@media (max-width:700px){.success-hero .check-mark{width:72px;height:72px;font-size:34px}.success-card{padding:14px}}
/* Homepage-wide background: fixed and static during scroll, semi-transparent */
body.homepage::before{content:'';position:fixed;inset:0;background-image:url('/images/tlo_555.png');background-size:cover;background-position:center;background-repeat:no-repeat;opacity:1;pointer-events:none;z-index:0}
/* Ensure primary containers & content are above homepage background */
body.homepage .container, body.homepage .hero-inner, body.homepage .hero-body, body.homepage .site-footer{position:relative;z-index:2}

/* subtle text entrance */
.hero-content h1{animation: hero-title 650ms cubic-bezier(.2,.9,.2,1) .1s both;margin:0}
.hero-content p, .hero-content .btn-primary{animation: hero-fade 950ms cubic-bezier(.2,.9,.2,1) .2s both;margin:0}
/* Ensure hero paragraphs are responsive and wrap correctly on narrow screens */
.hero-content p{max-width:720px;width:100%;overflow-wrap:break-word;word-break:break-word}
@keyframes hero-title{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes hero-fade{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}

/* Hero paragraph fancy animation */
/* Replace shimmer with an animated color gradient on the hero paragraph */
.hero-content p.hero-desc{font-weight: 450;position:relative;overflow:hidden;padding-right:8px;font-size:22px;line-height:1.25;animation: hero-desc 1100ms cubic-bezier(.2,.9,.2,1) .22s both; background: linear-gradient(90deg, #000000 0%, #1e90ff 36%, #1366d6 72%, #000000 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hero-desc 1100ms cubic-bezier(.2,.9,.2,1) .22s both, hero-desc-gradient var(--hero-grad-speed, 10s) ease-in-out 1s infinite alternate;}

@keyframes hero-desc{from{transform:translateY(10px) scale(.998);opacity:0}50%{transform:translateY(0) scale(1.001);opacity:1}to{transform:none;opacity:1}}
@keyframes hero-desc-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero-content p.hero-desc{--hero-grad-speed: 24s}

/* Make shimmer and animation only on wider screens and disable for reduced motion */
@media (max-width:700px){
  /* On mobile, use a less aggressive gradient: smaller background-size and slower movement */
  .hero-content p.hero-desc{--hero-grad-speed:24s;background-size:200% 100%;-webkit-text-fill-color:transparent;color:transparent;font-size:18px;line-height:1.35}
  .hero-content p{max-width:100%;padding:0 16px;font-size:15px;line-height:1.45}
}
@media (max-width:480px){
  .hero-content p.hero-desc{font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  .hero-content p.hero-desc{animation:none!important;background:none;color:var(--muted);-webkit-background-clip:none;background-clip:none}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after, .hero-decor .orb{animation:none}
  .hero-content h1, .hero-content p, .hero-content .btn-primary{animation:none}
}
.hero-body{min-width:0;display:flex;align-items:center;justify-content:center;z-index:1;position:relative;height:100%;}
.hero-inner{z-index:2;position:relative}
.hero-content{flex:1;min-width:0;max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.hero-content{position:relative;z-index:2}
.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-start}
.hero-actions .hero-count{margin-left:8px}
.hero-logo img{width:96px;height:96px;object-fit:contain;border-radius:12px}
/* hero-inner alignment reset (left-aligned by default) */
.hero h1{font-size:44px;margin:0 0 8px;line-height:1.03}
.hero h1{font-size:68px;margin:0 0 8px;line-height:1.02;letter-spacing:-0.02em;font-weight:800}
.hero p{font-size:20px}
.hero p{color:var(--muted);margin:0 0 16px}
.btn-primary{background:linear-gradient(90deg,#07102A,#1366d6);color:white;padding:12px 18px;border-radius:12px;text-decoration:none;display:inline-block;box-shadow:0 8px 30px rgba(255,107,107,0.12);transition:transform .15s ease, box-shadow .15s ease}
.btn-primary{background:linear-gradient(90deg,#07102A,#1366d6);color:white;padding:14px 20px;border-radius:12px;text-decoration:none;display:inline-block;box-shadow:var(--shadow-sm);transition:transform .18s ease, box-shadow .18s ease;font-weight:700}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px 14px;border-radius:10px;color:var(--white)}
.btn:focus, .btn-primary:focus, input:focus, select:focus, button:focus { outline: 3px solid rgba(255,107,107,0.12); outline-offset: 2px; }
.btn{background:transparent;border:1px solid rgba(255,255,255,0.03);padding:8px 12px;color:var(--white);text-decoration:none;border-radius:6px;margin-right:8px;display:inline-block}
.btn-cta{display:inline-flex;align-items:center;gap:8px}
.btn-cta .btn-icon{width:18px;height:18px;display:inline-block;flex:0 0 18px}
/* Icon image styling for buttons */
.icon{width:18px;height:18px;display:inline-block;flex:0 0 18px;object-fit:contain}
.icon-download{filter:grayscale(0);margin-right:8px}
.icon-share{margin-right:8px}
.lightbox-download .icon{width:20px;height:20px;margin-right:8px;vertical-align:middle}
.btn-muted{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;color:var(--muted);text-decoration:none;border-radius:6px}

/* Styled & accessible select control for sorting - theme aware */
.sort-select{padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.05);color:var(--white);background:var(--card);min-width:180px}
.sort-select option{background:var(--card);color:var(--white)}

.sort-select{border:1px solid rgba(11,17,32,0.06);background:var(--glass);color:var(--white)}

/* Brand logo tweaks */
.brand-logo{ filter: none }

/* Remove system appearance and set consistent caret color */
.sort-select{appearance:none;-webkit-appearance:none;-moz-appearance:none}
.sort-select:focus{outline: 3px solid rgba(255,107,107,0.12);outline-offset:2px}
.btn-danger{background:#ff3b3b;color:white;padding:6px 10px;border-radius:6px;border:none}
.btn-white{background:var(--card);color:var(--white);border:1px solid rgba(11,17,32,0.06);padding:8px 12px;border-radius:8px;box-shadow:0 6px 18px rgba(2,6,23,0.05);text-decoration:none}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(2,6,23,0.08)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:26px}
.card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s ease;border:1px solid rgba(255,255,255,0.03);opacity:1;transform:none}
.card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease;border:1px solid rgba(255,255,255,0.03);opacity:1;transform:none}
.card-top{display:flex;align-items:center;gap:8px}
.card-top .rating{background:rgba(0,0,0,0.14);padding:6px 8px;border-radius:999px;font-weight:700;font-size:13px}

/* star bar for fractional rating */
.stars{height:14px;background:linear-gradient(90deg, rgba(255, 215, 0,0.06), rgba(255,255,255,0.03));border-radius:10px;overflow:hidden;width:90px}
.stars .fill{height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));width:0%;width:calc(var(--stars,0) * 100%)}
.stars-label {
    font-size: 13px;
    color: #f0e68c;
    background: rgba(0, 0, 0, 0.65);
    padding: 2px 6px;
    border-radius: 4px;
    backdrop-filter: blur(2px);
}


.card.visible{opacity:1;transform:none}
.card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px rgba(2,6,23,0.7)}
.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:var(--shadow-lg)}
.card img{width:100%;height:220px;object-fit:cover;background:linear-gradient(90deg,#071026,#082033)}
.card img{width:100%;height:240px;object-fit:cover;background:linear-gradient(90deg,#071026,#082033)}
.card .badge{position:absolute;top:14px;left:14px;background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:6px 10px;color:white;border-radius:999px;font-weight:700;font-size:13px}
/* Tier card badge (exclusive label) - placed on the top-right */
.tier-card .badge{left:auto;right:12px;top:12px;position:absolute;padding:8px 10px;font-weight:700;background:linear-gradient(90deg,#d4a017,#f6c64b);color:#0a0a0a;border-radius:8px;display:inline-flex;align-items:center;gap:8px;font-size:13px}
.tier-card .badge .badge-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke}
/* add a subtle shadow to gold badges to separate from white backgrounds */
.tier-card .badge{box-shadow:0 8px 24px rgba(2,6,23,0.06);border:1px solid rgba(11,17,32,0.04)}
.card-body{padding:16px}
.card-body{padding:18px}
.card-body a {text-decoration:none;color:inherit}

/* Exclusive order styles */
.exclusive-order{padding:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;}
.exclusive-order-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.exclusive-order-row label{font-weight:700;color:var(--white)}
.exclusive-order-input{display:flex;align-items:center;gap:8px}
.exclusive-order-input input[type="number"]{width:100px;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--white)}
.exclusive-order-input .btn-sm{font-size:12px;padding:6px 8px}
.exclusive-total{margin-top:12px;border-radius:10px;overflow:hidden}
.exclusive-total-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:linear-gradient(90deg,#ffdba3,#ffb86b)}
.exclusive-total-row .muted{color:#2b2b2b}
.exclusive-total-amount strong{color:#0b1220;font-weight:900;font-size:18px}

@media (max-width:700px){
  /* Keep exclusive-order row elements side-by-side on mobile, with wrapping if space is tight */
  .exclusive-order-row{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .exclusive-order-input input[type="number"]{width:80px}
  .exclusive-order-input .btn-sm{padding:6px 8px}
}
.product-page{padding-top:30px;padding-bottom:36px}
.product-meta-row{display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.rating-badge{font-weight:700;color:var(--accent-2);padding:6px 10px;border-radius:999px;background:rgba(0,0,0,0.04)}

.product-action{margin-top:10px}
.shipping-card{margin-top:18px;padding:16px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));border:1px solid rgba(255,255,255,0.02)}
.card--section{margin-top:16px;padding:16px;border-radius:10px;margin-bottom:14px}
.product-page .card h4{margin-top:0}
.rating{display:flex;align-items:center;gap:8px;margin-bottom:8px;color:var(--accent-2);font-weight:700}
.meta{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.card h3{margin:0 0 6px}
.price{font-weight:700;color:var(--accent)}
.price-original{text-decoration:line-through;color:var(--muted);margin-right:8px;font-weight:600}
.price-current{font-weight:800;color:var(--accent)}
.price-badge{display:inline-block;background:var(--accent-2);color:#111;font-weight:800;border-radius:999px;padding:4px 8px;font-size:12px;margin-left:8px}
.product-right .price-current{font-size:22px}
.product-right .price-badge{font-size:13px;padding:6px 10px}
.price-row{display:flex;align-items:center;gap:8px;justify-content:center}
.product-right .price-row{justify-content:flex-start;gap:16px;margin-top:8px;margin-bottom:12px;padding:6px 0}
.product-right .price-original{font-size:16px;opacity:0.8}
.product-right .price-current{font-size:22px;color:var(--accent-2-strong);letter-spacing:0.2px;font-weight:900;text-shadow:0 1px 0 rgba(11,17,32,0.06)}
.product-right .price-badge{font-size:13px;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#d4a017,#f6c64b);color:#0a0a0a;font-weight:700}

/* Product order card (quantity + subtotal) */
.product-order.card{margin-top:12px;padding:20px;border-radius:12px;background:linear-gradient(180deg, rgba(255,95,109,0.04), rgba(255,184,107,0.02));border:1px solid rgba(255,95,109,0.06);box-shadow: 0 10px 40px rgba(2,6,23,0.06);border-left:4px solid rgba(255,95,109,0.14);margin-bottom:18px}
.product-order .product-order-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.product-order label{font-weight:600;color:#0a0a0a;display:flex;align-items:center;gap:12px}
.product-order input[type="number"]{width:120px;max-width:100%;padding:8px;border-radius:8px;border:1px solid rgba(11,17,32,0.06);background:#fff;color:#0a0a0a;outline:none;text-align:right}
.product-order .subtotal{margin-top:12px;font-size:16px;color:var(--muted);font-weight:700}
.product-order .subtotal{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--accent-2);}
.product-order .subtotal strong{color:#0a0a0a;margin-left:8px;font-weight:900}

/* helpers row under price/title */
.product-helpers{display:flex;gap:12px;align-items:center;margin-bottom:18px}

/* Styled input with icon used for date pickers and similar */
.input-with-icon{position:relative;display:block;width:100%;color:var(--muted);font-weight:600;margin-bottom:8px}
.input-with-icon input[type="date"],
.input-with-icon input[type="text"],
.input-with-icon input[type="email"],
.input-with-icon input[type="number"],
.input-with-icon input[type="tel"],
.input-with-icon textarea, .input-with-icon select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:rgba(15,98,254,0.06);color:var(--white);min-height:44px;font-size:16px;box-shadow:0 6px 18px rgba(2,6,23,0.04)}
.input-with-icon input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;pointer-events:none}
.input-with-icon .icon-calendar{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);opacity:0.95}
.input-with-icon input:focus,.input-with-icon textarea:focus,.input-with-icon select:focus{outline:none;box-shadow:0 12px 30px rgba(15,98,254,0.08);border-color:rgba(15,98,254,0.45);transform:translateY(-1px)}
.input-with-icon .icon-calendar svg{width:18px;height:18px;display:block}

@media (max-width:700px){
  .input-with-icon input[type="date"],
  .input-with-icon input[type="text"]{height:46px;padding:10px 46px 10px 12px}
}

/* Styled select for background choice */
.bgSelectStyled{width:300px;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--white);height:44px;font-size:15px;appearance:none;-webkit-appearance:none;position:relative}
.bgSelectStyled:focus{outline:none;box-shadow:var(--shadow-sm);border-color:rgba(255,107,107,0.12)}
.bgSelectRow{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media (max-width:700px){
  .bgSelectStyled{width:100%}
}

/* Background preview selector */
.bg-preview-grid{display:flex;gap:12px;margin-top:12px;align-items:center;flex-wrap:wrap;justify-content:flex-start}
.bg-thumb{width:140px;height:96px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);background:transparent;cursor:pointer;outline:none;box-shadow:0 8px 24px rgba(2,6,23,0.06);position:relative;padding:0;display:flex;align-items:center;justify-content:center}
.bg-thumb img{max-width:100%;max-height:100%;object-fit:contain;display:block;padding:6px}
.bg-thumb .bg-thumb-label{position:absolute;left:8px;bottom:8px;background:rgba(11,17,32,0.6);color:#fff;padding:4px 8px;border-radius:8px;font-size:12px;font-weight:700}
.bg-thumb.selected{box-shadow:0 18px 46px rgba(11,17,32,0.25);border:2px solid rgba(255,107,107,0.18);transform:translateY(-3px)}
.bg-thumb input{position:absolute;left:-9999px}
.bg-thumb input:checked + img{border-radius:10px;border:2px solid var(--accent-2);box-shadow:0 16px 48px rgba(255,184,107,0.12);transform:translateY(-3px)}
.bg-thumb input:focus + img{box-shadow:0 10px 32px rgba(99,91,255,0.12);border-color:var(--accent)}
.bg-thumb:focus-within img{box-shadow:0 10px 32px rgba(99,91,255,0.12);border-color:var(--accent)}
.bg-thumb.focus-visible img{box-shadow:0 10px 32px rgba(99,91,255,0.16);border-color:var(--accent-2);}
.bg-thumb:focus{outline:3px solid rgba(255,107,107,0.12);outline-offset:2px}
.bg-thumb[aria-selected="true"]::after{content:"";position:absolute;display:block;width:22px;height:22px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 8px 24px rgba(2,6,23,0.16);right:8px;top:8px}

@media (max-width:900px){
  .bg-thumb{width:110px;height:78px}
}
@media (max-width:640px){
  .bg-thumb{width:92px;height:64px}
}

/* layout for the background select + preview */
.bg-select-row{display:flex;align-items:center;gap:12px}
.bg-select-row label{flex:0 0 260px}
.bg-select-row .bg-preview-grid{flex:1}
@media (max-width:700px){
  .bg-select-row{flex-direction:column;align-items:flex-start}
  .bg-select-row label{flex:1;width:100%}
  .bg-select-row .bg-preview-grid{width:100%}
}
.bgSelectRow{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.bgSelectRow label{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;width:auto;max-width:300px}
.bgSelectRow .bg-preview-grid{width:300px; align-self:flex-start; margin-top:6px; justify-content:flex-start}

/* Prominent styled select for background choice */
.bgSelectStyled{display:inline-block;margin:0;padding:12px 14px;border-radius:12px;border:1px solid rgba(11,17,32,0.06);background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:var(--white);font-weight:700;cursor:pointer;box-shadow:0 8px 30px rgba(2,6,23,0.06)}
.bgSelectStyled:focus{outline:none;box-shadow:0 14px 40px rgba(255,107,107,0.08);border-color:rgba(255,107,107,0.12)}
.bgSelectStyled option{background:var(--card);color:var(--white)}
.bg-select-helper{font-size:13px;color:var(--muted);margin-top:6px}

/* Make the select stand out and visually pair with thumbnails */
.bgSelectStyled{min-width:220px}
.bgSelectRow .bg-large-preview{margin-left:0}
/* Ensure the preview sits under the helper and matches the select width */
.bgSelectRow label .bg-large-preview{width:300px;height:140px;margin-top:6px}
@media (max-width:700px){
  .bgSelectRow label .bg-large-preview{width:100%;height:120px}
  .bgSelectRow .bg-preview-grid{width:100%}
}

/* Select wrapper to show custom arrow */
.select-wrapper{position:relative;display:inline-block}
.select-wrapper::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:12px;height:12px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ffffff" d="M7 10l5 5 5-5z"/></svg>');background-repeat:no-repeat;background-size:12px 12px;pointer-events:none;opacity:0.95}
.select-wrapper .bgSelectStyled{padding-right:34px}
.bg-select-highlight{box-shadow:0 10px 30px rgba(255,107,107,0.12);border-color:rgba(255,107,107,0.18);transition:box-shadow .25s ease}

/* highlight style for select when changed */
.bgSelectStyled.bg-select-highlight{box-shadow:0 18px 42px rgba(255,107,107,0.18);border-color:rgba(255,107,107,0.18);}

/* Large preview for the selected background */
.bg-large-preview{width:200px;height:140px;border-radius:12px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 12px 36px rgba(2,6,23,0.06);background-size:cover;background-position:center;margin-left:12px;display:none}
.bg-large-preview.visible{display:block}
@media (max-width:700px){
  .bg-large-preview{width:100%;height:120px;margin-left:0;margin-top:10px}
}
.bg-thumb[disabled]{cursor:default;pointer-events:none;opacity:1}
.print-names-hint{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);padding:10px;border-radius:8px;font-size:13px;color:var(--muted);display:none}
.print-names-hint a{color:var(--white);text-decoration:underline}
.print-names-hint.visible{display:block}
.upload-error{display:none}
.upload-error.visible{display:block}

/* Upload overlay styles */
.upload-overlay{display:none;position:fixed;inset:0;z-index:200;background:linear-gradient(90deg, rgba(11,17,32,0.5), rgba(11,17,32,0.55));align-items:center;justify-content:center}
.upload-overlay[aria-hidden="false"]{display:flex}
.upload-overlay-inner{display:flex;flex-direction:column;align-items:center;gap:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px 28px;border-radius:12px;box-shadow:0 10px 40px rgba(2,6,23,0.6)}
.upload-overlay-text{color:var(--white);font-weight:700}
.spinner{width:48px;height:48px;border-radius:999px;border:4px solid rgba(255,255,255,0.06);border-top-color:var(--accent);animation:spin 900ms linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.guest-page{background-repeat:no-repeat;background-size:cover;background-position:center;position:relative}
.guest-page::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(11,17,32,0.06), rgba(11,17,32,0.06));z-index:0;pointer-events:none}
.guest-hero, .guest-hero-wrap{position:relative;z-index:2}
.guest-hero-wrap{padding-top:80px;padding-bottom:48px}
.guest-hero-wrap{padding-top:40px;padding-bottom:48px}
.guest-card{margin-top:18px}
.guest-hero{display:flex;justify-content:center;align-items:center;padding:20px}
.guest-card{width:900px;max-width:95%;background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));border-radius:12px;padding:22px;box-shadow:0 40px 80px rgba(2,6,23,0.18);border:1px solid rgba(0,0,0,0.06);position:relative}
.guest-hero .guest-card{background:#fff;z-index:3}
.guest-card .back-button{position:absolute;left:18px;top:18px}
.guest-card-inner{display:flex;gap:24px;align-items:center;justify-content:center}
.guest-card-left{flex:1;text-align:center}
.guest-title{font-size:28px;margin:0 0 6px;color:#0b1220}
.guest-title{display:inline-block;position:relative;overflow:hidden}
.guest-title .guest-title-inner{display:inline-block;transform:translateY(6px);opacity:0;transition:transform .6s cubic-bezier(.22,.9,.32,1), opacity .6s cubic-bezier(.22,.9,.32,1)}
.guest-title.animate .guest-title-inner{transform:none;opacity:1}

/* Subtle glint for title (lighter than main demo glint) */
.guest-title.glint::before{content:'';position:absolute;left:-120%;top:-24%;height:140%;width:220%;background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 48%, rgba(255,255,255,0) 55%);transform:skewX(-18deg) translateX(0);mix-blend-mode:screen;opacity:0;pointer-events:none;z-index:3}
.guest-title.glint.glint-active::before{animation:guestGlint 5200ms cubic-bezier(.22,.9,.32,1) forwards}
@keyframes guestGlint{0%{transform:skewX(-18deg) translateX(-120%);opacity:0}35%{opacity:1}70%{opacity:0.9}100%{transform:skewX(-18deg) translateX(120%);opacity:0}}
.guest-title.glint::before{will-change:transform,opacity}

/* Guest page animation helpers */
@keyframes revealUp { from { opacity: 0; transform: translateY(10px) scale(0.995); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* reveal utilities for title & gallery */
.reveal { opacity: 0; transform: translateY(12px); will-change: transform, opacity; transition: opacity .52s cubic-bezier(.2,.9,.2,1), transform .52s cubic-bezier(.2,.9,.2,1); }
.reveal.reveal--visible { opacity: 1; transform: none; }

/* gallery item hover */
.demo-gallery .gallery-item img{transition: transform .28s cubic-bezier(.2,.9,.2,1);transform-origin:center center}
.demo-gallery .gallery-item:hover img{transform: scale(1.04)}

/* lightbox pop */
.lightbox-overlay[aria-hidden="false"] .lightbox-content{animation: pop .28s cubic-bezier(.2,.9,.2,1) both}

/* guest-bg transform smoothing */
.guest-bg{will-change:transform}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .reveal, .demo-gallery .gallery-item img, .lightbox-overlay[aria-hidden="false"] .lightbox-content { transition: none !important; animation: none !important; transform: none !important; }
}

.guest-date{color:#333;margin-bottom:12px}
.guest-desc{color:#000;margin:6px 0 12px}
.guest-cta-row{margin-top:12px}
.btn-cta{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(90deg,#0f62fe,#0b53d6);color:#fff;padding:14px 26px;border-radius:14px;border:none;font-weight:500;font-size:16px;min-height:50px;box-shadow:0 18px 44px rgba(11,82,255,0.10);transition:transform .18s ease, box-shadow .18s ease}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 22px 60px rgba(11,82,255,0.14)}
.btn-cta:focus-visible{outline:3px solid rgba(19,102,255,0.12);outline-offset:4px}
.btn-cta .btn-icon{width:20px;height:20px;display:inline-block;flex:0 0 20px;color:inherit}

/* Per-letter entrance for upload button label */
.btn-cta .btn-label{display:inline-block;white-space:nowrap}
.btn-cta .btn-char{display:inline-block;transform:translateY(8px);opacity:0}
.btn-cta .btn-char.animate{animation:lift .36s cubic-bezier(.2,.9,.2,1) both}
@keyframes lift{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){
  .btn-cta .btn-char{transform:none;opacity:1;animation:none}
}

.guest-note{margin-top:8px}
@media (max-width:560px){
  .btn-cta{width:100%;justify-content:center;padding:12px 18px;font-size:15px}
}
.guest-card-right{display:flex;align-items:center;gap:8px;justify-content:center}
.gallery-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.gallery-actions .btn{padding:8px 14px;border-radius:10px}

/* On small screens show action buttons side-by-side */
@media (max-width:560px){
  /* Keep single share button centered and prevent overflow */
  .gallery-actions{flex-direction:row;gap:10px;justify-content:center;align-items:center;flex-wrap:nowrap;width:100%;padding:0 12px;box-sizing:border-box}
  .gallery-actions .btn{padding:8px 10px;min-width:0;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gallery-actions .btn.share{flex:0 1 auto}
  /* Remove heavy box-shadow on buttons to avoid visual overflow */
  .gallery-actions .btn-primary{box-shadow:none}
}
.gallery-actions .btn.share{color:#0f62fe;border:1px solid rgba(15,98,254,0.12);background:linear-gradient(180deg, rgba(15,98,254,0.06), rgba(15,98,254,0.02));}
.gallery-actions .btn-primary.download{background:linear-gradient(90deg,#16a34a,#059669);color:#fff;border:none}

/* Lightbox overlay styles */
.lightbox-overlay{position:fixed;inset:0;display:none;z-index:11000;align-items:center;justify-content:center;background:rgba(11,17,32,1);backdrop-filter:blur(6px)}
.lightbox-overlay[aria-hidden="false"]{display:flex}
.lightbox-content{position:relative;z-index:11001;max-width:95%;max-height:88%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px}
.lightbox-image{max-width:calc(100vw - 160px);max-height:calc(100vh - 240px);object-fit:contain;border-radius:8px;box-shadow:0 30px 60px rgba(2,6,23,0.6);background:#fff}
.lightbox-caption{color:#fff;text-align:center;max-width:75%;font-size:14px}
.lightbox-close{position:absolute;right:18px;top:18px;background:transparent;border:none;color:#fff;font-size:22px;padding:8px;border-radius:8px}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.45);color:#fff;border:none;padding:12px 14px;font-size:26px;border-radius:8px;cursor:pointer}
.lightbox-prev{left:18px}
.lightbox-next{right:18px}
.lightbox-close:hover,.lightbox-nav:hover{opacity:0.95}

.lightbox-overlay:focus{outline:none}
.lightbox-download{margin-top:6px;background:linear-gradient(90deg,#16a34a,#059669);color:#fff;border:none;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer}
.lightbox-download:hover{opacity:0.95}

@media (max-width:900px){
  .guest-card-inner{flex-direction:column}
  .guest-card-right{width:100%;justify-content:center}
}
.no-uploads-message{color:#0b1220;font-size:1rem;margin:8px 0 14px;text-align:center}
.upload-count{display:inline-flex;align-items:center;gap:8px;background:rgba(2,6,23,0.48);color:#fff;padding:6px 12px;border-radius:10px;font-size:13px;font-weight:500;margin-left:12px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 28px rgba(2,6,23,0.45)}
.upload-count strong{font-weight:400;font-size:13px;display:inline-block;min-width:36px;text-align:center;margin-right:6px;padding:0;background:transparent;color:#fff}
@media (max-width:560px){.upload-count{font-size:12px;padding:5px 8px;margin-left:8px}.upload-count strong{min-width:28px;padding:3px 6px}}
.guest-list{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.guest-list .guest-card{padding:12px;border-radius:10px;background:rgba(255,255,255,0.02);min-width:220px}
.guest-title{font-weight:700}
.guest-links{margin-top:6px;font-size:12px}
.shipping-card .muted{margin-top:6px}
.btn-primary strong{margin-left:8px}
.product-helpers .badge{padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;font-weight:700;font-size:13px}
.product-helpers .muted{font-size:13px;color:var(--muted)}
.product-order .muted{color:var(--muted);font-size:13px}

.social{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:6px;background:rgba(255,255,255,0.02);width:38px;height:38px;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.social img{width:18px;height:18px;display:block;object-fit:contain;background:transparent;border-radius:3px}
.social{transition:transform 160ms ease, box-shadow 160ms ease}
.social:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(2,6,23,0.08)}
.social--facebook{background:linear-gradient(90deg,#3b5998,#2d4373);overflow:hidden}
.social--instagram{background:linear-gradient(45deg,#fccc63,#ff6381);overflow:hidden}

/* Promo follow styles removed (follow promo moved to footer only) */

/* Footer follow styles */
.footer-follow{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.footer-follow .footer-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.footer-follow .footer-links .btn-muted{margin-bottom:6px}
.footer-follow .muted{font-size:14px;color:var(--muted);margin-right:8px}
.footer-follow-actions{display:flex;gap:8px}
.footer-follow .social{width:34px;height:34px;padding:6px;overflow:hidden}
.footer-follow .social img{width:18px;height:18px;object-fit:contain}
.footer-follow .social svg{width:16px;height:16px}
.footer-follow .social:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(2,6,23,0.08)}

/* product page content spacing */
.product-right p{margin-bottom:16px;line-height:1.55}
.product-right .key-benefits{margin-bottom:12px}
.card--section ul{margin:8px 0 0;padding-left:18px}
.card.note input[type="checkbox"]{width:18px;height:18px;accent-color:var(--accent)}
.card.note label{color:var(--white)}
.faq-section{margin-top:56px}
.faq-section{padding:18px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 40px rgba(2,6,23,0.12)}
.faq-section h2.faq-title{margin-top:10px;color:#fff;font-size:20px}
.faq-section dt{font-weight:700;margin-top:12px}
.faq-section .faq{margin-top:40px}
.faq-section dd{margin-bottom:10px}

/* Modern FAQ card / accordion styling */
.faq{display:block;}
.faq-item{background:transparent;border-radius:10px;padding:10px;border:1px solid transparent;transition:background 180ms ease, box-shadow 180ms ease;}
.faq-item + .faq-item{margin-top:10px}
.faq-item:hover{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.006));border-color:rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,6,23,0.08)}

/* question button */
.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;padding:10px 12px;border-radius:8px;color:#fff;font-weight:700;font-size:15px;cursor:pointer;text-align:left}
.faq-q:focus{outline:3px solid rgba(99,91,255,0.12);outline-offset:4px}
.faq-q:hover{transform:translateY(-1px)}
.faq-q .faq-q-text{flex:1}
.faq-q::after{content:'';display:inline-block;width:12px;height:16px;border-right:2px solid rgba(255,255,255,0.9);border-bottom:2px solid rgba(255,255,255,0.9);transform:rotate(45deg);transition:transform 200ms ease;margin-left:12px}
.faq-q[aria-expanded="true"]::after{transform:rotate(225deg)}

/* Contact page styles */
.contact-page{padding-top:120px;padding-bottom:60px;min-height:60vh;display:flex;align-items:flex-start;justify-content:center}
.contact-card{width:100%;max-width:760px;padding:28px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);box-shadow:0 18px 40px rgba(2,6,23,0.12)}
.contact-card h1{margin:0 0 8px;color:var(--white);font-size:30px}
.contact-card p{color:var(--muted);margin:8px 0 16px;font-size:16px}
.contact-email-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03)}
.contact-email{font-weight:800;color:var(--accent-2);font-size:18px;text-decoration:none}

/* Reduce spacing on smaller screens so the FAQ doesn't feel too distant after the product grid */
@media (max-width:700px){
  .faq-section{margin-top:32px}
}
.contact-email:hover{opacity:0.95}
.contact-note{margin-top:14px;color:var(--muted);font-size:14px}

@media (max-width:700px){
  .contact-card{padding:18px;margin:0 12px}
  .contact-page{padding-top:80px;padding-bottom:40px}
  .contact-card h1{font-size:26px}
  .contact-email{font-size:16px}
}
.faq-q[aria-expanded="true"]{background:linear-gradient(90deg, rgba(99,91,255,0.06), rgba(99,91,255,0.02));box-shadow:0 8px 30px rgba(99,91,255,0.05)}

/* answer */
.faq-a{color:#fff;padding:6px 12px;font-size:14px;line-height:1.55;margin-top:6px}
.faq-a p{margin:0}

/* small screen adjustments */
@media (max-width:640px){
  .faq-section{padding:14px}
  .faq-title{font-size:18px}
  .faq-q{font-size:15px;padding:12px}
  .faq-a{font-size:14px;padding-left:12px;padding-right:12px}
}
/* When FAQ is detached and appended after the product section ensure it fills the width nicely */
.product-single + .faq-section{width:100%;max-width:1100px;margin:18px auto 0}

/* Legal / regulamin page styles */
.legal-page .card--section{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:0 12px 40px rgba(2,6,23,0.06)}
.legal-page h1{font-size:22px;margin-bottom:6px;color:var(--white)}
.legal-page h2{font-size:18px;margin-top:10px;color:var(--white)}
.legal-page p, .legal-page li{color:var(--white)}
.legal-page a{color:var(--accent-2);}

/* Slightly increase contrast on price row */
.product-right h1{margin-bottom:10px}
.product-right h1{font-size:28px;line-height:1.08;margin-bottom:18px}
.product-left img{max-width:420px;border-radius:8px;display:block;width:100%;height:auto;object-fit:cover}
.price-row{padding:6px 0}
.price-original{opacity:0.65;font-size:15px}
.price-current{font-size:22px}
.price-badge{font-size:13px}
/* End of product-order.card declarations (consolidated) */
.product-action{display:block;margin-top:26px;margin-bottom:8px}
.product-action .btn-primary{box-shadow:0 14px 36px rgba(99,91,255,0.12);padding:12px 18px}

/* make price stack better on small screens */
@media (max-width:640px){
  /* Keep price elements inline on small screens; allow wrapping if too long */
  .product-right .price-row{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .product-order .product-order-row{flex-direction:column;align-items:flex-start;gap:10px}
  .product-order input[type="number"]{width:100%;}
  .product-right h1{font-size:22px}
}
.admin-card .price-row{justify-content:flex-start}
.desc{color:var(--muted);font-size:14px;flex:1}
.product-single{display:flex;gap:36px;margin-top:20px;align-items:flex-start}
.product-single .product-left{flex:1;min-width:0}
.product-single .product-right{flex:1;min-width:0}
.product-single img{max-width:420px;border-radius:8px;display:block;width:100%;height:auto;object-fit:cover}
/* default ordering: left column first then right column */
.product-single .product-left{order:1}
.product-single .product-right{order:2}
.product-single .btn-primary{padding:14px 20px;font-size:18px;border-radius:12px;background:linear-gradient(90deg,#0b63ff,#1366d6);color:#ffffff;border:none;font-weight:800;display:inline-flex;align-items:center;gap:10px;justify-content:center;box-shadow:0 14px 44px rgba(11,102,255,0.12);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
@media (min-width:900px){
  .product-single .btn-primary{padding:16px 22px;font-size:20px}
}
  /* hide shimmer overlay on small screens */
  .tier-card--exclusive::before{display:none}
  .tier-card--exclusive .tier-title::after{display:none}
@media (max-width:700px){
  .product-single .btn-primary{width:100%;padding:14px 12px;font-size:16px}
  /* On mobile stack and reorder so content (right column) appears before the image and FAQ */
  .product-left{order:2}
  .product-right{order:1}
}
.admin-panel{margin-top:24px}

/* Admin page tabs styling */
.admin-form .btn{padding:8px 12px}
.admin-form .btn.active{box-shadow:0 10px 30px rgba(0,0,0,0.12)}

/* SnapThis product tier layout: show three tiers side-by-side on desktop */
.tier-row{display:flex;gap:24px;justify-content:center;align-items:flex-start;flex-wrap:wrap;margin-top:12px}
.tier-card{max-width:360px;padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);background:var(--glass);text-align:center;flex:0 1 320px;box-sizing:border-box;position:relative}
.tier-card .card-media{height:160px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.tier-card .card-media img{max-width:160px;max-height:160px;object-fit:contain;display:block;width:auto;height:auto}
.tier-card .price{font-size:18px}
.tier-title{font-weight:750;color:white;text-decoration:none}


/* make `.tier-card` layout column and align actions at bottom */
.tier-card{display:flex;flex-direction:column;justify-content:space-between;height:100%;cursor:pointer;vertical-align:top}
.tier-card{transition:transform .18s ease, box-shadow .18s ease}

/* Winietki page styles */
.winietki-page{padding-top:80px;padding-bottom:80px;min-height:80vh}
.winietki-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:26px}
.winietka-card{position:relative;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid rgba(255,255,255,0.03);box-shadow:var(--shadow-sm)}
.winietka-card img{width:100%;height:380px;object-fit:cover;display:block}
.winietka-number{position:absolute;left:12px;bottom:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:8px 12px;border-radius:999px;font-weight:800;font-size:16px;box-shadow:0 8px 24px rgba(2,6,23,0.12)}
@media (max-width:700px){ .winietka-card img{height:220px} .winietka-number{font-size:14px;padding:6px 10px} }
.tier-card:focus{outline:3px solid rgba(255, 215, 0, 0.12);outline-offset:6px}
.tier-card--exclusive{box-shadow:0 30px 80px rgba(212,160,23,0.12);border:1px solid rgba(212,160,23,0.7);background:linear-gradient(180deg, rgba(214,160,23,0.03), rgba(214,160,23,0.01));}
.tier-card--exclusive img{transform:none}
/* badge icon spacing */
.badge-icon{margin-right:6px;vertical-align:middle}

/* subtle floating animation and glowing border for exclusive */
/* animation is applied only on larger screens, see media query below */
@keyframes exclusiveFloat{0%{transform:translateY(0) scale(1.06)}50%{transform:translateY(-6px) scale(1.07)}100%{transform:translateY(0) scale(1.06)}}

/* exclusive shimmer sweep */
@keyframes exclusive-shine{0%{left:-60%}12%{left:150%}100%{left:150%}}
@keyframes exclusive-text-shine{0%{left:-120%}12%{left:220%}100%{left:220%}}

/* focus pulse for short emphasis */
.tier-card--exclusive.focus{animation:exclusivePulse 1100ms cubic-bezier(.2,.9,.2,1) 1 both}
@keyframes exclusivePulse{0%{transform:translateY(0) scale(1.06);box-shadow:0 30px 80px rgba(212,160,23,0.12)}30%{transform:translateY(-10px) scale(1.09);box-shadow:0 60px 120px rgba(212,160,23,0.22)}100%{transform:translateY(0) scale(1.06);box-shadow:0 30px 80px rgba(212,160,23,0.12)}}
.card-actions{display:flex;gap:8px;align-items:center;justify-content:center}
.card-actions .btn, .card-actions .btn-order, .card-actions form{margin:0}
/* Testimonials */
.testimonials{background:var(--card);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);overflow:hidden;position:relative;z-index:5;min-height:120px}
.testimonials h3{font-size:20px;margin-bottom:12px;color:var(--white);font-weight:800}
.testimonials-viewport{overflow:hidden;width:100%;display:block}
.testimonials-track{display:flex;gap:20px;align-items:stretch;will-change:transform}
.testimonial{display:flex;flex-direction:column;flex:0 0 min(320px, 36vw);min-width:260px;max-width:520px;padding:12px;border-radius:8px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);box-sizing:border-box;overflow:hidden;box-shadow:0 8px 24px rgba(2,6,23,0.25)}
.testimonial{display:flex;flex-direction:column;flex:0 0 min(320px, 36vw);min-width:260px;max-width:520px;padding:18px;border-radius:12px;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);box-sizing:border-box;overflow:hidden;box-shadow:var(--shadow-sm)}
.testimonial .testimonial-text{font-style:italic;font-weight:600}
.hero-trust{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:16px;flex-wrap:wrap}
.hero-trust .badge{background:var(--card);color:var(--white);padding:10px 12px;border-radius:12px;border:1px solid rgba(11,17,32,0.04);display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;box-shadow:0 8px 24px rgba(2,6,23,0.06);transition:transform .18s ease, box-shadow .18s ease}
.hero-trust .badge svg,.hero-trust .badge img{width:20px;height:20px;flex:0 0 20px}
.hero-trust .badge-payment .payment-logo{width:22px;height:auto;border-radius:4px;object-fit:contain}
.hero-trust .badge:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(2,6,23,0.08)}
@media (max-width:480px){
  .hero-trust{gap:8px}
  .hero-trust .badge{padding:8px 10px;font-size:13px}
}
.hero-trust-count{font-size:16px;color:var(--muted);}
.hero-trust-count strong{color:var(--accent-2);font-weight:900;font-size:18px}
.payment-logo, .payment-logo svg, .payment-logo img{height:14px;width:auto;display:inline-block;vertical-align:middle}
.badge-payment{display:inline-flex;align-items:center;gap:8px}
.product-right .key-benefits{display:flex;flex-direction:column;gap:8px;margin:8px 0 14px}
.product-right .key-benefits li{font-weight:600;color:var(--muted);font-size:14px}

/* Sticky mobile CTA for product pages */
.sticky-buy{position:fixed;left:12px;right:12px;bottom:calc(18px + env(safe-area-inset-bottom, 0px));background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:12px 16px;border-radius:12px;color:white;box-shadow:var(--shadow-md);display:none;z-index:80;transition:transform 220ms ease, opacity 220ms ease;will-change:transform,opacity}
@media (max-width:700px){.sticky-buy{display:flex;align-items:center;justify-content:center}} 
.sticky-buy.sticky-buy--hidden{transform:translateY(120%);opacity:0;pointer-events:none;visibility:hidden}
.testimonial-text{font-weight:600;color:var(--white);margin-bottom:8px;white-space:normal;overflow-wrap:break-word;word-break:break-word;line-height:1.35;flex:1}
.testimonial-text.clamped{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-clamp:5}
.testimonial-meta{font-size:13px;color:var(--muted);margin-top:10px;flex-shrink:0}

/* marquee animation - move track from 0 to -50% so that duplicated testimonials loop */
.testimonials-track{animation:marquee var(--marquee-duration, 90s) linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* reduced motion - turn off animation */
@media (prefers-reduced-motion: reduce){
  .testimonials-track{animation:none}
}

@media (prefers-reduced-motion: reduce){
  .tier-card--exclusive::before, .tier-card--exclusive .tier-title::after, .tier-card--exclusive{animation:none!important;transform:none!important}
}
/* Do not pause marquee on hover — keep testimonials moving even on hover */
/* (Accessibility: users with prefers-reduced-motion have animation disabled) */

/* Prevent the generic .card:hover transform from affecting the testimonials container */
.testimonials.card,
.testimonials.card:hover,
.testimonials.card:focus,
.testimonials.card:active{
  transform: none !important;
  box-shadow: 0 8px 24px rgba(2,6,23,0.25) !important;
}

/* Responsive: allow testimonials to be full-width on narrow screens and reduce animation duration */
@media (max-width:700px){
  .testimonials-track{gap:12px}
  .testimonial{flex:0 0 calc(100% - 32px);min-width:100%;max-width:100%}
  .testimonials-track{animation-duration:var(--marquee-duration, 90s)}
}

/* On very large screens, make sure all three show on one row without stretching too wide */
/* Desktop grid layout: always show 3 columns at >= 900px to fit 3 cards side-by-side */
@media (min-width:900px){
  .tier-row{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;align-items:start;grid-auto-rows:1fr}
  .tier-card{flex:unset;max-width:none;width:100%;height:100%;align-self:start}
  /* Exclusive should not change the column width but emphasize visually */
  .tier-card--exclusive{z-index:6;transform:scale(1.04);transform-origin:center top; /* float animation disabled - we keep gentle scale, glow and hover effect */ }
  /* Increase card image size on desktop for stronger visual */
  .tier-card .card-media{height:220px}
  .tier-card .card-media img{max-width:220px;max-height:220px}
  .tier-card--exclusive::before{
    content:'';position:absolute;left:-60%;top:-20%;width:60%;height:140%;background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 60%, rgba(255,255,255,0) 100%);transform:skewX(-20deg);pointer-events:none;mix-blend-mode:screen;opacity:0.18;animation:exclusive-shine 18s linear infinite}
  .tier-card--exclusive .tier-title{position:relative}
  .tier-card--exclusive .tier-title::after{content:'';position:absolute;left:-120%;top:0;height:100%;width:100%;transform:skewX(-20deg);background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,244,204,0.25) 45%, rgba(255,255,255,0) 55%);mix-blend-mode:overlay;opacity:0.45;animation:exclusive-text-shine 18s linear infinite}
  /* place products explicitly into columns to avoid DOM-order layout issues */
  /* explicit placement with higher specificity to override possible conflicts */
  .tier-row > .tier-card[data-id="standard"]{grid-column:1 !important; grid-row:1 !important; align-self:start !important}
  .tier-row > .tier-card[data-id="exclusive"]{grid-column:2 !important; grid-row:1 !important; justify-self:center !important; align-self:start !important}
  .tier-row > .tier-card[data-id="premium"]{grid-column:3 !important; grid-row:1 !important; align-self:start !important}
  /* On hover, exclusive should scale up further (bigger than the normal card hover) */
  .tier-card--exclusive:hover, .tier-card--exclusive:focus{ transform: translateY(-6px) scale(1.08); box-shadow: 0 48px 120px rgba(212,160,23,0.2);} 
}
/* Debug outlines for grid placement - add class `debug-grid` to body in devtools to inspect */
@media (min-width:900px){
  body.debug-grid .tier-row > .tier-card[data-id="standard"]{outline:2px dashed rgba(0,255,128,0.5)}
  body.debug-grid .tier-row > .tier-card[data-id="exclusive"]{outline:2px dashed rgba(255,204,51,0.5)}
  body.debug-grid .tier-row > .tier-card[data-id="premium"]{outline:2px dashed rgba(24,144,255,0.5)}
}

/* Disable hover scaling for testimonials so text doesn't overflow or overlap */
.testimonials .testimonial:hover,
.testimonials:hover .testimonial{ transform: none !important; box-shadow: 0 8px 24px rgba(2,6,23,0.25) !important;}

/* Enable a subtle enlarge (focus-friendly) on product tier cards (non-exclusive) on desktop */
@media (min-width:700px){
  .tier-card:hover, .tier-card:focus{ transform: translateY(-6px) scale(1.03); box-shadow: 0 28px 80px rgba(2,6,23,0.28); }
}

@media (max-width:900px){
  .tier-row{gap:16px}
  .tier-card{flex:0 1 calc(50% - 16px)}
  /* On small screens don't animate / scale exclusive so it doesn't overlay neighbors */
  .tier-card--exclusive{transform:none!important;animation:none!important}
  .tier-card--exclusive.focus{animation:none!important}
  .tier-card .badge{font-size:12px;padding:6px 8px}
  /* ensure the exclusive image doesn't translate on small screens */
  .tier-card--exclusive img{transform:none}
}
  /* (z-index already applied in desktop media query) */
@media (max-width:600px){
  /* switch to a 2-column grid to allow equal heights and proper center placement */
  .tier-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:stretch}
  .tier-card{flex:unset;width:auto}
  /* Place exclusive product first and full width (spans both columns) */
  .tier-card[data-id="exclusive"]{order:-1;grid-column:1 / -1;z-index:4;justify-self:center;max-width:860px;margin-left:auto;margin-right:auto;box-sizing:border-box;width:100%}
  /* Reduce size for other cards so they share a row below exclusive */
  .tier-card[data-id="premium"], .tier-card[data-id="standard"]{order:0}
  /* Make exclusive visually larger */
  .tier-card[data-id="exclusive"] .card-media{height:220px}
  .tier-card:not([data-id="exclusive"]) .card-media{height:140px}
  /* Ensure non-exclusive cards have the same height and buttons align at the bottom */
  .tier-row{align-items:stretch}
  .tier-card{display:flex;flex-direction:column;height:100%}
  .tier-card .card-actions{margin-top:auto}
  .tier-row{gap:12px}
  /* Reduce card media height slightly so images remain visible and not cropped */
  .tier-card .card-media{height:140px}
  /* Make product images fill the media area while keeping full image visible */
  .tier-card .card-media img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;padding:8px;box-sizing:border-box}
}
.admin-header{display:flex;justify-content:space-between;align-items:center}
.admin-panel .admin-header {gap:12px}
.admin-table input[type="checkbox"]{transform:scale(1.1);margin-right:6px}
.admin-panel form#bulkForm select{min-width:170px}
.admin-table{width:100%;border-collapse:collapse;margin-top:12px}
.admin-table td,.admin-table th{padding:10px;border-bottom:1px solid rgba(255,255,255,0.03)}
/* Fulfilled (shipped) row highlight */
.admin-table tr.fulfilled td{background:linear-gradient(90deg, rgba(16,185,129,0.06), rgba(16,185,129,0.04));}
.thumb img{width:64px;height:48px;object-fit:cover}
.auth-card,.admin-form{max-width:640px;margin:26px auto;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:26px;padding:18px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.004));border:1px solid rgba(255,255,255,0.03);box-shadow:0 12px 36px rgba(2,6,23,0.06);position:relative}

/* How it works panel (placeholder for graphic) */
.how-it-works{margin-top:18px}
.how-it-works .how-it-works-inner{display:flex;align-items:center;justify-content:center;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));border:1px solid rgba(255,255,255,0.03);box-shadow:0 8px 30px rgba(2,6,23,0.06);min-height:220px}
.how-it-works .how-it-works-inner img{max-width:100%;height:auto;display:block;object-fit:contain;opacity:0.95}
/* Demo QR panel background: subtle dark translucent layer for readability */
.how-it-works .demo-qr{
  padding:14px; 
  /* make the panel substantially darker so background shows only faintly */
  background: rgba(6,10,14,0.86); /* deep translucent for contrast */
  border-radius:12px; 
  border: 1px solid rgba(255,255,255,0.02);
  display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 10px 30px rgba(2,6,23,0.25);
  color: var(--white);
  backdrop-filter: blur(6px);
}
.how-it-works .demo-qr .muted{color:rgba(255,255,255,0.64);font-size:12px}
.how-it-works .demo-qr .btn, .how-it-works .demo-qr .btn-white{box-shadow:0 10px 32px rgba(0,0,0,0.25)}
@media (max-width:700px){
  .how-it-works .demo-qr{padding:10px;background:rgba(6,10,14,0.74);box-shadow:0 6px 18px rgba(2,6,23,0.12)}
}

/* Full width instructional banner under products */
.page-banner{position:relative;inset:0;display:block;width:100%;overflow:hidden;z-index:2;margin-top:26px;border-radius:12px;padding:30px; opacity:0.9}
.page-banner .banner-img{display:block;width:100%;height:420px;object-fit:cover}
.page-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.08));pointer-events:none}
@media (max-width:900px){
  .page-banner .banner-img{height:320px}
}
@media (max-width:700px){
  .page-banner .banner-img{height:240px}
}

@media (max-width:700px){
  .how-it-works .how-it-works-inner{padding:12px;min-height:160px}
}
/* Removed decorative gradient stripe from features — replaced by a slower shimmer effect below */
.feature{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.04);opacity:0;transform:translateY(12px) scale(0.96);transition:transform 420ms cubic-bezier(.22,.9,.32,1), opacity 420ms ease-out, box-shadow .28s ease;will-change:transform,opacity,box-shadow}
.feature-icon{width:56px;height:56px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 8px 30px rgba(16,24,36,0.08);background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012));border:1px solid rgba(255,255,255,0.02)}
.feature h4{margin:8px 0 8px;font-size:18px}
.feature .muted{color:var(--muted)}
.feature:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px rgba(2,6,23,0.35)}
.feature:focus-within{outline:3px solid rgba(255,215,0,0.06);outline-offset:8px}
@media (prefers-reduced-motion: reduce){
  .feature:hover{transform:none;box-shadow:0 8px 24px rgba(2,6,23,0.25)}
  /* Turn off reveal animations for users who prefer reduced motion */
  .features .feature{transition:none!important;transform:none!important;opacity:1!important}
}

/* per-feature icon color accents */
.features .feature:nth-child(1) .feature-icon{background:linear-gradient(135deg, rgba(255, 215, 122, 0.12), rgba(255, 184, 107, 0.06));color:var(--accent-2);border-color:rgba(255,215,122,0.1)}
/* security & process: use class selectors instead of nth-child for future-proofing */
.feature-icon--security{background:linear-gradient(135deg, rgba(14, 156, 255, 0.08), rgba(19, 102, 214, 0.06));color:#5fc1ff;border-color:rgba(19,102,214,0.08)}
.feature-icon--process{background:linear-gradient(135deg, rgba(124, 218, 179, 0.06), rgba(20, 160, 120, 0.04));color:#10a37f;border-color:rgba(20,160,120,0.06)}
/* Make process (checkmark) icon slightly larger to match sample */
/* default icon sizes */
.features .feature svg{width:24px;height:24px;display:block}
.feature-icon--security svg{width:36px;height:36px;}
.feature-icon--security svg path{vector-effect:non-scaling-stroke}
.feature-icon--process svg{width:30px;height:30px;transform:translateY(0);}
/* Polish flag inside feature icon */
.feature-icon--flag svg{width:34px;height:22px;border-radius:4px;display:block}
.feature-icon--flag{background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}
.feature-icon--flag svg rect{shape-rendering:crispEdges}
.feature-icon--flag svg rect[fill="#e31b23"]{filter: drop-shadow(0 1px 0 rgba(0,0,0,0.03));}

/* Camera feature icon styling */
.feature-icon--camera svg{width:34px;height:34px;display:block}
.feature-icon--camera{background:linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}
.feature-icon--process svg circle{fill:none}
.feature-icon--process svg path{vector-effect:non-scaling-stroke}
/* Security icon - make slightly wider to avoid a flattened look */
/* removed nth-child overrides; use class-specific sizing instead */
.feature.visible{opacity:1;transform:translateY(0) scale(1)}
.features .feature:nth-child(1){transition-delay:0s}
.features .feature:nth-child(2){transition-delay:0.08s}
.features .feature:nth-child(3){transition-delay:0.16s}
.features .feature:nth-child(4){transition-delay:0.24s}
.features .feature:nth-child(5){transition-delay:0.32s}
.features .feature:nth-child(6){transition-delay:0.40s}
/* If a navigation happened via category/pagination/sort, disable reveal animations so the user stays put */
.disable-reveal .feature {
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Temporarily disable smooth native scrolling when restoring position so it happens instantly */
html.disable-reveal { scroll-behavior: auto !important; }
/* When disable-reveal is active, stop demo-specific animations and remove confetti/glint */
html.disable-reveal .demo-glint::before{animation:none !important;opacity:0 !important}
html.disable-reveal .confetti{display:none !important}
html.disable-reveal .demo-card h1, html.disable-reveal .demo-card .demo-date, html.disable-reveal .demo-card .demo-subtitle{animation:none !important;transform:none !important;opacity:1 !important}
html.disable-reveal .demo-card .muted{opacity:1 !important}
html.disable-reveal .demo-card .btn, html.disable-reveal .btn, html.disable-reveal .btn-primary{transition:none !important}
/* testimonials removed - styles kept for reference but not used */
/* Shipping card flag animation */
.shipping-card{display:flex;align-items:center;gap:12px}
.shipping-card .flag{width:36px;height:22px;border-radius:4px;display:inline-block;position:relative;overflow:hidden;border:1px solid rgba(11,17,32,0.04);box-shadow:0 1px 0 rgba(0,0,0,0.06);background:transparent}
.shipping-card strong{display:inline-flex;align-items:center;gap:8px}
/* Two stripes implemented with pseudo-elements ensure crisp separation and no bleed-through when animating */
.shipping-card .flag::before,
.shipping-card .flag::after{content:'';position:absolute;left:0;right:0;width:100%;backface-visibility:hidden}
.shipping-card .flag::before{top:0;height:52%;background:#ffffff;z-index:2}
.shipping-card .flag::after{bottom:0;height:52%;background:#e31b23;z-index:1}
/* subtle wave animations on each stripe, slightly phase-shifted to emulate real waving */
@keyframes flag-wave-top{0%{transform:translateX(0) skewX(0)}25%{transform:translateX(2px) skewX(-3deg)}50%{transform:translateX(0) skewX(0)}75%{transform:translateX(-1px) skewX(2deg)}100%{transform:translateX(0) skewX(0)}}
@keyframes flag-wave-bottom{0%{transform:translateX(0) skewX(0)}25%{transform:translateX(1px) skewX(2deg)}50%{transform:translateX(0) skewX(0)}75%{transform:translateX(-2px) skewX(-2.5deg)}100%{transform:translateX(0) skewX(0)}}
.shipping-card .flag::before{animation:flag-wave-top 2200ms ease-in-out infinite;transform-origin:50% 50%;will-change:transform}
.shipping-card .flag::after{animation:flag-wave-bottom 2400ms ease-in-out infinite;transform-origin:50% 50%;will-change:transform}
@media (prefers-reduced-motion: reduce){
  .shipping-card .flag::before, .shipping-card .flag::after{animation:none}
}

/* Note: old "testimonials removed" rules removed so testimonials are visible again */
.testimonials .testimonial{display:inline-block}
/* newsletter styles removed - newsletter no longer used. Keep styles commented out for future reference */
/* .newsletter{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.newsletter input{flex:1;min-width:200px}
.newsletter button{padding:10px 14px;border-radius:8px} */

label{display:block;margin-bottom:12px;color:var(--muted)}
.input-with-icon input::placeholder, .input-with-icon textarea::placeholder{color:rgba(255,255,255,0.55)}

/* Buy page: use black placeholders for inputs to improve readability */
.buy-page .input-with-icon input::placeholder,
.buy-page .input-with-icon textarea::placeholder,
.buy-page input::placeholder, .buy-page textarea::placeholder {
  color: rgba(0,0,0,0.85);
  opacity: 1;
}
/* vendor-prefixed placeholders */
.buy-page .input-with-icon input::-webkit-input-placeholder,
.buy-page .input-with-icon textarea::-webkit-input-placeholder {
  color: rgba(0,0,0,0.85);
}
.buy-page .input-with-icon input::-moz-placeholder,
.buy-page .input-with-icon textarea::-moz-placeholder {
  color: rgba(0,0,0,0.85);
}
.buy-page .input-with-icon input:-ms-input-placeholder,
.buy-page .input-with-icon textarea:-ms-input-placeholder {
  color: rgba(0,0,0,0.85);
}
input[type=text], input[type=password], input[type=email], input[type=number], textarea{width:100%;padding:8px;margin-top:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.02);color:var(--white)}

/* subtle label spacing and input group styling */
.input-with-icon .icon-right { position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); }
.input-with-icon { padding-top:4px; padding-bottom:8px; }
.card--section .muted{ color:var(--muted); }
.bg-preview-grid{display:flex;gap:12px;align-items:center}
.bg-preview-grid .bg-thumb{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);background:rgba(255,255,255,0.01);cursor:pointer;transition:box-shadow 160ms ease, transform 120ms ease}
.bg-preview-grid .bg-thumb img{max-width:120px;border-radius:8px;display:block;object-fit:cover}
.bg-preview-grid .bg-thumb input[type=radio]{display:none}
.bg-preview-grid .bg-thumb input[type=radio]:checked + img{box-shadow:0 18px 40px rgba(99,91,255,0.06);border:2px solid rgba(99,91,255,0.18)}
.bg-preview-grid .bg-thumb:hover{transform:translateY(-4px);box-shadow:0 18px 30px rgba(2,6,23,0.06)}

/* Buy form layout */
.buy-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start;margin-top:14px}
.buy-form .card--section{padding:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);border-radius:12px}
.buy-summary .card--section{padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);border-radius:12px;position:sticky;top:90px}
.buy-summary .product-image{max-width:80px;border-radius:8px;overflow:hidden;display:block;margin-bottom:10px}
.buy-summary .price{font-size:20px;color:var(--accent-2-strong);font-weight:800;margin-bottom:8px}
.buy-summary .muted{color:var(--muted)}
.buy-summary .btn-primary{width:100%;padding:12px 16px;border-radius:10px;font-size:16px}

/* Input visual improvements for better contrast */
.input-with-icon input[type="text"], .input-with-icon textarea, input[type=text], textarea{background:rgba(15,98,254,0.06);border:1px solid rgba(255,255,255,0.06);}
.input-with-icon input::placeholder, textarea::placeholder{color:rgba(255,255,255,0.5)}
.input-with-icon label{display:block;color:var(--muted);font-weight:600;margin-bottom:6px}

@media (max-width:900px){
  .buy-grid{grid-template-columns:1fr}
  .buy-summary{order:2}
}
.form-actions{display:flex;gap:8px;align-items:center}
.error{background:#4b0000;padding:8px;border-radius:6px;color:#ffdede;margin-bottom:12px}
.empty{color:var(--muted);text-align:center;padding:30px}
.columns{display:flex;gap:20px;align-items:flex-start}
.sidebar{width:260px}
.side-card{background:var(--glass);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.side-card .btn{padding:6px 8px;font-size:13px;white-space:normal}
.side-card .btn-primary{padding:6px 8px;}
.side-card h5{margin:0 0 8px}
.side-list{list-style:none;padding:0;margin:0}
.side-list li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.02);font-size:14px}
.maincol{flex:1}
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:28px 0;margin-top:32px;color:var(--muted);position:relative;z-index:1}
/* Ensure site-footer on mobile has enough bottom padding so sticky buttons don't cover content */
@media (max-width:700px){
  .site-footer{padding-bottom:calc(28px + 64px + env(safe-area-inset-bottom, 0px));}
}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--accent-2)}
.site-footer a:focus,
.site-footer a:focus-visible{ color: var(--accent); outline: none; text-decoration: underline; }
.site-footer .container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.muted{color:var(--muted)}

/* Demo page styles */
.demo-page .demo-card{max-width:920px;margin:20px auto;padding:18px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);box-shadow:0 20px 60px rgba(0,0,0,0.5);overflow:hidden}
.demo-page .demo-card h1{font-size:26px;margin:0 0 8px;text-align:center}
.demo-page .demo-card h1{color:#111;text-shadow:none}
.demo-page .demo-date{font-size:18px;color:#111;opacity:0.95}
.demo-page .demo-subtitle{font-size:16px;color:rgba(17,17,17,0.95);opacity:0.95;margin-top:8px}
.demo-page .demo-card .demo-sub{color:var(--muted);font-size:14px;margin-bottom:12px}
.demo-page .demo-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.demo-page .demo-qr{display:flex;flex-direction:column;align-items:center}
.demo-page .demo-qr img{width:132px;height:132px;border-radius:6px;padding:8px;background:#fff;margin-bottom:8px}
.demo-page .demo-upload{display:flex;gap:8px;align-items:center}
.demo-page .demo-upload input[type=file]{opacity:0.9;border-radius:8px;padding:6px;background:var(--card);color:var(--white);outline:none;cursor:not-allowed;border:1px solid rgba(255,255,255,0.04)}
.demo-page .demo-upload .btn-primary{opacity:0.95;pointer-events:none}
/* Ensure CTA is visible */
.demo-card .btn-primary, .demo-page .btn-primary {background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;opacity:1;border:none;background-clip:padding-box;-webkit-background-clip:padding-box;background-origin:padding-box;border-radius:12px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,0.07);padding:12px 20px;transform:translateY(-3px);position:relative;z-index:6}

/* Make demo-specific primary buttons more visible: darker shadow and slightly larger */
.demo-page .demo-card .btn-primary{box-shadow:0 12px 34px rgba(0,0,0,0.12);border:none}
/* Keep demo buttons visually identical on hover */
.demo-page .btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.09)}

/* back button styling inside demo */
.demo-back{color:#111;border:1px solid rgba(0,0,0,0.06);background:transparent;border-radius:8px;padding:8px 10px;font-weight:700;text-decoration:none;display:inline-block;position:relative;z-index:6}
.demo-back:hover{background:rgba(0,0,0,0.02)}
.demo-back:focus{outline:3px solid rgba(17,17,17,0.06);outline-offset:2px}
.demo-page .demo-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px}
.demo-page .demo-gallery img{width:100%;height:120px;object-fit:cover;border-radius:10px}
.demo-page .demo-gallery a{position:relative;display:block;overflow:hidden;border-radius:10px}
.demo-page .demo-gallery .image-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.18) 70%);opacity:0;transition:opacity .18s ease;border-radius:10px}
.demo-page .demo-gallery .image-wrap:hover::after{opacity:1}
.demo-page .demo-gallery .overlay-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;pointer-events:none}
.demo-page .demo-gallery .image-wrap:hover .overlay-icons{opacity:1;pointer-events:auto}
.overlay-icons .icon-btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;padding:8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}
.demo-page .demo-gallery .image-wrap:hover img{transform:scale(1.03);box-shadow:var(--shadow-md)}

/* Hide overlay open/download icons on desktop (not needed on large screens) */
@media (min-width:900px){
  .demo-page .demo-gallery .overlay-icons{display:none !important}
}

/* Show overlay icons directly on touch/small screens for easier access */
@media (max-width:899px){
  .demo-page .demo-gallery .overlay-icons{display:flex !important; opacity:1; pointer-events:auto}
}
.gallery-actions .btn{padding:8px 10px;border-radius:8px;font-weight:700}
.gallery-actions .btn{border:1px solid rgba(0,0,0,0.06);background:transparent;color:#111}
.gallery-actions .btn, .gallery-actions .btn-primary{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;box-sizing:border-box;height:40px;min-height:40px}
.gallery-actions .btn:hover{background:rgba(0,0,0,0.02);transform:translateY(-2px)}
.gallery-actions .btn-primary{padding:8px 12px;border-radius:8px;padding:8px 12px;transform:none}
.gallery-actions .btn .icon{display:inline-flex;align-items:center;justify-content:center;margin-right:8px}
.gallery-actions .btn .icon svg{width:16px;height:16px;display:block}
.btn .icon{display:inline-flex;align-items:center;margin-right:8px}
.btn .icon svg{width:18px;height:18px}
.demo-page .demo-content .btn-primary .icon{display:inline-flex;align-items:center;margin-right:8px}
.demo-page .demo-content .btn-primary .icon svg{width:18px;height:18px}
.gallery-actions .btn span{line-height:1;display:inline-flex;align-items:center;transform:translateY(0)}
/* Blue share button */
.gallery-actions .btn.share{color:#0f62fe;border:1px solid rgba(15,98,254,0.12);background:linear-gradient(180deg, rgba(15,98,254,0.06), rgba(15,98,254,0.02));padding:8px 12px}
.gallery-actions .btn.share:hover{background:linear-gradient(180deg, rgba(15,98,254,0.12), rgba(15,98,254,0.06));transform:translateY(-2px)}
.gallery-actions .btn.share:focus{outline:3px solid rgba(15,98,254,0.12);outline-offset:2px}
.gallery-actions .btn-primary.download .icon svg,
.gallery-actions .download .icon svg{fill:#fff; color:#fff; stroke:#fff}
.gallery-actions .btn.share .icon svg{fill:currentColor; stroke: currentColor}

/* Download button color (distinct from primary gradient) */
.gallery-actions .btn-primary.download{background:linear-gradient(90deg,#16a34a,#059669);color:#fff;border:none;box-shadow:0 8px 28px rgba(5,150,105,0.12);}
.gallery-actions .btn-primary.download:hover{transform:translateY(-2px);box-shadow:0 12px 38px rgba(5,150,105,0.14)}
.gallery-actions .btn-primary.download:focus{outline:3px solid rgba(16,185,129,0.12);outline-offset:2px}
.demo-page .demo-note{color:var(--muted);font-size:13px;margin-top:8px;text-align:center}
.demo-page .demo-content{display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Make demo upload button visually clickable (pointer, hover, focus) while the action remains blocked in demo */
.demo-page .demo-content .btn-primary{opacity:1;pointer-events:auto;cursor:pointer}

/* Toast for demo actions */
.demo-toast{position:fixed;left:50%;transform:translateX(-50%) translateY(12px);bottom:20px;background:rgba(27,27,27,0.94);color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,0.4);z-index:10000;opacity:0;transition:transform .24s ease, opacity .26s ease}
.demo-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.demo-page .event-info{color:var(--white); /* keep var to reflect design, but adjust fallback if needed */ text-shadow:none}
.demo-page .event-info .muted{color:rgba(34,34,34,0.66)}
/* Demo hero background and overlay */
.demo-hero{position:relative}
.demo-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.02));pointer-events:none;border-radius:0;z-index:0}
.demo-page .demo-card .demo-subtitle.muted{ color: #000 !important }
/* add a subtle overlay inside the card when it uses a background image */
.demo-card::before{content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.10));opacity:0;transition:opacity .22s ease;pointer-events:none;z-index:1}
.demo-card.card{position:relative;z-index:2}
.demo-page .demo-card[style*='background']::before{opacity:1}

/* Enforce only Light UI on demo */
.demo-card::before{background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.10));}
.demo-card h1{color:#000 !important;text-shadow:none;font-weight:800}
.demo-date{color:#000 !important;font-weight:700}
.demo-subtitle{color:#000 !important}
.demo-note{color:var(--muted) !important}
.demo-card .muted{color:rgba(0,0,0,0.75) !important}

/* Ensure all text inside the demo card uses strong, black color by default so nothing looks washed out */
.demo-card, .demo-card p, .demo-card h1, .demo-card h2, .demo-card h3, .demo-card h4, .demo-card h5, .demo-card h6, .demo-card li, .demo-card a, .demo-card span { color: #000 !important }
/* Keep demo-note in muted color to preserve its informational tone */
.demo-card .demo-note{color:var(--muted) !important}

/* Final overrides to ensure demo page texts are black (except demo-note) */
.demo-page .demo-card h1,
.demo-page .demo-card .demo-date,
.demo-page .demo-card .demo-subtitle,
.demo-page .demo-card p { color: #000 !important }

.demo-page .demo-card .demo-subtitle.muted{ color: #000 !important }

.demo-page .demo-card .demo-note{ color: var(--muted) !important }

/* Shine / glint effect for headline */
.demo-glint{position:relative;display:inline-block;overflow:hidden}
.demo-glint::before{content:'';position:absolute;left:-140%;top:-20%;bottom:-20%;width:320%;background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 48%, rgba(255,255,255,0.0) 55%);transform:skewX(-20deg) translateX(0);mix-blend-mode:screen;opacity:0.7;pointer-events:none;animation:glintMove 7s linear infinite;z-index:3}
@keyframes glintMove{0%{transform:skewX(-20deg) translateX(-140%)}50%{transform:skewX(-20deg) translateX(40%)}100%{transform:skewX(-20deg) translateX(140%)}}

/* Stronger specificity and fill fallback for demo text to ensure pure black on all browsers */
.demo-page .demo-hero .demo-card h1,
.demo-page .demo-hero .demo-card .demo-date,
.demo-page .demo-hero .demo-card .demo-subtitle {
  color: #000 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #000 !important;
  text-shadow: none !important;
}

.demo-page .demo-hero .demo-card .demo-note { color: var(--muted) !important; opacity: 1 !important }

/* In demo, prevent cards from resizing on hover to avoid visual shift */
.demo-page .card{transition:box-shadow .18s ease, border-color .18s ease;}
.demo-page .card:hover{transform:none!important;box-shadow:0 10px 30px rgba(0,0,0,0.06)!important}

/* but allow gallery images to scale a bit */
.demo-page .demo-gallery img{transition:transform .18s ease, box-shadow .18s ease}
.demo-page .demo-gallery img:hover{transform:scale(1.04); box-shadow:0 10px 26px rgba(0,0,0,0.08)}

/* Demo headline and subtitle animations */
@keyframes demoTextIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.demo-card h1{ animation: demoTextIn 700ms cubic-bezier(.2,.9,.2,1) 0.12s both }
.demo-card .demo-date{ animation: demoTextIn 700ms cubic-bezier(.2,.9,.2,1) 0.18s both }
.demo-card .demo-subtitle{ animation: demoTextIn 700ms cubic-bezier(.2,.9,.2,1) 0.24s both }

/* Gallery should blend into hero when using the same background (demo) */
.demo-gallery-section{ padding:0; margin-top:0 }
.demo-gallery-section .card{ background:transparent !important; border:none !important; box-shadow:none !important; padding:10px 14px 18px 14px }
.demo-gallery-section .card .muted, .demo-gallery-section .card a, .demo-gallery-section .card h3, .demo-gallery-section .card .btn{ color:#0b1220 !important }
.demo-gallery-section .demo-gallery{ padding-top:6px }
/* Guest page gallery: smaller tiled thumbnails and pagination (upgraded visuals) */
.demo-gallery.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:center;justify-items:center;margin-top:18px}
.demo-gallery.gallery .demo-gallery-item{width:100%;height:110px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.demo-gallery.gallery img{width:100%;height:100%;object-fit:cover;display:block}

/* Pagination - nicer visual style */
.pagination{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:18px}
.pagination a, .pagination span{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;background:transparent;color:var(--muted);text-decoration:none;border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease, box-shadow .18s ease, background .18s}
.pagination .page-number{min-width:40px}
.pagination .page-number.active{background:linear-gradient(90deg,#0f62fe,#0b53d6);color:#fff;font-weight:800;border:none;box-shadow:0 14px 40px rgba(11,82,255,0.12)}
.pagination .page-number:hover,.pagination .page-prev:hover,.pagination .page-next:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(2,6,23,0.06)}
.pagination .page-prev,.pagination .page-next{font-weight:700;color:var(--muted);display:inline-flex;padding:6px 10px;background:rgba(255,255,255,0.02);border-radius:8px;border:1px solid rgba(255,255,255,0.03)}
.pagination .page-prev::before{content:'‹';margin-right:8px;opacity:0.95}
.pagination .page-next::after{content:'›';margin-left:8px;opacity:0.95}
.pagination .page-prev.disabled, .pagination .page-next.disabled{color:var(--muted);opacity:0.38;pointer-events:none;transform:none;box-shadow:none}
@media (max-width:900px){.demo-gallery.gallery{grid-template-columns:repeat(3,1fr)}.demo-gallery.gallery .demo-gallery-item{height:100px}}
@media (max-width:480px){.demo-gallery.gallery{grid-template-columns:repeat(2,1fr)}}

@media (max-width:900px){
  .demo-gallery-section{ margin-top:0 }
}

/* Desktop: lock the background to the viewport center so hero and gallery share the same visual alignment */
@media (min-width:900px){
  .demo-hero, .demo-gallery-section, .demo-card{ background-attachment: fixed; background-position:center center !important }
}

/* Add a subtle pop + scale on title for a lively entrance */
@keyframes demoTitlePop { 0%{transform:translateY(12px) scale(.98); opacity:0} 60%{transform:translateY(-6px) scale(1.03); opacity:1} 100%{transform:none; scale:1} }
.demo-card h1{ animation: demoTitlePop 900ms cubic-bezier(.2,.9,.2,1) 0.08s both }

/* Confetti pieces */
.confetti{position:absolute;z-index:9999;pointer-events:none;opacity:0.95;will-change:transform,opacity}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg) } 100%{transform:translateY(90vh) rotate(360deg); opacity:0.9}}
@keyframes confettiSwing{0%{transform:translateX(0)}50%{transform:translateX(30px)}100%{transform:translateX(0)}}
.demo-hero-inner{position:relative;z-index:3;padding:40px 0}
.demo-page .hero-decor{display:none !important}
.event-info ul{padding-left:18px;margin-top:8px}
.event-info li{margin-bottom:6px}
.demo-card .muted{color:var(--muted)}
@media (max-width:700px){
  .demo-page .demo-card{padding:14px}
  .demo-page .demo-qr img{width:110px;height:110px}
}

/* Visibility and overrides */
/* remove theme selectors - using light styles only */

/* Make sure demo-note is readable */
.demo-page .demo-note{opacity:1;font-weight:600}

/* Force the main demo text (title/date/subtitle) to full black regardless of `muted` class */
.demo-page .demo-card h1,
.demo-page .demo-card .demo-date,
.demo-page .demo-card .demo-subtitle,
.demo-page .demo-card h2,
.demo-page .demo-card h3,
.demo-page .demo-card p { color: #000 !important }

/* Keep info note muted */
.demo-page .demo-card .demo-note{color:var(--muted) !important}

/* Contact page email link color: uses var(--white) which in the light theme is the darker text color */
.contact-email{color:var(--white);text-decoration:underline;font-weight:600}
.contact-email:hover, .contact-email:focus{opacity:0.9}
@media (max-width:700px){
  .product-single{flex-direction:column}
  .hero h1{font-size:34px}
  .hero p{font-size:16px}
  .container{padding:16px}
  .hero{padding:28px 16px}
  /* make newsletter stack on mobile */
  .newsletter{flex-direction:column;align-items:stretch}
  .newsletter input{width:100%}
  /* reduce header padding for small screens */
  .site-header .container{padding:12px}
  /* touch-friendly nav links */
  .topnav.open a{padding:10px 12px}
  /* slightly larger touch targets for buttons on mobile */
  .btn, .btn-primary, .btn-muted, .btn-danger { padding:10px 14px }
}
@media (max-width:700px){
  /* Stack hero content vertically and center it on small screens */
  .hero-inner{flex-direction:column;align-items:center}
  .hero-content{align-items:center;text-align:center}
  .hero-actions{justify-content:center}
  .hero-actions .hero-count{margin-left:0}
  .hero-body{flex-direction:column}
  .hero-logo img{width:64px;height:64px;margin-top:12px}
  /* mobile: make the exclusive tier appear first */
  .tier-card[data-id="exclusive"]{order:-1}
  /* layout: sidebar stack */
  .columns{flex-direction:column}
  .sidebar{width:100%}
  .maincol{width:100%}
  /* spacing for side-card and main column */
  .side-card{margin-bottom:12px}
  /* Make any CTA button groups inside card bodies stack on mobile to avoid overlap */
  .card-body > div a.btn, .card-body > div a.btn-primary{display:block; width:100%; box-sizing:border-box; margin:6px 0}
  /* admin table: allow horizontal scroll */
  .admin-table-wrapper{overflow:auto;-webkit-overflow-scrolling:touch}
  .admin-table{width:100%;}
  /* Admin modal */
  .admin-modal { display:none; position:fixed; inset:0; z-index:4000; align-items:center; justify-content:center; padding:24px }
  .admin-modal .admin-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(2px) }
  .admin-modal .admin-modal-inner { position:relative; max-width:900px; width:100%; margin:0 auto; background:var(--card); border-radius:12px; box-shadow:var(--shadow-lg); padding:18px; z-index:4001; color:var(--white) }
  .admin-modal .admin-modal-inner pre { white-space:pre-wrap; background:transparent; border-radius:8px }
  .admin-modal .admin-modal-close { position:absolute; right:12px; top:12px }

  /* Mobile: features scale-in on reveal for better attention on small screens */
  .features .feature{opacity:0; transform:scale(.86); transform-origin:center center; transition:transform 420ms cubic-bezier(.22,.9,.32,.99), opacity 420ms ease-out; will-change:transform, opacity}
  .features .feature.visible{opacity:1; transform:scale(1);}
}

/* For gallery actions: add spacing on mobile so the buttons sit further from the title */
@media (max-width:700px){
  .demo-gallery-section h3{display:flex;flex-direction:column;align-items:center;gap:12px}
  .demo-gallery-section .gallery-actions{margin-top:14px}
  .demo-gallery-section .gallery-actions{align-self:center;justify-content:center;padding-right:12px;box-sizing:border-box;margin-left:0;margin-right:0}
}

/* Desktop: keep action buttons right-aligned inside header */
.demo-gallery-section h3{display:flex;align-items:center;justify-content:space-between;position:relative}
@media (max-width:600px){
  /* Use grid on very small screens so rows share equal heights */
  .tier-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;grid-auto-rows:1fr;align-items:stretch}
  .tier-card{flex:unset;width:auto}
  /* Place exclusive product first and full width */
  .tier-card[data-id="exclusive"]{order:-1;grid-column:1 / -1;z-index:4}
  /* Ensure other two cards sit side by side under exclusive */
  .tier-card[data-id="premium"], .tier-card[data-id="standard"]{order:0}
  .tier-card[data-id="exclusive"] .card-media{height:220px}
  .tier-card:not([data-id="exclusive"]) .card-media{height:140px}
  /* Ensure non-exclusive cards have the same height and buttons align at the bottom */
  .tier-card{display:flex;flex-direction:column;height:100%}
  .tier-card .card-actions{margin-top:auto}
/* Special case: keep SNAPTHIS guide block centered and nicely sized on poradnik page */
@media (max-width:700px){
  /* Use a grid layout so both features behave as equal-height cards on small screens */
  .poradnik-container .columns{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:stretch;grid-auto-rows:1fr;justify-content:center}
  .poradnik-container .feature{flex:1 1 calc(50% - 8px);min-width:120px;display:flex;flex-direction:column;align-items:stretch;max-width:520px}
  /* Make the .card fill the feature container and distribute content evenly */
  .poradnik-container .feature .card{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:0}
  .poradnik-container .feature .card .card-body{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}
}

  /* product detail: back button spacing */
  #backToList{margin-bottom:12px;display:inline-flex;align-items:center;gap:8px}

  /* poradnik page smaller equal images */
  /* Strong override rule to ensure poradnik images are smaller than global .card img */
  .poradnik-container .card img.poradnik-card-img{width:70%;max-width:280px;height:120px;object-fit:cover;border-radius:12px;display:block;margin-left:auto;margin-right:auto}
  @media (max-width:900px){
    .product-single{flex-direction:column}
    .product-single img{max-width:100%;width:100%;height:auto}
    .product-single .product-left, .product-single .product-right{width:100%}
    .poradnik-container .card img.poradnik-card-img{max-width:200px;height:100px}
  }
  @media (max-width:700px){
    /* Make images much smaller and centered within half-width features on phones */
    .poradnik-container .card img.poradnik-card-img{width:48%;max-width:none;height:72px}
  }
  @media (max-width:420px){
    /* Very small phones: reduce a bit more */
    .poradnik-container .card img.poradnik-card-img{width:44%;height:64px}
  }

/* Mobile-specific adjustments for poradnik promo boxes so CTAs are visible */
/* Moved to bottom to ensure overrides take precedence */

/* Global transitions */
html, body, .card, .site-header, .site-footer, .feature, .side-card { transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease; }


/* Mobile reveal (scale up from small to full size) */
@media (max-width:700px){
}
/* Light theme mobile: make hero orbs smaller and less obtrusive */
@media (max-width:700px) and (prefers-reduced-motion: no-preference) {
  .hero-decor .orb{opacity:0.35;filter: blur(1.2px);background-size:40% 40%;box-shadow:0 6px 18px rgba(11,17,32,0.04)}
  .hero-decor .orb-1{width:64px;height:64px;left:12%;top:6%}
  .hero-decor .orb-2{width:44px;height:44px;right:8%;bottom:18%}
}
/* Always keep hero-content above orbs on mobile as well */
@media (max-width:700px){
  .hero-content{z-index:3}
}

/* Desktop / Large screens: make feature and promo blocks larger and more prominent */
@media (min-width:900px){
  /* Features - larger card feel */
  .features{gap:26px}
  .feature{padding:26px;border-radius:16px;min-height:160px}
  .feature h4{font-size:20px}
  .feature p{font-size:15px}

  /* Make product cards visually larger in the grid (but not change product content) */
  .grid{gap:28px}
  .card img{height:260px}

  /* Product detail image sizing: keep a fixed column and ensure image fits correctly */
  .product-single .product-left{flex:0 0 360px}
  .product-single .product-left img{max-width:360px;width:100%;height:auto;object-fit:contain}
  .product-single .product-right{flex:1}

  /* Promo boxes - bigger, more prominent */
}

/* Admin: align action buttons and prevent overlap */
.admin-table td .actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.admin-table td .actions .btn{margin-right:0;margin-left:0}
.admin-table td .inline{display:inline-flex;margin:0}
.admin-table td .inline button{display:inline-flex}
.admin-table td .btn, .admin-table td .btn-danger{white-space:nowrap}
.admin-table td .btn{padding:6px 8px;font-size:13px}
.admin-table td .btn{display:inline-flex;align-items:center;gap:8px}
/* Ensure the QR column doesn't squeeze and buttons don't wrap */
.admin-table th:nth-child(8), .admin-table td:nth-child(8){white-space:nowrap;min-width:140px;text-align:center}

/* Responsive card layout for admin table on small screens */
@media (max-width:700px){
  .admin-table{border:0}
  .admin-table thead{display:none}
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{display:block;width:100%}
  .admin-table tr{background:var(--card);border-radius:10px;padding:12px;margin-bottom:12px;border:1px solid rgba(255,255,255,0.03)}
  .admin-table td{display:flex;justify-content:space-between;align-items:center;padding:6px 6px;border-bottom:none}
  .admin-table td::before{content:attr(data-label);font-weight:700;color:var(--muted);margin-right:12px}
  .admin-table td .btn{margin-left:12px}
}

/* Admin orders card layout */
.order-card{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid rgba(255,255,255,0.03);border-radius:12px;padding:12px;box-shadow:var(--shadow-sm);} 
.order-card .order-thumb{width:88px;height:88px;border-radius:8px;overflow:hidden;flex:0 0 88px;display:block}
.order-card .order-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.order-card .order-meta{flex:1;display:flex;flex-direction:column;gap:6px}
.order-card .order-meta .meta-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.order-card .order-meta .meta-row .muted{color:var(--muted);font-size:13px}
.order-card .order-actions{display:flex;gap:8px;align-items:center}

/* Compact variant for orders list: significantly reduce padding and font-size so many cards fit */
.order-card.compact{padding:8px;border-radius:10px}
.order-card.compact .order-meta{gap:4px}
.order-card.compact .order-meta a{font-size:15px}
.order-card.compact .muted{font-size:12px}
.order-card.compact .order-actions .btn{padding:6px 8px;font-size:13px}
.order-card.compact .badge-status{font-size:12px;padding:5px 8px}
.order-card .order-meta code{background:rgba(11,17,32,0.04);padding:3px 6px;border-radius:6px;font-size:12px;color:var(--muted)}

/* Status badge */
.badge-status{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:900;font-size:13px;background:rgba(255,255,255,0.02);color:var(--muted);border:1px solid rgba(255,255,255,0.03)}
.badge-status.completed{background:linear-gradient(90deg,#32d583,#12b24a);color:#07200a;border:none;box-shadow:0 12px 30px rgba(18,178,74,0.12)}
.order-card.completed{border-color:rgba(18,178,74,0.12);box-shadow:0 18px 50px rgba(18,178,74,0.08)}

@media (max-width:900px){
  .order-card{flex-direction:column;align-items:stretch}
  .order-card .order-thumb{width:100%;height:160px;flex:0 0 auto}
  .order-card .order-actions{justify-content:flex-end}
  .order-card.compact{flex-direction:row;align-items:center}
  .order-card.compact .order-actions{justify-content:flex-end}
}

/* Danger label for admin delete sections */
.danger-label{color:#ff3b3b;font-weight:800;background:rgba(255,59,59,0.05);padding:6px 8px;border-radius:6px;border:1px solid rgba(255,59,59,0.06);display:inline-block}

/* Shine / spotlight animation across the promo */

/* Make the shimmer/gold accent prominent */

/* Gentle pulse glow to attract attention (low intensity) */

/* poradnik page: center feature cards and make them nicely sized */
.poradnik-features{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.poradnik-features .feature{flex:0 1 360px;max-width:420px}

/* Avoid sticky header covering the products section when navigating to #products */
#products{scroll-margin-top:80px}
@media (max-width:700px){#products{scroll-margin-top:56px}}


/* pagination controls placed under products grid */
.pagination{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:14px}
.pagination > div{display:flex;align-items:center;}
.pagination .page-numbers{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.pagination .btn{padding:8px 12px;border-radius:10px;margin:0;background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted);transition:transform .14s ease, box-shadow .14s ease, background .18s}
.pagination .btn.active{background:linear-gradient(90deg,#0f62fe,#0b53d6);color:#fff;border:none;box-shadow:0 14px 40px rgba(11,82,255,0.12);transform:translateY(-2px)}
/* Active subcategory / category buttons */
.btn.active{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:white;border:none}

/* Selected filter badges */
.filter-tag{background:rgba(0,0,0,0.12);padding:6px 10px;border-radius:999px;font-weight:600}
.filter-tag .deselect{margin-left:8px;color:inherit;text-decoration:none}
.pagination .btn.disabled{opacity:0.38;pointer-events:none;border:1px solid rgba(255,255,255,0.02)}
.pagination .page-numbers a.btn{min-width:40px;text-align:center}
.pagination .page-numbers span.btn{min-width:40px;text-align:center}
.pagination .btn{z-index:1}
.pagination .page-numbers .btn{z-index:2}

@media (max-width:560px){
  /* On narrow screens, keep pagination inline and allow wrapping so items sit side-by-side on phones */
  .pagination{flex-direction:row;flex-wrap:wrap;gap:8px;row-gap:10px;justify-content:center;align-items:center}
  /* Make previous/next buttons use strong (black) text for better visibility on mobile */
  .pagination .page-prev, .pagination .page-next{color:#0b1220}
  /* Keep disabled state muted */
  .pagination .page-prev.disabled, .pagination .page-next.disabled{color:var(--muted);opacity:0.38;pointer-events:none}
  .pagination > div{justify-content:center}
}

}
/* Offset anchor targets to account for the fixed header so links scroll visible content below the header */
#products, #tier-row, h2[id], .anchor-target { scroll-margin-top: 88px; }