/*! PetKarta · Konfigurátor gravírování – vzhled · v1.0.0
 *  Patří k petkarta-gravirovani.js. Barvy bere z proměnných v petkarta-theme.css,
 *  takže změna palety PetKarty se promítne i sem.
 *  Písma pkgrav-*.woff2 leží vedle tohoto souboru (licence SIL OFL – pkgrav-fonts-OFL.txt).
 */

/* ---- písma pro gravírování -------------------------------------- */
@font-face{font-family:'PKG Playfair';font-weight:600;font-style:normal;font-display:swap;
  src:url("pkgrav-playfair-display-600-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PKG Playfair';font-weight:600;font-style:normal;font-display:swap;
  src:url("pkgrav-playfair-display-600-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PKG Montserrat';font-weight:600;font-style:normal;font-display:swap;
  src:url("pkgrav-montserrat-600-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PKG Montserrat';font-weight:600;font-style:normal;font-display:swap;
  src:url("pkgrav-montserrat-600-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PKG Allura';font-weight:400;font-style:normal;font-display:swap;
  src:url("pkgrav-allura-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PKG Allura';font-weight:400;font-style:normal;font-display:swap;
  src:url("pkgrav-allura-400-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PKG Oswald';font-weight:500;font-style:normal;font-display:swap;
  src:url("pkgrav-oswald-500-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PKG Oswald';font-weight:500;font-style:normal;font-display:swap;
  src:url("pkgrav-oswald-500-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'PKG Beau Rivage';font-weight:400;font-style:normal;font-display:swap;
  src:url("pkgrav-beau-rivage-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PKG Beau Rivage';font-weight:400;font-style:normal;font-display:swap;
  src:url("pkgrav-beau-rivage-400-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PKG Romanesco';font-weight:400;font-style:normal;font-display:swap;
  src:url("pkgrav-romanesco-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PKG Romanesco';font-weight:400;font-style:normal;font-display:swap;
  src:url("pkgrav-romanesco-400-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PKG Charm';font-weight:400;font-style:normal;font-display:swap;
  src:url("pkgrav-charm-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PKG Charm';font-weight:400;font-style:normal;font-display:swap;
  src:url("pkgrav-charm-400-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Nákupní box PetKarty schováme, dokud se nepostaví konfigurátor – jinak by
   na detailu krátce blikla běžná produktovka. Skript třídu po 6,5 s sám sundá,
   kdyby se konfigurátor nepostavil (viz pojistka v petkarta-gravirovani.js). */
html.pkg-hide-native #pk-product .pk-pd{display:none!important}

/* ---- rámec ------------------------------------------------------- */
.pkg{--pkg-r:20px;max-width:var(--maxw,1180px);margin:0 auto;padding:8px 0 4px;color:var(--ink,#0A3F2F);
  font-family:'InterV',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.pkg *,.pkg *::before,.pkg *::after{box-sizing:border-box}
/* Vlastní display (flex/grid) níž by jinak přebil nativní [hidden] a schované
   bloky by zůstaly vidět – např. posuvník přiblížení bez nahrané fotky. */
.pkg [hidden]{display:none!important}
.pkg-head{text-align:center;margin:6px 0 18px}
.pkg-eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dk,#0A6B42)}
.pkg-title{font-family:'Bricolage',sans-serif;font-size:clamp(26px,4.4vw,40px);line-height:1.08;margin:6px 0 8px;font-weight:800}
.pkg-sub{margin:0 auto;max-width:640px;color:var(--ink2,#3E5A4E);font-size:15.5px;line-height:1.55}

/* ---- záložky produktů -------------------------------------------- */
.pkg-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none}
.pkg-tabs::-webkit-scrollbar{display:none}
.pkg-tab{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:11px 16px;border-radius:14px;border:1.5px solid var(--line2);background:var(--paper,#fff);
  color:var(--ink2,#3E5A4E);cursor:pointer;font:inherit;text-align:left;transition:border-color .18s,background .18s,transform .18s}
.pkg-tab b{font-size:14.5px;font-weight:700;color:var(--ink,#0A3F2F);white-space:nowrap}
.pkg-tab span{font-size:11.5px;color:var(--ink3,#6C8479)}
.pkg-tab:hover{border-color:rgba(16,185,129,.45);transform:translateY(-2px)}
.pkg-tab.on{border-color:var(--green,#10B981);background:var(--green-soft,#E3F4EA);box-shadow:inset 0 0 0 1px var(--green,#10B981)}

/* ---- mřížka náhled | formulář ------------------------------------ */
.pkg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:26px;align-items:start}
.pkg-stage{position:sticky;top:14px}
.pkg-live{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pkg-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  background:var(--green-soft,#E3F4EA);color:var(--green-dk,#0A6B42);font-size:12px;font-weight:800;letter-spacing:.04em}
.pkg-pill::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green,#10B981);
  box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:pkg-blip 1.9s ease-out infinite}
@keyframes pkg-blip{70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.pkg-illus{font-size:12px;color:var(--ink3,#6C8479);line-height:1.4;flex:1 1 200px;min-width:180px}
.pkg-illus b{color:var(--ink2,#3E5A4E)}

.pkg-canvas{position:relative;aspect-ratio:1/1;border-radius:var(--pkg-r);overflow:hidden;
  background:linear-gradient(160deg,#F7FBF8,#E9F5EE);border:1.5px solid var(--line2);
  box-shadow:0 26px 48px -28px rgba(21,53,42,.45)}
.pkg-mat,.pkg-eng{position:absolute;inset:0;width:100%;height:100%;display:block}
.pkg-eng.is-drag{cursor:grab;touch-action:none}
.pkg-eng.is-drag:active{cursor:grabbing}
.pkg-drag{margin:8px 0 0;font-size:12.5px;color:var(--ink3,#6C8479);text-align:center}
.pkg-zoom{display:flex;align-items:center;gap:10px;margin:8px 0 0}
.pkg-zoom label{font-size:12.5px;color:var(--ink2,#3E5A4E);white-space:nowrap}
.pkg-zoom input{flex:1;accent-color:var(--green,#10B981)}

.pkg-how{margin-top:14px;display:grid;gap:8px}
.pkg-how-row{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink2,#3E5A4E);line-height:1.45}
.pkg-how-row .n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-soft,#E3F4EA);color:var(--green-dk,#0A6B42);font-size:12px;font-weight:800}
.pkg-how-row b{color:var(--ink,#0A3F2F)}

/* ---- formulář ----------------------------------------------------- */
.pkg-ctrl{background:var(--paper,#fff);border:1.5px solid var(--line2);border-radius:var(--pkg-r);
  padding:20px 20px 22px;box-shadow:0 18px 40px -30px rgba(21,53,42,.4)}
.pkg-h2{font-family:'Bricolage',sans-serif;font-size:25px;line-height:1.12;margin:4px 0 6px;font-weight:800}
.pkg-lead{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ink2,#3E5A4E)}
.pkg-field{margin:0 0 15px}
.pkg-field>label{display:block;font-size:12.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink3,#6C8479);margin:0 0 7px}
.pkg-hint{font-size:12px;color:var(--ink3,#6C8479);line-height:1.45;margin-top:6px}

.pkg-chips{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.pkg-chips-2{grid-template-columns:1fr 1fr}
.pkg-chips-3{grid-template-columns:repeat(3,1fr)}
.pkg-chip{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:10px 12px;
  border-radius:13px;border:1.5px solid var(--line2);background:#fff;color:var(--ink,#0A3F2F);
  cursor:pointer;font:inherit;text-align:left;transition:border-color .16s,background .16s}
.pkg-chip .t{font-size:13.5px;font-weight:700;line-height:1.2}
.pkg-chip .h{font-size:11.5px;color:var(--ink3,#6C8479);line-height:1.3}
.pkg-chip:hover:not(:disabled){border-color:rgba(16,185,129,.45)}
.pkg-chip.on{border-color:var(--green,#10B981);background:var(--green-soft,#E3F4EA);box-shadow:inset 0 0 0 1px var(--green,#10B981)}
.pkg-chip:disabled{opacity:.45;cursor:not-allowed}

.pkg-lines{display:grid;gap:7px}
.pkg-line{width:100%;padding:11px 13px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink,#0A3F2F);font:inherit;font-size:15px}
.pkg-line:focus{outline:none;border-color:var(--green,#10B981);box-shadow:0 0 0 3px rgba(16,185,129,.16)}
.pkg-syms{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.pkg-sym{width:32px;height:32px;border-radius:9px;border:1.5px solid var(--line2);background:#fff;
  color:var(--ink2,#3E5A4E);cursor:pointer;font-size:15px;line-height:1}
.pkg-sym:hover{border-color:rgba(16,185,129,.45)}
.pkg-syms .pkg-hint{flex:1 1 150px;margin:0}

.pkg-fonts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
.pkg-font{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 6px;border-radius:13px;
  border:1.5px solid var(--line2);background:#fff;color:var(--ink,#0A3F2F);cursor:pointer;font:inherit}
.pkg-font span{font-size:24px;line-height:1.15}
.pkg-font i{font-style:normal;font-size:11px;color:var(--ink3,#6C8479)}
.pkg-font:hover{border-color:rgba(16,185,129,.45)}
.pkg-font.on{border-color:var(--green,#10B981);background:var(--green-soft,#E3F4EA);box-shadow:inset 0 0 0 1px var(--green,#10B981)}

/* ---- nahrání souboru --------------------------------------------- */
.pkg-filein{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pkg-drop{display:flex;flex-direction:column;align-items:center;gap:3px;padding:18px 14px;
  border-radius:14px;border:2px dashed var(--line);background:#FAFDFB;color:var(--ink2,#3E5A4E);
  cursor:pointer;text-align:center;transition:border-color .16s,background .16s}
.pkg-drop:hover{border-color:var(--green,#10B981);background:var(--green-soft,#E3F4EA)}
.pkg-drop b{font-size:14px;color:var(--ink,#0A3F2F)}
.pkg-drop span{font-size:11.5px;color:var(--ink3,#6C8479)}
.pkg-up{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:14px;
  border:1.5px solid var(--line2);background:#FAFDFB}
.pkg-up.err{border-color:#E2574C;background:#FDF3F2}
.pkg-upthumb{flex:0 0 auto;width:46px;height:46px;border-radius:10px;background:#E9F5EE center/cover no-repeat;
  display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--ink3,#6C8479)}
.pkg-upmeta{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.pkg-upmeta b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkg-upmeta>span{font-size:11.5px;color:var(--ink3,#6C8479)}
.pkg-bar{display:block;height:4px;border-radius:999px;background:var(--line2);overflow:hidden;margin-top:3px}
.pkg-bar b{display:block;height:100%;background:var(--green,#10B981);transition:width .18s}
.pkg-ibtn{flex:0 0 auto;width:30px;height:30px;border-radius:9px;border:1.5px solid var(--line2);
  background:#fff;color:var(--ink2,#3E5A4E);cursor:pointer;display:grid;place-items:center}
.pkg-ibtn:hover{border-color:#E2574C;color:#E2574C}

/* ---- počet, cena, nákup ------------------------------------------- */
.pkg-qtyrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pkg-qtyrow>label{margin:0}
.pkg-qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.pkg-qty button{width:38px;height:38px;border:0;background:#fff;color:var(--ink,#0A3F2F);font-size:18px;cursor:pointer}
.pkg-qty button:hover{background:var(--green-soft,#E3F4EA)}
.pkg-qty input{width:46px;height:38px;border:0;border-left:1.5px solid var(--line2);border-right:1.5px solid var(--line2);
  text-align:center;font:inherit;font-size:15px;font-weight:700;color:var(--ink,#0A3F2F)}
.pkg-qty input:focus{outline:none;background:#FAFDFB}

.pkg-err{margin:0 0 12px;padding:11px 13px;border-radius:12px;background:#FDF3F2;
  border:1.5px solid rgba(226,87,76,.45);color:#9B2C22;font-size:13.5px;line-height:1.45}
.pkg-buy{display:flex;align-items:center;gap:12px;margin-top:4px}
.pkg-price{flex:0 0 auto;display:flex;flex-direction:column;font-family:'Bricolage',sans-serif;
  font-size:24px;font-weight:800;line-height:1.1;white-space:nowrap}
.pkg-price small{font-size:11.5px;font-weight:600;color:var(--ink3,#6C8479)}
.pkg-add{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 18px;border:0;border-radius:14px;cursor:pointer;
  background:var(--green,#10B981);color:#fff;font:inherit;font-size:15.5px;font-weight:800;
  box-shadow:0 14px 26px -14px rgba(16,185,129,.9);transition:transform .16s,box-shadow .16s,background .16s}
.pkg-add:hover:not(:disabled){transform:translateY(-2px);background:var(--green-dk,#0A6B42)}
.pkg-add:disabled{opacity:.55;cursor:progress;transform:none}
.pkg-stav{margin-top:10px;padding:9px 12px;border-radius:11px;background:var(--green-soft,#E3F4EA);
  color:var(--green-dk,#0A6B42);font-size:13px;font-weight:600}
.pkg-engnote{margin-top:11px;font-size:12px;color:var(--ink3,#6C8479);line-height:1.45}

.pkg-done{margin-top:14px}
.pkg-done-in{display:flex;flex-direction:column;gap:9px;padding:15px;border-radius:15px;
  background:var(--green-soft,#E3F4EA);border:1.5px solid var(--green,#10B981)}
.pkg-done-in>b{font-size:15.5px}
.pkg-done-in>span{font-size:13.5px;line-height:1.5;color:var(--ink2,#3E5A4E)}
.pkg-done-warn{padding:11px 12px;border-radius:11px;background:#FFF8E6;border:1.5px solid var(--gold,#FFC24B);color:#6B4E07!important}
.pkg-done-btn,.pkg-done-cart{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 16px;border-radius:12px;text-decoration:none;font-weight:800;font-size:14.5px}
.pkg-done-btn{background:var(--gold,#FFC24B);color:#4A3600}
.pkg-done-cart{background:var(--green-dk,#0A6B42);color:#fff}
.pkg-done-btn:hover,.pkg-done-cart:hover{filter:brightness(1.06)}

/* ---- časté dotazy -------------------------------------------------- */
.pkg-faq{margin:30px 0 8px}
.pkg-faq-t{font-family:'Bricolage',sans-serif;font-size:22px;font-weight:800;margin:0 0 12px}
.pkg-faq-i{border:1.5px solid var(--line2);border-radius:14px;background:var(--paper,#fff);margin:0 0 8px;overflow:hidden}
.pkg-faq-i summary{padding:13px 15px;cursor:pointer;font-weight:700;font-size:14.5px;list-style:none}
.pkg-faq-i summary::-webkit-details-marker{display:none}
.pkg-faq-i summary::after{content:'+';float:right;color:var(--green-dk,#0A6B42);font-weight:800}
.pkg-faq-i[open] summary::after{content:'–'}
.pkg-faq-i>div{padding:0 15px 14px;font-size:13.5px;line-height:1.6;color:var(--ink2,#3E5A4E)}

/* ---- menší obrazovky ---------------------------------------------- */
@media(max-width:900px){
  .pkg-grid{grid-template-columns:1fr;gap:18px}
  /* náhled zůstane nahoře i při psaní – jinak zákazník nevidí, co vzniká */
  .pkg-stage{position:sticky;top:0;z-index:3;background:var(--bg,#EDF9F2);padding:8px 0 10px;margin:0 -2px}
  .pkg-canvas{max-width:360px;margin:0 auto}
  .pkg-how{display:none}
  .pkg-ctrl{padding:16px 14px 18px}
}
@media(max-width:480px){
  .pkg-canvas{max-width:none}
  .pkg-chips{grid-template-columns:1fr 1fr}
  .pkg-chips-3{grid-template-columns:1fr}
  .pkg-buy{flex-wrap:wrap}
  .pkg-price{width:100%}
  .pkg-add{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .pkg-pill::before{animation:none}
  .pkg-tab,.pkg-chip,.pkg-add{transition:none}
}