/*
Theme Name:   Shoptimizer Child – JEJU
Theme URI:    https://jeju.md
Description:  Child theme for Shoptimizer — JEJU Beauty Bar, Seoul Rose design system
Author:       Valentin Dubrovschi
Template:     shoptimizer
Version:      1.0.0
License:      GNU General Public License v2 or later
Text Domain:  shoptimizer-child
*/


/* =============================================================
   1. SEOUL ROSE — CSS CUSTOM PROPERTIES
   All colours flow from here. Change a value once, it updates
   everywhere on the site.
   ============================================================= */
:root {
  /* Core accent */
  --j-accent:       #C9506A;
  --j-accent-lt:    #F4D8E2;
  --j-accent-dk:    #7A2038;
  --j-accent-hover: #A83D56;

  /* Navigation */
  --j-nav-bg:       #1C1C1C;
  --j-nav-text:     #FFFFFF;

  /* Announcement bar */
  --j-ann-bg:       #FCE8EE;
  --j-ann-text:     #7A2038;

  /* Hero panel backgrounds */
  --j-hero-1:       #F8EDF0;
  --j-hero-2:       #2C1520;
  --j-hero-3:       #E8C8D4;

  /* CTA buttons */
  --j-btn-bg:       #C9506A;
  --j-btn-text:     #FFFFFF;
  --j-btn-hover:    #A83D56;

  /* Typography — system font stack, no Google Fonts, no FOUT */
  --j-font-head:    Georgia, 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  --j-font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Soft UI */
  --j-border:       #F0D8E2;
  --j-bg-soft:      #FDFAFB;
}


/* =============================================================
   2. TYPOGRAPHY
   ============================================================= */
body {
  font-family: var(--j-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.page-title,
.entry-title,
.product_title {
  font-family: var(--j-font-head);
}


/* =============================================================
   3. ANNOUNCEMENT BAR
   Shoptimizer exposes this via the Customizer; these rules act
   as a fallback and override if the Customizer value is not set.
   ============================================================= */
.shoptimizer-header-bar,
.commercekit-announcement-bar,
.woocommerce-store-notice,
p.demo_store {
  background-color: var(--j-ann-bg) !important;
  color: var(--j-ann-text) !important;
}

.shoptimizer-header-bar a,
.shoptimizer-header-bar p,
.shoptimizer-header-bar span,
.commercekit-announcement-bar a,
.commercekit-announcement-bar p {
  color: var(--j-ann-text) !important;
}


/* =============================================================
   4. MAIN NAVIGATION
   ============================================================= */
.main-navigation,
#site-navigation,
.primary-navigation,
.shoptimizer-primary-nav {
  background-color: var(--j-nav-bg) !important;
}

.main-navigation ul li a,
.primary-navigation ul li a,
.shoptimizer-primary-nav ul li a {
  color: var(--j-nav-text) !important;
}

.main-navigation ul li a:hover,
.primary-navigation ul li a:hover,
.main-navigation ul li:hover > a {
  color: var(--j-accent-lt) !important;
  background-color: transparent !important;
}

/* Dropdown panels */
.main-navigation ul ul {
  background-color: #ffffff !important;
  border-top: 2px solid var(--j-accent) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.08) !important;
}

.main-navigation ul ul li a {
  color: #333333 !important;
}

.main-navigation ul ul li a:hover {
  color: var(--j-accent) !important;
  background-color: var(--j-accent-lt) !important;
}

/* Cart icon & count badge */
.cart-contents,
.cart-contents .amount,
.shoptimizer-cart-link .amount {
  color: var(--j-nav-text) !important;
}

.cart-contents-count,
.cart-count {
  background: var(--j-accent) !important;
  color: #ffffff !important;
}

/* Search icon */
.shoptimizer-search-icon,
.search-toggle {
  color: var(--j-nav-text) !important;
}


/* =============================================================
   5. BUTTONS — GLOBAL
   ============================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .checkout-button,
.single_add_to_cart_button,
button.single_add_to_cart_button,
.commercekit-quick-view-btn,
input[type="submit"] {
  background-color: var(--j-btn-bg) !important;
  color: var(--j-btn-text) !important;
  border-color: var(--j-btn-bg) !important;
  border-radius: 2px !important;
  font-family: var(--j-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
  transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
input[type="submit"]:hover {
  background-color: var(--j-btn-hover) !important;
  border-color: var(--j-btn-hover) !important;
  color: var(--j-btn-text) !important;
}

/* Ghost / secondary variant */
.woocommerce a.button.alt {
  background-color: transparent !important;
  color: var(--j-accent) !important;
  border: 1.5px solid var(--j-accent) !important;
}

.woocommerce a.button.alt:hover {
  background-color: var(--j-accent) !important;
  color: #ffffff !important;
}


/* =============================================================
   6. PRODUCT LOOP — ADD TO CART ALWAYS VISIBLE
   Shoptimizer / CommerceKit hides the button until hover.
   These rules override that behaviour so it's always shown.
   If it still hides, inspect the element in DevTools, copy the
   exact selector Shoptimizer uses, and add it below.
   ============================================================= */
.jeju-carousel-section .product-loop-action,
.jeju-carousel-section .loop-add-to-cart,
.jeju-carousel-section .commercekit-loop-atc,
.jeju-carousel-section li.product .button,
.jeju-carousel-section li.product a.add_to_cart_button,
.jeju-carousel-section li.product .add_to_cart_button {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  position: static !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}


/* =============================================================
   7. PRODUCT GRID — CAROUSEL ALIGNMENT
   All rules scoped to .jeju-carousel-section so Shoptimizer's
   native shop / category page styles are left completely intact.
   ============================================================= */

.jeju-carousel-section ul.products {
  display: grid !important;
  align-items: stretch !important;
  gap: 16px;
}

/* Respect Shoptimizer's columns-N classes inside carousels */
.jeju-carousel-section ul.products.columns-1 { grid-template-columns: 1fr; }
.jeju-carousel-section ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.jeju-carousel-section ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.jeju-carousel-section ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
.jeju-carousel-section ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
.jeju-carousel-section ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* Fallback when no columns-N class present */
.jeju-carousel-section ul.products:not([class*="columns-"]) {
  grid-template-columns: repeat(3, 1fr);
}

.jeju-carousel-section li.product {
  display: flex !important;
  flex-direction: column !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Image link — must NOT flex-grow so .woocommerce-card__header fills remaining space */
.jeju-carousel-section li.product > a:first-child,
.jeju-carousel-section li.product > .woocommerce-loop-product__link {
  flex-shrink: 0 !important;
}

/* Square product image */
.jeju-carousel-section li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--j-bg-soft);
  padding: 8px;
}

