/*
Theme Name: Blocksy Child
Template: blocksy
Theme URI: https://creativethemes.com/blocksy/
Text Domain: blocksy-child
*/

html {
  scroll-behavior: smooth;
}

/* STACKABLE HERO CTA — force hover styles */
body.home .wp-block-stackable-button.home-hero-cta > a.stk-link.stk-button {
  transition: border-width 160ms ease, border-color 160ms ease, color 160ms ease;
  box-sizing: border-box;
  border-style: solid; /* ensures border-width takes effect */
}

/* Hover + keyboard focus */
body.home .wp-block-stackable-button.home-hero-cta > a.stk-link.stk-button:hover,
body.home .wp-block-stackable-button.home-hero-cta > a.stk-link.stk-button:focus-visible {
  border-color: #f2f5f7 !important;   /* border hover */
  color: #f2f5f7 !important;          /* link text hover */
}

/* Stackable sometimes colors the inner span separately */
body.home .wp-block-stackable-button.home-hero-cta > a.stk-link.stk-button:hover .stk-button__inner-text,
body.home .wp-block-stackable-button.home-hero-cta > a.stk-link.stk-button:focus-visible .stk-button__inner-text {
  color: #f2f5f7 !important;
}
/* Active (click) */
body.home .wp-block-stackable-button.home-hero-cta > a.stk-link.stk-button:active {
  transform: translateY(0) scale(0.98);
}

/* ================
   COLLECTION CARDS
   ================ */
/* Horizontal scroll container */
.horizontal-scroll {
  display: flex;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 0.5rem;
  padding-bottom: 0.75rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }

/* Tile wrapper */
.horizontal-scroll > .tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(280px, 26vw, 320px);
  aspect-ratio: 3 / 4;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: transform 0.25s ease;
}
.horizontal-scroll > .tile:hover {
  transform: translateY(-2px);
  z-index: 5;
}

