/* SDG Dock v1 — glass bar at the bottom. Tokens come from Settings (inline :root variables printed in <head>). */
.sdg-dock{position:fixed;left:0;right:0;bottom:0;z-index:9990;pointer-events:none;padding:0 10px calc(var(--sdg-dock-gap,12px) + env(safe-area-inset-bottom,0px));font-family:inherit;color:var(--sdg-dock-text,#fff);transform:translateY(calc(var(--sdg-dock-lift,0px) * -1));transition:transform .28s cubic-bezier(.2,.8,.2,1);will-change:transform}
.sdg-dock[hidden]{display:none}
.sdg-dock.is-away{transform:translateY(140%)}
.sdg-dock--desktop{left:50%;right:auto;width:var(--sdg-dock-desk-w,380px);margin-left:calc(var(--sdg-dock-desk-w,380px) / -2);padding-left:0;padding-right:0}
.sdg-dock--desktop.sdg-dock--desk-right{left:auto;right:24px;margin-left:0}
.sdg-dock--desktop.sdg-dock--desk-left{left:24px;right:auto;margin-left:0}
.sdg-dock__bar,.sdg-dock__panel,.sdg-dock__bubble{pointer-events:auto;background:var(--sdg-dock-bg-rgba,rgba(0,0,0,.92));-webkit-backdrop-filter:var(--sdg-dock-backdrop,blur(var(--sdg-dock-blur,18px)) saturate(140%));backdrop-filter:var(--sdg-dock-backdrop,blur(var(--sdg-dock-blur,18px)) saturate(140%));box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 var(--sdg-dock-border-w,1px) var(--sdg-dock-border,rgba(255,255,255,.06)) inset;color:var(--sdg-dock-text,#fff)}
.sdg-dock__bar{position:relative;display:block;padding:0;overflow:hidden;border-radius:var(--sdg-dock-radius,22px);transform:scale(var(--sdg-dock-scale,1));transform-origin:50% 100%;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.sdg-dock.is-small .sdg-dock__bar{transform:scale(var(--sdg-dock-scale-small,.9))}
.sdg-dock__track{display:flex;width:200%;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.sdg-dock.is-page-1 .sdg-dock__track{transform:translateX(-50%)}
.sdg-dock.is-hdragging .sdg-dock__track{transition:none}
.sdg-dock__page{flex:0 0 50%;display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 8px 8px 10px;box-sizing:border-box;min-width:0}
.sdg-dock__page--tools{position:relative;padding:6px 30px} /* room for the small back arrow on both sides: the tools stay in the middle */
.sdg-dock__tools{display:flex;align-items:stretch;justify-content:space-around;gap:4px;width:100%}
:where(.sdg-dock) .sdg-dock__tool{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1 1 0;min-width:52px;min-height:48px;padding:4px 6px;border-radius:14px;color:var(--sdg-dock-text,#fff);font-size:10.5px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sdg-dock__tool:focus-visible{background:rgba(255,255,255,.12)}
@media (hover:hover){.sdg-dock__tool:hover{background:rgba(255,255,255,.12)}} /* a finger never leaves a tool lit */
.sdg-dock__tool:active{background:rgba(255,255,255,.18)}
.sdg-dock__tool svg{width:22px;height:22px}
.sdg-dock__tooldot{position:absolute;top:6px;right:calc(50% - 16px);width:8px;height:8px;border-radius:50%;background:var(--sdg-dock-btn,#e32c2b);box-shadow:0 0 0 2px rgba(0,0,0,.6)}
/* phones: "more" (a grid, like an app's) opens the tools; "back" on the tools page returns (David, 16 Oct 2026: the dots
   and the swipe alone were found by nobody) */
/* 38 px to the eye, 44 px to the finger (David, 21 Oct 2026: "ikonka naľavo zbytočne veľká") */
:where(.sdg-dock) .sdg-dock__more{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--sdg-dock-text,#fff);transition:background-color .15s}
.sdg-dock__more::after,.sdg-dock__front::after{content:"";position:absolute;inset:-3px}
/* the theme's button padding (16 px a side) squeezed the icons to 6–12 px inside these round buttons */
.sdg-dock button.sdg-dock__more,.sdg-dock button.sdg-dock__front{padding:0 !important;margin:0 !important;min-width:0 !important;line-height:0 !important}
.sdg-dock__more svg,.sdg-dock__front svg{flex:none}
.sdg-dock__more svg{width:18px;height:18px}
/* the size chart on the first page (phones, a product with a chart): beige like "Size chart & fit" on the page; the
   product's picture beside it goes (the product is on the screen above) */
:where(.sdg-dock) .sdg-dock__front{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;color:#191919;transition:background-color .15s,transform .12s}
.sdg-dock button.sdg-dock__front,.sdg-dock button.sdg-dock__front:focus{background:var(--sdg-dock-front,#cab29f) !important;color:#191919 !important;border-color:transparent !important;box-shadow:none !important}
@media (hover:hover){.sdg-dock button.sdg-dock__front:hover{background:#d8c5b6 !important}}
.sdg-dock button.sdg-dock__front:active{transform:scale(.94)}
.sdg-dock__front:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sdg-dock__front svg{width:20px;height:20px}
.sdg-dock__front[hidden],.sdg-dock--desktop .sdg-dock__front{display:none}
.sdg-dock.has-front:not(.sdg-dock--desktop) .sdg-dock__thumb{display:none}
.sdg-dock__more:hover,.sdg-dock__more:focus-visible{background:rgba(255,255,255,.18)}
.sdg-dock__more:active{background:rgba(255,255,255,.24)}
/* back: a small arrow at the left edge, not a circle (David, 16 Oct 2026: "zbytočne obrovská … dock menu bolo pekne v strede") */
:where(.sdg-dock) .sdg-dock__less{position:absolute;left:2px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:28px;height:44px;border-radius:12px;color:var(--sdg-dock-text,#fff);opacity:.7;transform:translateY(-50%);transition:opacity .15s,background-color .15s}
.sdg-dock__less:hover,.sdg-dock__less:focus-visible{opacity:1;background:rgba(255,255,255,.12)}
.sdg-dock__less svg{width:18px;height:18px}
.sdg-dock__more:focus-visible,.sdg-dock__less:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sdg-dock__more[hidden]{display:none}
.sdg-dock__moredot{position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--sdg-dock-btn,#e32c2b);box-shadow:0 0 0 2px rgba(0,0,0,.85)}
.sdg-dock__moredot[hidden]{display:none}
.sdg-dock--desktop .sdg-dock__track{width:auto;transform:none !important}
.sdg-dock--desktop .sdg-dock__page--main{flex:1 1 auto;order:2}
.sdg-dock--desktop .sdg-dock__page--tools{flex:0 0 auto;order:1;padding:8px 2px 8px 6px;border-right:1px solid rgba(255,255,255,.12)}
.sdg-dock--desktop:not(.has-tools) .sdg-dock__page--tools{display:none}
.sdg-dock--desktop .sdg-dock__tool{min-width:40px;min-height:44px;padding:0 4px;flex:0 0 auto}
.sdg-dock--desktop .sdg-dock__tool span{display:none}
.sdg-dock--desktop .sdg-dock__tooldot{right:6px;top:6px}
.sdg-dock--desktop .sdg-dock__more,.sdg-dock--desktop .sdg-dock__less{display:none}

.sdg-dock.is-dragging .sdg-dock__bar,.sdg-dock.is-dragging .sdg-dock__panel{transition:none}
:where(.sdg-dock) button,:where(.sdg-dock) a{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent;font-family:inherit}
.sdg-dock__main{flex:1 1 0%;width:auto;max-width:none;min-width:0;display:flex;align-items:center;gap:10px;padding:4px 2px;margin:0;color:var(--sdg-dock-text,#fff);text-align:left;font-size:14px;line-height:1.2;min-height:44px}
/* the text starts right after the icons: the theme centres a button's content, so a short line ("XL fits Rock") floated
   in the middle with a wide gap on its left (David, 21 Oct 2026) */
.sdg-dock button.sdg-dock__main{justify-content:flex-start !important}
.sdg-dock__main:focus-visible,.sdg-dock__cta:focus-visible,.sdg-dock__chip:focus-visible,.sdg-dock__bubble:focus-visible{outline:2px solid var(--sdg-dock-accent,#4cd48a);outline-offset:2px}
.sdg-dock__thumb{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:#222 center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.sdg-dock__thumb[hidden]{display:none}
.sdg-dock__lines{display:flex;flex-direction:column;min-width:0;gap:2px}
.sdg-dock__l1{font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdg-dock__l2{font-size:12px;line-height:1.25;opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sdg-dock__l2.is-error{opacity:1;color:#ffb4b4}
.sdg-dock__l1[hidden],.sdg-dock__l2[hidden]{display:none}
/* a line alone ("Find your dog's size") may take two lines rather than end in "…" (the More button took its room) */
.sdg-dock__lines:has(.sdg-dock__l2:empty) .sdg-dock__l1,.sdg-dock__lines:has(.sdg-dock__l2[hidden]) .sdg-dock__l1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}
.sdg-dock__chip{flex:0 0 auto;width:auto;display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 10px;margin:0;border-radius:999px;background:rgba(255,255,255,.12);color:var(--sdg-dock-text,#fff);font-size:13px;font-weight:700;line-height:1}
.sdg-dock__chip[hidden]{display:none}
/* the bag chip answers the pointer like the tool icons beside it (the theme's button:hover painted it black) */
.sdg-dock button.sdg-dock__chip,.sdg-dock button.sdg-dock__chip:focus{background:rgba(255,255,255,.12) !important;color:var(--sdg-dock-text,#fff) !important;border-color:transparent !important;box-shadow:none !important}
.sdg-dock button.sdg-dock__chip:hover,.sdg-dock button.sdg-dock__chip:focus-visible{background:rgba(255,255,255,.22) !important}
.sdg-dock button.sdg-dock__chip:active{background:rgba(255,255,255,.28) !important}
.sdg-dock__chip svg{display:block;flex:0 0 auto}
.sdg-dock__cta{flex:0 0 auto;width:auto;max-width:60%;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;margin:0;border:0;border-radius:calc(var(--sdg-dock-radius,22px) - 8px);background:var(--sdg-dock-btn,#e32c2b);color:var(--sdg-dock-btn-text,#fff);font-size:14px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;text-decoration:none;transition:transform .12s,opacity .2s}
/* hover: the brand beige with dark text; the selector outweighs the theme's button:hover (black) */
@media (hover:hover){.sdg-dock button.sdg-dock__cta:not(:disabled):not(.is-quiet):hover{background:var(--sdg-dock-btn-hover,#cab29f) !important;color:var(--sdg-dock-btn-hover-text,#191919) !important;border-color:transparent !important}
.sdg-dock button.sdg-dock__cta.is-quiet:not(:disabled):hover{background:rgba(255,255,255,.24) !important;color:var(--sdg-dock-text,#fff) !important}}
.sdg-dock button.sdg-dock__cta:not(:disabled):not(.is-quiet):focus-visible{background:var(--sdg-dock-btn-hover,#cab29f) !important;color:var(--sdg-dock-btn-hover-text,#191919) !important}
.sdg-dock__cta:active{transform:scale(.97)}
/* small phones (iPhone SE, 320–360 px): the More button's room comes from a tighter red button and smaller text */
@media (max-width:360px){.sdg-dock__page--main{gap:6px;padding-left:8px;padding-right:6px}:where(.sdg-dock) .sdg-dock__more,:where(.sdg-dock) .sdg-dock__front{flex-basis:36px;width:36px;height:36px}.sdg-dock__cta{padding:0 12px;font-size:13.5px}.sdg-dock__l1{font-size:13px}}
.sdg-dock__cta:disabled{opacity:.55;cursor:default}
.sdg-dock__cta.is-quiet{background:rgba(255,255,255,.14);color:var(--sdg-dock-text,#fff)}
.sdg-dock__cbtns .sdg-dock__cta{max-width:none}
.sdg-dock__cta.is-busy{opacity:.7;pointer-events:none;position:relative}
.sdg-dock__cta.is-busy::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sdg-spin .7s linear infinite}
@keyframes sdg-spin{to{transform:rotate(360deg)}}
.sdg-dock__panel{margin:0 0 8px;padding:12px;border-radius:min(var(--sdg-dock-radius,22px),22px);max-height:min(60vh,520px);overflow:auto;-webkit-overflow-scrolling:touch;transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.sdg-dock__panel[hidden]{display:none}
.sdg-dock__panel::before{content:"";display:block;width:36px;height:4px;margin:-4px auto 8px;border-radius:2px;background:rgba(255,255,255,.28)}
@media (hover:hover) and (pointer:fine){.sdg-dock__panel{cursor:grab}}
.sdg-dock__card{display:flex;gap:12px;align-items:flex-start}
.sdg-dock__cimg{flex:0 0 72px;width:72px;height:72px;border-radius:12px;background:#222 center/cover no-repeat}
.sdg-dock__cbody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.sdg-dock__ctitle{font-weight:700;font-size:14px;line-height:1.25}
.sdg-dock__cmeta{font-size:12px;opacity:.78}
.sdg-dock__cbtns{display:flex;gap:8px;margin-top:4px}
.sdg-dock__cbtns .sdg-dock__cta{flex:1 1 0;min-height:42px}
.sdg-dock__slots{position:absolute;right:10px;bottom:calc(100% - 0px);display:flex;gap:8px;padding-bottom:8px;pointer-events:none}
.sdg-dock--desktop .sdg-dock__slots{right:0}
.sdg-dock__bubble{pointer-events:auto;width:44px;height:44px;margin:0;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--sdg-dock-text,#fff);transition:transform .12s}
.sdg-dock__bubble:active{transform:scale(.95)}
.sdg-dock__bubble[hidden]{display:none}
.sdg-dock{position:fixed}
.sdg-dock__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sdg-dock-spacer{width:100%;height:0}
@media (prefers-reduced-motion:reduce){.sdg-dock,.sdg-dock__bar,.sdg-dock__panel,.sdg-dock__cta,.sdg-dock__bubble{transition:none !important}.sdg-dock__cta.is-busy::after{animation:none}}
@media print{.sdg-dock,.sdg-dock-spacer{display:none !important}}
/* the bag in the dock (12 Oct 2026): lines with photo, options, quantity and remove; subtotal and Checkout stay in view */
.sdg-dock__panel.is-bag{display:flex;flex-direction:column;overflow:hidden;padding:12px 12px 14px;max-height:min(74vh,640px)}
.sdg-dock__panel.is-bag[hidden]{display:none}
.sdg-dock__bag{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1 1 auto;color:var(--sdg-dock-text,#fff);font-size:14px;line-height:1.3}
.sdg-dock__baghead{display:flex;align-items:center;gap:8px;padding:0 0 0 4px}
.sdg-dock__baghead strong{font-size:16px;font-weight:700}
.sdg-dock__baghead span{font-size:13px;opacity:.7}
.sdg-dock__ib{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;color:var(--sdg-dock-text,#fff)}
.sdg-dock__ib svg{width:20px;height:20px}
.sdg-dock .sdg-dock__bag button.sdg-dock__ib,.sdg-dock .sdg-dock__bag button.sdg-dock__ib:focus{background:transparent !important;color:var(--sdg-dock-text,#fff) !important;border:0 !important;box-shadow:none !important}
.sdg-dock .sdg-dock__bag button.sdg-dock__ib:hover:not(:disabled),.sdg-dock .sdg-dock__bag button.sdg-dock__ib:focus-visible{background:rgba(255,255,255,.16) !important}
.sdg-dock .sdg-dock__bag button.sdg-dock__ib:focus-visible{outline:2px solid var(--sdg-dock-accent,#4cd48a);outline-offset:1px}
.sdg-dock .sdg-dock__bag button.sdg-dock__ib:disabled{opacity:.3;cursor:default}
.sdg-dock .sdg-dock__bag button.sdg-dock__bagx{margin-left:auto;background:rgba(255,255,255,.12) !important}
.sdg-dock__baglist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:0;flex:1 1 auto;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sdg-dock__bagitem{display:flex;gap:12px;margin:0;padding:8px;border-radius:16px;background:rgba(255,255,255,.07);transition:opacity .15s}
.sdg-dock__bagitem.is-busy{opacity:.5;pointer-events:none}
.sdg-dock__bagimg{flex:0 0 72px;width:72px;height:72px;border-radius:12px;background:#fff center/cover no-repeat}
.sdg-dock__bagbody{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.sdg-dock__bagname a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--sdg-dock-text,#fff);font-size:14px;font-weight:600;line-height:1.25}
.sdg-dock__bagname a:hover,.sdg-dock__bagname a:focus-visible{text-decoration:underline}
.sdg-dock__bagmeta{font-size:12px;opacity:.72}
.sdg-dock__bagfit:empty{display:none}
.sdg-dock__bagrow{display:flex;align-items:center;gap:6px;margin-top:4px}
.sdg-dock__qty{display:inline-flex;align-items:center;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:999px}
.sdg-dock__qty output{min-width:24px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.sdg-dock__bagprice{margin-left:auto;font-size:14px;font-weight:700;white-space:nowrap;text-align:right}
.sdg-dock__bagprice del{display:block;font-size:12px;font-weight:400;opacity:.55}
.sdg-dock .sdg-dock__bag button.sdg-dock__bagrm{opacity:.8}
.sdg-dock__bagfoot{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
.sdg-dock__bagsub{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 4px;font-size:15px}
.sdg-dock__bagsub strong{font-size:18px;font-weight:700}
.sdg-dock__bagnote{margin:0;padding:0 4px;font-size:12px;opacity:.65}
.sdg-dock__bagerr{margin:0;padding:0 4px;font-size:13px;color:#ffb4b4}
.sdg-dock__bagbtns{display:flex;gap:8px;margin-top:4px}
.sdg-dock__bagbtns .sdg-dock__cta{flex:1 1 0;max-width:none;min-height:46px}
.sdg-dock a.sdg-dock__cta:not(.is-quiet):hover{background:var(--sdg-dock-btn-hover,#cab29f) !important;color:var(--sdg-dock-btn-hover-text,#191919) !important}
.sdg-dock a.sdg-dock__cta.is-quiet:hover{background:rgba(255,255,255,.24) !important;color:var(--sdg-dock-text,#fff) !important}
.sdg-dock__bagempty{margin:0;padding:14px 4px 6px;text-align:center;opacity:.8}
@media (prefers-reduced-motion:reduce){.sdg-dock__bagitem{transition:none}}
/* a tool on its way (chat, rewards load on the tap): a ring turns around the icon until the panel is open */
.sdg-dock__tool.is-busy::after,.sdg-dock__bubble.is-busy::after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:var(--sdg-dock-text,#fff);animation:sdg-spin .8s linear infinite;pointer-events:none}
.sdg-dock__tool.is-busy::after{top:5px;left:50%;margin-left:-15px}
.sdg-dock--desktop .sdg-dock__tool.is-busy::after{top:50%;margin-top:-15px}
.sdg-dock__bubble{position:relative}
.sdg-dock__bubble.is-busy::after{top:50%;left:50%;margin:-15px 0 0 -15px}
@media (prefers-reduced-motion:reduce){.sdg-dock__tool.is-busy::after,.sdg-dock__bubble.is-busy::after{animation:none;border-color:var(--sdg-dock-text,#fff)}}
/* one bag: while the dock is the bag, the theme's side cart never slides in (its icon opens the dock instead) */
html.sdg-one-bag .elementor-menu-cart__container,html.sdg-one-bag .astra-cart-drawer,html.sdg-one-bag .astra-mobile-cart-overlay{display:none !important}
