/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Description: Child theme for Twenty Twenty-Five.
Author: Migueljosé
Author URI: https://thekikubrand.com/
Template: twentytwentyfive
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive child
*/

/* Stylesheet v10 — 2026-04-23 */

/* ============================================
   TABLE OF CONTENTS
   ============================================
   [1.0] GENERAL STYLES
   [2.0] COOKIE NOTICE
   [3.0] HEADER SYSTEM
     [3.1] Header Structure & Sticky Behavior
     [3.2] Logo Styling & Positioning
     [3.3] Header Buttons
   [4.0] NAVIGATION
     [4.1] Desktop Menu
     [4.3] Right Menu (Wishlist/Account/Cart)
   [5.0] PAGE CONTENT
     [5.1] Page-specific Rules
     [5.2] Content Layout
     [5.3] Images & Media
   [6.0] HERO SECTIONS
   [7.0] UTILITIES & FIXES
   [8.0] RESPONSIVE BREAKPOINTS (Global)
     [8.1] Desktop (1920px+)
     [8.2] Laptop (992px - 1919px)
     [8.3] Tablet (768px - 991px)
     [8.4] Mobile (≤767px)
     [8.5] Small Mobile (≤480px)
   [9.0] WOO PRODUCT PAGE – SINGLE PRODUCT
     [9.1] Stock & misc
     [9.2] Layout – columns & spacing
     [9.3] Galleries (extra grid + mobile/tablet carousel)
     [9.4] Size selector & unit toggle
     [9.5] PDP Tabs
     [9.6] Size Guide Modal
     [9.7] Mobile/Tablet side padding & EU/GB/US size
   ============================================ */
/* ============================================
   BREAKPOINT LEGEND (normalized – v8.2)
   ============================================
   Desktop XL:   (min-width: 1200px)
   Desktop:      (min-width: 1025px)
   Tablet:       (max-width: 1024px)  [optionally with (min-width: 601px)]
   Mobile:       (max-width: 768px)
   Small phone:  (max-width: 600px)   (+ orientation queries where needed)
   Tiny:         (max-width: 480px)
   ============================================ */


/* ============================================
   NOTES (from v8.2 cleanup)
   - Deduped global img rendering rules into one block.
   - Removed duplicate wishlist nav "always inline" rules.
   - No behavior changes intended; mostly structure + hygiene.
   ============================================ */   


/* ============================================
   [1.0] GENERAL STYLES
   ============================================ */

html {
    scroll-behavior: smooth;
}

a {
    transition: all 0.3s ease-in-out !important;
}

:where(.wp-site-blocks *:focus) {
    outline-width: 0 !important;
    outline-style: none !important;
}

:root :where(.is-layout-constrained) > :last-child {
    word-wrap: break-word;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Lightbox styling */
.wp-lightbox-overlay .scrim {
    background-color: #000 !important;
    opacity: .7 !important;
}

.wp-lightbox-overlay .close-button {
    fill: #fff !important;
}

/* Main content area */
main#wp--skip-link--target {
    --wp--preset--spacing--60: 0px !important;
    margin-top: 0 !important;
}

#wp--skip-link--target > div:nth-child(1) {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Hero image breakout – Never crop the shoes & hands */
.wp-block-cover.kiku-hero-breakout {
    width: 100vw !important;
    /* always full-bleed */
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    /* center relative to viewport */
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
}

/* Ensure inner content behaves nicely inside */
.wp-block-cover.kiku-hero-breakout .wp-block-cover__inner-container {
    max-width: 1200px !important;
    /* or desired content width */
    margin-inline: auto !important;
    padding-inline: clamp(1rem, 4vw, 2rem) !important;
}

/* Ensure the cover background image behaves */
.wp-block-cover.kiku-hero-breakout img.wp-block-cover__image-background {
    object-fit: cover !important;
    object-position: center center !important;
}

/* Global image rendering tweaks for extra crispness */
img {
    /* Safari/Chrome */
    image-rendering: -webkit-optimize-contrast;
    /* Firefox */
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    /* GPU hint */
    transform: translateZ(0);
    backface-visibility: hidden;
}


/* ============================================
   [2.0] COOKIE NOTICE
   ============================================ */

/* Title */
.cky-notice .cky-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
}

/* Main bar – desktop baseline */
.cky-consent-container .cky-consent-bar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    border-radius: 0 !important;
    margin: 0 auto !important;
    width: 350px !important;
    /* desktop width */
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Bottom left placement */
.cky-box-bottom-left {
    bottom: 0 !important;
    left: 0 !important;
}