/* ── Hide category labels inside carousels ──────────────────
   Confirmed class from DevTools: p.product__categories
   NOTE: no .woocommerce ancestor needed — absent in Elementor */
.jeju-carousel-section li.product .woocommerce-loop-product__category,
.jeju-carousel-section li.product .loop-product-categories,
.jeju-carousel-section li.product .woocommerce-loop-product__categories,
.jeju-carousel-section li.product .product-categories,
.jeju-carousel-section li.product .product__categories,
.jeju-carousel-section li.product p.product__categories,
.jeju-carousel-section li.product .product_cat,
.jeju-carousel-section li.product .posted_in,
.jeju-carousel-section li.product .posted-in,
.jeju-carousel-section li.product .shoptimizer-loop-product__category,
.jeju-carousel-section li.product .commercekit-product-category,
.jeju-carousel-section li.product .ckit-product-category,
.jeju-carousel-section li.product [class*="categor"]:not(img):not(a):not(.woocommerce-loop-product__title) {
  display: none !important;
}

/* ── .woocommerce-card__header is the real flex parent (DevTools confirmed) ── */
.jeju-carousel-section li.product .woocommerce-card__header {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Image link stays block */
.jeju-carousel-section li.product .woocommerce-loop-product__link,
.jeju-carousel-section li.product > a:first-of-type {
  display: block;
}

/* Title — clamped to 2 lines for uniform card height */
.jeju-carousel-section li.product .woocommerce-loop-product__title {
  font-family: var(--j-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  min-height: 2.8em !important;
  max-height: 2.8em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin: 8px 0 6px !important;
  padding: 0 8px !important;
  color: #1a1a1a !important;
}

/* Price — margin-top: auto pins price + button to card bottom */
.jeju-carousel-section li.product .price {
  font-family: var(--j-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  margin-top: auto !important;
  margin-bottom: 6px !important;
  padding: 0 8px !important;
  display: block !important;
}

.jeju-carousel-section li.product .price del {
  color: #bbbbbb !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

.jeju-carousel-section li.product .price ins {
  text-decoration: none !important;
  font-weight: 500 !important;
  color: var(--j-accent) !important;
}

/* Add to Cart button — full width, pinned at card bottom */
.jeju-carousel-section li.product a.button,
.jeju-carousel-section li.product button.button,
.jeju-carousel-section li.product .add_to_cart_button,
.jeju-carousel-section li.product .product_type_simple,
.jeju-carousel-section li.product .product_type_variable {
  display: block !important;
  width: calc(100% - 16px) !important;
  margin: 4px 8px 10px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Sale badge */
.jeju-carousel-section li.product .onsale {
  background: var(--j-accent) !important;
  color: #ffffff !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  min-width: auto !important;
  min-height: auto !important;
  padding: 3px 8px !important;
  line-height: 1.4 !important;
}


/* =============================================================
   8. MOBILE GRID — SHOP & CATEGORY PAGES
   ul.products inside our carousels gets the class "jeju-carousel"
   added by functions.php. Any ul.products WITHOUT that class is a
   native Shoptimizer shop/category loop — force 2 columns there.
   ============================================================= */
@media (max-width: 767px) {
  /* Force 2 columns on all native shop/category pages.
     Targets every columns-N variant since desktop is set to 4. */
  ul.products:not(.jeju-carousel),
  ul.products.columns-2:not(.jeju-carousel),
  ul.products.columns-3:not(.jeju-carousel),
  ul.products.columns-4:not(.jeju-carousel),
  ul.products.columns-5:not(.jeju-carousel),
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    float: none !important;
    flex-wrap: unset !important;
  }

  /* Clear Shoptimizer's float + percentage widths on each card */
  ul.products:not(.jeju-carousel) li.product,
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: none !important;
  }
}


/* =============================================================
   8b. CAROUSEL GRID — MOBILE ADJUSTMENTS
   Scoped to .jeju-carousel-section — Shoptimizer's native mobile
   layout on shop/category pages is untouched.
   ============================================================= */
@media (max-width: 767px) {

  .jeju-carousel-section {
    padding: 32px 0;
  }

  .jeju-carousel-section li.product .woocommerce-loop-product__title {
    font-size: 10px !important;
    min-height: 2.6em !important;
    max-height: 2.6em !important;
  }

  .jeju-carousel-section li.product .price {
    font-size: 11px !important;
  }

  .jeju-carousel-section li.product a.button,
  .jeju-carousel-section li.product button.button {
    font-size: 8px !important;
    padding: 6px 4px !important;
    letter-spacing: 0 !important;
  }
}


/* =============================================================
   9. MOBILE HEADER & MENU
   ============================================================= */

@media (max-width: 991px) {

  /* ── Hamburger toggle button ── */
  button.menu-toggle .bar {
    background-color: #1C1C1C !important;
    display: block !important;
  }

  button.menu-toggle .bar-text {
    display: inline !important;
    color: #1C1C1C !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-family: var(--j-font-body) !important;
  }

  /* Hide redundant label elements */
  .mobile-menu-label,
  .shoptimizer-menu-label,
  .menu-toggle .menu-label,
  .menu-toggle span.label,
  button.menu-toggle > span:not([class]),
  .handheld-navigation .menu-label {
    display: none !important;
  }

  /* Compact logo */
  .custom-logo-link img,
  .site-logo img {
    max-height: 36px !important;
    width: auto !important;
  }

  .site-title a {
    font-size: 20px !important;
    letter-spacing: 2px;
  }

}


/* =============================================================
   9b. MOBILE MENU DRAWER — Seoul Rose style
   ============================================================= */

/* Drawer panel background — mobile only */
@media (max-width: 991px) {
  #site-navigation,
  nav#site-navigation,
  .main-navigation.toggled,
  .main-navigation ul,
  .main-navigation ul.menu,
  #menu-primary-manu {
    background-color: #ffffff !important;
  }
}

@media (max-width: 991px) {

  /* ── Drawer wrapper ── */
  #site-navigation,
  .main-navigation,
  .col-full-nav,
  .shoptimizer-primary-navigation {
    background-color: #ffffff !important;
    border-right: 1px solid #eeeeee !important;
  }

  /* Force all li backgrounds to white */
  .main-navigation li,
  .main-navigation ul li,
  #site-navigation li,
  #menu-primary-manu li {
    background-color: #ffffff !important;
  }

  /* Close (×) button */
  button.mobile-menu-close-drawer {
    background: transparent !important;
    color: #1C1C1C !important;
  }

  /* ── Top-level menu items ── */
  .main-navigation ul.menu > li,
  #site-navigation ul.menu > li,
  .main-navigation > ul > li {
    border-bottom: 1px solid #eeeeee !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-navigation ul.menu > li:last-child,
  #site-navigation ul.menu > li:last-child {
    border-bottom: none !important;
  }

  /* Top-level links */
  .main-navigation ul.menu > li > a,
  #site-navigation ul.menu > li > a,
  .main-navigation ul.menu > li .cg-menu-link.main-menu-link {
    display: block !important;
    padding: 16px 20px !important;
    font-family: var(--j-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1C1C1C !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .main-navigation ul.menu > li > a:hover,
  .main-navigation ul.menu > li .cg-menu-link.main-menu-link:hover {
    background-color: var(--j-accent-lt) !important;
    color: var(--j-accent-dk) !important;
  }

  /* Caret / accordion arrow — hide */
  .main-navigation .caret,
  #site-navigation .caret {
    display: none !important;
  }

  /* ── Sub-menu wrapper ── */
  .main-navigation .sub-menu-wrapper,
  #site-navigation .sub-menu-wrapper {
    background-color: #FDFAFB !important;
    padding: 0 !important;
    border-top: 1px solid #eeeeee !important;
  }

  /* Sub-menu items */
  .main-navigation .sub-menu > li,
  #site-navigation .sub-menu > li {
    border-bottom: 1px solid #eeeeee !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-navigation .sub-menu > li:last-child,
  #site-navigation .sub-menu > li:last-child {
    border-bottom: none !important;
  }

  .main-navigation .sub-menu .cg-menu-link,
  #site-navigation .sub-menu .cg-menu-link,
  .main-navigation .sub-menu > li > a {
    display: block !important;
    padding: 13px 20px 13px 28px !important;
    font-family: var(--j-font-body) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #444444 !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  .main-navigation .sub-menu .cg-menu-link:hover,
  .main-navigation .sub-menu > li > a:hover {
    background-color: var(--j-accent-lt) !important;
    color: var(--j-accent) !important;
    padding-left: 32px !important;
  }

  /* ── Section heading inside submenu (category title) ── */
  .main-navigation .sub-menu-wrapper > .container > h3,
  .main-navigation .sub-menu-wrapper > h3 {
    padding: 14px 20px 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: var(--j-accent) !important;
    font-family: var(--j-font-body) !important;
    margin: 0 !important;
    border-bottom: none !important;
  }

  /* ── Products inside mobile menu — full width, no top gap ── */
  .main-navigation .sub-menu-wrapper,
  .main-navigation .sub-menu-wrapper .container,
  .main-navigation .sub-menu-wrapper ul.products,
  .main-navigation .sub-menu-wrapper ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  .main-navigation .sub-menu-wrapper ul.products {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove top gap before the products block */
  .main-navigation .sub-menu-wrapper .woocommerce,
  .main-navigation .sub-menu-wrapper div.woocommerce {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* The sub-menu li that wraps the products */
  .main-navigation .sub-menu > li.menu-item-type-custom {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .main-navigation .sub-menu-wrapper ul.products li.product {
    padding: 6px 16px !important;
    margin: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
  }

  /* Hide category labels */
  .main-navigation .sub-menu-wrapper ul.products li.product p.product__categories,
  .main-navigation .sub-menu-wrapper ul.products li.product .woocommerce-loop-product__category,
  .main-navigation .sub-menu-wrapper ul.products li.product .product__categories {
    display: none !important;
  }

  /* Reduce internal product card spacing */
  .main-navigation .sub-menu-wrapper ul.products li.product a img,
  .main-navigation .sub-menu-wrapper ul.products li.product img {
    margin-bottom: 4px !important;
    margin-top: 0 !important;
  }

  .main-navigation .sub-menu-wrapper ul.products li.product .woocommerce-loop-product__title {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    padding-top: 0 !important;
  }

  .main-navigation .sub-menu-wrapper ul.products li.product .price {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
  }

  .main-navigation .sub-menu-wrapper ul.products li.product .button,
  .main-navigation .sub-menu-wrapper ul.products li.product .add_to_cart_button {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .main-navigation .sub-menu-wrapper ul.products li.product .woocommerce-card__header,
  .main-navigation .sub-menu-wrapper ul.products li.product .product-loop-action {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Remove accent border-top on dropdowns — only needed on desktop */
  .main-navigation ul ul {
    border-top: none !important;
  }

  /* Override any remaining reddish borders */
  .main-navigation .sub-menu-wrapper ul.products li.product,
  .main-navigation .sub-menu-wrapper ul.products li.product * {
    border-color: #eeeeee !important;
  }

}


/* =============================================================
   10. MOBILE CATEGORY PILL STRIP
   (was section 9 — renumbered)
   ============================================================= */

/* =============================================================
   9. MOBILE CATEGORY PILL STRIP
   Output by jeju_mobile_pills() in functions.php.
   Hidden on desktop, visible on tablet/mobile.
   ============================================================= */
.jeju-category-pills {
  display: none;
  background: #ffffff;
  border-bottom: 1px solid #f0eded;
  /* position + top set by JS on mobile — see jeju_mobile_pills() in functions.php */
}

@media (max-width: 991px) {
  .jeju-category-pills {
    display: block;
  }
}

.jeju-pills-list {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}

.jeju-pills-list::-webkit-scrollbar {
  display: none;
}

.jeju-pill a,
.jeju-pill a:visited {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid #e0d0d5;
  font-size: 12px;
  font-family: var(--j-font-body);
  color: #666666;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.jeju-pill a:hover,
.jeju-pill.active a {
  background: var(--j-accent-lt);
  border-color: var(--j-accent-lt);
  color: var(--j-accent-dk);
  font-weight: 500;
}


/* =============================================================
   10. PRODUCT CAROUSELS
   Used by [jeju_carousel] shortcode wrapper.
   Your custom shortcode outputs <ul class="products">.
   The wrapper adds "jeju-carousel" to that class, then this
   CSS makes it scroll horizontally.
   ============================================================= */
.jeju-carousel-section {
  padding: 48px 0;
}

.jeju-carousel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 24px;
}

.jeju-carousel-title {
  font-family: var(--j-font-head) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  line-height: 1.2;
}

@media (max-width: 767px) {
  .jeju-carousel-title {
    font-size: 20px !important;
  }
}

.jeju-carousel-link {
  font-size: 13px;
  color: var(--j-accent);
  text-decoration: none;
  font-weight: 500;
  font-family: var(--j-font-body);
  white-space: nowrap;
}

.jeju-carousel-link:hover {
  color: var(--j-accent-hover);
  text-decoration: underline;
}

/* Horizontal scroll container — overrides the generic grid rules above */
.jeju-carousel-wrap ul.products,
ul.products.jeju-carousel {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 24px 12px !important;
  /* Reset columns-N grid so our flex layout takes control */
  grid-template-columns: unset !important;
  align-items: stretch !important;
}

.jeju-carousel-wrap ul.products::-webkit-scrollbar,
ul.products.jeju-carousel::-webkit-scrollbar {
  display: none;
}

/* Fixed card width — 4 visible on desktop, peek on mobile */
.jeju-carousel-wrap ul.products li.product,
ul.products.jeju-carousel li.product {
  flex: 0 0 210px !important;
  width: 210px !important;
  scroll-snap-align: start;
  margin: 0 !important;
  float: none !important;
}

@media (max-width: 1024px) {
  .jeju-carousel-wrap ul.products li.product,
  ul.products.jeju-carousel li.product {
    flex: 0 0 185px !important;
    width: 185px !important;
  }
}

@media (max-width: 767px) {
  .jeju-carousel-section {
    padding: 32px 0;
  }
  /* Mobile carousel grid layout is now controlled entirely by
     the [jeju_carousel] shortcode via inline <style> scoped to
     each instance ID. Edit cols_mobile / rows_mobile directly
     in the Elementor shortcode widget — no PHP edits needed.   */
}


/* =============================================================
   11. USP TRUST STRIP — Mix A+D
   Fond blush rose, icon mare centrat deasupra textului,
   separatori subtili între coloane.
   ============================================================= */
.jeju-usp-strip {
  background: var(--j-ann-bg);   /* #FCE8EE — blush rose */
  padding: 36px 40px;
}

.jeju-usp-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .jeju-usp-strip {
    padding: 24px 16px;
  }
  .jeju-usp-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 0;
  }
}

.jeju-usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-right: 1px solid #F0C8D4;
  text-align: center;
}

.jeju-usp-item:last-child {
  border-right: none;
}

@media (max-width: 767px) {
  .jeju-usp-item {
    border-right: none;
    padding: 0 12px;
  }
  .jeju-usp-item:nth-child(odd) {
    border-right: 1px solid #F0C8D4;
  }
}

.jeju-usp-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--j-accent-dk);   /* #7A2038 — wine */
}

.jeju-usp-label {
  font-size: 13px;
  font-weight: 700;
  color: #2C1520;
  font-family: var(--j-font-body);
  line-height: 1.3;
}

.jeju-usp-sub {
  font-size: 12px;
  color: #9B6070;
  font-family: var(--j-font-body);
  line-height: 1.3;
  font-weight: 400;
  margin-top: -6px;
}


/* =============================================================
   12. BRAND LOGO STRIP
   Output by [jeju_brands] shortcode.
   ============================================================= */
.jeju-brands {
  padding: 28px 24px;
  background: var(--j-bg-soft);
  border-top: 1px solid var(--j-border);
  border-bottom: 1px solid var(--j-border);
}

.jeju-brands-title {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #444444;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--j-font-body);
  margin-bottom: 20px;
}

.jeju-brands-inner {
  display: grid;
  /* columns injected per-instance via CSS buffer (cols / cols_mobile params) */
  gap: 0;
}

.jeju-brand-item {
  font-family: var(--j-font-head);
  font-size: 16px;
  font-weight: 500;
  color: #3a3a3a;
  letter-spacing: 1.5px;
  text-decoration: none;
  text-align: center;
  transition: color 0.2s ease, background 0.2s ease;
  padding: 20px 12px;
  border-right: 1px dotted #e4e4e4;
  border-bottom: 1px dotted #e4e4e4;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.jeju-brand-item:hover {
  color: var(--j-accent);
  background: var(--j-ann-bg);
}

@media (max-width: 767px) {
  .jeju-brand-item {
    font-size: 13px;
    padding: 16px 8px;
    letter-spacing: 0.8px;
  }
}


/* =============================================================
   13. SOCIAL PROOF + PHYSICAL STORE
   Output by [jeju_store] shortcode.
   ============================================================= */
/* [jeju_reviews] panel — set as Elementor column background or standalone */
.jeju-reviews-panel {
  background: var(--j-ann-bg);
  padding: 52px 44px;
  height: 100%;
  box-sizing: border-box;
}

/* [jeju_store_info] panel — set as Elementor column background or standalone */
.jeju-store-panel {
  background: #ffffff;
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .jeju-reviews-panel,
  .jeju-store-panel {
    padding: 36px 20px;
  }
}

.jeju-panel-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--j-accent-dk);
  margin-bottom: 18px;
  font-family: var(--j-font-body);
}

