/* =================================================================
 * Souk Profumi — Product card
 * ONE card design for the whole site. Loaded on every front-end page.
 *
 * Two renderers produce product cards here, so both are mapped onto the
 * same visual: our own .sp-card markup (shop archive, [souk_products],
 * and every WooCommerce loop via the content-product.php override), and
 * XStore's Elementor product grid, which emits .etheme-product-grid-item
 * and is reskinned at the bottom of this file.
 * ================================================================= */

:root {
  --sp-color-1: #FFFFFF;
  --sp-color-2: #F5EDD9;
  --sp-color-3: #E8C77E;
  --sp-color-4: #C99A4B;
  --sp-color-5: #8B6A2E;
  --sp-color-6: #1A1A1A;

  --sp-bg:           var(--sp-color-1);
  --sp-surface:      var(--sp-color-2);
  --sp-primary:      var(--sp-color-6);
  --sp-accent:       var(--sp-color-4);
  --sp-accent-dark:  var(--sp-color-5);
  --sp-accent-light: var(--sp-color-3);

  --sp-text:  #2A2A2A;
  --sp-muted: #5C5C5C;
  --sp-line:  rgba(139, 106, 46, 0.18);

  --sp-font-head: 'Cinzel', 'Times New Roman', serif;
  --sp-font-body: 'Manrope', system-ui, -apple-system, sans-serif;

  --sp-radius: 2px;
  --sp-shadow: 0 2px 14px rgba(139, 106, 46, 0.08);
  --sp-shadow-lg: 0 14px 40px rgba(139, 106, 46, 0.16);
}

/* ---------- Card ---------- */
.sp-card, .sp-card *, .sp-card *::before, .sp-card *::after { box-sizing: border-box; }

/* --sp-cols lets [souk_products columns="3"] change the count without new CSS. */
.sp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--sp-cols, 4), minmax(0, 1fr));
  gap: 12px;
}

/* [souk_products] wrapper */
.sp-products { font-family: var(--sp-font-body); }
.sp-products__title {
  font-family: var(--sp-font-head);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  color: var(--sp-primary);
  text-align: center;
  margin: 0 0 28px;
}

.sp-card {
  display: flex;
  flex-direction: column;
  background: var(--sp-bg);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  overflow: hidden;
  transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.sp-card:hover {
  border-color: var(--sp-accent);
  box-shadow: var(--sp-shadow-lg);
  transform: translateY(-3px);
}

.sp-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--sp-bg);
  overflow: hidden;
}
.sp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform .5s ease;
}
.sp-card:hover .sp-card__media img { transform: scale(1.06); }

.sp-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--sp-radius);
}
.sp-card__badge--out  { background: var(--sp-accent); }
.sp-card__badge--sale { background: var(--sp-primary); }

.sp-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 14px 18px;
  flex: 1;
}

.sp-card__title {
  font-family: var(--sp-font-head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  color: var(--sp-primary);
}
.sp-card__title a { color: inherit; text-decoration: none; }
.sp-card__title a:hover { color: var(--sp-accent-dark); }

.sp-card__brand {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-muted);
}

.sp-card__rating { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; }
.sp-card__stars {
  position: relative;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--sp-surface);
}
.sp-card__stars::before {
  content: '★★★★★';
  position: absolute;
  left: 0; top: 0;
  width: var(--sp-rating, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--sp-accent);
}
.sp-card__rating-count { font-size: 11px; color: var(--sp-muted); }

.sp-card__price {
  margin: 4px 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-primary);
}
.sp-card__price del { color: var(--sp-muted); font-weight: 400; margin-right: 6px; }
.sp-card__price ins { text-decoration: none; color: var(--sp-accent-dark); }

