/* ==========================================================================
   ux.css — last-loaded polish for every screen size (phone → wide desktop).
   Loaded after every other stylesheet on purpose, so these win.
   ========================================================================== */

/* 1. Closed drawers (menu, cart, wishlist) sat just off-screen with a 40px
      shadow, which bled a grey haze down both edges of every page. A closed
      drawer now has no shadow and is hidden from taps and screen readers. */
.drawer:not(.open){
  box-shadow:none !important;visibility:hidden;
  transition:transform .34s cubic-bezier(.22,1,.36,1),visibility 0s linear .34s !important;
}
.drawer.open{
  visibility:visible;
  transition:transform .34s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s !important;
}

/* 2. "Picked for you" boxes — slow, smooth turns.
      While a box turns it shrinks slightly, so its corners never poke out
      over the heading or the next box, then settles back to full size. */
/* 3 s per turn (PC_TURN_MS in home.js), a soft sine-like ease so the box
   drifts off one face and settles onto the next with no jolt at either end.
   A deeper perspective keeps the far edge from stretching mid-turn. */
.pc-scene{perspective:1500px;-webkit-perspective:1500px}
.pcube{
  scale:1;
  transition:transform 3s cubic-bezier(.45,.05,.3,1),scale 1.65s cubic-bezier(.37,0,.63,1) !important;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.pc-scene.pc-turning{z-index:2;animation-play-state:paused !important}
.pc-scene.pc-turning .pcube{scale:.92}
/* shadows are the costly part to repaint on a moving 3-D box - keep them
   light while it turns, so the motion stays at full frame rate */
.pc-face{transition:box-shadow .6s ease,border-color .6s ease}
.pc-scene.pc-turning .pc-face{box-shadow:0 3px 8px rgba(15,17,17,.10)}
.pc-off{transform:translateZ(1px)}
.hero-cubes .hcard-head{position:relative;z-index:3;background:inherit}
.pc-grid{row-gap:calc(var(--pc-gap,10px) + 6px);padding-top:6px !important}
.hcard-more{
  display:inline-block;padding:4px var(--hm-pad,12px) 12px;
  font-size:12.5px;font-weight:600;color:var(--brand,#0b6b5b);text-decoration:none;
}
.hcard-more:hover{text-decoration:underline}

/* 3. Product page — even rows, no single orphan tile, no cut-off values. */
.pdp-highlights{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.pdp-highlights .hl-v{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.3}
.pdp-offers{grid-template-columns:1fr !important}
@media (min-width:1440px){
  .pdp-highlights{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  .pdp-offers{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}

/* 4. Touch comfort — every tap target at least 40px, no double-tap zoom
      delay, no grey flash on tap. */
a,button,[role="button"],label,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){
  .btn,.qty-sel button{min-height:40px}
  input,select,textarea{font-size:16px !important}     /* stops iOS zooming into fields */
}

/* 5. Long words / product names never push a card wider than the screen. */
.pcard,.pdp-info,.order-card,.summary-box,.drawer-body{overflow-wrap:anywhere;min-width:0}

/* 8. Keyboard users see where they are. */
:focus-visible{outline:2px solid var(--brand,#0b6b5b);outline-offset:2px}

/* 9. Respect "reduce motion" everywhere. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}


/* ==========================================================================
   10. Logo always reachable — nothing in the header can sit on top of it.
   ========================================================================== */
.brand-logo{position:relative;z-index:6;display:inline-flex;align-items:center;cursor:pointer;min-height:40px}
.brand-logo img{pointer-events:none}
@media (pointer:coarse){ .brand-logo{min-height:44px;padding-right:4px} }

/* ==========================================================================
   11. Every screen size — phone, tablet, laptop, wide desktop.
   ========================================================================== */
/* nothing ever scrolls the page sideways */
html,body{overflow-x:clip;max-width:100%}
img,video,svg,canvas{max-width:100%}
/* iPhone notch / home-bar: content and bottom bars stay clear */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
/* smooth, momentum scrolling in every horizontal rail */
.hm-picks-row,.subnav-inner,.pdp-thumbs,.rail-track{scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
/* product names never break the layout */
.pc-meta small,.pc-cap,.pcard-title,.c-name{overflow-wrap:anywhere}

/* Picked-for-you boxes: sensible size on every width */
@media (min-width:1600px){ .hm-hero-n0 .pc-grid{max-width:900px} }
@media (min-width:701px) and (max-width:1024px){          /* tablets */
  .pc-grid{gap:12px}
  .pc-meta b{font-size:12px}
  .hdr-main{gap:8px}
  .search-box{min-width:0;flex:1 1 220px}
}
@media (max-width:700px){                                 /* phones */
  .pc-grid{gap:10px;padding-left:10px !important;padding-right:10px !important}
  .pc-off{font-size:9.5px;padding:1px 5px}
  .pc-meta{padding:3px 6px 5px}
  .pc-meta b{font-size:11.5px}
}
@media (max-width:360px){                                 /* very small phones */
  .pc-grid{gap:8px}
  .pc-meta small{display:none}
  .brand-logo img{max-width:88px !important}
}
/* landscape phones: keep the hero from eating the whole screen */
@media (max-height:480px) and (orientation:landscape){
  .hm-hero .hcard{max-height:none}
}
/* big tap targets on touch screens */
@media (pointer:coarse){
  .hdr-btn,.hdr-cart,.hdr-openbox,.subnav-inner a{min-height:40px}
  .pc-scene{-webkit-touch-callout:none}
}