.jeju-rating-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.jeju-rating-score {
  font-family: var(--j-font-head);
  font-size: 56px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1;
}

.jeju-rating-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.jeju-stars {
  color: #F5A623;
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}

.jeju-review-count {
  font-size: 12px;
  color: #888888;
  font-family: var(--j-font-body);
}

.jeju-review-count a {
  color: var(--j-accent);
  text-decoration: none;
  font-weight: 500;
}

.jeju-review-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 10px;
  border: 1px solid #f0d8e2;
}

.jeju-review-stars {
  color: #F5A623;
  font-size: 11px;
  margin-bottom: 6px;
}

.jeju-review-text {
  font-size: 14px;
  color: #444444;
  line-height: 1.6;
  margin-bottom: 8px;
  font-style: italic;
  font-family: var(--j-font-head);
}

.jeju-review-author {
  font-size: 11px;
  font-weight: 500;
  color: #999999;
  font-family: var(--j-font-body);
  letter-spacing: 0.3px;
}

.jeju-all-reviews-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--j-font-body);
  color: var(--j-accent);
  text-decoration: none;
  border: 1.5px solid var(--j-accent);
  border-radius: 2px;
  letter-spacing: 0.3px;
  transition: background 0.18s ease, color 0.18s ease;
}

.jeju-all-reviews-link:hover {
  background: var(--j-accent);
  color: #ffffff;
}

