/* tokens.css — design tokens i wspólne atomy interfejsu przeniesione 1:1 z głównej
   strony (Grodziski Rzeznik.dc.html), żeby sklep wizualnie był naturalną częścią
   tej samej witryny, a nie osobnym produktem. Nazwy zmiennych i klas celowo
   niezmienione względem oryginału. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}

:root{
  --bg-1:#16100C; --bg-2:#1B140F; --bg-3:#120C08; --bg-4:#100B08;
  --fg-strong:#F3E9D7; --fg-body:#C4B8A3; --fg-muted:#B9AB97; --fg-faint:#908471;
  --card:linear-gradient(168deg,#2C2118,#211812);
  --card2:linear-gradient(165deg,#241A13,#1A130E);
  --card-form:linear-gradient(168deg,#251B14,#1A130E);
  --header-bg:rgba(20,14,10,.86); --header-bd:rgba(198,161,94,.22);
  --hairline:rgba(198,161,94,.14);
  --on-accent:#F5ECDD; --price:#C6A15E;
  --field-bg:rgba(18,12,8,.6); --field-bd:rgba(198,161,94,.28); --field-ph:rgba(240,231,216,.5);
  --chat-bot-bg:rgba(240,231,216,.06);
  --gold-text:#C6A15E;
  --cookie-bg:linear-gradient(160deg,#2A2015,#1E1610);
}
[data-theme="light"]{
  --bg-1:#F0E8D8; --bg-2:#E9DFCB; --bg-3:#E4D8C0; --bg-4:#E0D3B9;
  --fg-strong:#231C13; --fg-body:#4C4234; --fg-muted:#645A4A; --fg-faint:#635A4B;
  --card:linear-gradient(168deg,#FFFCF6,#FBF4E7);
  --card2:linear-gradient(165deg,#FFFCF6,#F7F0E1);
  --card-form:linear-gradient(168deg,#FFFCF6,#F6EFDF);
  --header-bg:rgba(240,232,216,.9); --header-bd:rgba(150,110,45,.3);
  --hairline:rgba(150,110,45,.22);
  --on-accent:#F5ECDD; --price:#7A1E22;
  --field-bg:#FFFDF7; --field-bd:rgba(150,110,45,.5); --field-ph:rgba(80,66,50,.55);
  --chat-bot-bg:#EFE5D2;
  --gold-text:#6F5322;
  --cookie-bg:linear-gradient(160deg,#F7F0DC,#EEE0BF);
}

.gr-root, .gr-root section, .gr-root header, .gr-root footer, .gr-root article, .gr-root aside,
.gr-root h1, .gr-root h2, .gr-root h3, .gr-root h4, .gr-root p, .gr-root span, .gr-root a,
.gr-root li, .gr-root div, .gr-root button, .gr-root input, .gr-root textarea, .gr-root label{
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}

body{margin:0;background:var(--bg-1);color:var(--fg-strong);font-family:'Mulish',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold-text);text-decoration:none}
a:hover{color:#E3C482}
::selection{background:#872B2F;color:var(--on-accent)}
input,textarea,button{font-family:inherit}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg-3)}
::-webkit-scrollbar-thumb{background:#3a2d22;border-radius:6px}

@keyframes gr-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes gr-slidein{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* --- wspólne atomy interakcji (te same klasy co reszta strony) --- */
.gr-nav{background-image:linear-gradient(#C6A15E,#C6A15E);background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;transition:background-size .35s ease,color .3s ease}
.gr-nav:hover{background-size:100% 1.5px;color:var(--fg-strong)}
.gr-hoverbrass{transition:color .25s ease}
.gr-hoverbrass:hover{color:var(--gold-text)}
.gr-flink{transition:color .25s ease}
.gr-flink:hover{color:var(--fg-strong)}
.gr-logo{transition:transform .3s ease,filter .3s ease}
.gr-logo:hover{transform:scale(1.04)}
/* Kurczenie logo w headerze przy scrollu — te same reguły i wartości co na głównej
   stronie (index.html), patrz tam identyczny blok dla pełnego uzasadnienia. Klasę
   is-scrolled przełącza initHeaderScrollShrink() w layout.js. */
@media (min-width:1025px){
  .gr-header.is-scrolled .gr-logo{transform:scale(.58);transform-origin:center top;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
  .gr-header.is-scrolled .gr-logo:hover{transform:scale(.603)}
}
/* te same progi i wartości co na głównej stronie — tam logo w headerze też
   zmniejsza się na mobile, tu brakowało tych reguł, więc zostawało w rozmiarze
   desktopowym (108px) na telefonach. */
@media (max-width:1024px){
  .gr-logo{height:52px !important;margin:0 !important;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) !important}
}
@media (max-width:600px){
  .gr-logo{height:44px !important;margin:0 !important;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)) !important}
}