.sp-card__cta {
  margin-top: auto;      /* pins the button to the card floor so a row of cards lines up */
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--sp-primary);
  background: transparent;
  border: 1px solid var(--sp-accent);
  border-radius: var(--sp-radius);
  padding: 10px 12px;
  transition: background .22s ease, color .22s ease, opacity .22s ease;
}
.sp-card__cta:hover { background: var(--sp-accent); color: #fff; }
.sp-card__cta.is-disabled { opacity: .45; pointer-events: none; }
.sp-card__cta.is-adding { opacity: .6; pointer-events: none; }


/* ---------- Responsive columns ---------- */
@media (max-width: 1200px) {
  .sp-grid { grid-template-columns: repeat(min(var(--sp-cols, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .sp-grid { grid-template-columns: repeat(min(var(--sp-cols, 4), 2), minmax(0, 1fr)); gap: 10px; }
  .sp-card__body { padding: 13px 10px 15px; }
  .sp-card__title { font-size: 13px; }
  .sp-card__media img { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-card, .sp-card *, .sp-card *::before, .sp-card *::after,
  .etheme-product-grid-item, .etheme-product-grid-item * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =====================================================================
 * XSTORE PRODUCT GRID SKIN
 * The theme's Elementor product widgets render their own markup instead of
 * WooCommerce's content-product.php, so they cannot pick up .sp-card. Their
 * structure maps 1:1 onto ours, so it is reskinned here rather than
 * regenerated — the client keeps editing the widget in Elementor as before.
 *
 *   .etheme-product-grid-item      -> .sp-card
 *     .etheme-product-grid-image   -> .sp-card__media
 *     .etheme-product-grid-content -> .sp-card__body
 *       .etheme-product-grid-categories -> .sp-card__brand
 *       .etheme-product-grid-title      -> .sp-card__title
 *       .star-rating-wrapper            -> .sp-card__rating
 *       .price                          -> .sp-card__price
 *       a.button                        -> .sp-card__cta
 * ===================================================================== */
.etheme-product-grid-item {
  display: flex !important;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--sp-bg);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  overflow: hidden;
  text-align: center;
  transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.etheme-product-grid-item * { box-sizing: border-box; }
.etheme-product-grid-item:hover {
  border-color: var(--sp-accent);
  box-shadow: var(--sp-shadow-lg);
  transform: translateY(-3px);
}

/* Media */
.etheme-product-grid-item .etheme-product-grid-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--sp-bg);
  overflow: hidden;
  margin: 0;
}
.etheme-product-grid-item .etheme-product-grid-image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.etheme-product-grid-item .etheme-product-grid-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform .5s ease;
}
.etheme-product-grid-item:hover .etheme-product-grid-image img { transform: scale(1.06); }

/* The hover mask and floating icon rail have no counterpart in our card. */
.etheme-product-grid-item .etheme-product-grid-image footer,
.etheme-product-grid-item .etheme-product-grid-image .footer-inner,
.etheme-product-grid-item .show-quickly,
.etheme-product-grid-item .xstore-wishlist,
.etheme-product-grid-item .etheme-product-grid-image::before,
.etheme-product-grid-item .etheme-product-grid-image::after { display: none !important; }

/* Body */
.etheme-product-grid-item .etheme-product-grid-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 14px 18px;
  flex: 1;
}

.etheme-product-grid-item .etheme-product-grid-categories,
.etheme-product-grid-item .etheme-product-grid-categories a {
  order: 2;
  margin: 0;
  font-family: var(--sp-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-muted);
  text-decoration: none;
}

.etheme-product-grid-item .etheme-product-grid-title {
  order: 1;
  font-family: var(--sp-font-head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  color: var(--sp-primary);
  text-transform: none;
}
.etheme-product-grid-item .etheme-product-grid-title a { color: inherit; text-decoration: none; }
.etheme-product-grid-item .etheme-product-grid-title a:hover { color: var(--sp-accent-dark); }

.etheme-product-grid-item .star-rating-wrapper { order: 3; margin: 2px 0 0; }

.etheme-product-grid-item .price {
  order: 4;
  margin: 4px 0 12px;
  font-family: var(--sp-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-primary);
}
.etheme-product-grid-item .price del { color: var(--sp-muted); font-weight: 400; margin-right: 6px; }
.etheme-product-grid-item .price ins { text-decoration: none; color: var(--sp-accent-dark); }

.etheme-product-grid-item .etheme-product-grid-content > a.button {
  order: 5;
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sp-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sp-primary);
  background: transparent;
  border: 1px solid var(--sp-accent);
  border-radius: var(--sp-radius);
  padding: 10px 12px;
  min-height: 0;
  transition: background .22s ease, color .22s ease;
}
.etheme-product-grid-item .etheme-product-grid-content > a.button:hover {
  background: var(--sp-accent);
  color: #fff;
}
.etheme-product-grid-item .etheme-product-grid-content > a.button svg { display: none; }

/* Out-of-stock / sale flags reuse the card badge treatment. */
.etheme-product-grid-item .etheme-product-label,
.etheme-product-grid-item .onsale,
.etheme-product-grid-item .out-of-stock-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sp-accent);
  border-radius: var(--sp-radius);
  padding: 5px 12px;
  margin: 0;
  min-height: 0;
  line-height: 1.4;
}

/* The widget ships a 1px gutter, which read as a seamless grid while its cards
 * were borderless. Now that they carry the card border, that hairline looks
 * like a table rule, so match the shop's 12px. !important because Elementor
 * writes the gap as a per-element rule of equal specificity. */
.etheme-product-grid { gap: 12px !important; }

/* =====================================================================
 * XSTORE LOOP CARD SKIN (.content-product)
 * The theme's canonical loop card, used by related products, up-sells,
 * cross-sells, product sliders and product widgets. Those render through
 * etheme_slider() rather than WooCommerce's template functions, so they are
 * reskinned here for the same reason as the Elementor grid above.
 *
 * The theme nests title/price/button inside wrapper divs that also drive its
 * hover price/button "switch" effect. display:contents flattens those wrappers
 * so the real elements become flex children of the card body and can be
 * ordered exactly like .sp-card__body, and the switch is neutralised.
 * ===================================================================== */
.content-product {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background: var(--sp-bg);
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  overflow: hidden;
  text-align: center;
  transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease;
}
.content-product * { box-sizing: border-box; }
.content-product:hover {
  border-color: var(--sp-accent);
  box-shadow: var(--sp-shadow-lg);
  transform: translateY(-3px);
}

/* Media */
.content-product .product-image-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
  background: var(--sp-bg);
}
.content-product .images-slider-wrapper,
.content-product .product-content-image { display: block; width: 100%; height: 100%; }
.content-product .product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform .5s ease;
}
.content-product:hover .product-image-wrapper img { transform: scale(1.06); }