/* Store panel */
.jeju-store-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 22px;
}

.jeju-store-name {
  font-family: var(--j-font-head);
  font-size: 26px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 16px;
  line-height: 1.2;
}

.jeju-store-info {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jeju-store-info li {
  display: flex;
  gap: 12px;
  font-size: 14px;
  color: #444444;
  font-family: var(--j-font-body);
  line-height: 1.5;
}

.jeju-info-label {
  font-weight: 500;
  color: #1a1a1a;
  min-width: 72px;
  flex-shrink: 0;
}

.jeju-directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--j-btn-bg);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--j-font-body);
  text-decoration: none;
  border-radius: 2px;
  width: fit-content;
  transition: background-color 0.2s ease;
  letter-spacing: 0.3px;
}

.jeju-directions-btn:hover {
  background: var(--j-btn-hover);
  color: #ffffff;
}


/* =============================================================
   14. COMMUNITY CTA — VIBER + TELEGRAM
   Output by [jeju_community viber="URL" telegram="URL"]
   ============================================================= */
.jeju-community {
  background: var(--j-accent);
  padding: 60px 24px;
  text-align: center;
}

.jeju-community h2 {
  font-family: var(--j-font-head);
  font-size: 38px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.2;
}

.jeju-community-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-family: var(--j-font-body);
  margin-bottom: 32px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

