/* ==========================================================================
   Product Carousel — assets/css/product-carousel.css
   Structural + responsive styling for the mhs/product-carousel block.
   Registered as this block's 'style' handle (see index.php), so WordPress
   core only enqueues it on requests where the block actually renders — see
   the comment at the top of includes/blocks/product-carousel/index.php.

   Slide width (products visible per breakpoint) reads the --mhs-pc-slides-*
   / --mhs-pc-gap custom properties render.php writes inline on each
   instance's wrapper, so layout is correct on first paint without waiting
   on JS. Color tokens are baked in as plain hex from the site's MONO
   palette, same convention as the plugin's other sections — per-instance
   color/typography overrides (Styling panel) are injected as a small inline
   <style> block by render.php's mhs_pc_instance_style(), scoped to that
   instance's #mhs-pc-{id}.
   ========================================================================== */

.mhs-pc{
  --mhs-pc-slides-desktop:4;--mhs-pc-slides-tablet:2;--mhs-pc-slides-mobile:1;--mhs-pc-gap:16px;
  margin:32px 0;
}
.mhs-pc-wrap{width:min(var(--global-content-width, 1440px) - 2 * var(--global-content-edge-padding, 24px), 100% - 40px);margin-inline:auto}

/* ---- Section head: eyebrow/heading/description + (View all / arrows) ---- */
.mhs-pc-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-bottom:var(--pl-space-head);
}
.mhs-pc-head--center{justify-content:center;text-align:center;flex-direction:column;align-items:center}
.mhs-pc-head--center .mhs-pc-head-actions{justify-content:center}
.mhs-pc-head--right{text-align:right}
.mhs-pc-head--right .mhs-pc-head-text{margin-left:auto}
.mhs-pc-head-text{min-width:0}
.mhs-pc-eyebrow{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--head);margin:0 0 6px}
.mhs-pc-heading{font-size:clamp(24px,3vw,34px);line-height:1.15;color:var(--head);margin:0 0 8px}
/* same size as the other homepage section headings, sitting on the arrows' baseline */
.mhs-pc-head--left .mhs-pc-heading{font-size:var(--pl-fs-h2);line-height:1.06;margin:0}
.mhs-pc-desc{font-size:15px;line-height:1.6;color:var(--text);margin:0;max-width:640px}
.mhs-pc-head-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.mhs-pc-nav{display:flex;gap:8px}
.mhs-pc-nav--inactive{display:none}
.mhs-pc-nav .mhs-pc-prev,
.mhs-pc-nav .mhs-pc-next{cursor:pointer;padding:0}
.mhs-pc-nav button:disabled{opacity:.35;cursor:default}

/* ---- Track ----
   .mhs-pc-container is a real <ul class="products"> now (render.php), so the
   theme's own WooCommerce/Product Card Template CSS can target it — but that
   same theme CSS may also declare its own `ul.products{display:grid;...}`,
   which would break Embla's flex/transform-based sliding if it happened to
   win the cascade. !important guarantees the carousel's own flex layout
   always wins here regardless of load order. */
.mhs-pc-viewport{overflow:hidden}
.mhs-pc-container{display:flex!important;gap:var(--mhs-pc-gap)}
.mhs-pc-slide{
  flex:0 0 calc((100% - (var(--mhs-pc-slides-mobile) - 1) * var(--mhs-pc-gap)) / var(--mhs-pc-slides-mobile));
  min-width:0;
}
/* Cards per view follow the shop grid (2026-10-09), so a card stays roughly 200–240px wide at
   every width instead of ballooning to ~300px on tablets / small laptops:
   <600px: mobile setting · 600–899: 3 · 900–1279: 4 · 1280+: desktop setting.
   (--pl-pc-n never exceeds the block's desktop setting.) */
@media(min-width:600px){
  .mhs-pc-slide{
    --pl-pc-n:min(var(--mhs-pc-slides-desktop), max(var(--mhs-pc-slides-tablet), 3));
    flex-basis:calc((100% - (var(--pl-pc-n) - 1) * var(--mhs-pc-gap)) / var(--pl-pc-n));
  }
}
@media(min-width:900px){
  .mhs-pc-slide{ --pl-pc-n:min(var(--mhs-pc-slides-desktop), 4); }
}
@media(min-width:1280px){
  .mhs-pc-slide{ --pl-pc-n:var(--mhs-pc-slides-desktop); }
}

/* Carousel disabled ("static grid" mode, or Embla failed to load) — wrap
   instead of scroll, same slide widths as the carousel breakpoints above. */
.mhs-pc--static .mhs-pc-viewport{overflow:visible}
.mhs-pc--static .mhs-pc-container{flex-wrap:wrap;row-gap:var(--mhs-pc-gap)}