/* Description text */
.cky-consent-bar .cky-notice-des p {
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Cookie buttons */
.cky-btn-customize,
button.cky-btn-reject:nth-child(2),
button.cky-btn-accept:nth-child(3) {
    font-size: 11px !important;
    padding: 0 0 !important;
}

.cky-consent-bar .cky-btn-customize::after {
    content: none !important;
}

.cky-notice-btn-wrapper {
    margin-top: 7px !important;
}

/* MOBILE – full-width bar, no right bleed */
@media (max-width: 600px) {


    .cky-consent-container.cky-box-bottom-left {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .cky-consent-container .cky-consent-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }


    .cky-notice-btn-wrapper {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        gap: 6px !important;
        margin-top: 7px !important;
    }

    .cky-notice-btn-wrapper button,
    .cky-btn-accept,
    .cky-btn-reject,
    .cky-btn-customize {
        flex: 1 1 0 !important;
        width: auto !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        white-space: nowrap !important;
    }
}


/* TABLETS – 48% wide, left aligned */
@media (min-width: 601px) and (max-width: 1024px) {

    .cky-consent-container.cky-box-bottom-left {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .cky-consent-container .cky-consent-bar {
        width: 48% !important;
        /* preferred value */
        max-width: 48% !important;
        margin-left: 0 !important;
        /* left aligned */
        margin-right: auto !important;
    }
}

/* Desktop: remove unwanted left padding from cookie banner */
@media (min-width: 1025px) {

    /* Outer container */
    .cky-consent-container.cky-box-bottom-left {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* The bar itself */
    .cky-consent-container .cky-consent-bar {
        margin-left: 0 !important;
        padding-left: 7px !important;
        /* keep internal text padding */
    }

    /* The text wrapper inside */
    .cky-notice-group,
    .cky-consent-bar .cky-notice {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

/* Rounded Yes/No buttons */
.cky-btn-accept,
.cky-btn-reject,
.cky-btn-customize,
.cky-notice-btn-wrapper button {
    border-radius: 6px !important;
}

/* MOBILE – Yes / No buttons in one row */


/* IMPORTANT - GUTENBERG: Whole Cover clickable > JS snippet linked */
/* Allows clicks to pass through Cover background layers */
/* KIKU — allow clicks to pass through Cover background layers */
.wp-block-cover.kiku-cover-click .wp-block-cover__image-background,
.wp-block-cover.kiku-cover-click .wp-block-cover__background {
  pointer-events: none;
}

/* Remove duplicate stock indicator (scoped to product summary column) */
.kiku-product-summary
  .wc-block-components-product-stock-indicator {
  display: none !important;
}

/* Remove padding above product page tabs*/
.woocommerce-tabs.wc-tabs-wrapper {
  margin-top: -1rem !important;
}

/* Add padding above product page PayPal Later text*/
.message__container {
  padding-top: 0.5rem !important;
}

/* ============================================
   [3.0] HEADER & FOOTER SYSTEM - Sticky header & Logo Centering
   ============================================ */

/* Target the header template part (Block themes) */
:where(header.wp-block-template-part),
:where(.wp-site-blocks > header),
:where(.site-header) {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--wp--preset--color--base, #fff);
}

/* If WP admin bar is showing, offset sticky header */
.admin-bar :where(header.wp-block-template-part, .wp-site-blocks > header, .site-header) {
  top: 32px;
}

/* Optional: subtle separation (no JS) */
:where(header.wp-block-template-part, .wp-site-blocks > header, .site-header) {
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Fix double click issue on Shoes Menu Hamburger Icon ONLY */
.kiku-shoes-menu .wp-block-navigation__responsive-container.hidden-by-default {
    display: flex !important;   /* container always exists */
}

/* Make the header bar a 3–column grid */
.kiku-header-bar {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* Left and right menu zones hug the edges */
.kiku-left-menu {
    justify-self: start;
}

.kiku-right-menu {
    justify-self: end;
}

/* Logo: mathematically centered in the viewport */
.kiku-header-logo {
    justify-self: center;
    margin: 0 auto;
}

/* Logo image sizing */
.kiku-header-logo img {
    height: clamp(26px, 2vw, 24px);
    width: auto;
}

/* Padding on Header Menus */

/* Base (desktop / large screens) */
.kiku-left-menu {
    margin-left: 1rem !important;
}

.kiku-right-menu {
    margin-right: 0.75rem !important;
}

/* Tablet and down (≤1024px) */
@media (max-width: 1024px) {

    .kiku-left-menu {
        margin-left: 1.25rem !important;
    }

    .kiku-right-menu {
        margin-right: 0.85rem !important;
    }

    .kiku-shoes-menu .wp-block-navigation__responsive-container-content {
        width: 50%;
    }

.wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
  width: 50% !important;
	}
}

/* Phone (≤600px) */
@media (max-width: 600px) {

    .kiku-left-menu {
        margin-left: 1rem !important;
    }

    .kiku-right-menu {
        margin-right: 0.7rem !important;
    }
	
/* Hide Wishlist on Phone */
    .kiku-wishlist-link {
        display: none !important;
    }

    nav.wp-block-navigation:nth-child(2) {
        gap: 0.9rem;
    }

    .kiku-shoes-menu .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 2.7% !important;
        right: 5% !important;
    }

    .kiku-shoes-menu .wp-block-navigation__responsive-container {
        justify-content: center !important;
    }

    .kiku-shoes-menu .wp-block-navigation__responsive-container-content {
        width: 100% !important;
        height: 100% !important;
        border-radius: 18px; /* keep rounded corners even on full screen */
    }

.wp-block-buttons > .wp-block-button.wp-block-button__width-25 {
  width: 100% !important;
	}

  body .cart-page-content.wp-block-post-content {
    padding-inline: 1rem;
  }
}

/* FOOTER - Sticky Base Layout */
html, body { height: 100%; }

/* The actual wrapper in block themes */
body .wp-site-blocks{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Make the main content take remaining space */
body .wp-site-blocks > main{
  flex: 1 0 auto;
}

/* Push footer to bottom when content is short */
body .wp-site-blocks > footer.wp-block-template-part{
  margin-top: auto;
}

/* ============================================
   Wishlist/Search nav – always inline, no hamburger
   (applies if the nav has class "kiku-wishlist-page"
   or "wishlist-page")
   ============================================ */

/* Always show the inline icons list */
.kiku-wishlist-page.wp-block-navigation > .wp-block-navigation__container,
.wishlist-page.wp-block-navigation > .wp-block-navigation__container {
    display: inherit !important;
    /* follow header flex/grid */
}

/* Kill any overlay container that might be injected */
.kiku-wishlist-page .wp-block-navigation__responsive-container,
.wishlist-page .wp-block-navigation__responsive-container {
    display: none !important;
}

/* Hide the hamburger toggle button, just in case */
.kiku-wishlist-page .wp-block-navigation__responsive-container-open,
.wishlist-page .wp-block-navigation__responsive-container-open {
    display: none !important;
}

/* ===========================
   Custom Hamburger Menu Icon
   =========================== */

/* Hide default WP hamburger SVG */
.kiku-shoes-menu .wp-block-navigation__responsive-container-open svg {
    display: none !important;
}

/* Turn the open button into your custom icon */
.kiku-shoes-menu .wp-block-navigation__responsive-container-open {
    display: inherit !important;
    /* keep flex alignment from parent */
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    padding: 0;

    background-image: url('https://thekikubrand.com/wp-content/uploads/2025/12/menu.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
    /* tweak if needed */

    text-indent: -9999px;
    /* just in case there's a label */
    overflow: hidden;
    white-space: nowrap;

    border: none;
    background-color: transparent;

    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.kiku-shoes-menu .wp-block-navigation__responsive-container-open:hover {
    opacity: 0.4;
}

/* ===========================
      Custom Close Icon
============================== */
.wp-block-navigation__responsive-container-close {
    display: inherit !important;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    padding: 0;

    background-image: url('https://thekikubrand.com/wp-content/uploads/2025/12/cancel.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;

    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;

    border: none;
    background-color: transparent;

    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.wp-block-navigation__responsive-container-close:hover {
    opacity: 0.4;
}

/* Normalize shoes menu hamburger alignment */
.kiku-shoes-menu {
    display: flex;
    /* make sure nav itself is flex */
    align-items: center;
    /* vertical centering in header row */
}

/* The actual open button */
.kiku-shoes-menu .wp-block-navigation__responsive-container-open {
    display: inherit !important;
    /* follow nav’s flex */
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;

    min-width: auto !important;
    min-height: auto !important;
    border: none;
    background-color: transparent;
}

/* ===========================
      Custom Wishlist Icon
============================== */
.kiku-wishlist-link .wp-block-navigation-item__content {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    /* hide text visually but keep it accessible */
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;

    /* your heart SVG */
    background-image: url('https://thekikubrand.com/wp-content/uploads/2025/12/fav.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;

    padding: 0;
}

/* Optional hover */
.kiku-wishlist-link .wp-block-navigation-item__content:hover {
    opacity: 0.4;
}

/* ===========================
      Custom Search Icon
============================== */
.kiku-search-link .wp-block-navigation-item__content {
    position: relative;
    display: inherit !important;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    /* hide text visually but keep it accessible */
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;

    /* your search SVG */
    background-image: url('https://thekikubrand.com/wp-content/uploads/2025/12/search.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;

    padding: 0;
}

/* Optional hover */
.kiku-search-link .wp-block-navigation-item__content:hover {
    opacity: 0.4;
}

.kiku-wishlist-link .wp-block-navigation-item__content,
.kiku-search-link .wp-block-navigation-item__content {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.wc-block-mini-cart__badge {
    font-size: 0.7em !important;
    font-weight: 500 !important;
    height: 1.2em !important;
    left: 100% !important;
    margin-left: -78% !important;
    min-width: 1.2em !important;
    padding: 0.2em !important;
}

/* ===========================
      Custom Account Icon
   =========================== */

/* 1. Kill Woo's default SVG icon */
.wp-block-woocommerce-customer-account svg.wc-block-customer-account__account-icon {
    display: none !important;
}

/* 2. Kill Woo's "Account" label (icon-only) */
.wp-block-woocommerce-customer-account .wc-block-customer-account__account-label {
    display: none !important;
}

/* 3. Turn the anchor into the icon container */
.wp-block-woocommerce-customer-account a {
    position: relative !important;
    display: inherit !important;
    align-items: center !important;
    justify-content: center !important;

    width: 24px;
    height: 24px;
    padding: 0 !important;

    /* visually hide any leftover text but keep accessibility */
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;

    /* your custom USER SVG */
    background-image: url('https://thekikubrand.com/wp-content/uploads/2025/12/account.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* 4. Hover */
.wp-block-woocommerce-customer-account a:hover {
    opacity: 0.4;
}

/* ===========================
      Custom Cart Icon
============================== */
/* 1. Hide Woo's default cart SVG */
.kiku-cart-link svg.wc-block-mini-cart__icon {
    display: none !important;
}

/* 2. Style the button as the icon container with direct background */
.kiku-cart-link .wc-block-mini-cart__button {
    position: relative;
    display: inherit;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background-image: url('https://thekikubrand.com/wp-content/uploads/2025/12/bag.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* 3. Hover */
.kiku-cart-link .wc-block-mini-cart__button:hover {
    opacity: 0.4;
}

/* Note: The quantity badge (e.g., item count) is usually positioned absolutely over the button; if it overlaps oddly, add this: */
.kiku-cart-link .wc-block-mini-cart__quantity-badge {
    top: -5px;
    /* Adjust positioning if needed */
    right: -5px;
}

/* Optional hover */
.kiku-account-link .wp-block-navigation-item__content:hover {
    opacity: 0.4;
}

/* Force mobile hamburger menu */
header .wp-block-navigation.wl-header-menu-style .wp-block-navigation__container {
    display: none !important;
}

/* FOOTER LOGO size */
footer .wp-block-site-logo img.custom-logo,
footer .custom-logo-link img.custom-logo,
footer img.custom-logo {
  width: 80px !important;
  height: auto !important;
}

@media (max-width: 600px) {
  footer .wp-block-site-logo img.custom-logo,
  footer .custom-logo-link img.custom-logo,
  footer img.custom-logo {
    width: 64px !important;
  }
}

/* CHECKOUT header logo size */
.woocommerce-checkout header img.custom-logo {
  width: 80px !important;
  height: auto !important;
}

/* =========================================
   KIKU Shoes Menu – HOFF-STYLE
   ========================================= */

/* Lock scroll when menu is open */
body.kiku-shoes-menu-open,
body.wp-block-navigation__responsive-container-is-open {
    overflow: hidden;
}

/* Modal root – identical spirit to size guide */
.kiku-shoes-menu .wp-block-navigation__responsive-container,
.kiku-shoes-menu .wp-block-navigation__responsive-container.is-menu-open,
.kiku-shoes-menu .wp-block-navigation__responsive-container.has-modal-open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;

    padding: 1.25rem !important;
    box-sizing: border-box !important;

    display: flex !important;
    justify-content: flex-start !important;  /* card on LEFT */
    align-items: stretch !important;

    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
    background: rgba(0, 0, 0, 0.35) !important; /* backdrop */
}

/* Open state */
.kiku-shoes-menu .wp-block-navigation__responsive-container.is-menu-open,
.kiku-shoes-menu .wp-block-navigation__responsive-container.has-modal-open {
    opacity: 1;
    pointer-events: auto;
}

/* The actual card (dialog) – cloned 1:1 from size guide */
.kiku-shoes-menu .wp-block-navigation__responsive-container-content {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem 1.75rem 1.75rem;
    box-sizing: border-box;

    height: 100%;
    max-height: 100%;
    width: 25%; /* desktop width */

    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* Initial closed state (slightly offset + dimmed) */
    transform: translateX(28px) translateY(2px) scale(0.995);
    opacity: 0.3;
    transition:
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

/* Open + visible state – snap into place */
.kiku-shoes-menu
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content,
.kiku-shoes-menu
.wp-block-navigation__responsive-container.has-modal-open
.wp-block-navigation__responsive-container-content {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
}

/* Scrollable content area (replaces table-wrap) */
.kiku-shoes-menu
.wp-block-navigation__responsive-container-content > #kiku-shoes-menu-content,
.kiku-shoes-menu
.wp-block-navigation__container {
    margin-top: 0.75rem;
    flex: 1;
    overflow-y: visible;

    padding-right: 0;
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Center the whole menu column, but keep the scroll area full width */
.kiku-shoes-menu .wp-block-navigation__responsive-container-content {
    align-items: center;
}

.kiku-shoes-menu .wp-block-navigation__container {
    width: 100%;
    max-width: 100%;
}

.kiku-shoes-menu .wp-block-navigation__container > .wp-block-navigation-item {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Make each menu row behave as a centered row */
.kiku-shoes-menu .wp-block-navigation-item {
    width: 100%;
    list-style: none !important;
    text-align: center;
}

/* Center the actual clickable link */
.kiku-shoes-menu .wp-block-navigation-item__content {
    display: block !important;
    width: 100%;
    text-align: center !important;
}

/* Just in case the label itself inherits odd alignment */
.kiku-shoes-menu .wp-block-navigation-item__label {
    display: block;
    width: 100%;
    text-align: center !important;
}

/* CLOSE BUTTON POSITIONS + STYLES */
.kiku-shoes-menu .wp-block-navigation__responsive-container-close {
    appearance: none !important;
    -webkit-appearance: none !important;

    background-image: url('https://thekikubrand.com/wp-content/uploads/2025/12/cancel.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;

    border: none !important;
    cursor: pointer !important;

    font-size: 1.75rem !important;
    line-height: 1 !important;
    width: 2.1rem !important;
    height: 2.1rem !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    color: #111 !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 10;
}

/* Desktop ≥1025px */
@media (min-width: 1025px) {

    .kiku-shoes-menu .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 2% !important;
        right: 76.5% !important;
    }

  body .cart-page-content.wp-block-post-content {
    padding-inline: 24rem;
  }

	.store-cta-button {
		justify-content: left !important;
	}
}


/* Tablet 601px – 1024px */
@media (max-width: 1024px) and (min-width: 601px) {
    .kiku-shoes-menu .wp-block-navigation__responsive-container-content {
        width: 50% !important;
    }

    .kiku-shoes-menu .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 1.5% !important;
        right: 52% !important;
    }
}

/* Mobile ≤600px */


/* Force close button color on all states (iOS fix) */
.kiku-shoes-menu .wp-block-navigation__responsive-container-close:link,
.kiku-shoes-menu .wp-block-navigation__responsive-container-close:visited,
.kiku-shoes-menu .wp-block-navigation__responsive-container-close:hover,
.kiku-shoes-menu .wp-block-navigation__responsive-container-close:active,
.kiku-shoes-menu .wp-block-navigation__responsive-container-close:focus {
    color: #111 !important;
    text-decoration: none !important;
}

/* Menu title styling (optional – if you have one) */
.kiku-shoes-menu
.wp-block-navigation__responsive-container-content > .wp-block-navigation__title,
#kiku-shoes-menu-title {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 2rem 0 0;
}

/* Item styling – clean & matching the size guide vibe */
.kiku-shoes-menu .wp-block-navigation-item__label {
    font-size: 1rem;
    font-weight: 500; /* top level bold */
    line-height: 1;
}

.kiku-shoes-menu
.wp-block-navigation-item.wp-block-navigation-link
> .wp-block-navigation-item__content
> .wp-block-navigation-item__label {
    font-weight: 400; /* sub-items normal */
}

.kiku-shoes-menu .wp-block-navigation-item.has-child {
    margin-bottom: 1.25rem;
}

/* ——— RESPONSIVE ——— */

/* Tablet – half width */


/* Mobile – full width, centered, full height */


/* Make the WordPress wrappers behave like the size guide root */
.kiku-shoes-menu .wp-block-navigation__responsive-container,
.kiku-shoes-menu .wp-block-navigation__responsive-dialog,
.kiku-shoes-menu .wp-block-navigation__responsive-container-content-wrapper,
.kiku-shoes-menu .wp-block-navigation__responsive-close {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* card on LEFT */
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;

    /* prevent theme/blocks from nudging these wrappers */
    margin: 0 !important;
    transform: none !important;
}

/* Style Return to cart button */
.wc-block-components-checkout-return-to-cart-button {
  color: #fff !important;
  background-color: #000  !important;
  padding-top: 1rem  !important;
  padding-bottom: 1rem !important;
  padding-right: 2.25rem !important;
  padding-left: 2.25rem !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: var(--wp--preset--font-size--medium) !important;
	border-radius: 4px;
}

.wc-block-components-checkout-return-to-cart-button svg {
  padding-left: 0.5rem !important;
}

/* Style BACK TO SHOP button */

/* Tablet */


/* Phone */


/* CART page – responsive paddings */

/* Desktop (1024px and up) */


/* Tablet (601px–1023px) */
@media (min-width: 601px) and (max-width: 1024px) {
  body .cart-page-content.wp-block-post-content {
    padding-inline: 2rem;
  }
}

/* Phone (600px and down) */

/* Style CART title */
.carousel_title {
  display: block !important;
}

/* Style CART title */
.woocommerce-cart .wp-block-post-title {
  display: none !important;
  font-size: 1.5rem !important;
  padding-bottom: 0.5rem !important;
  max-width: 100% !important;
}

/* Center "Continue shopping" button in filled cart */

/* Desktop & tablet */
@media (min-width: 601px) {
.wp-block-woocommerce-cart
.continue-shopping-cart {
    display: flex;
    justify-content: center;
    width: 55%;
    margin: 30px auto; /* vertical breathing room */
	}
}

/* Remove underline & hover in "Continue shopping" link */
.wp-block-woocommerce-cart
.continue-shopping-cart a {
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Hard-kill TT5 "wp-elements-xxxx" hover color for this one link only */
.wp-block-woocommerce-cart
.continue-shopping-cart a:where(:not(.wp-element-button)):hover,
.wp-block-woocommerce-cart
.continue-shopping-cart a:where(:not(.wp-element-button)):focus,
.wp-block-woocommerce-cart
.continue-shopping-cart a:where(:not(.wp-element-button)):active {
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}


/* Kill hover / focus / active effects */
.wp-block-woocommerce-cart
.continue-shopping-cart a:hover,
.wp-block-woocommerce-cart
.continue-shopping-cart a:focus,
.wp-block-woocommerce-cart
.continue-shopping-cart a:active {
    text-decoration: none !important;
    box-shadow: none !important;
    opacity: 1;
    filter: none;
}


/* Style heron image on Cart page */
.woocommerce-cart .wp-block-group .wp-block-image {
  display: flex;
  justify-content: center;
}

.woocommerce-cart .wp-block-group .wp-block-image img {
  max-height: 15rem;
  width: auto;
  cursor: pointer;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	color: #872730 !important;
	width: 8em !important;
	height: 8em !important;
  	mask-size: 8em !important;
	mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJJc29fMSIgZGF0YS1uYW1lPSJJc28gMSIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxkZWZzPjxzdHlsZT4gLmNscy0xIHsgZmlsbDogIzllMDA1ZDsgfSA8L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik00ODEuMDMsMTQ2LjQ1Yy0yMi4yNi03LTQ3LjYtOC42OC03MC4yOS0xNS4zNy0xMC4zNC0zLjA1LTIxLjI0LTkuNi0zMS45Ny0xMC44Ny0zNi43NC00LjMyLTcxLjMxLDE5LjQ0LTY2LjEyLDU4Ljk2LDMuMzIsMjUuMjYsMzcuMjIsMzUuMDIsMzYuODUsNTcuMDYtLjIzLDEzLjY5LTEyLjg2LDM0LjQtMjYuOTYsMzcuOTgtMjUuNjEtNTEuMzktMzcuOTEtOTMuMDItOTAuODEtMTE0LjgyLTcuODktMy4yNS0xNy43LTcuMjctMjMuNi05LjY4LS4wNC0uMDItMS4zLS41My0zLjQ3LTEuNDEtMTEuMDQtNC40OS00NS43OC0xOC42Mi02NC43Ni0yNi4zMS0zNy43Ny0xNS4zMS03Ni45NC0zMS4xNi0xMTguNzgtNDguMzMtLjAxLjI0LS4wMy40Ny0uMDQuNzEtMS4yOSwyOS4xNywxMS42NCw2OC4zNywzNi43OCwxMDYuNDcsMi43OSw0LjIzLDUuNzMsOC40NSw4LjgxLDEyLjYzLDUuODQsNy45MiwxMS45NCwxNS4zNywxOC4yLDIyLjMsMy4zLDMuMjUsNi4zNCw2LjA1LDguODgsOC4yOSwxMi4zOCwxMC45NCw1My4wNywzMi40Miw4OS40LDUwLjU2LDcuMDYsMy41MiwxMy45Niw2LjkyLDIwLjQ1LDEwLjA5LDEuODQuOSwzLjY1LDEuNzgsNS40MywyLjY0aDBjMTAuNjQsNS4xNywxOS45LDkuNTgsMjYuNjEsMTIuNzUtLjI2LjM4LS41Ni43Ny0uOTIsMS4yNC0zLjYxLDQuNzEtMTEuNzcsMTIuMTgtMTYuNDEsMTYuNDMtNDMuNTUsMzkuODItOTMuNjgsNzUuNDYtMTM3Ljc3LDExNC45Mi0xLjc5LDEuNjEtMy4wMSwyLjc4LTUuMDMsNS42Niw0MS41NC0yMC4zNyw2NS4wMi0zMC4yLDEwNC42LTQ2LjYxLDIzLjUyLTkuNzYsNjAuODEtMjMuNDYsODUuMy0zMS4xNyw1My41My0xNi44NiwxMzAuMDItNjMuNjUsMTIxLTEyOS41Mi0zLjExLTIyLjcyLTE3LjMxLTI4LjMzLTMwLjM4LTQyLjQyLTE5LjYzLTIxLjE2LDEwLjEzLTM0LjA3LDI4LjYzLTM1LjcyLDM0LjI4LTMuMDUsNzEuODIsMy4yMiwxMDYuMzQtMS40Ni0xLjQ4LTIuNzItNy4xMy00LjEtOS45Ny01WiI+PC9wYXRoPjwvc3ZnPg==) !important;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
 	cursor: pointer;
	margin-bottom: 0.5rem;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon {
  position: relative;
}

/* Invisible clickable zone matching the icon */
.kiku-emptycart-icon-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10em;
  height: 10em;
  z-index: 2;
  cursor: pointer;
}

.wp-block-separator.is-style-dots {
	display: none !important;
}

/* While we're "updating", hide the empty-cart panel & footer (prevents 0€ + Start shopping flash) */
.wc-block-mini-cart__drawer.kiku-mini-cart--updating .wp-block-woocommerce-empty-mini-cart-contents-block,
.wc-block-mini-cart__drawer.kiku-mini-cart--updating .wc-block-mini-cart__footer {
  display: none !important;
}

/* Your updating title polish */
.kiku-mini-cart-title--updating {
  font-size: 2rem;
  color: #808080;
}
/* Mini cart EMPTY state only: replace "Start shopping" text with "Go to store" */
.wc-block-mini-cart__drawer
.wp-block-woocommerce-empty-mini-cart-contents-block
.wp-block-woocommerce-mini-cart-shopping-button-block
.wc-block-components-button__text {
    font-size: 0 !important;
    /* hide original text only */
}

.wc-block-mini-cart__drawer
.wp-block-woocommerce-empty-mini-cart-contents-block
.wp-block-woocommerce-mini-cart-shopping-button-block
.wc-block-components-button__text::after {
    content: "Go to store";
    font-size: 1rem;
    /* adjust if you want */
    font-weight: 500;
    /* optional */
}

/* Style "Return to cart" button in checkout page */
:root :where(.wp-element-button, .wp-block-button__link) {
	background-color: #872730;
	border-radius: 4px;
}

/* Mini cart empty state – replace "Your cart is empty" text */
.wc-block-mini-cart__empty-cart-wrapper > p:nth-child(1) {
	font-size: 0;
	padding-bottom: 0.5rem;
}

.wc-block-mini-cart__empty-cart-wrapper > p:nth-child(1)::after {
	content: "Your cart is missing some KIKUS!";
	font-size: 1rem;
	font-weight: 400;
}

/* Reduce bottom margin in category product grid */
.wc-block-product-template__responsive > li {
  margin-bottom: -20px !important;
}

/* Style carousel grid */
.wc-block-product-template.wc-block-product-template {
	margin-left: 1rem;
	margin-right: 1rem;
	gap: 10px;
}

@container carousel (min-width: 480px) {
  .is-product-collection-layout-carousel .wc-block-product {
    min-width: 33% !important;
  }
}

/* Left align store CTA button on desktop */


/* --------------------------------------------
   Responsive rules (moved from [8.0])
   -------------------------------------------- */

@media (max-width: 768px) {

/* Force mobile hamburger menu: hide desktop menu list */
header .wp-block-navigation.wl-header-menu-style .wp-block-navigation__container {
        display: none !important;
    
}
/* Show the hamburger toggle button */
header .wp-block-navigation.wl-header-menu-style .wp-block-navigation__responsive-container-open {
        display: flex !important;
    
}
/* Mobile header layout & spacing */
nav.wl-header-menu-style.wp-block-navigation {
        flex-wrap: nowrap;
        gap: inherit;
    
}
.wp-block-group.wl-header-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
    
}
/* Hide header CTAs on small screens */
.wl-header-btns {
        display: none !important;
    
}

}

@media (max-width: 600px) {

.wl-header-btns {
        display: none !important;
    
}
.wp-block-group.wl-header-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
	}
}

/* ============================================
   [4.0] NAVIGATION
   ============================================ */

/* [4.1] Desktop Menu */

nav.wl-header-menu-style ul.wp-block-navigation__container.wl-header-menu-style.wp-block-navigation > li > a {
    padding: 32px 0;
}

ul.wl-header-menu-style li ul.wl-main-header-menu-submenu,
ul.wl-header-menu-style li ul.wl-main-header-menu-submenu li ul {
    min-width: 245px !important;
}

ul.wl-header-menu-style li ul.wl-main-header-menu-submenu li {
    border-bottom: 1px solid #eaeaea;
}

ul.wl-header-menu-style li ul.wl-main-header-menu-submenu li:last-child {
    border-bottom: none;
}

ul.wl-header-menu-style li button.wp-block-navigation__submenu-icon.wp-block-navigation-submenu__toggle {
    height: .95rem !important;
    width: .95rem !important;
}

nav.wl-header-menu-style ul.wp-block-navigation__container.wl-header-menu-style.wp-block-navigation li ul.wp-block-navigation-submenu li a {
    padding-top: 10px;
    padding-bottom: 10px;
}

nav.wl-header-menu-style ul.wp-block-navigation__container.wl-header-menu-style.wp-block-navigation li ul.wp-block-navigation-submenu li a:hover {
    text-decoration: none;
    color: var(--wp--preset--color--accent-1);
}

/* --------------------------------------------
   [4.2] Responsive rules
   -------------------------------------------- */

@media (max-width: 768px) {

/* Keep right menu (wishlist/account/cart) visible */
.wishlist-page.wp-block-navigation .wp-block-navigation__container {
        display: flex !important;
        gap: 15px !important;
    
}
/* Prevent icon wrapping in nav containers */
nav.wp-block-navigation ul.wp-block-navigation__container {
        flex-wrap: nowrap !important;
        gap: 10px !important;
    
}
.wp-block-navigation-item a {
        padding: 8px !important;
    
}
/* Hide wishlist text label to keep icons compact */
.wishlist-page > a:nth-child(1) > span:nth-child(1) {
        display: none !important;
    
}
/* Adjust right menu spacing */
.wishlist-page {
        margin-bottom: -20px !important;
        padding-right: 20px !important;
        padding-left: 20px !important;
        gap: 15px !important;
    
}

}

@media (max-width: 480px) {

.wishlist-page {
        padding-right: 10px !important;
        padding-left: 10px !important;
        gap: 8px !important;
    
}
.wp-block-navigation-item a span {
        font-size: 18px !important;
	}
}

/* =========================================================
   [4.3] HEADER — SEARCH OVERLAY
   ========================================================= */
.kiku-search-panel {
  position: fixed;
  inset: 0;
  top: var(--kiku-header-h, 4rem);
  height: 5rem;
  background: #fff;
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity .05s ease, transform .05s ease;
  z-index: 9990;
  width: 96%;
  left: 2%;
  border-radius: 6px;
}

body.kiku-search-open .kiku-search-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.is-search-form {
  margin-top: 1.4rem !important;
}

.is-form-style input.is-search-input {
  border: none !important;
  color: #000 !important;
  font-size: 1.1rem !important;
}

.is-search-icon {
  border: none !important;
  color: #000 !important;
  background: transparent !important;
}

.is-search-icon svg {
  width: 22px;
  display: inline;
  background-image: url('https://thekikubrand.com/wp-content/uploads/2025/12/search.svg');
}

.is-form-style .is-search-submit path {
  fill: #0000 !important;
}

.is-form-style button.is-search-submit {
  z-index: 9999;
}

/* Custom SVG icon on close button */
.kiku-search-panel-close{
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;

  background-image: url('https://thekikubrand.com/wp-content/uploads/2025/12/cancel.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  opacity: .9;
}

.kiku-search-panel-close:hover {
  opacity: 1;
}

/* Style "View all results" native button */

/* Button styling */
.is-show-more-results-text {
  font-weight: 700;
  text-transform: uppercase;
  background: #872730;
  color: #fff;
  padding-block: 0.5rem;
}

/* Product title link & price text styling */
.is-ajax-search-result a {
  color: #000 !important;
  font-weight: 500 !important;
}

/* Remove top margin from button */
.is-show-more-results {
  margin-top: 0;
}

/* Remove border from search cards */
div.is-ajax-search-result {
  background: none;
  padding: 0;
  color: #000;	
}

/* ============================================
   [5.0] PAGE CONTENT
   ============================================ */

/* [5.1] Page-specific Rules */

/* Hide post titles on specific pages */
.page-id-39 .wp-block-post-title,
.page-id-4560 .wp-block-post-title {
    display: none !important;
}

/* [5.2] Content Layout */

/* Hide featured image on pages */
.wp-block-post-featured-image :where(img) {
    display: none !important;
}

/* [5.3] Images & Media */

/* Full-width images helper */
.full-width-image {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    height: 60vh;
    object-fit: cover;
    object-position: center;
}

/* --------------------------------------------
   Responsive rules (moved from [8.0])
   -------------------------------------------- */

@media (max-width: 768px) {

/* Fine–tune PDP spacing under the header */
.entry-content {
        margin-top: -10px !important;
    
}

}

@media (max-width: 480px) {

.entry-content {
        margin-top: -5px !important;
    
}

}


/* ============================================
   [6.0] HERO / COVER IMAGES
   ============================================ */

/* HERO images */
.kiku-hero {
    min-height: 43vw !important;
}

/* Tablet */
@media (max-width: 1024px) {

    .kiku-hero {
        min-height: 92vw !important;
    }

    .kiku-cover {
        min-height: 56vw !important;
    }
}


/* Mobile */
@media (max-width: 768px) {

    .kiku-hero {
        min-height: 100vw !important;
    }

    .kiku-cover {
        min-height: 100vw !important;
    }
}


/* COVER images */
.kiku-cover {
    min-height: 43vw !important;
}

/* Tablet */


/* Mobile */


/* ============================================
   [8.0] RESPONSIVE BREAKPOINTS (Global)
   ============================================ */

/* NOTE:
   Breakpoint wrappers were normalized and then distributed into their relevant sections
   (Header / Navigation / Page Content / Woo, etc.) to keep each component self-contained.
*/

/* ============================================
   [9.0] WOO PRODUCT PAGE – SINGLE PRODUCT
   ============================================ */

/* ----------------------------------------
   [9.1] Stock & misc
   ---------------------------------------- */

/* Stock message styling */
.kiku-stock-message {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.kiku-stock-message .stock {
    font-weight: 500;
}

.kiku-stock-message .stock.out-of-stock,
.kiku-stock-message .stock.low-stock {
    color: #b3261e;
}

/* Hide WooCommerce's default Size label in the variations table */
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations th.label label[for="pa_size"] {
    display: none !important;
}

/* Kill extra top spacing on single product page */
.woocommerce div.product {
    margin-top: -0.25rem !important;
}

.woocommerce-page label {
    margin-bottom: 0 !important;
}

/* Hide Add to wishlist button in Product page */
.yith-add-to-wishlist-button-block {
    display: none !important;
}

/* Fix margin above PayPal "Pay Later" message */
.ppcp-messages {
  margin-top: 0.3rem !important;  
}

/* ----------------------------------------
   [9.2] Layout – columns & spacing
   ---------------------------------------- */

/* Generic 2-col helper */
.force-2-cols {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
    .force-2-cols {
        grid-template-columns: 1fr;
    }
}

/* Single Product – 2 photo cols + 1 summary (desktop & laptop) */

/* Desktop XL: gallery spans 2 columns, summary in 3rd */
@media (min-width: 1200px) {

    .single-product .kiku-product-main > .wp-block-columns {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
        column-gap: 40px;
        align-items: flex-start;
    }

    .single-product .kiku-product-main > .wp-block-columns > .wp-block-column {
        margin: 0 !important;
        flex: none !important;
        width: auto !important;
    }

    /* Gallery area uses the first two columns */
    .single-product .kiku-product-main > .wp-block-columns > .kiku-product-gallery {
        grid-column: 1 / span 2;
    }

    /* Summary stays in the 3rd column */
    .single-product .kiku-product-main > .wp-block-columns > .kiku-product-summary {
        grid-column: 3;
    }

    /* Make sure the actual WC gallery inside stretches nicely */
    .single-product .kiku-product-gallery .woocommerce-product-gallery,
    .single-product .kiku-product-gallery .wc-block-components-product-gallery {
        max-width: 100%;
        margin: 0;
    }
}

/* Laptop only (bigger than tablets): classic 2-column layout (gallery + summary) */
@media (min-width: 1025px) and (max-width: 1199px) {

    .single-product .kiku-product-main > .wp-block-columns {
        display: grid !important;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: 32px;
        align-items: flex-start;
    }

    .single-product .kiku-product-main > .wp-block-columns > .wp-block-column {
        margin: 0 !important;
        flex: none !important;
        width: auto !important;
    }
}

/* Phones & tablets: stack gallery above summary (1 column layout) */
@media (max-width: 1024px) {

    .single-product .kiku-product-main > .wp-block-columns {
        display: grid !important;
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .single-product .kiku-product-main > .wp-block-columns > .wp-block-column {
        margin: 0 !important;
        flex: none !important;
        width: 100% !important;
    }
}

/* Phones in LANDSCAPE: force tablet-portrait-style single column */
@media (max-width: 768px) and (orientation: landscape) {

    .single-product .kiku-product-main > .wp-block-columns {
        display: grid !important;
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .single-product .kiku-product-main > .wp-block-columns > .wp-block-column {
        margin: 0 !important;
        flex: none !important;
        width: 100% !important;
    }
}

/* All viewports: make the WC gallery use full column width */
.single-product .kiku-product-gallery .woocommerce-product-gallery,
.single-product .kiku-product-gallery .wc-block-components-product-gallery {
    max-width: 100% !important;
    margin: 0 !important;
}

/* ----------------------------------------
   [9.3] Galleries (extra grid + mobile/tablet carousel)
   ---------------------------------------- */

/* Extra 2-col image grid under main image */
.kiku-extra-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 4px;
}

.kiku-extra-gallery figure {
    margin: 0;
}

.kiku-extra-gallery img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    /* preserves 600×800 geometry */
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* Tablet & down: stack extra gallery to one column */
@media (max-width: 1024px) {
    .kiku-extra-gallery {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* Hide legacy thumbnails (Woo classic + blocks) */
.single-product .woocommerce-product-gallery .flex-control-nav,
.single-product .woocommerce-product-gallery .flex-control-thumbs,
.single-product .wc-block-components-product-gallery-thumbnails,
.single-product .wp-block-woocommerce-product-gallery-thumbnails {
    display: none !important;
}

/************************************************************
 * KIKU – Mobile+Tablet product gallery – JS slider version
 ************************************************************/

/* Start hidden by default */
.kiku-pdp-gallery-mobile {
    display: none;
}

/* PHONE PORTRAIT: up to 600px */
@media (max-width: 600px) and (orientation: portrait) {

    /* Hide desktop gallery + extra grid on phones */
    .single-product .woocommerce-product-gallery,
    .kiku-extra-gallery {
        display: none !important;
    }

    /* Show custom carousel */
    .kiku-pdp-gallery-mobile {
        display: block;
        width: 100%;
        margin: 0;
        position: relative;
    }

    /* Scroll-snap carousel – iOS-friendly baseline */
    .kiku-pdp-gallery-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        /* nice momentum on iOS */
    }

    .kiku-pdp-slide {
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        aspect-ratio: 4 / 5;
        max-height: 70vh;
        background-color: #fff;
        position: relative;
        overflow: hidden;
    }

    .kiku-pdp-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .kiku-pdp-gallery-pagination {
        position: absolute;
        left: 50%;
        bottom: 2.5rem;
        transform: translateX(-50%);
        margin: 0;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;

        pointer-events: none;
    }

    .kiku-pdp-dot {
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 999px;
        background: #d4d4d4;
        flex: 0 0 auto;
        transition: width 0.22s ease, background-color 0.22s ease;
        pointer-events: auto;
    }

    .kiku-pdp-dot.is-active {
        width: 1.75rem;
        background: #111;
    }
}

/* TABLET (601px–1024px) + PHONE LANDSCAPE (≤600px & landscape) */
@media (min-width: 601px) and (max-width: 1024px),
(max-width: 600px) and (orientation: landscape) {

    .single-product .woocommerce-product-gallery,
    .kiku-extra-gallery {
        display: none !important;
    }

    .kiku-pdp-gallery-mobile {
        display: block;
        width: 100vw;
        max-width: none;
        margin: 0 0 1.5rem;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        position: relative;
    }

    /* Scroll-snap carousel – iOS-friendly baseline */
    .kiku-pdp-gallery-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        /* nice momentum on iOS */
    }


    .kiku-pdp-slide {
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        max-width: 100% !important;
        background-color: #fff;
        position: relative;
        overflow: hidden;
    }

    .kiku-pdp-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .kiku-pdp-gallery-pagination {
        position: absolute;
        left: 50%;
        bottom: 2.75rem;
        transform: translateX(-50%);
        margin: 0;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;

        pointer-events: none;
    }

    .kiku-pdp-dot {
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 999px;
        background: #d4d4d4;
        flex: 0 0 auto;
        transition: width 0.22s ease, background-color 0.22s ease;
        pointer-events: auto;
    }

    .kiku-pdp-dot.is-active {
        width: 1.75rem;
        background: #111;
    }
}

/* ----------------------------------------
   [9.4] Size selector & unit toggle
   ---------------------------------------- */

/* Size selector – typeface Manrope/Inter */
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name,
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
    font-family: var(--wp--preset--font-family--Inter), Inter, system-ui, sans-serif;
}

/* No border around the pills */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
    border: none !important;
}

/* EU label – smaller & tidy */
.wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

/* Selected pill styling */
:where(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:has(.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill-input:checked)) {
    --pill-color: rgb(255, 255, 255);
    --pill-background-color: rgb(17, 17, 17);
    --pill-border-color: transparent;
    border-radius: 15px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Base: make ALL pills rounded, always */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill {
    border-radius: 15px !important;
}

/* Hover state: keep grey, but rounded + no border */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:hover {
    border-radius: 15px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Kill focus ring Woo adds */
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:focus,
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:focus-visible,
.wc-block-add-to-cart-with-options-variation-selector-attribute-options__pill:focus-within {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* --- KIKU size toggle (wrapper over native Woo) --- */

/* Visually hide native Woo attribute block (label + pills) */
.kiku-size-native--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Wrapper */
.kiku-size-toggle {
    margin-bottom: 0.25rem;
    margin-top: -0.5rem;
    font-family: var(--wp--preset--font-family--Inter), Inter, system-ui, sans-serif;
    font-size: 0.9rem;
	padding-bottom: 1rem;
}

/* Top row: "Size" + EU GB US */
.kiku-size-toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.kiku-size-toggle-label {
    font-size: 0.95rem;
    text-transform: none;
}

/* ---------------------------
   Unit toggle: EU / GB / US
   (no motion on hover)
---------------------------- */

/* Unit wrapper row */
.kiku-size-toggle-units {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

/* Base unit style (shared for buttons/links/abbr) */
.kiku-size-toggle-unit {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    color: inherit;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    cursor: pointer;
    position: relative;
    opacity: 0.7;

    /* No motion / animation */
    transition: none;

    /* No tap highlight on iOS */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
}

/* If they happen to be <a>, nuke all link states */
.kiku-size-toggle-unit:link,
.kiku-size-toggle-unit:visited,
.kiku-size-toggle-unit:hover,
.kiku-size-toggle-unit:active,
.kiku-size-toggle-unit:focus,
.kiku-size-toggle-unit:focus-visible {
    color: inherit !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Optional: also prevent Safari from auto-styling abbreviations */
abbr.kiku-size-toggle-unit {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Hover: visually unchanged (only cursor) */
.kiku-size-toggle-unit:hover {
    opacity: 0.7;
}

/* Active unit with thin underline */
.kiku-size-toggle-unit.is-active {
    opacity: 1;
}

.kiku-size-toggle-unit.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.2rem;
    height: 1px;
    background-color: #111;
}

/* ---------------------------
   Pills row
---------------------------- */

.kiku-size-toggle-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem !important;
}

/* Base pill – text only, invisible pill */
.kiku-size-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0;

    border-radius: 999px;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;

    box-shadow: none;
    transform: none;
    transition: none;
}

/* Hover – absolutely no visual change */
.kiku-size-pill:hover {
    background: transparent;
    color: inherit;
    box-shadow: none;
    transform: none;
}

/* Selected pill – solid black circle, white text */
.kiku-size-pill.is-active {
    background-color: #000;
    color: #fff;
}

/* Keep selected look on hover */
.kiku-size-pill.is-active:hover {
    background-color: #000;
    color: #fff;
    box-shadow: none;
    transform: none;
}

/* Keyboard focus ring (for accessibility) */
.kiku-size-pill:focus-visible,
.kiku-size-toggle-unit:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

/* ---------------------------
   Responsive tweaks
---------------------------- */

@media (max-width: 600px) {

    .kiku-size-toggle-header {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem !important;
    }

    .kiku-size-toggle-label {
        font-size: 1rem;
        font-weight: 500;
    }

    .kiku-size-toggle-units {
        gap: 0.7rem;
    }

    .kiku-size-pill {
        min-width: 2.4rem;
    }
}

/* ----------------------------------------
   [9.5] PDP Tabs (Description / Materials / Size)
   ---------------------------------------- */

.woocommerce-tabs.wc-tabs-wrapper {
    margin-top: 1.5rem;
    border-top: 1px solid #111;
}

.woocommerce-tabs .wc-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

/* Each tab row */
.woocommerce-tabs .wc-tabs li {
    margin: 0;
    border-bottom: 1px solid #111;
}

/* Link styled as row with label + plus sign */
.woocommerce-tabs .wc-tabs li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 0;
    text-decoration: none;
    color: inherit;
    font-size: 0.95rem;
}

/* Plus sign on the right */
.woocommerce-tabs .wc-tabs li a::after {
    content: "+";
    font-size: 1rem;
}

/* Active tab shows minus */
.woocommerce-tabs .wc-tabs li.active a::after {
    content: "−";
}

/* Panels */
.woocommerce-tabs .wc-tab {
    padding: 0.5rem 0 1.1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ----------------------------------------
   [9.6] Size Guide Modal – HOFF-style
   ---------------------------------------- */

/* Lock scroll when modal is open */
body.kiku-size-modal-open {
    overflow: hidden;
}

/* Modal root */
.kiku-size-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    padding: 1.25rem;
    box-sizing: border-box;

    display: flex;
    justify-content: flex-end;
    align-items: stretch;

    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
}

.kiku-size-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Backdrop */
.kiku-size-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* ---------------------------------------------------------
   Card (dialog)
----------------------------------------------------------*/

.kiku-size-modal__dialog {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 1.5rem 1.75rem 1.75rem;
    box-sizing: border-box;

    /* Fills available height inside frame */
    height: 100%;
    max-height: 100%;

    /* Base width: 25% of viewport on large desktop */
    width: 25%;

    /* Layout inside: header + scrollable table */
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* Base (closed) state: slightly offset & dimmed */
    transform:
        translateX(28px) translateY(2px) scale(0.995);
    opacity: 0.3;

    /* Only animate transform/opacity with a buttery easing */
    transition:
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);

    will-change: transform, opacity;
}

/* Open state: snapped in place, full opacity */
.kiku-size-modal__dialog.is-visible {
    transform:
        translateX(0) translateY(0) scale(1);
    opacity: 1;
}

/* Inner scroll area for the table */
.kiku-size-modal__table-wrap {
    margin-top: 0.75rem;
    overflow: auto;
    flex: 1;
}

/* Close button (kills iOS blue on X and is finger-friendly) */
.kiku-size-modal__close {
    position: absolute;
    top: 0.9rem;
    right: 1.1rem;

    /* behave like a neutral icon button */
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    cursor: pointer;

    /* finger-friendly size */
    font-size: 1.75rem;
    line-height: 1;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    justify-content: center;
    align-items: center;

    /* no tap highlight on iOS */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;

    color: #111;
    /* lock the color */
}

/* Make sure iOS never recolors it on any state */
.kiku-size-modal__close:link,
.kiku-size-modal__close:visited,
.kiku-size-modal__close:hover,
.kiku-size-modal__close:active,
.kiku-size-modal__close:focus,
.kiku-size-modal__close:focus-visible {
    color: #111 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Title + text */
#kiku-size-guide-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 2rem 0 0;
}

.kiku-size-modal__intro,
.kiku-size-modal__note {
    font-size: 0.85rem;
    margin: 0.4rem 0;
}

/* Table */
.kiku-size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-weight: 500;
    table-layout: auto;
    /* let the content breathe */
}

.kiku-size-table th,
.kiku-size-table td {
    padding: 0.45rem 0.4rem;
    border: 1px solid #d0d0d0;
    text-align: center;
}

/* Make first columns compact */
.kiku-size-table th:nth-child(1),
.kiku-size-table td:nth-child(1),
.kiku-size-table th:nth-child(2),
.kiku-size-table td:nth-child(2),
.kiku-size-table th:nth-child(3),
.kiku-size-table td:nth-child(3) {
    white-space: nowrap;
    width: 1%;
}

/* Last column can stretch */
.kiku-size-table th:nth-child(4),
.kiku-size-table td:nth-child(4) {
    width: auto;
}

/* Tablet: half width, still right-aligned in the frame */
@media (max-width: 1024px) {
    .kiku-size-modal__dialog {
        width: 50%;
    }

    .kiku-size-toggle-label {
        font-size: 1rem;
        font-weight: 500;
    }
}

/* Mobile: full height & width, centered */
@media (max-width: 600px) {
    .kiku-size-modal {
        justify-content: center;
        /* frame centered on viewport */
    }

    .kiku-size-modal__dialog {
        width: 100%;
        height: 100%;
    }
}

/* ----------------------------------------
   [9.7] Mobile/Tablet side padding & EU/GB/US size
   ---------------------------------------- */

/* Unified phones + tablets side padding */
@media (max-width: 1024px) {


    /* Reset summary padding so Gutenberg/Woo don’t fight us */
    .single-product .kiku-product-summary {
        padding: 0 !important;
    }

    /* Apply the side padding to the entire PDP wrapper */
    .single-product .kiku-product-main > .wp-block-columns {
        box-sizing: border-box;
        padding-inline: 2rem !important;
        /* main “taste knob” */
        margin-inline: 0;
        width: 100%;
    }

    /* Tabs area should match the same inset */
    .single-product .kiku-product-tabs {
        margin-inline: -2rem !important;
        /* cancel wrapper padding */
        padding-inline: 2rem !important;
        /* reapply inside */
    }

    /* Prevent EU/GB/US from drifting */
    .kiku-size-toggle-header {
        padding-inline: 0 !important;
    }


    .kiku-size-toggle-unit {
        font-size: 1rem !important;
        /* ← bump this to taste */
        font-weight: 500;
        /* optional: keeps them crisp */
    }
}


/* ============================================
   KIKU – Enlarge ONLY EU / GB / US labels
   (phones + tablets)
   ============================================ */



/* Fine-tune vertical gap between gallery and title */

/* Phones */
@media (max-width: 600px) {
    .single-product .kiku-product-main > .wp-block-columns {
        margin-top: -0.8rem;
        /* phone only */
    }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
    .single-product .kiku-product-main > .wp-block-columns {
        margin-top: -2rem;
        /* tablet only */
    }
}

/* Remove extra padding below the header */
.woocommerce.wc-block-store-notices.alignwide {
    margin-top: -20px !important;
}

/* Style navigation path */
.woocommerce .woocommerce-breadcrumb {
	padding-left: 1rem !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	font-size: 1rem !important;
}

/* ============================================
   KIKU – Product image zoom helpers
   ============================================ */

/* Desktop: simple zoom cursor */
@media (min-width: 1025px) {

    .kiku-zoomable {
        cursor: zoom-in;
        /* standard zoom cursor */
    }

    .kiku-zoom-trigger-mobile {
        display: none;
    }
}


/* Make sure slide containers can host the zoom button */
.kiku-pdp-slide {
    position: relative;
    overflow: hidden;
}

/* ============================================
   KIKU Zoom Trigger Mobile – base
   ============================================ */

.kiku-zoom-trigger-mobile {
    appearance: none;
    -webkit-appearance: none;
    border: none;

    width: 2.6rem;
    /* base size (overridden per viewport below) */
    height: 2.6rem;
    border-radius: 999px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    /* Zoom icon from media library */
    background-color: rgba(0, 0, 0, 0.75);
    background-image: url('https://thekikubrand.com/wp-content/uploads/2025/11/kiku-icon-black-zoom.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 2rem 2rem;
    /* overridden below per viewport */

    color: transparent !important;
    text-indent: -9999px;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 160ms ease-out,
        box-shadow 160ms ease-out;
}

/* Hide mobile zoom button on desktop – desktop uses cursor click */


/* PHONE PORTRAIT Zoom Trigger (≤ 600px) */
@media (max-width: 600px) and (orientation: portrait) {
    .kiku-zoom-trigger-mobile {
        width: 1.7rem;
        height: 1.7rem;
        background-size: 1.7rem 1.7rem;

        position: absolute;
        right: 1.1rem;
        bottom: 1.1rem;
        top: auto;
        left: auto;
        z-index: 3;
    }
}

/* TABLET (601px–1024px) + PHONE LANDSCAPE Zoom Trigger */
@media (min-width: 601px) and (max-width: 1024px),
(max-width: 600px) and (orientation: landscape) {
    .kiku-zoom-trigger-mobile {
        width: 2.2rem;
        height: 2.2rem;
        background-size: 2.2rem 2.2rem;
        position: absolute;
        right: 2rem;
        bottom: 1.4rem;
        top: auto;
        left: auto;
        z-index: 3;
    }
}

/* KIKU — Out of Stock Badge for size selector (Bauhaus) */
.kiku-size-oos {
  display: none;
  width: 20%;
  padding: 0.65rem 0.65rem;
  border: none;
  background: #872730;
  color: #FFF;
  border-radius: 20px;
  text-align: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  opacity: 0.75;
}

/* KIKU — OOS: hide Add to cart + PayPal message (Woo Blocks) */
.wp-block-woocommerce-add-to-cart-with-options.is-out-of-stock
  .wp-block-woocommerce-add-to-cart-form,
.wp-block-woocommerce-add-to-cart-with-options.is-out-of-stock
  [id^="ppcp-message-"],
.wp-block-woocommerce-add-to-cart-with-options.is-out-of-stock
  .ppcp-message-wrapper {
  display: none !important;
}

/* ============================================
   KIKU PhotoSwipe Fix (kept minimal)
   ============================================ */

/* Detach PhotoSwipe from any transformed parent */
.pswp {
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;
    z-index: 2147483647 !important;
    --pswp-bg: #f0f0f0 !important;
    --pswp-placeholder-bg: #f0f0f0 !important;
}

/* Prevent any overflow clipping of the viewport */
html,
body {
    overflow: visible !important;
}

/* VERY IMPORTANT: RECOVERS SCROLL DOWN FROM GALLERY */
.kiku-pdp-gallery-track {
    touch-action: pan-y !important;
}

/* Default “Adobe hand” cursor in PhotoSwipe on desktop */
.pswp__img {
    cursor: grab;
    cursor: -webkit-grab;
}

/* While dragging (we toggle .pswp--grabbing in JS) */
.pswp--grabbing .pswp__img {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

/* Style PS photo counter */
.pswp__counter {
    color: #000 !important;
    text-shadow: none !important;
    font-family: var(--wp--preset--font-family--inter) !important;
    font-weight: 700 !important;
}

/* --------------------------------------------
   Responsive rules (moved from [8.0])
   -------------------------------------------- */

@media (max-width: 480px) {

.wc-blocks-pattern-header-minimal {
        margin-top: 0 !important;
        padding-top: 15px !important;
        padding-right: 19px !important;
        padding-bottom: 15px !important;
        padding-left: 19px !important;
	}
}

/* Carousel arrows for Store Page */
.kiku-carousel-shell {
  position: relative;
}

.kiku-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 42px;
  height: 42px;
  border: 0.5px solid #11111173;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.77);
  cursor: pointer;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
  transition: background .05s ease, color .18s ease, transform .18s ease;
  color: #11111173;
  font-size: 0;
}

/* Shared SVG mask styling */
.kiku-carousel-btn::before {
  content: "";
  width: 30px;              /* ⬅️ bigger arrow */
  height: 30px;
  background-color: currentColor;
  display: block;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}

.kiku-carousel-prev::before {
  transform: translate(-1px, 3px);
}

.kiku-carousel-next::before {
  transform: translate(1px, 3px);
}

.kiku-carousel-btn {
  opacity: 0.85;
}

.kiku-carousel-shell:hover .kiku-carousel-btn {
  opacity: 1;
}

.kiku-carousel-prev {
  left: 18px;
}

.kiku-carousel-next {
  right: 18px;
}

.kiku-carousel-prev::before {
  -webkit-mask-image: url('https://thekikubrand.com/wp-content/uploads/2026/04/kiku-icon-previous-both.svg');
  mask-image: url('https://thekikubrand.com/wp-content/uploads/2026/04/kiku-icon-previous-both.svg');
}

.kiku-carousel-next::before {
  -webkit-mask-image: url('https://thekikubrand.com/wp-content/uploads/2026/04/kiku-icon-next-both.svg');
  mask-image: url('https://thekikubrand.com/wp-content/uploads/2026/04/kiku-icon-next-both.svg');
}

/* Hover state */
.kiku-carousel-btn:hover {
  background: #111111ab;
  color: #ffffff;
  transform: translateY(-50%) scale(1.04);
}

@media (max-width: 768px) {
  .kiku-carousel-btn {
    width: 36px;
    height: 36px;
  }

  .kiku-carousel-btn::before {
    width: 16px;
    height: 16px;
  }

  .kiku-carousel-prev {
    left: 10px;
  }

  .kiku-carousel-next {
    right: 10px;
  }
}