.jeju-community-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.jeju-comm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 28px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--j-font-body);
  text-decoration: none;
  transition: opacity 0.2s ease;
  letter-spacing: 0.3px;
  border: none;
}

.jeju-comm-btn:hover {
  opacity: 0.88;
}

.jeju-comm-btn-viber {
  background: #7360F2;
  color: #ffffff;
}

.jeju-comm-btn-telegram {
  background: #29A8EB;
  color: #ffffff;
}

.jeju-comm-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}


/* =============================================================
   15. COMMERCEKIT WIDE PRODUCT — DISABLED
   CommerceKit shows the first product in the loop as a large
   full-width banner ("Wide Product"). We reset it to a normal
   grid card. You can also turn this off in:
   Appearance → Customize → CommerceKit → Product Listings →
   "Enable Wide Products" → set to Off.
   ============================================================= */

/* Reset the wide-product card to normal grid size — carousel context only */
.jeju-carousel-section li.product.commercekit-wide-product,
.jeju-carousel-section li.product.product-wide,
.jeju-carousel-section li.product.first.wide,
.jeju-carousel-section li.product[class*="wide-product"] {
  width: auto !important;
  float: none !important;
  clear: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hide the wide product's oversized image or inner layout */
.commercekit-wide-product .commercekit-wide-product__inner,
.commercekit-wide-product .product-wide-image,
.product-wide > .woocommerce-loop-product__link > img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
}