/* ---- Dots ---- */
.mhs-pc-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.mhs-pc-dots--inactive{display:none}
.mhs-pc-dots button{
  width:8px;height:8px;padding:0;border:none;border-radius:50%;background:#E3E3E3;cursor:pointer;
  transition:background .25s ease,transform .25s ease;
}
.mhs-pc-dots button.is-active{background:var(--head);transform:scale(1.25)}

/* ---- Card ----
   Each card is rendered entirely by the site's own Product Card WooCommerce
   Template (WooCommerce → Woo Templates → Product Catalog Loop Item) via
   wc_get_template_part('content','product') in render.php's
   mhs_pc_render_cards() — that template's own styling supplies every visual
   detail (image, title, price, badges, Add to Cart, Quick View), so nothing
   about the card's look is declared here. render.php now wraps the cards in
   a real `<ul class="mhs-pc-container products">`, with each product's own
   `<li class="product">` (WooCommerce's real markup, not a wrapping <div>)
   picking up the `.mhs-pc-slide` class directly via the woocommerce_post_class
   filter — genuine `<ul><li>` structure, same ancestor classes
   (.woocommerce, ul.products) the theme's Product Card Template CSS expects
   to be present, so its own borders/spacing/quick-view-badge styling applies
   exactly like it does on any other WooCommerce loop. The only rule below is
   this block's own: stretch the card to fill its slide, same as any other
   item in a flex row of equal-height cards. */

.mhs-pc-slide{display:flex}

@media(max-width:767px){
  .mhs-pc-head{flex-direction:column;align-items:flex-start}
  .mhs-pc-head-actions{width:100%;justify-content:flex-end}
}

/* Scroll bar under the rail (when arrows are off), 2026-10-09: 2px hairline track, 3px soft navy
   thumb; the 20px-tall bar is the hit area for click / drag. */
.mhs-pc-bar {
	position: relative;
	height: 20px;
	margin-top: 16px;
	cursor: pointer;
	touch-action: none;
}
.mhs-pc-bar[hidden] {
	display: none;
}
.mhs-pc-bar::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: rgba(3, 0, 50, .08);
}
.mhs-pc-bar-thumb {
	position: absolute;
	left: 0;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 3px;
	background: rgba(3, 0, 50, .35);   /* soft by default; firms up while you use it */
	transition: background-color .2s ease;
}
.mhs-pc-bar:hover .mhs-pc-bar-thumb,
.mhs-pc-bar.is-dragging .mhs-pc-bar-thumb {
	background: rgba(3, 0, 50, .6);
}
.mhs-pc-bar.is-dragging {
	cursor: grabbing;
}

/* Header "view all" button (2026-10-09): sits on the heading's row. On narrow screens it stays
   there and only wraps under the heading when the heading is too long to share the line. */
@media(max-width:767px){
  .mhs-pc-head{flex-direction:row;align-items:center}
  .mhs-pc-head-actions{width:auto}
}
.mhs-pc-head{flex-wrap:wrap;column-gap:24px;row-gap:16px}
.mhs-pc-head-text{flex:1 1 auto;min-width:min(100%, max-content)}
.mhs-pc-head-actions{margin-left:auto}
.mhs-pc-view-all{gap:8px}
.mhs-pc-view-all::after{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E") center/contain no-repeat}

/* phones (2026-10-12): the "Shop everything" button moves from beside the heading to
   under the rail + scroll bar, centred. The head row opens up (display: contents) so
   its two parts can be ordered around the rail. */
@media (max-width: 767px) {
  .mhs-pc-wrap { display: flex; flex-direction: column; }
  .mhs-pc-head { display: contents; }
  .mhs-pc-head-text { order: 1; margin-bottom: 24px; }
  .mhs-pc-viewport { order: 2; }
  .mhs-pc-bar { order: 3; margin-top: 8px; }
  .mhs-pc-head-actions { order: 4; align-self: stretch; width: 100%; margin: 16px 0 0; justify-content: center; }
}

/* Native rail (2026-10-13, non-looping carousels — see nativeRail() in product-carousel.js): a real
   horizontal scroller with mandatory snap to each card's left edge, like Alt's product rows. The
   browser's own scroll bar is hidden (the block draws its own .mhs-pc-bar). .is-dragging pauses the
   snap while a mouse drag is in progress. */
.mhs-pc--native .mhs-pc-viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.mhs-pc--native .mhs-pc-viewport::-webkit-scrollbar {
	display: none;
}
.mhs-pc--native .mhs-pc-slide {
	scroll-snap-align: start;
}
.mhs-pc--native .mhs-pc-viewport.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}