/* =========================================================================
   JOIA — brand stylesheet (child of Woodly)
   Palette: --joia-dark #22142E · --joia-light #EBE1EF · --joia-pink #E078B0 · --joia-gold #BFA58A
   Type:    Cinzel Decorative (display) · Cormorant (serif body / Yona fallback) · IBM Plex Sans Arabic (AR)
   ========================================================================= */

/* Self-hosted IBM Plex Sans Arabic (client-supplied). */
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Light.ttf") format("truetype");    font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");     font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --joia-dark: #22142E;
  --joia-dark-2: #22142E;
  --joia-light: #EBE1EF;
  --joia-light-2: rgba(235,225,239,.45);
  --joia-pink: #E078B0;
  --joia-pink-ink: #E078B0;
  --joia-gold: #BFA58A;
  --joia-gold-ink: #BFA58A;
  --joia-ink: #22142E;            /* readable body text */
  --joia-font-display: "Cinzel Decorative", "Cormorant", Georgia, serif;
  --joia-font-serif: "Cormorant", Georgia, "Times New Roman", serif;
  --joia-radius: 2px;
  --joia-shadow: 0 18px 40px -24px rgba(34, 20, 46, .45);
}

/* ----- Base typography ------------------------------------------------- */
body,
.woocommerce,
p, li, td, input, textarea, select, button {
  font-family: var(--joia-font-serif);
  color: var(--joia-ink);
  font-size: 1.05rem;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.product_title,
.woocommerce-loop-product__title,
.section-title,
.elementor-heading-title {
  font-family: var(--joia-font-display);
  color: var(--joia-dark);
  letter-spacing: .01em;
}

a { color: var(--joia-dark); }
a:hover, a:focus { color: var(--joia-pink-ink); }

/* ----- Buttons --------------------------------------------------------- */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wp-block-button__link,
.elementor-button {
  background-color: var(--joia-dark);
  border: 1px solid var(--joia-dark);
  color: #fff;
  border-radius: var(--joia-radius);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--joia-font-serif);
  font-weight: 600;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover,
.elementor-button:hover {
  background-color: var(--joia-pink);
  border-color: var(--joia-pink);
  color: #fff;
}

/* Secondary / ghost buttons */
.button.alt.disabled,
.woocommerce a.added_to_cart,
.button--ghost {
  background: transparent;
  color: var(--joia-dark);
  border: 1px solid var(--joia-gold);
}

/* ----- WooCommerce accents -------------------------------------------- */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background-color: var(--joia-pink);
  color: #fff;
  border-radius: 50%;
  font-family: var(--joia-font-serif);
  letter-spacing: .04em;
  min-height: 3em;
  min-width: 3em;
  line-height: 3em;
}

.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .amount,
.woocommerce ul.products li.product .price bdi,
.woocommerce .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
  color: var(--joia-dark) !important;
  font-weight: 600;
}
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price ins bdi { color: var(--joia-pink-ink) !important; }
.woocommerce ul.products li.product .price del .amount,
.woocommerce ul.products li.product .price del bdi { color: rgba(34,20,46,.5) !important; }

/* Woodly's custom shop-loop price wrapper isn't inside .woocommerce, so target it directly. */
.woodly__product_content .sell-pro-price,
.woodly__product_content .sell-pro-price .woocommerce-Price-amount,
.woodly__product_content .sell-pro-price bdi,
.woodly__product_content .sell-pro-price .woocommerce-Price-currencySymbol,
.woodly__product_content .price,
.woodly__product_content .price .woocommerce-Price-amount,
.woodly__product_content .price bdi { color: var(--joia-dark) !important; }
.woodly__product_content .sell-pro-price del,
.woodly__product_content .sell-pro-price del * { color: rgba(34,20,46,.5) !important; }
.woodly__product_content .sell-pro-price ins,
.woodly__product_content .sell-pro-price ins * { color: var(--joia-pink-ink) !important; text-decoration: none; }
.woocommerce div.product p.price ins,
.woocommerce ul.products li.product .price ins { color: var(--joia-pink-ink); text-decoration: none; }
.woocommerce div.product p.price del { color: rgba(34,20,46,.5); }

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before { color: var(--joia-gold); }

/* Product cards */
.woocommerce ul.products li.product {
  text-align: center;
}
.woocommerce ul.products li.product a img {
  border-radius: var(--joia-radius);
  transition: transform .4s ease, box-shadow .4s ease;
}
.woocommerce ul.products li.product:hover a img {
  transform: translateY(-4px);
  box-shadow: var(--joia-shadow);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.25rem;
  margin-top: .65em;
}

/* Category / archive header */
.woocommerce-products-header__title,
.page-title { font-family: var(--joia-font-display); color: var(--joia-dark); }

/* ----- Forms / inputs -------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px solid rgba(34,20,46,.14);
  border-radius: var(--joia-radius);
  background: #fff;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--joia-pink);
  box-shadow: 0 0 0 3px rgba(224, 120, 176, .18);
}

/* ----- Notices / messages --------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  border-top-color: var(--joia-pink);
  background: var(--joia-light-2);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--joia-pink); }

/* ----- Header / footer accents (light touch; header is Elementor-built) */
.site-footer,
.woodly-footer,
footer.elementor-location-footer {
  background-color: var(--joia-dark);
  color: var(--joia-light);
}
.site-footer a,
.woodly-footer a { color: var(--joia-light); }
.site-footer a:hover,
.woodly-footer a:hover { color: var(--joia-pink); }

/* Mini-cart / badges */
.woodly-cart-count,
.cart-contents-count,
.joia-badge {
  background: var(--joia-pink);
  color: #fff;
  border-radius: 50%;
}

/* ----- Utility brand classes (for Elementor / page content) ----------- */
.has-joia-dark-color { color: var(--joia-dark) !important; }
.has-joia-pink-color { color: var(--joia-pink) !important; }
.has-joia-gold-color { color: var(--joia-gold) !important; }
.has-joia-dark-background-color { background-color: var(--joia-dark) !important; }
.has-joia-light-background-color { background-color: var(--joia-light) !important; }
.has-joia-pink-background-color { background-color: var(--joia-pink) !important; }