/* Nuclear: if wide product is a separate element outside the ul */
.woocommerce .commercekit-wide-product-wrap,
.woocommerce .shoptimizer-wide-product-banner {
  display: none !important;
}


/* =============================================================
   15. ELEMENTOR INTEGRATION
   Ensure Elementor widgets inherit our palette correctly.
   ============================================================= */

/* Default Elementor buttons */
.elementor-button {
  background-color: var(--j-btn-bg) !important;
  color: var(--j-btn-text) !important;
  border-radius: 2px !important;
  font-family: var(--j-font-body) !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
  transition: background-color 0.2s ease !important;
}

.elementor-button:hover {
  background-color: var(--j-btn-hover) !important;
  color: var(--j-btn-text) !important;
}

/* Hero Slides widget typography */
.elementor-slides-wrapper .elementor-slide-heading {
  font-family: var(--j-font-head) !important;
}

.elementor-slides-wrapper .elementor-slide-description {
  font-family: var(--j-font-body) !important;
}

/* Utility classes — apply in Elementor via CSS Class field */
.j-bg-accent    { background-color: var(--j-accent) !important; }
.j-bg-accent-lt { background-color: var(--j-accent-lt) !important; }
.j-bg-nav       { background-color: var(--j-nav-bg) !important; }
.j-bg-soft      { background-color: var(--j-bg-soft) !important; }
.j-text-accent  { color: var(--j-accent) !important; }
.j-text-white   { color: #ffffff !important; }
.j-font-head    { font-family: var(--j-font-head) !important; }


/* =============================================================
   16. SEPHORA-STYLE HERO — SWIPER PANELS
   Output by [jeju_hero] / [jeju_panel] shortcodes.

   Desktop (≥768px): 4 panels sit side-by-side, no Swiper motion.
   Mobile  (<768px): Swiper carousel with 1.12 slides visible,
                     peek of next panel = feels swipeable.
   ============================================================= */

/* Outer wrapper — full bleed, clips overflowing Swiper track */
.jeju-hero-wrap {
  width: 100%;
  overflow: hidden;
  background: #fff;
}

/* Swiper container — override any Elementor section padding */
.jeju-hero-wrap .swiper {
  width: 100%;
  overflow: visible; /* allow peek on mobile */
}

/* ---- DESKTOP: grid via CSS, Swiper disabled by JS ---- */
@media (min-width: 768px) {
  .jeju-hero-wrap .swiper {
    overflow: hidden;
  }

  .jeju-hero-wrap .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    transform: none !important;          /* cancel Swiper's translate */
    width: 100% !important;
    gap: 0;
  }

  /* Hide pagination dots on desktop */
  .jeju-hero-wrap .swiper-pagination {
    display: none;
  }
}

/* ---- Force Swiper slides to size from their content, not parent ---- */
.jeju-hero-wrap .swiper-slide {
  height: auto !important;
}

/* ---- Individual panel ---- */
.jeju-hero-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto !important;
}

/* Full-bleed link wraps both image + text */
.jeju-hero-panel-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.jeju-hero-panel-link:hover .jeju-hero-cta {
  text-decoration: underline;
}

/* Image area — explicit heights so it never collapses */
.jeju-hero-img {
  width: 100%;
  height: 300px;          /* desktop */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
  position: relative;
}

@media (max-width: 767px) {
  .jeju-hero-img {
    height: 260px;        /* mobile — tall enough to feel like a product card */
  }
}

.jeju-hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.06) 0%,
    rgba(0,0,0,0.04) 100%
  );
  pointer-events: none;
}

/* Text area below the image */
.jeju-hero-info {
  padding: 16px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* prevents children from stretching full width */
  gap: 6px;
}

