/* ═══════════════════════════════════════════════════════════════
   HOLZCOM Shop V148 — UI/UX Best Practices + Smart Floating Dock
   Glassmorphism dock, micro-interactions, smooth transitions,
   focus states, scroll behavior, touch targets, a11y
   ═══════════════════════════════════════════════════════════════ */

/* ── SMART FLOATING DOCK ── */
.sdock{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%) translateY(100px);
  z-index:990;
  opacity:0;
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  pointer-events:none;
}
.sdock--visible{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  pointer-events:auto;
}
.sdock__inner{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.5);
  border-radius:20px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.6);
}
@supports not (backdrop-filter:blur(1px)){
  .sdock__inner{background:rgba(255,255,255,.95)}
}
.sdock__group{display:flex;align-items:center;gap:4px}
.sdock__center{flex:1;justify-content:center}
.sdock__btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  border-radius:12px;
  border:none;
  background:transparent;
  color:var(--shop-text,#2d2a26);
  cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.sdock__btn:hover{
  background:rgba(200,169,126,.12);
  transform:translateY(-2px);
}
.sdock__btn:active{
  transform:translateY(0) scale(.95);
}
.sdock__phone-btn:hover{background:rgba(16,185,129,.12);color:var(--shop-success)}
.sdock__cart-btn:hover{background:rgba(200,169,126,.15)}
.sdock__search-btn{
  width:auto;
  padding:0 14px;
  gap:6px;
  border-radius:20px;
  background:rgba(0,0,0,.04);
  font-size:13px;
  color:var(--shop-text-soft);
}
.sdock__search-btn:hover{background:rgba(0,0,0,.08)}

/* Dock badges */
.sdock__badge{
  position:absolute;top:-2px;right:-2px;
  min-width:16px;height:16px;
  border-radius:8px;
  background:var(--shop-text,#2d2a26);color:#fff;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.sdock__badge--accent{background:var(--shop-accent,#c8a97e)}
.sdock__badge--bounce{animation:sdockBounce .4s ease}
@keyframes sdockBounce{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}

/* Dock search overlay */
.sdock__search-overlay{
  position:fixed;bottom:80px;left:50%;
  transform:translateX(-50%);
  width:min(500px,90vw);
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  transform:translateX(-50%) translateY(10px);
}
.sdock__search-overlay--active{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.sdock__search-box{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.12);
}
.sdock__search-box input{
  flex:1;border:none;background:none;
  font-size:16px;outline:none;
  color:var(--shop-text);
}
.sdock__search-box input::placeholder{color:var(--shop-text-soft)}
.sdock__search-close{
  width:28px;height:28px;border:none;border-radius:50%;
  background:rgba(0,0,0,.06);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.sdock__search-close:hover{background:rgba(0,0,0,.12)}

/* Hide old static dock when smart dock active */
.sdock--visible ~ .dock,
body:has(.sdock--visible) .dock{display:none!important}

/* ── GLOBAL MICRO-INTERACTIONS ── */

/* Smooth page transitions */
html{scroll-behavior:smooth}

/* Better focus indicators for a11y */
*:focus-visible{
  outline:2px solid var(--shop-accent,#c8a97e);
  outline-offset:2px;
  border-radius:4px;
}
button:focus-visible,a:focus-visible{
  outline:2px solid var(--shop-accent);
  outline-offset:2px;
}

/* Touch targets: minimum 44px */
@media(pointer:coarse){
  .shop-card__cart-btn,.shop-card__buy1-btn,
  .shop-card__action-btn,.sdock__btn{
    min-width:44px;min-height:44px;
  }
  .shop-filter-check{padding:8px 0}
  .shop-cat-btn,.shop-series-btn{padding:10px 12px}
}

/* ── BUTTONS: better hover states ── */
.btn{
  transition:all .2s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:currentColor;opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.btn:hover::after{opacity:.06}
.btn:active{transform:scale(.97)}

.btn--primary{
  box-shadow:0 2px 8px rgba(200,169,126,.25);
}
.btn--primary:hover{
  box-shadow:0 4px 16px rgba(200,169,126,.35);
  transform:translateY(-1px);
}
.btn--primary:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 1px 4px rgba(200,169,126,.2);
}

/* Ghost button hover */
.btn--ghost{
  transition:all .2s;
}
.btn--ghost:hover{
  border-color:var(--shop-accent);
  color:var(--shop-accent-dark);
  background:rgba(200,169,126,.05);
}

/* ── CARDS: smoother hover ── */
.shop-card{
  transition:transform .3s cubic-bezier(.4,0,.2,1),
             box-shadow .3s ease,
             border-color .3s ease;
}
.shop-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 48px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
}

/* Card image: smooth zoom */
.shop-card__img{
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.shop-card:hover .shop-card__img{
  transform:scale(1.06);
}

/* ── HEADER: refined scroll transition ── */
.hdr{
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.hdr.is-scrolled{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 12px rgba(0,0,0,.06);
}

/* ── MODALS: better animations ── */
.shop-product-modal__overlay,
.shop-qv-modal__overlay,
.shop-buy1-overlay,
.shop-cart-drawer__overlay{
  transition:opacity .25s ease;
}
.shop-product-modal__body,
.shop-qv-modal__body{
  animation:modalSlideUp .35s cubic-bezier(.4,0,.2,1);
}
@keyframes modalSlideUp{
  from{opacity:0;transform:translate(-50%,-48%) scale(.96)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* Cart drawer: smoother slide */
.shop-cart-drawer__panel{
  animation:drawerSlide .35s cubic-bezier(.4,0,.2,1);
}
@keyframes drawerSlide{
  from{transform:translateX(100%);opacity:0.5}
  to{transform:translateX(0);opacity:1}
}

/* ── TOAST: better positioning and animation ── */
.shop-toast{
  position:fixed;
  bottom:80px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  padding:12px 24px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  z-index:10000;
  opacity:0;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  backdrop-filter:blur(12px);
  max-width:min(400px,85vw);
  text-align:center;
}
.shop-toast--show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.shop-toast--success{
  background:rgba(16,185,129,.9);color:#fff;
  box-shadow:0 4px 16px rgba(16,185,129,.3);
}
.shop-toast--error{
  background:rgba(239,68,68,.9);color:#fff;
  box-shadow:0 4px 16px rgba(239,68,68,.3);
}
.shop-toast--info{
  background:rgba(45,42,38,.85);color:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}

/* ── PDP: better gallery transitions ── */
.pdp-gallery__img{
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  cursor:zoom-in;
}
.pdp-gallery__main:hover .pdp-gallery__img{
  /* Zoom is handled by JS, but we smooth it */
}
.pdp-gallery__thumb{
  transition:all .2s ease;
}
.pdp-gallery__thumb:hover{opacity:1;transform:scale(1.05)}

/* ── PAGINATION: better clickable area ── */
.shop-page-btn{
  min-width:36px;min-height:36px;
  border-radius:10px;
  transition:all .2s;
}
.shop-page-btn:hover:not(.shop-page-btn--active){
  background:rgba(200,169,126,.1);
}
.shop-page-btn--active{
  box-shadow:0 2px 8px rgba(200,169,126,.3);
}

/* ── FILTER SIDEBAR: better spacing ── */
.shop-filter-check{
  transition:background .15s;
  border-radius:6px;
  padding:5px 4px;
  margin:0 -4px;
}
.shop-filter-check:hover{
  background:rgba(200,169,126,.06);
}

/* ── LOADING STATES: pulse animation ── */
.shop-loading{
  animation:loadingPulse 1.5s ease-in-out infinite;
}
@keyframes loadingPulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* ── ACCOUNT PAGE: better card shadows ── */
.account-order-detail,
.account-address-card,
.account-auth__card{
  transition:box-shadow .3s ease;
}
.account-order-detail:hover{
  box-shadow:0 4px 24px rgba(0,0,0,.06);
}

/* ── COMPARE TABLE: striped rows ── */
.cmp-table tr:nth-child(even){background:rgba(0,0,0,.015)}
.cmp-table tr:hover{background:rgba(200,169,126,.04)}

/* ── TRUST PAGE: better readability ── */
.trust-content{
  font-size:15px;
  line-height:1.8;
  color:var(--shop-text,#2d2a26);
}
.trust-content a{
  color:var(--shop-accent-dark,#b08d5b);
  text-decoration:underline;
  text-underline-offset:3px;
}
.trust-content a:hover{color:var(--shop-accent)}

/* ── MOBILE: refined responsive ── */
@media(max-width:768px){
  .sdock{bottom:12px}
  .sdock__inner{padding:6px 10px;border-radius:16px;gap:2px}
  .sdock__btn{width:38px;height:38px;border-radius:10px}
  .sdock__search-btn{padding:0 10px}

  /* Bigger touch targets on mobile */
  .shop-card__cart-btn,.shop-card__buy1-btn{width:40px;height:40px}
  .shop-qty-btn{width:40px;height:40px}

  /* Full-width buttons on mobile PDP */
  .pdp-actions{flex-direction:column}
  .pdp-actions .btn{width:100%}

  /* Account nav horizontal scroll */
  .account-nav{
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .account-nav::-webkit-scrollbar{display:none}

  /* Sticky bar: full width on mobile */
  .pdp-sticky-bar{padding:8px 12px}
}

@media(max-width:480px){
  .sdock__phone-btn{display:none}
  .sdock__inner{gap:1px}
}

/* ── DARK MODE SUPPORT (prefers-color-scheme) ── */
@media(prefers-color-scheme:dark){
  .sdock__inner{
    background:rgba(30,28,25,.75);
    border-color:rgba(255,255,255,.08);
  }
  .sdock__btn{color:rgba(255,255,255,.85)}
  .sdock__btn:hover{background:rgba(200,169,126,.2)}
  .sdock__badge{background:var(--shop-accent)}
  .sdock__search-box{
    background:rgba(30,28,25,.9);
    border-color:rgba(255,255,255,.1);
  }
  .sdock__search-box input{color:#fff}
}

/* ── PRINT: hide dock and overlays ── */
@media print{
  .sdock,.dock,.shop-toast,.shop-cart-drawer,
  .shop-product-modal,.shop-qv-modal,.shop-buy1-modal,
  .hz-consent{display:none!important}
}

/* ── REDUCED MOTION ── */
@media(prefers-reduced-motion:reduce){
  *{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  html{scroll-behavior:auto}
}

/* ── SELECTION COLOR ── */
::selection{
  background:rgba(200,169,126,.25);
  color:var(--shop-text);
}

/* ── CHECKOUT STEPPER (V148 #3) ── */
.co-stepper{
  display:flex;align-items:center;justify-content:center;
  gap:0;margin-bottom:24px;padding:0 16px;
}
.co-step{
  display:flex;align-items:center;gap:6px;
  opacity:.4;transition:opacity .3s;
}
.co-step--active{opacity:1}
.co-step--done{opacity:.7}
.co-step__num{
  width:28px;height:28px;border-radius:50%;
  background:var(--shop-border);color:var(--shop-text-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.co-step--active .co-step__num{
  background:var(--shop-accent);color:#fff;
}
.co-step--done .co-step__num{
  background:var(--shop-success);color:#fff;
}
.co-step__label{font-size:12px;font-weight:500;white-space:nowrap}
.co-step__line{
  flex:1;height:2px;min-width:24px;max-width:60px;
  background:var(--shop-border);margin:0 8px;
}
@media(max-width:480px){
  .co-step__label{display:none}
  .co-step__line{min-width:16px}
}

/* Free delivery threshold bar */
.co-threshold{margin-bottom:16px;padding:10px 14px;background:#faf9f7;border-radius:10px}
.co-threshold__text{font-size:13px;color:var(--shop-text-soft);margin-bottom:6px}
.co-threshold__bar{height:4px;background:var(--shop-border);border-radius:2px;overflow:hidden}
.co-threshold__fill{height:100%;background:var(--shop-accent);border-radius:2px;transition:width .5s ease}

/* Checkout field validation */
.co-field-error{color:var(--shop-danger);font-size:12px;margin-top:2px}

/* ── QUICKVIEW PREV/NEXT (#7) ── */
.qv-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid var(--shop-border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  z-index:5;transition:all .2s;font-size:16px;color:var(--shop-text);
}
.qv-nav:hover{background:var(--shop-accent);color:#fff;border-color:var(--shop-accent)}
.qv-nav--prev{left:-18px}
.qv-nav--next{right:-18px}

/* ── MOBILE NAV ENHANCED (#8) ── */
.hdr__mobile{
  max-height:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}
.hdr__mobile.is-open{max-height:400px}
.hdr__mobile-link{
  padding:12px 20px;
  min-height:44px;
  display:flex;align-items:center;
}
.hdr__mobile-sep{
  height:1px;background:var(--shop-border,#e8e4df);margin:4px 16px;
}

/* ── BREADCRUMB SCHEMA (#16) ── */
.detail-breadcrumbs a,.breadcrumbs a{
  text-underline-offset:3px;
}