.joia-eyebrow {
  font-family: var(--joia-font-serif);
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--joia-gold-ink);
  font-size: .82rem;
}
.joia-section { padding: clamp(48px, 8vw, 110px) 0; }
.joia-hero {
  background: linear-gradient(140deg, var(--joia-light) 0%, #fff 55%, var(--joia-light-2) 100%);
}

/* ----- Woodly parent overrides --------------------------------------- */
/* Remove the page/archive title banner (it only repeats the page or menu name). */
#woodly-hero-banner { display: none !important; }

/* Active / current menu item — highlight in the brand pink. */
.current-menu-item > a,
.current-menu-item > a span,
.current_page_item > a,
.current_page_item > a span,
.menu-item.active > a,
.menu-item.active > a span,
.current-menu-ancestor > a,
.current-menu-parent > a { color: var(--joia-pink-ink) !important; }

/* Truncate long product-card names to 2 lines with an ellipsis (keeps cards aligned). */
.pc__title,
.woodly__product_content h4,
.woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.6em;
}

/* Constrain Woodly's scroll-progress button (it rendered as a huge black circle on
   short pages because the SVG is width/height 100% and its path defaulted to fill). */
.progress-wrap { display: none !important; }

/* Remove the footer copyright bar. */
.woodly-copyright { display: none !important; }

/* Shop / category archive — show 4 smaller product cards per row (Woodly ships 3).
   Woodly's grid is a Bootstrap row: .pivoo-shop-product-grid.row-cols-md-3 with .col children. */
@media (min-width: 768px) {
  .pivoo-shop-product-grid.row-cols-md-3 > .col {
    flex: 0 0 auto;
    width: 25%;
  }
}
/* Small tablets: 2 per row instead of 1 (keeps cards from looking oversized). */
@media (min-width: 576px) and (max-width: 767.98px) {
  .pivoo-shop-product-grid.row-cols-1 > .col {
    flex: 0 0 auto;
    width: 50%;
  }
}
/* Slightly tighter card typography to suit the smaller 4-up cards. */
.woodly-archive-product-main .woodly__product_content h4,
.woodly-archive-product-main .pc__title {
  font-size: 1.05rem;
}

/* Single product page — make the item name smaller and keep it inside its column
   (the wide display font could otherwise run over the product image on the right). */
.single-product div.product .product_title,
.single-product .product_title,
.woocommerce div.product .product_title,
.single-product .entry-title.product_title {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem) !important;
  line-height: 1.25;
  letter-spacing: 0;
  margin-bottom: .5em;
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* Give the summary column a gap from the gallery so the title never touches the image. */
@media (min-width: 768px) {
  .single-product .woodly-side-meta { padding-inline-end: 2rem; }
}

/* Root cause of "name over the picture": Woodly shifts the desktop title 20% to the
   right (right:-20%) so it deliberately overlaps the gallery image. Cancel that shift
   and left-align the summary so the name stays cleanly inside its own column. */
.woodly-product-container-bx-style-one .product_title,
.single-product .product_title.entry-title {
  right: 0 !important;
  max-width: 100% !important;
  text-align: left !important;
}
.woodly-product-container-bx-style-one .woodly-side-meta,
.woodly-product-container-bx-style-one .woodly-side-meta .woocommerce-breadcrumb {
  text-align: left !important;
}

/* Header logo sizing */
.site-header img[src*="joia-logo"],
.woodly-site-header img[src*="joia-logo"],
header img[src*="joia-logo"] { max-height: 42px; width: auto; }

/* ----- Header cart + wishlist actions --------------------------------- */
.joia-header-action { position: relative; list-style: none; }
.woodly-main-nav .joia-header-action { margin-inline-start: 8px; }
.joia-header-action > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0 !important;
  color: var(--joia-dark);
  border-radius: 50%;
  transition: color .2s ease, background-color .2s ease;
}
.joia-header-action > a:hover,
.joia-header-action > a:focus { color: var(--joia-pink-ink); background: var(--joia-light-2); }
.joia-header-action .joia-ico { display: block; }
.joia-header-action .joia-count {
  position: absolute;
  top: 3px; inset-inline-end: 1px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--joia-pink); color: #fff;
  font-family: var(--joia-font-serif); font-weight: 600; font-size: 11px;
  line-height: 18px; text-align: center; border-radius: 999px;
  box-shadow: 0 0 0 2px #fffdfa;
}
/* Hide a zero badge so the icons stay clean when empty. */
.joia-header-action .joia-count:empty { display: none; }
/* Desktop shows icon only; the text label is for the mobile menu. */
.joia-action-label { display: none; }

/* In the mobile slide-in panel, render the actions as normal menu rows
   (icon + label + inline count) so they sit in line with the other items. */
.mobile--nav-menu .joia-header-action { margin: 0; width: 100%; }
.mobile--nav-menu .joia-header-action > a {
  width: 100%; height: auto;
  border-radius: 0 !important;
  justify-content: flex-start;
  gap: .65em;
  padding: 12px 26px !important;
  background: transparent !important;
  color: var(--joia-dark);
}
.mobile--nav-menu .joia-header-action > a:hover { background: var(--joia-light-2) !important; color: var(--joia-pink-ink); }
.mobile--nav-menu .joia-header-action .joia-action-label {
  display: inline;
  font-family: var(--joia-font-serif);
  font-size: 1.05rem;
}
.mobile--nav-menu .joia-header-action .joia-ico { width: 20px; height: 20px; }
.mobile--nav-menu .joia-header-action .joia-count {
  position: static;
  margin-inline-start: .35em;
  box-shadow: none;
}

/* ----- Product card hover actions (redesign) -------------------------- */
/* Quick-view (eye) + wishlist (heart) as matching round white chips — removes
   the dark "button" box the brand .button rule was giving the favourite icon. */