.jeju-hero-title {
  font-family: var(--j-font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.jeju-hero-desc {
  font-family: var(--j-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 1;
  margin: 0;
  margin-top: 4px;
}

.jeju-hero-cta {
  display: inline-block;
  font-family: var(--j-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 10px;
  padding: 9px 18px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transition: opacity 0.2s ease;
  line-height: 1;
  white-space: nowrap; /* keep label on one line */
}

.jeju-hero-cta:hover {
  opacity: 0.72;
}

/* ---- Swiper pagination dots (mobile) ---- */
.jeju-hero-wrap .swiper-pagination {
  bottom: 10px;
}

.jeju-hero-wrap .swiper-pagination-bullet {
  background: #cccccc;
  opacity: 1;
  width: 6px;
  height: 6px;
  transition: width 0.2s ease, border-radius 0.2s ease, background 0.2s ease;
}

.jeju-hero-wrap .swiper-pagination-bullet-active {
  background: var(--j-accent) !important;
  width: 22px !important;
  border-radius: 3px !important;
}

/* ---- Tight on very small screens ---- */
@media (max-width: 374px) {
  .jeju-hero-title { font-size: 17px; }
  .jeju-hero-desc  { font-size: 12px; }
  .jeju-hero-info  { padding: 12px 14px 18px; }
}


/* =============================================================
   17. FEATURED CATEGORIES GRID
   Output by [jeju_cats] shortcode.
   Desktop: 4 columns. Mobile: 2 columns.
   ============================================================= */
.jeju-cats-section {
  padding: 52px 24px;
  background: #ffffff;
}

.jeju-cats-header {
  text-align: center;
  margin-bottom: 28px;
}

.jeju-cats-title {
  font-family: var(--j-font-head) !important;
  font-size: 30px !important;
  font-weight: 500 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
  line-height: 1.2;
}

.jeju-cats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .jeju-cats-section {
    padding: 36px 14px;
  }
  .jeju-cats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .jeju-cats-title {
    font-size: 24px !important;
  }
}

/* Individual category card */
.jeju-cat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  background: var(--j-bg-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.jeju-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

/* Image area — tall enough to feel editorial */
.jeju-cat-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--j-accent-lt);
  position: relative;
}

/* No-image placeholder — soft rose gradient */
.jeju-cat-img:not([style*="background-image"]) {
  background: linear-gradient(135deg, var(--j-accent-lt) 0%, #F8EDF0 100%);
}

/* Badge (NOU / OFERTĂ) */
.jeju-cat-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--j-accent);
  color: #ffffff;
  font-family: var(--j-font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  line-height: 1.3;
}

/* Category name */
.jeju-cat-name {
  padding: 13px 16px 14px;
  font-family: var(--j-font-body);
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

.jeju-cat-card:hover .jeju-cat-name {
  color: var(--j-accent);
}


/* =============================================================
   18. PROMO BANNER — [jeju_promo]
   Two layouts: layout="full" (bg image + overlay) and layout="split" (text | photo).
   ============================================================= */

/* ── Equal-height fix: propagate height through Elementor's wrapper divs ── */
/* Covers both modern Flexbox Containers (.e-con) and classic Sections.      */

/* Modern Elementor: Flexbox Container → widget → shortcode output */
.e-con > .elementor-widget-shortcode,
.e-con > .elementor-widget-shortcode > .elementor-widget-container,
.e-con > .e-con > .elementor-widget-shortcode,
.e-con > .e-con > .elementor-widget-shortcode > .elementor-widget-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Classic Elementor: Section → Column → widget → shortcode output */
.elementor-column .elementor-widget-shortcode,
.elementor-column .elementor-widget-shortcode > .elementor-widget-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* The shortcode div itself must fill its flex parent */
.elementor-widget-shortcode > .elementor-widget-container > div:first-child {
  flex: 1;
}

/* ── SPLIT layout ───────────────────────────────────────────── */

/* ── SPLIT layout ───────────────────────────────────────────── */
/*
 * CSS Grid: image column drives the row height naturally.
 * Text column stretches to match (default align-self:stretch in grid).
 * Centering uses position:absolute + translateY(-50%) on the inner
 * wrapper — this NEVER depends on height inheritance or Elementor
 * wrapper chain, so it works regardless of image size or page builder.
 */
.jeju-promo-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Outer text cell — stretches to image height (grid default) */
.jeju-promo-split-text {
  position: relative;  /* containing block for the absolute inner */
  min-height: 360px;   /* floor so the cell is never too short     */
}

/* Inner wrapper — always perfectly centred via transform trick */
.jeju-promo-split-text-inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  padding: 40px 56px;
  box-sizing: border-box;
}

/* Image cell */
.jeju-promo-split-img {
  position: relative;
  overflow: hidden;
  min-height: 360px;
}

.jeju-promo-split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Mobile: single column, image on top */
@media (max-width: 767px) {
  .jeju-promo-split {
    grid-template-columns: 1fr !important;
  }
  .jeju-promo-split-img {
    order: -1;
    min-height: 300px;
    max-height: 300px;
  }
  .jeju-promo-split-text {
    min-height: unset;
  }
  .jeju-promo-split-text-inner {
    position: static;
    transform: none;
    padding: 36px 24px;
  }
}

/* =============================================================
   SPLIT PROMO — SEPARATE SHORTCODES ([jeju_split_text] + [jeju_split_img])
   Elementor owns the two-column layout; these just style each cell.
   In Elementor: Container → flex row, align-items: stretch.
   Each cell: Height → Full (100%).
   ============================================================= */

/*
 * Height chain + zero-gap fix.
 *
 * Elementor wraps each shortcode in:
 *   .elementor-element > .elementor-widget-shortcode > .elementor-widget-container
 * These rules:
 *   1. Push height all the way down so justify-content:center works
 *   2. Strip all padding/margin so the two cells butt up against each other
 *      with zero gap (seamless single-banner look)
 */
.elementor-element:has(> .elementor-widget-container > .jeju-split-text),
.elementor-element:has(> .elementor-widget-container > .jeju-split-img) {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-widget-shortcode:has(.jeju-split-text),
.elementor-widget-shortcode:has(.jeju-split-text) > .elementor-widget-container,
.elementor-widget-shortcode:has(.jeju-split-img),
.elementor-widget-shortcode:has(.jeju-split-img) > .elementor-widget-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  padding: 0 !important;
  margin: 0 !important;
}

.jeju-split-text,
.jeju-split-img {
  width: 100%;
  margin: 0;
}

/*
 * Text panel — fills its Elementor cell and centres content vertically.
 * All flex properties use !important to beat Shoptimizer/Elementor overrides.
 */
.jeju-split-text {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 60px 56px;
  box-sizing: border-box;
}

/*
 * Image panel — fills its cell with a cover image.
 * The absolute img avoids any circular height dependency.
 */
.jeju-split-img {
  flex: 1 1 auto;              /* fills the wrapper chain above          */
  position: relative;
  min-height: 360px;           /* floor height so cell is never too flat */
  overflow: hidden;
}

.jeju-split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Mobile: stack vertically, image on top, fixed height */
@media (max-width: 767px) {
  .jeju-split-text {
    padding: 36px 24px;
    justify-content: flex-start;
  }
  .jeju-split-img {
    min-height: 300px;
    max-height: 300px;
  }
}

/* ── Badge (both layouts) ───────────────────────────────────── */
.jeju-promo-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--j-font-body);
  border: 1.5px solid currentColor;
  border-radius: 2px;
  padding: 3px 10px;
  margin-bottom: 18px;
}