.gr-btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.gr-btn:hover{transform:translateY(-3px) scale(1.03)}
.gr-icon{transition:transform .25s ease,border-color .25s ease,background .25s ease}
.gr-icon:hover{transform:translateY(-2px) scale(1.06);border-color:var(--gold-text);color:#E3C482}
.gr-themebtn{transition:transform .25s ease,border-color .25s ease,color .25s ease,background .25s ease}
.gr-themebtn:hover{transform:translateY(-2px) scale(1.06);border-color:var(--gold-text);color:#E3C482}

.gr-cta1{transition:transform .28s ease,background .28s ease,color .28s ease,box-shadow .28s ease}
.gr-cta1:hover{background:#6E2226 !important;color:#F5ECDD !important;border-color:#6E2226 !important;transform:translateY(-3px) scale(1.03);box-shadow:0 20px 40px -12px rgba(110,34,38,.55)}
.gr-cta2{transition:transform .28s ease,background .28s ease,color .28s ease,box-shadow .28s ease}
.gr-cta2:hover{background:#C6A15E !important;color:#17100B !important;border-color:var(--gold-text) !important;transform:translateY(-3px) scale(1.03);box-shadow:0 20px 40px -12px rgba(198,161,94,.4)}

.gr-field{background:var(--field-bg);border:1px solid var(--field-bd);color:var(--fg-strong)}
.gr-field::placeholder{color:var(--field-ph)}

/* karty (produkty w sklepie używają tej samej klasy co kategorie na stronie głównej) */
.gr-card{transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s,border-color .38s}
.gr-card:hover{transform:translateY(-6px);box-shadow:0 34px 60px -24px rgba(0,0,0,.9);border-color:rgba(198,161,94,.5)}
.gr-card:hover .gr-zoom{transform:scale(1.07)}
.gr-card:hover .gr-reveal{opacity:1}
.gr-zoom{transition:transform .6s ease}
.gr-reveal{opacity:0;transition:opacity .4s ease}
[data-theme="light"] .gr-card{box-shadow:0 16px 38px -20px rgba(74,48,20,.30) !important}
[data-theme="light"] .gr-card:hover{box-shadow:0 26px 52px -22px rgba(74,48,20,.36) !important;border-color:rgba(160,120,50,.5) !important}

/* pulsujący "sonar" wokół zielonej kropki "Otwarte teraz" — skopiowane 1:1 z <style>
   na głównej stronie (Grodziski Rzeznik.dc.html), przeniesione tu żeby ten sam efekt
   był dostępny też w hero sklepu (patrz shop-hero-status w shop.css) */
.gr-openpulse{position:relative}
.gr-openpulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(111,191,111,.5);animation:gr-openpulse 2.2s ease-out infinite;pointer-events:none}
@keyframes gr-openpulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}

/* Baner zgody cookies — skopiowany 1:1 (te same klasy/reguły) z <style> na głównej
   stronie (index.html), żeby baner na /zamow/ (patrz layout.js, initCookieConsent())
   wyglądał identycznie z tym na "/", bez duplikowania osobnego zestawu stylów. */
.gr-cookie-banner{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:130;width:min(680px,calc(100vw - 32px));background:var(--cookie-bg);border:1px solid rgba(198,161,94,.24);border-radius:18px;box-shadow:0 28px 64px -22px rgba(0,0,0,.5),0 2px 10px -2px rgba(0,0,0,.14);padding:20px 26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;animation:gr-cookie-in .4s ease both}
.gr-cookie-icon-wrap{flex:none;width:56px;height:56px;border-radius:50%;background:rgba(198,161,94,.14);display:flex;align-items:center;justify-content:center}
.gr-cookie-icon-wrap img{width:42px;height:42px;display:block}
.gr-cookie-banner p{margin:0;flex:1 1 220px;font-size:14px;line-height:1.6;color:var(--fg-body)}
.gr-cookie-banner p strong{color:var(--fg-strong);font-weight:800}
.gr-cookie-banner a{color:var(--gold-text);text-decoration:underline;font-weight:600}
.gr-cookie-actions{display:flex;gap:12px;flex:none}
.gr-cookie-accept,.gr-cookie-decline{border-radius:999px;padding:12px 22px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease}
.gr-cookie-accept{background:#872B2F;color:var(--on-accent);border:1px solid rgba(198,161,94,.5);box-shadow:0 10px 22px -10px rgba(135,43,47,.7)}
.gr-cookie-accept:hover{transform:translateY(-2px) scale(1.03);background:#9C343A;box-shadow:0 18px 34px -12px rgba(135,43,47,.75)}
.gr-cookie-decline{background:transparent;color:var(--fg-strong);border:1px solid rgba(160,148,124,.45)}
.gr-cookie-decline:hover{transform:translateY(-2px);background:rgba(160,148,124,.12);border-color:var(--fg-strong)}
@keyframes gr-cookie-in{from{opacity:0;transform:translateX(-50%) translateY(24px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (max-width:680px){
  .gr-cookie-banner{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));transform:none;width:auto;align-items:flex-start;padding:20px 18px;gap:14px 16px;animation:gr-cookie-in-mobile .4s ease both}
  .gr-cookie-icon-wrap{width:46px;height:46px}
  .gr-cookie-icon-wrap img{width:34px;height:34px}
  .gr-cookie-actions{flex:1 1 100%;flex-direction:column}
  .gr-cookie-accept,.gr-cookie-decline{width:100%;min-height:44px;padding:13px 22px;font-size:15px}
}
@keyframes gr-cookie-in-mobile{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}