.woodly__product-style-one .woodly__product_img-quick-view-and-wishlist .xpc-quick-view,
.woodly__product-style-one .woodly__product_img-quick-view-and-wishlist .woodly_product_wishlist_button {
  width: 44px; height: 44px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff !important;
  color: var(--joia-dark) !important;
  border: 1px solid rgba(235,225,239,.6) !important;
  border-radius: 50% !important;
  box-shadow: var(--joia-shadow);
  text-transform: none; letter-spacing: 0;
  min-width: 0; min-height: 0;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.woodly__product-style-one .woodly__product_img-quick-view-and-wishlist .xpc-quick-view:hover,
.woodly__product-style-one .woodly__product_img-quick-view-and-wishlist .woodly_product_wishlist_button:hover {
  background: var(--joia-pink) !important;
  color: #fff !important;
  transform: translateY(-2px);
}
.woodly__product_img-quick-view-and-wishlist .xpc-quick-view i,
.woodly__product_img-quick-view-and-wishlist .woodly_product_wishlist_button::after { font-size: 18px; line-height: 1; }
/* Heart turns pink once the product is on the wishlist. */
.woodly__product-style-one .woodly_product_wishlist_button.added { color: var(--joia-pink-ink) !important; }

/* Card "Add to cart" as a brand pill (Woodly reveals it centred on image hover). */
.woodly__product-style-one .woodly__product_img-add-to-cart a.button,
.woodly__product-style-one .woodly__product_img-add-to-cart a.add_to_cart_button {
  background: var(--joia-dark) !important;
  color: #fff !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 999px !important;
  padding: .72em 1.5em !important;
  width: auto; min-width: 0;
  font-family: var(--joia-font-serif);
  font-size: .8rem !important;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: var(--joia-shadow);
  transition: background-color .2s ease, transform .2s ease;
}
.woodly__product-style-one:hover .woodly__product_img-add-to-cart a.button {
  display: inline-flex !important;
  align-items: center;
  gap: .5em;
}
.woodly__product-style-one .woodly__product_img-add-to-cart a.button:hover {
  background: var(--joia-pink) !important;
  transform: translateY(-2px);
}
.woodly__product-style-one .woodly__product_img-add-to-cart a.button i.ticon-shopping-bag { display: inline-block !important; font-size: 15px; }
/* Lighten Woodly's white hover veil to a soft brand tint. */
.woodly__product-style-one:hover .woodly__product_img-add-to-cart { background-color: rgba(34, 20, 46, .06); }

/* ----- Wishlist page: cleaner remove (×) button ---------------------- */
.wishlist_table td.product-remove a.remove_from_wishlist,
.wishlist_table td.product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent !important;
  border: 1px solid rgba(235,225,239,.6) !important;
  color: var(--joia-dark) !important;
  font-size: 18px; line-height: 1; text-decoration: none;
}
.wishlist_table td.product-remove a.remove_from_wishlist:hover,
.wishlist_table td.product-remove a.remove:hover {
  background: var(--joia-pink) !important; color: #fff !important; border-color: var(--joia-pink) !important;
}

/* ----- Wishlist page: compact mobile layout --------------------------
   Woodly just squishes the desktop table on phones. Force a tidy 3-row
   card per item: [thumb | name], [price | stock], [add-to-cart | remove]. */
@media (max-width: 767px) {
  .wishlist_table thead { display: none !important; }

  .wishlist_table tbody tr {
    display: grid !important;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "thumb name  name"
      "thumb price stock"
      "cart  cart  remove";
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
    padding: 16px 12px !important;
    border-bottom: 1px solid rgba(34,20,46,.08) !important;
  }
  .wishlist_table tbody td {
    display: block !important;
    width: auto !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: start !important;
  }
  .wishlist_table td.product-checkbox,
  .wishlist_table td.product-quantity,
  .wishlist_table td.product-arrange { display: none !important; }

  .wishlist_table td.product-thumbnail { grid-area: thumb; }
  .wishlist_table td.product-thumbnail img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--joia-radius); }

  .wishlist_table td.product-name { grid-area: name; align-self: center; }
  .wishlist_table td.product-name a { font-size: .95rem !important; line-height: 1.3; font-weight: 600; }

  .wishlist_table td.product-price { grid-area: price; font-size: .82rem; }
  .wishlist_table td.product-stock-status { grid-area: stock; font-size: .82rem; justify-self: end; }
  .wishlist_table td.product-price::before { content: "Price: "; color: var(--joia-gold-ink); }
  .wishlist_table td.product-stock-status::before { content: "Stock: "; color: var(--joia-gold-ink); }

  .wishlist_table td.product-add-to-cart { grid-area: cart; justify-self: start; }
  .wishlist_table td.product-add-to-cart a {
    display: inline-flex !important; align-items: center; gap: .4em;
    padding: .55em 1.1em !important;
    font-size: .72rem !important;
    background: var(--joia-dark) !important;
    color: #fff !important;
    border-radius: 999px !important;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
  .wishlist_table td.product-remove { grid-area: remove; justify-self: end; }
}