/* ── FULL layout (background image) ────────────────────────── */
.jeju-promo-banner {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Semi-transparent overlay so text is always readable */
.jeju-promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  pointer-events: none;
}

.jeju-promo-inner {
  position: relative;           /* above ::before overlay */
  max-width: 700px;
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

@media (max-width: 767px) {
  .jeju-promo-inner {
    padding: 56px 20px;
  }
}

.jeju-promo-title {
  font-family: var(--j-font-head) !important;
  font-size: 40px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  margin: 0 0 14px !important;
}

@media (max-width: 767px) {
  .jeju-promo-title {
    font-size: 28px !important;
  }
}

.jeju-promo-desc {
  font-family: var(--j-font-body);
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 30px;
  opacity: 0.90;
}

@media (max-width: 767px) {
  .jeju-promo-desc {
    font-size: 14px;
  }
}

/* Ghost / outline CTA button */
.jeju-promo-cta {
  display: inline-block;
  font-family: var(--j-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 32px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.jeju-promo-cta:hover {
  background-color: rgba(255,255,255,0.15);
}


/* =============================================================
   19. CHECKOUT PAGE — TARGETED FIXES ONLY
   Do NOT override Shoptimizer's column/float/flex layout —
   it handles that itself. Only fix specific known conflicts
   caused by the broad global rules above.
   ============================================================= */

/* Product thumbnails in order summary — cancel the 1:1 aspect ratio
   that the global product-image rule applies */
.woocommerce-checkout .shop_table td.product-thumbnail img,
.woocommerce-checkout .woocommerce-checkout-review-order-table td img {
  aspect-ratio: auto      !important;
  width:        50px      !important;
  height:       auto      !important;
  object-fit:   contain   !important;
  background:   transparent !important;
  padding:      0         !important;
}

/* Payment methods list — must never be a CSS grid */
.woocommerce-checkout #payment ul.payment_methods {
  display:    block !important;
  list-style: none;
  padding:    0;
  margin:     0;
}

.woocommerce-checkout #payment ul.payment_methods li {
  display:     block !important;
  width:       auto  !important;
  float:       none  !important;
  margin:      0     !important;
  grid-column: unset !important;
}


/* =============================================================
   20. CHECKOUT — EDITABLE QUANTITY CONTROLS
   Matches the mini-cart (Shoptimizer/CommerceKit) − / n / + style.
   All rules scoped to .woocommerce-checkout so nothing leaks.
   ============================================================= */

/* Wrapper — single border around the whole control, matching mini-cart */
.woocommerce-checkout .jeju-qty-wrap {
  display:       flex;
  width:         fit-content;
  align-items:   center;
  margin-top:    6px;
  border:        1px solid #e0e0e0;
  border-radius: 2px;
  overflow:      hidden;
  height:        28px;
}

/* − and + buttons — no individual borders, colour only */
.woocommerce-checkout .jeju-qty-btn {
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  width:            28px !important;
  height:           28px !important;
  background-color: #f5f5f5 !important;
  color:            #444444 !important;
  border:           none !important;
  border-radius:    0 !important;
  font-size:        16px !important;
  font-weight:      400 !important;
  line-height:      1 !important;
  letter-spacing:   0 !important;
  padding:          0 !important;
  margin:           0 !important;
  cursor:           pointer !important;
  flex-shrink:      0;
  user-select:      none;
  -webkit-user-select: none;
  transition:       background-color 0.15s ease, color 0.15s ease !important;
  box-shadow:       none !important;
}

.woocommerce-checkout .jeju-qty-btn:hover {
  background-color: #e8e8e8 !important;
  color:            #111111 !important;
}

.woocommerce-checkout .jeju-qty-btn:disabled {
  opacity: 0.4 !important;
  cursor:  not-allowed !important;
}

/* Number input — no border, sits flush between the two buttons */
.woocommerce-checkout .jeju-qty-input {
  width:        34px !important;
  height:       28px !important;
  border:       none !important;
  border-left:  1px solid #e0e0e0 !important;
  border-right: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  text-align:   center !important;
  font-size:    13px !important;
  font-family:  var(--j-font-body) !important;
  color:        #333333 !important;
  background:   #ffffff !important;
  padding:      0 !important;
  margin:       0 !important;
  box-shadow:   none !important;
  outline:      none !important;
  -moz-appearance: textfield;
}

.woocommerce-checkout .jeju-qty-input::-webkit-inner-spin-button,
.woocommerce-checkout .jeju-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce-checkout .jeju-qty-input:disabled {
  opacity: 0.45 !important;
}

/* Dim the order table while WooCommerce recalculates totals */
.woocommerce-checkout .woocommerce-checkout-review-order-table.processing {
  opacity:        0.5;
  pointer-events: none;
  transition:     opacity 0.2s ease;
}