/* Full-tile link overlay */
.tile-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Image fixes */
.tile figure,
.tile .wp-block-image {
  width: 100%;
  height: 100%;
  margin: 0;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Title (bottom left) */
.tile .title {
  position: absolute;
  bottom: clamp(0.8rem, 2.2vw, 2.5rem);
  left: clamp(0.8rem, 1.8vw, 1.1rem);
  max-width: 68%;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.1;
  color: #ffffff;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}

/* Go button (brand arrow) */
.tile .go-btn {
  position: absolute;
  bottom: clamp(0.1rem, 0.1vw, 2.5rem);
  right: clamp(0.8rem, 1.8vw, 1.1rem);
  width: clamp(38px, 5vw, 46px);
  height: clamp(38px, 5vw, 46px);
  border-radius: 50%;
  background: #1f2a44;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 2;
  pointer-events: none;
}
.tile .go-btn::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  transform: translateX(-1px) translateY(1px) rotate(45deg);
}
.tile:hover .go-btn {
  background: #2a385a;
}

/* Tablet override */
@media (max-width: 1024px) and (min-width: 769px) {
  .horizontal-scroll > .tile {
    width: clamp(260px, 42vw, 340px);
  }

  .tile .title {
    bottom: 2.3rem;
    left: 1.1rem;
    font-size: 1.2rem;
    max-width: 70%;
  }

  .tile .go-btn {
    bottom: 0.1rem;
    right: 1.1rem;
    width: 55px;
    height: 55px;
  }

  .tile .go-btn::before {
    width: 11px;
    height: 11px;
  }
}

/* Mobile: override spacing + scale up text/button */
@media (max-width: 768px) {
  .horizontal-scroll > .tile {
    width: clamp(300px, 80vw, 360px);
  }

  .tile .title {
    bottom: 2.3rem;
    left: 1.1rem;
    font-size: 1.25rem;
    max-width: 70%;
    line-height: 1.12;
  }

  .tile .go-btn {
    bottom: 0.1rem;
    right: 1.1rem;
    width: 52px;
    height: 52px;
  }

  .tile .go-btn::before {
    width: 12px;
    height: 12px;
    border-right-width: 2px;
    border-top-width: 2px;
    transform: translateX(-1px) translateY(1px) rotate(45deg);
  }
}


/* =============
   PRODUCT CARDS
   ============= */

.woocommerce ul.products li.product {
  --card-radius: 8px;
  --meta-gap: 1.0rem;       /* image -> title */
  --meta-tight: 0.01rem;      /* title -> price */
  border-radius: var(--card-radius);
  overflow: visible;
  background: transparent;
  transition: background 200ms ease, box-shadow 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover {
    background: #f2f5f7;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }
}

/* Ensure ancestors don’t clip hover shadow */
.woocommerce,
.woocommerce ul.products {
  overflow: visible !important;
}

/* Image frame: force 3:4 even for square placeholders */
.woocommerce ul.products li.product > figure {
  position: relative;
  margin: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

/* Blocksy media container should fill the frame */
.woocommerce ul.products li.product > figure > a.ct-media-container {
  display: block;
  width: 100%;
  height: 100%;
}

/* Force the image to fill 3:4 (overrides inline aspect-ratio:1/1) */
.woocommerce ul.products li.product > figure img.wp-post-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: var(--card-radius);
  aspect-ratio: 3 / 4 !important;
}

/* Keep only the shortened title */
.woocommerce ul.products li.product .woocommerce-loop-product__title:not(.short-title) {
  display: none !important;
}

/* If any old injected empty product-thumb exists, hide it */
.woocommerce ul.products li.product > .product-thumb {
  display: none !important;
}

/* Title spacing + styling */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: var(--meta-gap) 0 var(--meta-tight) 0 !important;
  padding: 0 !important;
  line-height: 1.1;
  font-weight: 600;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  text-decoration: none;
}

/* Price styling */
.woocommerce ul.products li.product .price {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.8em;
  opacity: 0.82;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tighten space after price */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .ct-woo-card-actions,
.woocommerce ul.products li.product .price {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Blocksy card actions: remove borders/dividers */
.woocommerce ul.products li.product .ct-woo-card-actions {
  position: relative;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .ct-woo-card-actions * {
  border: none !important;
  box-shadow: none !important;
}

/* Remove Blocksy’s vertical divider line next to price */
[data-products="type-2"] .ct-woo-card-actions .price:not(:only-child)::after,
[data-products="type-2"] .ct-woo-card-actions .price:not(:only-child)::before {
  display: none !important;
  content: none !important;
}

/* Hide default “Select options” button */
.woocommerce ul.products li.product .ct-woo-card-actions a.button {
  display: none !important;
}

/* Hover arrow: circle on image */
.woocommerce ul.products li.product > figure::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1f2a44;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
  pointer-events: none;
  z-index: 3;
}

/* Plus glyph (centered inside the 46px circle) */
.woocommerce ul.products li.product > figure::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  right: calc(14px + 16px);  /* 14 + (46-14)/2 */
  bottom: calc(14px + 16px);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  z-index: 4;
  background:
    linear-gradient(#fff,#fff) center / 14px 2px no-repeat,
    linear-gradient(#fff,#fff) center / 2px 14px no-repeat;
}

/* Desktop hover reveal only (no CSS zoom) */
@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover > figure::after {
    opacity: 1;
    transform: translateY(0);
    background: #2a385a;
  }
  .woocommerce ul.products li.product:hover > figure::before {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile/tablet: remove hover arrow entirely */
@media (hover: none) {
  .woocommerce ul.products li.product > figure::after,
  .woocommerce ul.products li.product > figure::before {
    display: none !important;
  }
}

/* ===========================
   PRODUCT RANGES (Shortcode)
   =========================== */

.product-grid-wrapper {
  max-height: 760px;         /* increased viewable area */
  overflow: hidden;
  position: relative;
  transition: max-height 0.5s ease;
  padding: 12px 0 16px;           /* prevents hover shadow clipping top/bottom */
}

.product-grid-wrapper.expanded {
  max-height: 5000px;
  padding-bottom: 16px;
}

/* When not expandable: show full grid, no fade */
.product-grid-wrapper.no-expand {
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}
.product-grid-wrapper.no-expand::after {
  display: none !important;
}
.view-more-btn.is-hidden {
  display: none !important;
}

/* Fade overlay */
.product-grid-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

.product-grid-wrapper.expanded::after {
  display: none;
}

/* View more button: smaller + centered */
.view-more-btn {
  display: block !important;
  width: 200px !important;
  max-width: calc(100% - 32px);
  margin: 16px auto !important;
  padding: 10px 18px !important;
  border-radius: 0 !important; /* simple */
  background: #1f2a44 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer;
}
.view-more-btn:hover { background: #2a385a !important; }


/* Grid layout */
.product-grid-wrapper ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px;
  margin: 0 !important;
}

/* Tablet (768px–1023px): 3 per row */
@media (max-width: 1023px) and (min-width: 768px) {
  .product-grid-wrapper ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Mobile (≤767px): 2 per row */
@media (max-width: 767px) {
  .product-grid-wrapper ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =========================================================
   BLOCKSY DROPDOWN — PREMIUM BULLET→DASH + COLOR SCHEME
   ========================================================= */

@media (min-width: 1025px) {
    /* ---------- MOTION ---------- */
    :root{
      --lux-ease: cubic-bezier(.16, 1, .3, 1);
      --submenu-open-dur: 220ms;
    }
    
    /* ---------- COLOR VARIABLES (YOUR NEW BEHAVIOUR) ---------- */
    /* Normal header state */
    .ct-header,
    header {
      --submenu-bg: #2c2d2d;
    
      --submenu-initial: rgba(191, 189, 189, 0.7);
      --submenu-hover: #bfbebe;
      --submenu-active: #dbe0eb;
    }
    
    /* Sticky header state (matches your HTML) */
    .ct-sticky-container [data-sticky="yes:shrink"] {
      --submenu-bg: rgba(191, 190, 190, 0.8);
    
      --submenu-initial: rgba(255, 255, 255, 0.7);
      --submenu-hover: #ffffff;
      --submenu-active: rgba(45, 46, 46, 0.7);
    }
    
    /* ---------- DROPDOWN CONTAINER (ALL LEVELS) ---------- */
    .ct-header .sub-menu{
      background: var(--submenu-bg) !important;
      border: none !important;
      box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
      padding: .55rem 0 !important;
    }
    
    /* ---------- REMOVE DIVIDERS ---------- */
    .ct-header .sub-menu li,
    .ct-header .sub-menu li a{
      border: none !important;
      box-shadow: none !important;
    }
    
    /* ---------- ANIMATE DROPDOWN OPEN (ALL LEVELS) ---------- */
    .ct-header [data-items="primary"] .menu-item-has-children > .sub-menu,
    .ct-header [data-items="primary"] .page_item_has_children > .sub-menu{
      opacity: 0;
      transform: translateY(10px) scale(.985);
      filter: blur(4px);
      transition:
        opacity var(--submenu-open-dur) var(--lux-ease),
        transform var(--submenu-open-dur) var(--lux-ease),
        filter var(--submenu-open-dur) var(--lux-ease);
      will-change: opacity, transform, filter;
    }
    
    .ct-header [data-items="primary"] .menu-item-has-children:hover > .sub-menu,
    .ct-header [data-items="primary"] .menu-item-has-children:focus-within > .sub-menu,
    .ct-header [data-items="primary"] .page_item_has_children:hover > .sub-menu,
    .ct-header [data-items="primary"] .page_item_has_children:focus-within > .sub-menu{
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
    
    /* ---------- BASE LINK STYLE (ALL DEPTHS) ---------- */
    .ct-header .sub-menu a{
      background: transparent !important;
      color: var(--submenu-initial) !important;
    
      display: flex !important;
      align-items: center !important;
      gap: .65rem !important;
    
      padding: .60rem 1.15rem !important;
      line-height: 1.3 !important;
    
      font-size: 14px !important; /* requested */
    
      transition:
        color 220ms var(--lux-ease),
        transform 220ms var(--lux-ease) !important;
      transform: translateX(0);
    }
    
    /* Slightly tighter for deeper levels */
    .ct-header .sub-menu .sub-menu a{
      padding: .54rem 1.10rem !important;
    }
    
    /* Kill default hover/current backgrounds */
    .ct-header .sub-menu a:hover,
    .ct-header .sub-menu a:focus,
    .ct-header .sub-menu .current-menu-item > a,
    .ct-header .sub-menu .current_page_item > a{
      background: transparent !important;
    }
    
    /* ---------- BULLET → DASH ---------- */
    .ct-header .sub-menu a::before{
      content: "";
      width: 6px;
      height: 6px;
      background: currentColor;
      border-radius: 999px;
      flex-shrink: 0;
      opacity: .95;
    
      transition:
        width 240ms var(--lux-ease),
        height 240ms var(--lux-ease),
        border-radius 240ms var(--lux-ease),
        opacity 240ms var(--lux-ease);
      transform: translateX(0);
    }
    
    /* ---------- HOVER / FOCUS (TEXT + DASH) ---------- */
    .ct-header .sub-menu a:hover,
    .ct-header .sub-menu a:focus,
    .ct-header .sub-menu li:focus-within > a{
      color: var(--submenu-hover) !important;
    }
    
    .ct-header .sub-menu a:hover::before,
    .ct-header .sub-menu a:focus::before,
    .ct-header .sub-menu li:focus-within > a::before{
      width: 14px;
      height: 2px;
      border-radius: 2px;
      opacity: 1;
    }
    
    /* ---------- ACTIVE / CURRENT PAGE (INVERTED/ACTIVE COLOUR) ---------- */
    .ct-header .sub-menu .current-menu-item > a,
    .ct-header .sub-menu .current_page_item > a{
      color: var(--submenu-active) !important;
    }
    
    /* Hover overrides active (hover colour wins) */
    .ct-header .sub-menu .current-menu-item > a:hover,
    .ct-header .sub-menu .current_page_item > a:hover{
      color: var(--submenu-hover) !important;
    }
    
    /* ---------- ACCESSIBILITY: REDUCED MOTION ---------- */
    @media (prefers-reduced-motion: reduce){
      .ct-header .sub-menu a,
      .ct-header .sub-menu a::before,
      .ct-header [data-items="primary"] .menu-item-has-children > .sub-menu,
      .ct-header [data-items="primary"] .page_item_has_children > .sub-menu{
        transition: none !important;
        transform: none !important;
        filter: none !important;
      }
    }
}


/* ===============================
   Custom swatches (no plugin)
   =============================== */

.pp-varui{ margin: 14px 0 18px; }
.pp-varrow{ margin: 0 0 14px; }
.pp-varhead{ display:flex; justify-content:space-between; align-items:center; margin: 0 0 8px; }
.pp-varlabel{ font-weight: 700; font-size: 18px; }

.pp-swatches{ display:flex; flex-wrap:wrap; gap: 10px; }

.pp-swatch{
  min-width: 40px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid rgba(0,0,0,.25);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.pp-swatch.is-selected{
    background: #2a385a;
    color: #fff;
    border: 3px solid #1f2a44; 
}
.pp-swatch.is-oos{ opacity: .22; filter: grayscale(100%); }
.pp-swatch.is-oos span{ position: relative; }
.pp-swatch.is-oos span::after{
  content:"";
  position:absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

/* Hide default variations UI but keep it functional */
form.variations_form table.variations{ display:none !important; }
form.variations_form .reset_variations{ display:none !important; }

/* Quantity must always show */
.single-product form.cart .quantity{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.single-product form.cart .quantity[data-type="type-2"]{
  align-items: center;
}


/* ===============================
   Size guide modal
   =============================== */

.pp-sizeguide-btn{
  font-size: 12px;
  padding: .35rem .6rem;
  border: 1px solid rgba(0,0,0,.25);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
}

.pp-modal{ display:none; position:fixed; inset:0; z-index:99999; }
.pp-modal.is-open{ display:block; }
.pp-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.45); }
.pp-modal__panel{
  position:absolute;
  top:10%;
  left:50%;
  transform:translateX(-50%);
  width:min(900px, calc(100% - 32px));
  background:#fff;
  border-radius: 16px;
  padding: 18px;
}
.pp-modal__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.pp-modal__body{ max-height:70vh; overflow:auto; }
body.pp-modal-open{ overflow:hidden; }

/* ===============================
   Gallery + Related Products
   =============================== */
/* --- Thumbs: force 3:4 tiles (target the element Blocksy actually sizes) --- */
.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li{
  height:auto !important;
}
.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li > .ct-media-container{
  display:block;
  width:100%;
  aspect-ratio:3/4 !important;
  overflow:hidden;
}
.single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li > .ct-media-container img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* --- Thumbs: single row scroller on tablet/mobile --- */
@media (max-width: 1024px){
  .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    -webkit-overflow-scrolling:touch;
  }
  .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li{
    flex:0 0 auto;
    width:52px;
  }
}
@media (max-width: 768px){
  .single-product .woocommerce-product-gallery .flexy-pills[data-type="thumbs"] ol li{
    width:64px;
  }
}

/* --- Related products grid (single product only) --- */
.single-product section.related.products > ul.products{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}
@media (max-width: 1024px){
  .single-product section.related.products > ul.products{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
}

/* Card sizing inside related only */
.single-product section.related.products > ul.products > li.product{
  width:auto !important;
  margin:0 !important;
}

.single-product section.related.products li.product h2.woocommerce-loop-product__title{display:none !important}
.single-product section.related.products li.product h3.woocommerce-loop-product__title.short-title{
  display:block !important;
  margin:.55rem 0 .25rem;
  font-size:13px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width: 1024px){
  .single-product section.related.products li.product h3.woocommerce-loop-product__title.short-title{
    font-size:12px;
    line-height:1.25;
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
}

/* --- Full-width gallery on tablet/mobile --- */
@media (max-width: 1024px){
  .single-product .woocommerce-product-gallery{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }

  /* Keep image clean when full-bleed */
  .single-product .woocommerce-product-gallery .flexy-view,
  .single-product .woocommerce-product-gallery .ct-media-container,
  .single-product .woocommerce-product-gallery img{
    border-radius:0 !important;
  }
}

/* --- Gallery arrows: understated + tap-to-show on tablet/mobile --- */
  .single-product .woocommerce-product-gallery .flexy-arrow-prev,
  .single-product .woocommerce-product-gallery .flexy-arrow-next{
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }

  .single-product .woocommerce-product-gallery.pp-arrows-on .flexy-arrow-prev,
  .single-product .woocommerce-product-gallery.pp-arrows-on .flexy-arrow-next{
    opacity:.55;
    pointer-events:auto;
  }

  .single-product .woocommerce-product-gallery.pp-arrows-on .flexy-arrow-prev:hover,
  .single-product .woocommerce-product-gallery.pp-arrows-on .flexy-arrow-next:hover{
    opacity:.8;
  }