/* Body */
.content-product .product-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 14px 18px;
  flex: 1;
  width: 100%;
}

/* Flatten the theme's wrapper divs so their contents order as one column. */
.content-product .light-left-side,
.content-product .switcher-wrapper,
.content-product .price-switcher,
.content-product .price-switch,
.content-product .button-switch { display: contents; }

/* Kill the hover price/button swap — both stay visible, like our card. */
.content-product .price-switcher,
.content-product .price-switch,
.content-product .button-switch {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
}

.content-product .products-page-cats,
.content-product .products-page-cats a {
  order: 2;
  margin: 0;
  font-family: var(--sp-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sp-muted);
  text-decoration: none;
}

.content-product .product-title {
  order: 1;
  font-family: var(--sp-font-head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  color: var(--sp-primary);
  text-transform: none;
}
.content-product .product-title a { color: inherit; text-decoration: none; }
.content-product .product-title a:hover { color: var(--sp-accent-dark); }

.content-product .star-rating,
.content-product .star-rating-wrapper { order: 3; margin: 2px 0 0; }

.content-product .price {
  order: 4;
  margin: 4px 0 12px;
  font-family: var(--sp-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-primary);
}
.content-product .price del { color: var(--sp-muted); font-weight: 400; margin-right: 6px; }
.content-product .price ins { text-decoration: none; color: var(--sp-accent-dark); }

.content-product a.button {
  order: 5;
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sp-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sp-primary);
  background: transparent;
  border: 1px solid var(--sp-accent);
  border-radius: var(--sp-radius);
  padding: 10px 12px;
  min-height: 0;
  transition: background .22s ease, color .22s ease;
}
.content-product a.button:hover { background: var(--sp-accent); color: #fff; }
.content-product a.button svg { display: none; }

/* Icon rails and quick-view have no counterpart in our card. */
.content-product .light-right-side,
.content-product .show-quickly,
.content-product .xstore-wishlist,
.content-product .xstore-compare,
.content-product .product-mask,
.content-product .footer-product { display: none !important; }

/* Sliders give each slide a fixed track height; let the card fill it. */
.swiper-slide .content-product,
.slide-item .content-product { height: 100%; }

/* The theme left-aligns the loop text and strips the loop button's frame from
 * selectors more specific than the skin above (.light-left-side .product-title,
 * .button-switch .button). These are the only declarations it still wins, so
 * they are forced here rather than escalating the whole skin. */
.content-product .light-left-side,
.content-product .product-title,
.content-product .products-page-cats,
.content-product .price { text-align: center !important; }

.content-product .product-details a.button {
  display: inline-flex !important;
  width: 100% !important;
  border: 1px solid var(--sp-accent) !important;
  border-radius: var(--sp-radius) !important;
  background: transparent !important;
  color: var(--sp-primary) !important;
  padding: 10px 12px !important;
  font-family: var(--sp-font-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 1.4 !important;
  height: auto !important;
}
.content-product .product-details a.button:hover {
  background: var(--sp-accent) !important;
  color: #fff !important;
}