/*
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 */
  --j-font-head:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --j-font-body:    'Inter', system-ui, -apple-system, 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.
   ============================================================= */
.product-loop-action,
.loop-add-to-cart,
.commercekit-loop-atc,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products 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 — ALIGNMENT
   Cards in a row are forced to equal height with aligned
   title, price, and button sections regardless of text length.
   ============================================================= */
.woocommerce ul.products {
  display: grid !important;
  align-items: start;
}

.woocommerce ul.products li.product {
  display: flex !important;
  flex-direction: column;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Consistent square image */
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--j-bg-soft);
  padding: 8px;
}

/* Product title — fixed 2-line clamp */
.woocommerce ul.products 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;
  height: 2.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 6px !important;
  color: #1a1a1a !important;
}

/* Price */
.woocommerce ul.products 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: 10px !important;
}

.woocommerce ul.products li.product .price del {
  color: #bbbbbb !important;
  font-weight: 400 !important;
  font-size: 12px !important;
}

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

/* Sale badge */
.woocommerce ul.products 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. PRODUCT GRID — 3 COLUMNS ON MOBILE
   Default Shoptimizer is 2 columns on mobile. We bump to 3
   and tighten typography to stay readable at small size.
   ============================================================= */
@media (max-width: 767px) {

  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 10px !important;
    height: 2.6em;
  }

  .woocommerce ul.products li.product .price {
    font-size: 11px !important;
  }

  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product button.button {
    font-size: 8px !important;
    padding: 6px 4px !important;
    letter-spacing: 0 !important;
  }
}


/* =============================================================
   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: relative;
  z-index: 99;
}

@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;
}

.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 */
.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;
  grid-template-columns: unset !important;
  align-items: start !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;
  }

  .jeju-carousel-wrap ul.products li.product,
  ul.products.jeju-carousel li.product {
    flex: 0 0 44vw !important;
    width: 44vw !important;
  }
}


/* =============================================================
   11. USP TRUST STRIP
   Output by [jeju_usp] shortcode.
   ============================================================= */
.jeju-usp-strip {
  background: #ffffff;
  border-top: 1px solid var(--j-border);
  border-bottom: 1px solid var(--j-border);
  padding: 22px 24px;
}

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

@media (max-width: 767px) {
  .jeju-usp-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 12px;
  }
}

.jeju-usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.jeju-usp-icon {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 4px;
}

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

.jeju-usp-sub {
  font-size: 11px;
  color: #888888;
  font-family: var(--j-font-body);
  line-height: 1.3;
}


/* =============================================================
   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: 11px;
  font-weight: 500;
  color: #aaaaaa;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--j-font-body);
  margin-bottom: 20px;
}

.jeju-brands-inner {
  display: flex;
  overflow-x: auto;
  align-items: center;
  justify-content: center;
  scrollbar-width: none;
  flex-wrap: wrap;
  row-gap: 10px;
}

@media (max-width: 767px) {
  .jeju-brands-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
}

.jeju-brands-inner::-webkit-scrollbar {
  display: none;
}

.jeju-brand-item {
  font-family: var(--j-font-head);
  font-size: 17px;
  font-weight: 500;
  color: #cccccc;
  letter-spacing: 1.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  padding: 6px 20px;
  border-right: 1px solid #eeeeee;
  line-height: 1;
}

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

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


/* =============================================================
   13. SOCIAL PROOF + PHYSICAL STORE
   Output by [jeju_store] shortcode.
   ============================================================= */
.jeju-trust-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 767px) {
  .jeju-trust-section {
    grid-template-columns: 1fr;
  }
}

.jeju-reviews-panel {
  background: var(--j-ann-bg);
  padding: 52px 44px;
}

.jeju-store-panel {
  background: #ffffff;
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@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;
}

/* Store panel */
.jeju-store-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  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. 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;
  gap: 6px;
}

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

.jeju-hero-desc {
  font-family: var(--j-font-body);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.85;
  margin: 0;
}

.jeju-hero-cta {
  display: inline-block;
  font-family: var(--j-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: 6px;
}

/* ---- 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; }
}