/* ----- Header dropdown (e.g. Daftra categories under "Catalog") -------- */
.woodly-main-nav .menu-item-has-children { position: relative; }
.woodly-main-nav .menu-item-has-children > a::after {
  content: ""; display: inline-block; width: .4em; height: .4em;
  margin-inline-start: .45em; vertical-align: middle;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.woodly-main-nav .menu-item-has-children > .woodly-sub-menu {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 9999;
  min-width: 210px; margin: 0; padding: 10px 0; list-style: none;
  background: #fff; border: 1px solid rgba(34,20,46,.08); border-radius: 6px;
  box-shadow: 0 18px 40px -24px rgba(34, 20, 46, .45);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.woodly-main-nav .menu-item-has-children:hover > .woodly-sub-menu,
.woodly-main-nav .menu-item-has-children:focus-within > .woodly-sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.woodly-main-nav .woodly-sub-menu li { margin: 0; width: 100%; }
.woodly-main-nav .woodly-sub-menu a {
  display: block; padding: 8px 20px; white-space: nowrap;
  color: var(--joia-dark); font-size: .98rem; font-family: var(--joia-font-serif);
}
.woodly-main-nav .woodly-sub-menu a:hover { background: var(--joia-light-2); color: var(--joia-pink-ink); }

/* ----- Header container + smaller nav (client requests) --------------- */
.woodly--header--container.container { align-content: space-evenly; }

/* Sticky, slim (~50px), lavender header. */
.woodly-header, .woodly-site-header {
  position: sticky !important; top: 0; z-index: 1000;
  background: #EBE1EF !important;
  box-shadow: 0 2px 12px -7px rgba(34, 20, 46, .45);
}
.woodly-header .woodly-main-header {
  min-height: 70px !important; height: 100px !important; background: #EBE1EF !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  display: flex !important; align-items: center !important;
}
.woodly-header .woodly--header--container.container {
  min-height: 70px !important; background: #EBE1EF !important;
  padding-top: 0 !important; padding-bottom: 0 !important;
  align-items: center !important;
}
.woodly-header .site-logo img,
.woodly-header .custom-logo,
.woodly-header .woodly-logo img,
.woodly-header .header-logo img,
.woodly-header .brand-logo img,
.woodly-header a.logo img { max-height: 32px !important; width: auto !important; }
.woodly-header .woodly-main-nav > li > a { padding-top: 0 !important; padding-bottom: 0 !important; }
.admin-bar .woodly-header, .admin-bar .woodly-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .woodly-header, .admin-bar .woodly-site-header { top: 46px; } }

/* Site-wide Arabic font: IBM Plex Sans Arabic everywhere. */
body, button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th, label, div,
.woodly-main-nav > li > a, .joia-dprod, .joia-policy-card, .woodly-default-page-content {
  font-family: "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif !important;
}
/* Arabic store: force the whole header to read right-to-left (logo on the right,
   nav + cart/wishlist flowing from the right). */
.woodly--header--container,
.woodly--header--container.container,
header .woodly-header-inner,
.woodly-main-nav,
.woodly-main-nav ul { direction: rtl !important; }
.woodly-main-nav > li > a {
  font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  letter-spacing: 0;
}
.woodly-main-nav > li { margin-inline: .55rem; }
.woodly-main-nav .woodly-sub-menu a {
  font-family: "IBM Plex Sans Arabic", "Cairo", sans-serif !important;
  font-size: .95rem !important;
}

/* Cart page: make the quantity input clearly visible. */
.woocommerce .cart .quantity input.qty,
.woocommerce-cart table.cart td.product-quantity input.qty,
.woocommerce .quantity input.qty {
  width: 66px;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid rgba(34,20,46,.14) !important;
  border-radius: var(--joia-radius);
  background: #fff !important;
  color: var(--joia-ink) !important;
  text-align: center;
  opacity: 1 !important;
  -webkit-appearance: auto;
  appearance: auto;
}

/* Responsive: prevent stray horizontal scroll (e.g. the scaled hero background). */
/* overflow-x: clip (not hidden) prevents horizontal scroll WITHOUT creating a scroll
   container — so the sticky header keeps working. */
html, body { overflow-x: clip; max-width: 100%; }
.joia-hero-slider, .joia-hero-slide, .joia-hero-swiper { max-width: 100%; overflow: hidden; }

/* ----- WooCommerce block checkout / cart inputs (brand styling) -------- */
/* Egypt-only store: hide the country selector (country is fixed to Egypt, so the
   field is redundant — its value is still submitted from the hidden input). */
.wc-block-components-country-input,
.wc-block-components-address-form .wc-block-components-country-input { display: none !important; }

/* Text inputs + the select CONTAINER share the same box so rows line up. */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-address-form input,
.wc-blocks-components-select .wc-blocks-components-select__container {
  border: 1px solid rgba(34,20,46,.14) !important;
  border-radius: var(--joia-radius) !important;
  background: #fff !important;
  color: var(--joia-ink) !important;
  box-shadow: none !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
}
/* Inner <select> is borderless (the container carries the border) and full height. */
.wc-blocks-components-select .wc-blocks-components-select__select {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 50px !important;
  height: 100% !important;
  color: var(--joia-ink) !important;
}
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus,
.wc-blocks-components-select .wc-blocks-components-select__container:focus-within {
  border-color: var(--joia-pink) !important;
  box-shadow: 0 0 0 3px rgba(224, 120, 176, .18) !important;
  outline: none !important;
}
.wc-block-components-text-input label { color: rgba(34,20,46,.62); }
.wc-block-components-text-input.is-active label { color: var(--joia-pink-ink); }
.wc-block-components-text-input.has-error input,
.wc-block-components-address-form .has-error input { border-color: #E078B0 !important; }
.wc-block-components-validation-error { color: #E078B0; }
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained {
  background: var(--joia-dark) !important;
  border-radius: 999px !important;
  border: none !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.contained:hover { background: var(--joia-pink) !important; }
/* Radio rows (shipping / payment) */
.wc-block-components-radio-control__option { border: 1px solid rgba(34,20,46,.08); border-radius: var(--joia-radius); }
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control__option:has(input:checked) { border-color: var(--joia-pink); }

/* Cart block: make the quantity NUMBER visible and tidy the stepper. */
.wc-block-components-quantity-selector {
  border: 1px solid rgba(34,20,46,.14) !important;
  border-radius: var(--joia-radius) !important;
  background: #fff !important;
  max-width: 120px;
}
.wc-block-cart-item__product .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector input[type="number"] {
  color: var(--joia-ink) !important;
  -webkit-text-fill-color: var(--joia-ink) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 1rem !important;
  min-width: 44px;
  padding: 0 !important;
  text-align: center;
  background: transparent !important;
  border: none !important;
}
.wc-block-components-quantity-selector__button {
  color: var(--joia-dark) !important;
  opacity: 1 !important;
  background: transparent !important;
}

/* ---- Coupon field (block cart / checkout) ---- */
/* Coupon field is shown on BOTH cart and checkout (client request) so discounts can be
   applied from either page. */
/* "Add a coupon" toggle row */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
  color: var(--joia-dark) !important;
  font-weight: 600 !important;
  font-size: .98rem !important;
}
/* Coupon code input */
.wc-block-components-totals-coupon__input input,
.wc-block-components-totals-coupon .wc-block-components-text-input input {
  border: 1px solid rgba(34,20,46,.14) !important;
  border-radius: var(--joia-radius) !important;
  min-height: 48px !important;
}
/* Apply button */
.wc-block-components-totals-coupon__button {
  background: var(--joia-dark) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  min-height: 46px !important;
  padding-inline: 1.5em !important;
  font-weight: 600 !important;
}
.wc-block-components-totals-coupon__button:hover { background: var(--joia-pink) !important; color: #fff !important; }
/* Applied coupon chip (welcome10 ×) — unified brand pill */
.wc-block-components-chip.wc-block-components-chip--radius-large,
.wc-block-components-totals-discount .wc-block-components-chip {
  background: var(--joia-light) !important;
  border: 1px solid var(--joia-gold) !important;
  border-radius: 999px !important;
  color: var(--joia-dark) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .45em !important;
  padding-block: .38em !important;
  padding-inline-start: .95em !important;
  padding-inline-end: .38em !important;
}
.wc-block-components-chip__text {
  color: var(--joia-dark) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .82rem;
}
.wc-block-components-chip__remove {
  background: rgba(34,20,46,.10) !important;
  border-radius: 999px !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--joia-dark) !important;
  padding: 0 !important;
  transition: background .2s, color .2s;
}
.wc-block-components-chip__remove:hover { background: var(--joia-pink) !important; color: #fff !important; }
.wc-block-components-chip__remove-icon,
.wc-block-components-chip__remove svg { fill: currentColor !important; }

/* Arabic-only: hide the TranslatePress language switcher. */
#trp-floater-ls, #trp-floater-ls-form, .trp-language-switcher,
.trp_language_switcher_shortcode, .trp_language_switcher { display: none !important; }

/* Home promo / discount banner ([joia_promo]) */
.joia-promo { width: min(1240px, 94%); margin-inline: auto; }
.joia-promo__inner {
	background: linear-gradient(120deg, #22142E 0%, #3A2350 100%);
	color: #EBE1EF;
	border-radius: 6px;
	padding: 54px 32px;
	text-align: center;
	border: 1px solid rgba(191,165,138,.35);
}
.joia-promo__headline { color: #fff; margin: 0 0 .35em; font-size: clamp(1.5rem, 3.4vw, 2.3rem); }
.joia-promo__sub { color: #EBE1EF; margin: 0 auto; max-width: 560px; font-size: 1.1rem; opacity: .9; }
.joia-promo__row { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.joia-promo__code {
	display: inline-flex; align-items: center; gap: 10px;
	background: transparent; cursor: pointer;
	border: 2px dashed var(--joia-gold); border-radius: 4px;
	color: #fff; padding: 12px 20px; font-size: 1.05rem;
	letter-spacing: .08em; font-weight: 600;
	transition: background .2s, color .2s;
}
.joia-promo__code:hover { background: var(--joia-gold); color: #22142E; }
.joia-promo__code-val { font-family: monospace; font-size: 1.15rem; }
.joia-promo__code-hint { font-size: .78rem; opacity: .75; letter-spacing: 0; font-weight: 400; }
.joia-promo__code-done { display: none; font-size: .82rem; color: #BFA58A; letter-spacing: 0; font-weight: 600; }
.joia-promo__code.is-copied .joia-promo__code-hint { display: none; }
.joia-promo__code.is-copied .joia-promo__code-done { display: inline; }
.joia-promo__cta { margin: 0; }
@media (max-width: 600px) {
	.joia-promo__inner { padding: 40px 20px; }
	.joia-promo__row { flex-direction: column; }
	.joia-promo__code, .joia-promo__cta { width: 100%; justify-content: center; }
}

/* ----- Arabic page content: force RTL (Woodly's default page content is LTR) ----- */
.woodly-default-page-content,
.post-content.woodly-default-page-content,
.page .entry-content,
.woodly-default-page-content p,
.woodly-default-page-content ul,
.woodly-default-page-content ol,
.woodly-default-page-content h1,
.woodly-default-page-content h2,
.woodly-default-page-content h3 { direction: rtl; text-align: center; }
.woodly-default-page-content ul,
.woodly-default-page-content ol { padding-right: 1.6em; padding-left: 0; list-style-position: outside; }

/* ----- Fancy policy pages (Privacy / Refund / Shipping / Terms) -------- */
.joia-policy .woodly-page-title,
.joia-policy .entry-header,
.joia-policy .page-title,
.joia-policy .woodly-page-header,
.joia-policy h1.entry-title { display: none !important; }
.joia-policy .woodly-default-page-content { max-width: none; padding: 0; }
.joia-policy-hero {
  background: linear-gradient(120deg, #22142E 0%, #3A2350 100%);
  color: #fff; text-align: center; padding: 62px 24px 96px; border-radius: 12px 12px 0 0;
}
.joia-policy-hero__eyebrow { display: inline-block; color: var(--joia-gold); letter-spacing: .18em; font-size: .78rem; text-transform: uppercase; margin-bottom: 12px; }
.joia-policy-hero__title { color: #fff; font-family: "Cinzel Decorative", serif; font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; }
.joia-policy-card {
  background: #fff; max-width: 880px; margin: -60px auto 64px; padding: 48px 52px;
  border-radius: 12px; box-shadow: 0 26px 64px -32px rgba(34,20,46,.45); position: relative; z-index: 1;
  direction: rtl; text-align: right; line-height: 1.95; color: rgba(34,20,46,.82); font-size: 1.02rem;
}
.joia-policy-card h2 {
  color: var(--joia-dark); font-size: 1.3rem; margin: 1.9em 0 .5em; padding: 0 0 .45em;
  border-bottom: 2px solid rgba(34,20,46,.08);
}
.joia-policy-card h2:first-child { margin-top: 0; }
.joia-policy-card ul, .joia-policy-card ol { padding-right: 1.5em; padding-left: 0; }
.joia-policy-card li { margin-bottom: .5em; }
.joia-policy-card p { margin: .7em 0; }
@media (max-width: 600px) { .joia-policy-card { padding: 30px 22px; margin: -48px 14px 44px; } }

/* ----- Desktop category nav row (under the header) --------------------- */
.joia-catnav { background: #fff; border-top: 1px solid rgba(34,20,46,.08); border-bottom: 1px solid rgba(34,20,46,.08); }
.joia-catnav__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.joia-catnav__inner::-webkit-scrollbar { display: none; }
.joia-catnav__link {
  color: var(--joia-dark); text-decoration: none; font-size: .86rem; font-weight: 500;
  padding: 11px 0; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.joia-catnav__link:hover, .joia-catnav__link.is-active { color: var(--joia-pink); border-bottom-color: var(--joia-pink); }
.joia-catnav__link--offers { color: var(--joia-pink); font-weight: 700; }
/* Desktop only — mobile uses the burger menu, per the reference design. */
@media (max-width: 900px) { .joia-catnav { display: none; } }

/* ----- Header product search ------------------------------------------ */
.joia-search-form { position: relative; display: block; width: 100%; box-sizing: border-box; }
.joia-search-form input[type="search"] {
  width: 100%; box-sizing: border-box; height: 40px; border-radius: 999px;
  border: 1px solid rgba(34,20,46,.16) !important; background: #fff;
  padding-inline: 18px 44px; margin: 0;
  font-size: .85rem; color: var(--joia-dark); line-height: 1.2;
}
.joia-search-form input[type="search"]::placeholder { color: rgba(34,20,46,.42); }
.joia-search-form input[type="search"]:focus { border-color: var(--joia-pink) !important; }
/* Plain magnifier inside the field (no filled circle) — matches the reference design. */
.joia-search-form button {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  width: 30px !important; height: 30px !important; min-height: 0 !important;
  border: none !important; border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; color: rgba(34,20,46,.62) !important; cursor: pointer;
  display: inline-flex !important; align-items: center; justify-content: center;
  letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important;
}
.joia-search-form button:hover { background: var(--joia-light) !important; color: var(--joia-pink) !important; }
.joia-search-form button svg { display: block; }

/* Desktop: search sits inside the header row. */
.joia-header-search { list-style: none; }
@media (max-width: 900px) { .joia-header-search { display: none; } }

/* Header row shows only logo + search + wishlist/cart on desktop — the page links live
   in the category nav row underneath. The mobile burger panel keeps them all. */
@media (min-width: 901px) {
  .woodly-main-nav > li:not(.joia-header-search):not(.joia-header-action) { display: none !important; }
  /* Woodly's menu column is a flex box with justify-content:end and an inline-block
     .primary-menu, so the nav collapses to its content. Let it fill the column instead,
     then the auto margins below can actually centre the search box. */
  .woodly-header .woodly--header--container .row > [class*="col-md-10"] { justify-content: flex-start !important; }
  /* The column's flex item is .woodly---desktop---nav; it and every wrapper down to the
     <ul> must fill the width, otherwise the nav collapses to its content. */
  .woodly-header .woodly---desktop---nav { flex: 1 1 auto !important; width: 100%; }
  .woodly-header .main-navigation,
  .woodly-header .primary-menu { display: block !important; width: 100%; }
  .woodly-main-nav { display: flex !important; align-items: center; width: 100%; }
  /* Equal auto space either side = search centred, cart/wishlist pinned to the far end. */
  .joia-header-search {
    flex: 0 0 auto; width: 420px; max-width: 42vw;
    margin-inline: auto !important;
  }
}

/* Mobile: full-width search bar under the logo (per the mobile reference). */
.joia-msearch { display: none; background: var(--joia-light); padding: 0 14px 10px; }
@media (max-width: 900px) { .joia-msearch { display: block; } }

/* ----- Mobile header: burger (left) · logo (centre) · cart+wishlist (right) ----- */
@media (max-width: 900px) {
  .woodly--header--container .row { position: relative; align-items: center; min-height: 50px; }
  /* Logo centred over the row; only the link itself stays clickable. */
  .woodly--header--container .row > [class*="col-8"] {
    position: absolute; inset-inline: 0; margin: 0; padding: 0 !important;
    /* Bootstrap caps .col-8 at 66.6% — override so the box spans the full row and the
       logo lands in the true centre. */
    width: 100% !important; max-width: 100% !important; flex: none !important;
    display: flex !important; align-items: center; justify-content: center !important;
    pointer-events: none;              /* clicks pass through to burger/icons behind */
  }
  .woodly--header--container .row > [class*="col-8"] a,
  .woodly--header--container .row > [class*="col-8"] img { pointer-events: auto; display: inline-block; }
  /* Menu column spans the row. Source order is [icons, burger]; `row-reverse` puts the
     BURGER at the start (= right in RTL) and the ICONS at the end (= left). */
  .woodly--header--container .row > [class*="col-4"] {
    flex: 1 1 100%; max-width: 100%; width: 100%;
    display: flex; align-items: center;
    flex-direction: row-reverse;
    /* Bootstrap's .justify-content-end is !important, so this must be too. */
    justify-content: space-between !important;
  }
  /* Reveal the action icons that live in the (desktop) nav, hide everything else. */
  .woodly-header .woodly---desktop---nav { display: block !important; }
  .woodly-header .woodly-main-nav { width: auto !important; display: flex !important; gap: 12px; }
  .woodly-header .woodly-main-nav > li:not(.joia-header-action) { display: none !important; }
  .woodly-header .joia-header-action { display: list-item !important; margin: 0 !important; }
  /* .woodly-header .joia-header-action .joia-action-label { display: none !important; } */

  /* Smaller logo + slightly larger icons (menu / cart / favourite). */
  .woodly-header .woodly---site---branding img,
  .woodly-header .site-logo img,
  .woodly-header .custom-logo { max-height: 26px !important; width: auto !important; }
  .woodly-header .joia-header-action > a { padding: 4px !important; }
  .woodly-header .joia-header-action .joia-ico,
  .woodly-header .joia-header-action svg { width: 25px !important; height: 25px !important; }
  .woodly-header .burger { transform: scale(1.2); transform-origin: center; }
}

/* ----- Mobile app-style sticky bottom navigation ----------------------- */
.joia-tabbar { display: none; }
@media (max-width: 900px) {
  .joia-tabbar {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 1200;
    background: #fff; border-top: 1px solid rgba(34,20,46,.1);
    box-shadow: 0 -6px 18px -12px rgba(34,20,46,.5);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .joia-tabbar__item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px; text-decoration: none;
    color: rgba(34,20,46,.6); font-size: .68rem; font-weight: 600; line-height: 1;
  }
  .joia-tabbar__item:hover, .joia-tabbar__item.is-active { color: var(--joia-pink); }
  .joia-tabbar__ico { position: relative; display: inline-flex; }
  .joia-tabbar__ico svg { width: 21px; height: 21px; display: block; }
  .joia-tabbar__count {
    position: absolute; top: -6px; inset-inline-end: -8px; min-width: 16px; height: 16px;
    border-radius: 999px; background: var(--joia-pink); color: #fff;
    font-size: .6rem; line-height: 16px; text-align: center; padding: 0 4px;
  }
  /* Keep page content clear of the bar. */
  body { padding-bottom: 62px; }
  .joia-foot__bar { margin-bottom: 0; }
}

/* ===== Hero slider: background from CSS vars + text in the right half ==== */
.joia-hero-slide .joia-hero-bg {
  background-image: var(--joia-hero-bg) !important;
  background-size: cover; background-position: center;
  position: absolute; inset: 0;
}
.joia-hero-slide { position: relative; }
.joia-hero-inner {
  position: relative; z-index: 1;
  width: min(1240px, 94%); margin-inline: auto;
  min-height: clamp(340px, 42vw, 520px);
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center;                 /* vertically centred */
  text-align: right; direction: rtl;
  padding-inline-end: 0;
}
/* Text occupies the RIGHT half of the slide. */
.joia-hero-inner > * { max-width: 46%; }
.joia-hero-inner { margin-inline-start: auto; }
.joia-hero-btn { border-radius: 999px !important; padding: .7em 2em !important; }
@media (max-width: 860px) {
  .joia-hero-slide .joia-hero-bg { background-image: var(--joia-hero-bg-m, var(--joia-hero-bg)) !important; }
  .joia-hero-inner { min-height: 320px; }
  .joia-hero-inner > * { max-width: 78%; }
}

/* ===== Home sections (admin-managed) ================================== */
.joia-sec__title {
  text-align: center; color: var(--joia-dark); font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  margin: 0 0 26px; font-weight: 700;
}

/* --- Top info strip --- */
.joia-topbar { background: var(--joia-dark); color: #fff; font-size: .82rem; }
.joia-topbar__inner {
  max-width: 1240px; margin: 0 auto; padding: 8px 20px;
  display: flex; gap: 30px; justify-content: space-around; align-items: center; flex-wrap: wrap;
}
.joia-topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.joia-topbar__item svg { flex: none; opacity: .9; }
@media (max-width: 700px) {
  .joia-topbar__inner { gap: 16px; padding: 7px 12px; font-size: .74rem; }
  .joia-topbar__item:nth-child(n+3) { display: none; }
}

/* --- Features strip --- */
.joia-features { width: min(1240px, 94%); margin: 44px auto; }
.joia-features__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
  background: rgba(235,225,239,.45); border-radius: 12px; padding: 22px 18px;
}
.joia-features__item { display: flex; align-items: center; gap: 11px; justify-content: center; text-align: start; }
.joia-features__ico { color: var(--joia-dark); flex: none; }
.joia-features__tx { display: flex; flex-direction: column; line-height: 1.4; }
.joia-features__tx b { color: var(--joia-dark); font-size: .9rem; }
.joia-features__tx span { color: rgba(34,20,46,.6); font-size: .78rem; }
@media (max-width: 600px) { .joia-features__grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Category cards --- */
.joia-cats { width: min(1240px, 94%); margin: 54px auto; }
.joia-cats__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.joia-cat {
  position: relative; display: block; overflow: hidden;
  background: linear-gradient(180deg, rgba(235,225,239,.85), #fff);
  border: 1px solid rgba(34,20,46,.08); border-radius: 12px;
  text-decoration: none; color: var(--joia-dark); min-height: 250px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.joia-cat:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(34,20,46,.5); }

/* Full-card background image + readability scrim. */
.joia-cat__bg { position: absolute; inset: 0; z-index: 0; }
.joia-cat__bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.joia-cat:hover .joia-cat__bg img { transform: scale(1.06); }
/* Overlay layer — colour + strength come from wp-admin (inline style on the element). */
.joia-cat__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Soft bottom fade behind the text, kept subtle so the admin overlay stays in control. */
.joia-cat.has-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(34,20,46,.55) 0%, rgba(34,20,46,.12) 55%, rgba(34,20,46,0) 100%);
}

.joia-cat__body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; height: 100%; min-height: 250px;
  padding: 16px 14px 14px;
}
.joia-cat__ico {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--joia-pink);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 9px;
  flex: none; align-self: flex-start;
}
.joia-cat__name { font-weight: 700; font-size: .98rem; color: var(--joia-dark); }
.joia-cat__desc { font-size: .76rem; color: rgba(34,20,46,.6); line-height: 1.55; margin-top: 4px; }
.joia-cat__more { color: var(--joia-pink); font-size: .78rem; font-weight: 600; margin-top: auto; padding-top: 10px; }
/* On an image card the text sits over the scrim, so flip it to light. */
.joia-cat.has-bg .joia-cat__name,
.joia-cat.has-bg .joia-cat__more { color: #fff; }
.joia-cat.has-bg .joia-cat__desc { color: rgba(255,255,255,.85); }
.joia-cat.has-bg .joia-cat__name { text-shadow: 0 1px 10px rgba(34,20,46,.5); }
@media (max-width: 1000px) { .joia-cats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .joia-cats__grid { grid-template-columns: repeat(2, 1fr); gap: 11px; } .joia-cat { min-height: 210px; } }

/* --- Promo offer ads --- */
.joia-ads { width: min(1240px, 94%); margin: 54px auto; }
.joia-ads__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.joia-ad {
  position: relative; border-radius: 14px; overflow: hidden; min-height: 210px;
  display: flex; align-items: center; padding: 30px 32px;
  background-color: var(--joia-light);
  background-image: var(--joia-ad-img); background-size: cover; background-position: center;
}
.joia-ad--right { justify-content: flex-start; text-align: start; }
.joia-ad--left  { justify-content: flex-end;   text-align: end; }
/* Overlay layer — colour + strength come from wp-admin. */
.joia-ad__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.joia-ad__body { max-width: 58%; position: relative; z-index: 1; }

/* --- Layout mode: one offer full-width, or two offers side by side (50/50) --- */
.joia-ad--full { grid-column: 1 / -1; }
.joia-ad--full .joia-ad__body { max-width: 70%; }
/* Full-width mode: independent text + button alignment chosen in wp-admin. */
.joia-ad--full.joia-ad--ta-start  { justify-content: flex-start; text-align: start; }
.joia-ad--full.joia-ad--ta-center { justify-content: center;     text-align: center; }
.joia-ad--full.joia-ad--ta-end    { justify-content: flex-end;   text-align: end; }
.joia-ad--full.joia-ad--ba-start  .joia-ad__btn { align-self: flex-start; margin-inline: 0 auto; }
.joia-ad--full.joia-ad--ba-center .joia-ad__btn { align-self: center;     margin-inline: auto; }
.joia-ad--full.joia-ad--ba-end    .joia-ad__btn { align-self: flex-end;   margin-inline: auto 0; }
.joia-ad--full .joia-ad__body { display: flex; flex-direction: column; }
.joia-ad__title { font-size: clamp(1.2rem, 2.4vw, 1.9rem); margin: 0 0 .35em; font-weight: 700; }
.joia-ad__desc { margin: 0 0 1em; font-size: .92rem; line-height: 1.7; opacity: .92; }
.joia-ad__btn {
  display: inline-block; border-radius: 999px; padding: .62em 1.5em;
  font-weight: 600; font-size: .86rem; text-decoration: none; transition: opacity .2s;
}
.joia-ad__btn:hover { opacity: .88; }
@media (max-width: 860px) {
  .joia-ads__grid { grid-template-columns: 1fr; }
  .joia-ad { background-image: var(--joia-ad-img-m, var(--joia-ad-img)); min-height: 180px; padding: 24px 22px; }
  .joia-ad__body { max-width: 70%; }
  .joia-ad--nomobile { display: none; }
}

/* ----- Branded footer ------------------------------------------------- */
.joia-foot { background: #22142E; color: rgba(34,20,46,.14); margin-top: 60px; font-size: .92rem; }
.joia-foot a { color: #EBE1EF; text-decoration: none; transition: color .2s; }
.joia-foot a:hover { color: #fff; }
.joia-foot__inner {
  max-width: 1240px; margin: 0 auto; padding: 56px 24px 34px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px;
}
.joia-foot__logo { font-family: "Cinzel Decorative", serif; font-size: 1.8rem; color: #fff; letter-spacing: .06em; margin-bottom: 14px; }
.joia-foot__brand p { line-height: 1.8; color: rgba(235,225,239,.72); max-width: 34ch; }
.joia-foot__social { display: flex; gap: 12px; margin-top: 18px; }
.joia-foot__social a {
  width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #fff;
}
.joia-foot__social a:hover { background: var(--joia-pink); }
.joia-foot__apps { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.joia-foot__apps a {
  display: inline-flex; flex-direction: column; line-height: 1.2;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 7px 14px; text-decoration: none; color: #fff;
}
.joia-foot__apps a:hover { background: rgba(255,255,255,.16); }
.joia-foot__apps span { font-size: .6rem; opacity: .75; letter-spacing: .04em; }
.joia-foot__apps b { font-size: .84rem; font-weight: 600; }
.joia-foot__logo--img img { max-height: 54px; width: auto; display: block; }
/* Link columns built from WordPress menus (nested children supported). */
.joia-foot__menu, .joia-foot__menu ul { list-style: none; margin: 0; padding: 0; }
.joia-foot__menu li { margin-bottom: 11px; line-height: 1.6; }
.joia-foot__menu .sub-menu { margin-top: 9px; padding-inline-start: 12px; border-inline-start: 1px solid rgba(255,255,255,.14); }
.joia-foot__menu .sub-menu li { margin-bottom: 8px; font-size: .88rem; opacity: .82; }
.joia-foot__col h4 { color: #fff; font-size: 1rem; margin: 0 0 16px; font-weight: 600; }
.joia-foot__col ul { list-style: none; margin: 0; padding: 0; }
.joia-foot__col li { margin-bottom: 11px; line-height: 1.6; }
.joia-foot__contact a { color: #fff; }
.joia-foot__bar {
  border-top: 1px solid rgba(255,255,255,.1); text-align: center;
  padding: 18px; color: rgba(235,225,239,.6); font-size: .84rem;
}
@media (max-width: 900px) {
  .joia-foot__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .joia-foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .joia-foot__inner { grid-template-columns: 1fr; }
}

/* Selection */
::selection { background: var(--joia-pink); color: #fff; }

/* ----- Customer reviews carousel (home, directly above the footer) ------ */
.joia-reviews { width: min(1240px, 94%); margin: 56px auto 64px; }
.joia-reviews__wrap { position: relative; }
.joia-rev {
  background: #fff; border: 1px solid rgba(34,20,46,.1); border-radius: 14px;
  padding: 24px 22px; height: auto; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 16px 34px -30px rgba(34,20,46,.55);
}
.joia-rev__stars { color: var(--joia-gold); font-size: 1rem; letter-spacing: 2px; }
.joia-rev__star { color: rgba(34,20,46,.18); }
.joia-rev__star.is-on { color: var(--joia-gold); }
.joia-rev__text {
  margin: 0; color: rgba(34,20,46,.8); line-height: 1.9; font-size: .95rem; flex: 1 1 auto;
}
.joia-rev__person { display: flex; align-items: center; gap: 11px; margin-top: 4px; }
.joia-rev__avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--joia-light); display: inline-flex; align-items: center; justify-content: center;
}
.joia-rev__avatar .joia-rev__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.joia-rev__initial { font-weight: 700; color: var(--joia-gold); font-size: 1.05rem; }
.joia-rev__meta { display: flex; flex-direction: column; line-height: 1.4; }
.joia-rev__meta b { color: var(--joia-dark); font-size: .95rem; }
.joia-rev__meta span { color: rgba(34,20,46,.55); font-size: .8rem; }
@media (max-width: 700px) { .joia-reviews { margin: 40px auto 48px; } .joia-rev { padding: 20px 18px; } }