/* =========================================================
   GLOBAL / SHARED — BASE THEME CUSTOMIZATIONS
   ========================================================= */
.navbar-brand img {
    padding: 10px;
}

.promotion-banner {
  background: #122847 !important;
}

.s-button-element:not(:disabled):not([loading]) {
    background: #112847;
    color: #ffffff;
}

.product-card__buttons > div button i {
    color: #ffffff;
}


/* Main Menu Hover */
.main-menu > li > a:hover,
.main-menu > li:hover > a {
    color: #de9b18 !important;
}

/* Sub Menu Hover */
.main-menu .sub-menu a:hover,
.main-menu .sub-menu li:hover > a {
    color: #de9b18 !important;
}

/* لو فيه خلفية Hover بيضاء */
.main-menu .sub-menu a:hover {
    background: transparent !important;
}

salla-offer {
  display: none !important;
}

.product-card__promotion {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  transform: none !important;
  margin: 0 !important;

  width: fit-content !important;
  max-width: 100%;
  padding: 4px 8px !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
  border-radius: 0 0 6px 0 !important;
  z-index: 5;
}

.product-quickview__images .hattrick-hide-national-day-promotion,
.quickview-images .hattrick-hide-national-day-promotion,
.product-quickview .promotion-title.hattrick-hide-national-day-promotion {
  display: none !important;
}

.product-card__promotion.hattrick-hide-national-day-promotion {
  display: none !important;
}

body.product-single .promotion-title.hattrick-hide-national-day-promotion {
  display: none !important;
}

/* =========================================================
   PRODUCT CARD CUSTOMIZATIONS — GLOBAL
   ========================================================= */


/* Native card refinements. Keep the theme's markup, visibility breakpoints,
   promotional badge, product data, and all native component handlers. */
custom-salla-product-card.product-card {
  box-sizing: border-box;
  min-width: 0;
  height: 100%;
  border: 1px solid #BFBFBF;
}

/* Native option forms wrap the content after hydration; keep their handlers. */
custom-salla-product-card > form.product-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

custom-salla-product-card.product-card--vertical.product-card--fit-height .product-card__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
}

custom-salla-product-card .product-card__content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
}

custom-salla-product-card .product-card__title {
  margin-bottom: 8px;
}

/* Compact the native 20px option margins, not the choice dimensions. */
custom-salla-product-card .product-options > salla-product-options {
  margin-bottom: 8px;
}

/* The following option content already supplies 4px of top spacing. */
custom-salla-product-card .s-product-options-option-container:not(:last-child) {
  margin-bottom: 4px;
}

/* Override the observed theme hide-quickview-on-mobile !important rule. */
custom-salla-product-card.product-card .product-card__actions {
  display: flex !important;
  position: absolute;
  inset: auto auto 12px 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 16px);
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

custom-salla-product-card .product-card__actions .wishlist,
custom-salla-product-card .product-card__actions .quickview-btn {
  margin: 0;
}

custom-salla-product-card .product-card__actions salla-button > button.s-button-element {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: auto;
}

/* Preserve the theme's desktop/mobile display rules for these two wrappers. */
custom-salla-product-card.product-card.hover_style_3 .product-card__buttons,
custom-salla-product-card .product-card__enhanced-mini-cart {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 12px;
}

custom-salla-product-card .product-card__buttons .addToCart {
  width: 100%;
  height: auto;
  margin-inline: 0;
}

custom-salla-product-card .product-card__buttons .addToCart > salla-add-product-button.addToCart__btn,
custom-salla-product-card .product-card__enhanced-mini-cart > salla-add-product-button.product-card__enhnaced-mini-cart__btn,
custom-salla-product-card .product-card__buttons .addToCart salla-button,
custom-salla-product-card .product-card__enhanced-mini-cart salla-button {
  display: block;
  width: 100%;
}

/* These variables belong to the enhanced cart only, not the card/badge. */
custom-salla-product-card .product-card__enhanced-mini-cart {
  --product-enhanced-btn-bg: #112847;
  --product-enhanced-btn-color: #FFFFFF;
}

custom-salla-product-card .product-card__buttons .addToCart salla-button > button.s-button-element,
custom-salla-product-card .product-card__enhanced-mini-cart salla-button > button.s-button-element {
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}

custom-salla-product-card .product-card__buttons .addToCart .s-button-text,
custom-salla-product-card .product-card__enhanced-mini-cart__btn--inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* The audited desktop content is icon-only. Never add a second mobile label. */
custom-salla-product-card .product-card__buttons .addToCart .s-button-text:has(> i:only-child)::after {
  content: "أضف إلى السلة";
}

custom-salla-product-card .product-card__enhanced-mini-cart .enhanced-label,
custom-salla-product-card .product-card__enhanced-mini-cart .enhanced-icon {
  margin-inline: 0;
}

/* Start-alignment keeps the first RTL option reachable when content overflows. */
custom-salla-product-card.product-card .s-product-options-grid-mode,
custom-salla-product-card.product-card .s-product-options-thumbnails-wrapper {
  flex-wrap: nowrap;
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

custom-salla-product-card .s-product-options-grid-mode > label,
custom-salla-product-card .s-product-options-thumbnails-wrapper > div {
  flex: 0 0 auto;
}

/* Keep native absolute-positioned radios inside their scrolling choice. */
custom-salla-product-card .s-product-options-grid-mode > label {
  position: relative;
}

custom-salla-product-card .s-product-options-grid-mode::-webkit-scrollbar,
custom-salla-product-card .s-product-options-thumbnails-wrapper::-webkit-scrollbar {
  display: none;
}

/* Match the theme's mobile cart breakpoint; desktop remains unchanged. */
@media (max-width: 991px) {
  /* Reduce the native 320px canvas; the existing actions stay absolute. */
  custom-salla-product-card.product-card--vertical.product-card--fit-height .product-card__image {
    --product-image-height: clamp(220px, 60vw, 280px);
  }

  custom-salla-product-card .product-card__image img.main-image {
    margin-block: 0;
  }

  custom-salla-product-card.product-card--vertical.product-card--fit-height .product-card__content {
    padding-top: 8px;
  }

  custom-salla-product-card .product-card__title,
  custom-salla-product-card .product-card__subtitle,
  custom-salla-product-card .product-options > salla-product-options {
    margin-bottom: 4px;
  }

  custom-salla-product-card .s-product-options-option-container:not(:last-child) {
    margin-bottom: 2px;
  }

  custom-salla-product-card .s-product-options-option-content {
    margin-top: 2px;
  }

  /* Keep native thumbnails tappable without the theme's article-image margins. */
  custom-salla-product-card .s-product-options-thumbnails-wrapper > div label {
    min-height: 44px;
  }

  custom-salla-product-card.product-card .s-product-options-thumbnails-wrapper > div label img {
    margin-block: 2px;
  }

  custom-salla-product-card .product-card__enhanced-mini-cart {
    /* Balance the native divider's spacing with a small inset below the button. */
    padding-top: 6px;
    padding-bottom: 6px;
    padding-inline: 8px;
  }

  custom-salla-product-card .product-card__enhanced-mini-cart-divider {
    margin-top: 4px;
  }

  custom-salla-product-card .product-card__enhanced-mini-cart salla-button > button.s-button-element {
    min-height: 42px;
    padding-block: 9px;
    font-size: 13px;
  }
}

/* =========================================================
   GLOBAL / SHARED — ADDITIONAL CUSTOMIZATIONS
   ========================================================= */
/* Hattrick — Promotional announcement messages */
.hattrick-promo-content {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  vertical-align: middle;
}

.hattrick-promo-message {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.promotion-banner li a[data-hattrick-enhanced]:not([href]) {
  cursor: default;
}

.hattrick-promo-offer {
  margin-inline-start: 40px;
}

.hattrick-promo-separator {
  display: inline-block;
  opacity: 0.6;
  font-weight: 300;
  user-select: none;
}

.hattrick-promo-riyal {
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .hattrick-promo-content {
    gap: 8px;
  }

  .hattrick-promo-message {
    gap: 4px;
  }
}

/* Hattrick — Product popup add-to-cart full width */
.sticky-cart-single .s-add-product-button-main {
  width: 100%;
}

.sticky-cart-single .s-add-product-button-main > salla-button {
  width: 100% !important;
}

.sticky-cart-single .s-add-product-button-mini-checkout {
  display: none !important;
}

/* Hattrick — Hide the retired National Day category in both header copies. */
#mobile-menu li:has(> a[aria-label="عروض اليوم الوطني السعودي"]),
#mobile-menu a.main-menu__link[aria-label="عروض اليوم الوطني السعودي"] {
  display: none !important;
}

/* Hattrick — Loading spinner brand color */
.s-loading {
  fill: #112847 !important;
}

.s-loading-fill-color {
  fill: #112847 !important;
}

.s-button-loader::before,
.s-add-product-button-busy::after,
.s-modal-loader::before,
.s-search-spinner-loader {
  border-top-color: #112847 !important;
  border-left-color: #112847 !important;
}

.s-button-solid .s-button-loader::before {
  border-top-color: #ffffff !important;
  border-right-color: #ffffff !important;
}

/* =========================================================
   PRODUCT CARD CUSTOMIZATIONS — FINAL VISIBILITY OVERRIDE
   ========================================================= */
/* Intentionally later than the base card action styles above. */
/* Hattrick — Hide product card quick view & wishlist */
custom-salla-product-card.product-card .product-card__actions,
custom-salla-product-card .product-card__actions,
custom-salla-product-card .product-card__actions .wishlist,
custom-salla-product-card .product-card__actions .quickview-btn,
custom-salla-product-card .product-card__buttons .wishlist,
custom-salla-product-card .product-card__buttons .quickview-btn,
custom-salla-product-card .wishlist,
custom-salla-product-card .quickview-btn,
custom-salla-product-card .btn--wishlist,
custom-salla-product-card .btn--quickview,
custom-salla-product-card [aria-label*="wishlist"],
custom-salla-product-card [aria-label*="المفضلة"],
custom-salla-product-card [aria-label*="Quick view"],
custom-salla-product-card [aria-label*="عرض سريع"] {
  display: none !important;
}

/* =========================================================
   GLOBAL / SHARED — TOAST
   ========================================================= */
/* Cart only: the embedded shipping campaign is a sibling of the native sidebar.
   Keep both in the sidebar track without moving either component or its handlers. */
@media (min-width: 1024px) {
  body.cart [data-selia="cart-root"]:has(> .sticky):has(> [data-hwafez-widget-type="free_shipping"][data-position="embedded"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: 20px 32px;
  }

  body.cart [data-selia="cart-root"]:has(> [data-hwafez-widget-type="free_shipping"][data-position="embedded"]) > .main-content {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 100%;
    min-width: 0;
  }

  body.cart [data-selia="cart-root"]:has(> [data-hwafez-widget-type="free_shipping"][data-position="embedded"]) > .sticky {
    grid-column: 2;
    grid-row: 2;
    /* A sticky grid item can slide over the other sidebar row while scrolling. */
    position: static;
    top: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin-inline: 0;
  }

  body.cart [data-selia="cart-root"]:has(> .sticky) > [data-hwafez-widget-type="free_shipping"][data-position="embedded"] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  /* Retain native shipping information after the coupon, summary and actions. */
  body.cart [data-selia="cart-root"]:has(> [data-hwafez-widget-type="free_shipping"][data-position="embedded"]) > .sticky > #free-shipping {
    order: 1;
  }
}

/* Hattrick — Add-to-cart toast checkout text */
.s-add-product-toast__actions .s-button-element {
  color: #FFFFFF !important;
}

/* =========================================================
   SINGLE PRODUCT — ACTIVE DETAILS TAB LABEL
   ========================================================= */
/* The theme forces the active tab's text to var(--color-primary) with !important
   (.s-block--tabs-produtcs .tab-trigger.is-active button), the same navy as the
   button background set at the top of this file, so the label disappears. Equal
   importance with higher specificity keeps it white. */
button.tab-trigger.is-active.s-button-element.s-button-primary-outline {
  color: #ffffff !important;
}

/* =========================================================
   CATEGORY "دبل خطوتك" (c1146059754) ONLY
   Everything is scoped to body.hattrick-double-step, which the JS
   adds only on that category page.
   ========================================================= */
/* The banner is a native .container (theme page width + side padding);
   the margins add the 10px gap under the header and space below it. */
.hattrick-ds-banner {
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 0;
}

.hattrick-ds-banner picture,
.hattrick-ds-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.hattrick-ds-banner img {
  border-radius: 8px;
}

/* Same look as the native card labels; sits on the image like them. */
body.hattrick-double-step .product-card__promotion.hattrick-ds-label {
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  color: #fff;
}

body.hattrick-double-step .hattrick-ds-label .sicon-sar {
  font-size: 1em;
  line-height: 1;
}

/* Larger label on desktop. */
@media (min-width: 992px) {
  body.hattrick-double-step .product-card__promotion.hattrick-ds-label {
    font-size: 12px !important;
    padding: 6px 12px !important;
    gap: 4px;
    border-radius: 0 0 8px 0 !important;
  }
}

/* Sale price and before-price on one line with matching line height. */
body.hattrick-double-step .price_is_on_sale {
  align-items: center;
}

body.hattrick-double-step .price_is_on_sale .total-price,
body.hattrick-double-step .price_is_on_sale .before-price {
  margin: 0;
  line-height: 1.4;
}

/* =========================================================
   GLOBAL — DOUBLE STEP OFFER POPUP (created by salla-custom.js)
   ========================================================= */
#hattrick-ds-popup {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 24px;
  background: rgba(8, 18, 33, 0.72);
  overscroll-behavior: contain;
}

#hattrick-ds-popup .hattrick-ds-popup__dialog {
  position: relative;
  width: min(480px, 100%, calc(100vh - 48px));
  width: min(480px, 100%, calc(100dvh - 48px));
}

#hattrick-ds-popup .hattrick-ds-popup__link {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

#hattrick-ds-popup .hattrick-ds-popup__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  border: 0;
}

#hattrick-ds-popup .hattrick-ds-popup__close {
  position: absolute;
  top: -14px;
  inset-inline-end: -14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #112847;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  touch-action: manipulation;
}

#hattrick-ds-popup .hattrick-ds-popup__close svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

@media (max-width: 767px) {
  #hattrick-ds-popup { padding: 20px; }
  #hattrick-ds-popup .hattrick-ds-popup__dialog { width: min(100%, calc(100dvh - 40px)); }
  #hattrick-ds-popup .hattrick-ds-popup__link { border-radius: 12px; }
  #hattrick-ds-popup .hattrick-ds-popup__close { width: 44px; height: 44px; top: -12px; inset-inline-end: -8px; }
}

/* =========================================================
   GLOBAL — "ADD A SECOND PAIR" POPUP (created by salla-custom.js)
   The artwork is the whole popup; the close and CTA buttons are
   transparent hit areas placed over the drawn X and button.
   ========================================================= */
#hattrick-second-pair-popup {
  position: fixed;
  inset: 0;
  /* Above the Hwafez cart widget (z-index 2147483000), which would block clicks. */
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  background: rgba(8, 18, 33, 0.72);
  overscroll-behavior: contain;
}

#hattrick-second-pair-popup .hattrick-sp__dialog {
  position: relative;
  width: min(860px, 100%, calc((100vh - 32px) * 1.5956));
  width: min(860px, 100%, calc((100dvh - 32px) * 1.5956));
}

#hattrick-second-pair-popup .hattrick-sp__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}

#hattrick-second-pair-popup .hattrick-sp__close,
#hattrick-second-pair-popup .hattrick-sp__cta {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#hattrick-second-pair-popup .hattrick-sp__close {
  top: 8%;
  left: 3.5%;
  width: 7.5%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

#hattrick-second-pair-popup .hattrick-sp__cta {
  top: 68.5%;
  left: 52.5%;
  width: 43.5%;
  height: 12.7%;
  border-radius: 12px;
}

#hattrick-second-pair-popup .hattrick-sp__close:focus-visible,
#hattrick-second-pair-popup .hattrick-sp__cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* =========================================================
   HOME PAGE: BRANCH LOCATIONS TABS
   ========================================================= */
.hattrick-branches {
  margin-top: 40px;
  margin-bottom: 40px;
}

.hattrick-branches__title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary, #122847);
}

.hattrick-branches__tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.hattrick-branches__tab {
  flex: 1 1 0;
  max-width: 180px;
  padding: 10px 8px;
  border: 1px solid var(--color-primary, #122847);
  border-radius: 8px;
  background: transparent;
  color: var(--color-primary, #122847);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.hattrick-branches__tab.is-active {
  background: var(--color-primary, #122847);
  color: #fff;
}

.hattrick-branches__panel[hidden] {
  display: none;
}

.hattrick-branches__panel {
  height: 320px;
  border-radius: 8px;
  overflow: hidden;
  background: #eef0f3;
}

.hattrick-branches__panel iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 768px) {
  .hattrick-branches__tab {
    font-size: 16px;
  }

  .hattrick-branches__panel {
    height: 420px;
  }
}

/* PDP:BEGIN (generated from src/pdp.css by tools/build.cjs, edit the source) */
/* =========================================================
   SINGLE PRODUCT — NEW DESIGN (SHOE CATEGORIES)
   Everything is scoped to body.hattrick-pdp, which the scope block of
   salla-custom.js adds on shoe product pages. Source: src/pdp.css.
   Tokens: navy #112847, slate #62748e / #4c5f76, border #e4e4e7 / #9f9fa9.
   ========================================================= */

/* ---------- native elements the new design replaces ---------- */
body.hattrick-pdp .product-single__info > salla-installment,
body.hattrick-pdp .product-single__info > salla-payments,
body.hattrick-pdp .product-single__info .product-form > .bg-storeBG:not(.sticky-product-bar),
body.hattrick-pdp .product-single__info .sticky-product-bar__quantity > label,
body.hattrick-pdp .product-single__info .s-add-product-button-mini-checkout,
body.hattrick-pdp #single-product-details {
  display: none !important;
}

/* ---------- shared pieces ---------- */
body.hattrick-pdp .hattrick-pdp__icon,
body.hattrick-pdp .hattrick-pdp-features__icon,
body.hattrick-pdp .hattrick-pdp-strip__icon,
body.hattrick-pdp .hattrick-pdp-strip__info,
body.hattrick-pdp .hattrick-pdp-accordion__plus {
  display: block;
  flex: none;
  max-width: none;
  height: auto;
}

body.hattrick-pdp .hattrick-pdp__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.hattrick-pdp .hattrick-pdp__star {
  display: block;
  width: 14px;
  height: 14px;
  max-width: none;
}

body.hattrick-pdp .hattrick-pdp__star--off {
  filter: grayscale(1);
  opacity: 0.35;
}

body.hattrick-pdp .hattrick-pdp-meta__divider,
body.hattrick-pdp .hattrick-pdp-authentic__divider {
  display: block;
  flex: none;
  width: 1px;
  height: 16px;
  background: #cbd5e1;
}

/* ---------- title, meta, authenticity ---------- */
body.hattrick-pdp .product-single__info .product-single__title {
  order: 1;
  margin: 0 0 10px;
  color: #112847;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

body.hattrick-pdp .hattrick-pdp-meta {
  order: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

body.hattrick-pdp .hattrick-pdp-meta__bought {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f98a8a;
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
}

body.hattrick-pdp .hattrick-pdp-meta__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #62748e;
  font-size: 14px;
  letter-spacing: 0.4px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

body.hattrick-pdp .hattrick-pdp-meta__rating[hidden],
body.hattrick-pdp .hattrick-pdp-meta--no-rating .hattrick-pdp-meta__divider {
  display: none;
}

body.hattrick-pdp .hattrick-pdp-authentic {
  order: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  color: #112847;
  font-size: 14px;
  line-height: 14px;
}

body.hattrick-pdp .hattrick-pdp-authentic__more {
  color: #0f213b;
  font-size: 12px;
  line-height: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- price ---------- */
body.hattrick-pdp .product-single__info .product-price {
  order: 4;
  gap: 8px;
  margin-bottom: 8px;
}

body.hattrick-pdp .product-single__info .product-price .total-price,
body.hattrick-pdp .product-single__info .product-price .total-price i {
  color: #112847;
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
}

body.hattrick-pdp .product-single__info .product-price .before-price,
body.hattrick-pdp .product-single__info .product-price .before-price i {
  color: #62748e;
  font-size: 18px;
  font-weight: 300;
  line-height: 18px;
}

body.hattrick-pdp .product-single__info .product-single__stock-info {
  order: 5;
  margin-bottom: 0 !important;
  font-size: 13px;
}

/* ---------- options: sizes ---------- */
body.hattrick-pdp .product-single__info .product-form {
  display: contents;
}

body.hattrick-pdp .hattrick-pdp-sizeguide {
  order: 6;
  align-self: flex-start;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 16px 0 -24px;
  color: #112847;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.hattrick-pdp .product-single__info salla-product-options {
  order: 7;
  display: block;
  margin: 16px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid #e4e4e7;
}

body.hattrick-pdp .product-single__info .s-product-options-option {
  display: block !important;
}

body.hattrick-pdp .product-single__info .s-product-options-option-content {
  width: 100%;
}

body.hattrick-pdp .product-single__info .s-product-options-option-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  margin: 0 0 10px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
}

body.hattrick-pdp .product-single__info .s-product-options-option-label b {
  font-weight: 400;
}

body.hattrick-pdp .product-single__info .s-product-options-option-label small {
  display: none;
}

body.hattrick-pdp .product-single__info .s-product-options-grid-mode {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

body.hattrick-pdp .product-single__info .s-product-options-grid-mode > label {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0;
}

body.hattrick-pdp .product-single__info .s-product-options-grid-mode-span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 36px;
  padding: 6px 4px;
  border: 1px solid #9f9fa9;
  border-radius: 2px;
  background: #fff;
  color: #27272a;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.4px;
  line-height: 20px;
  text-align: center;
}

body.hattrick-pdp .product-single__info .s-product-options-grid-mode input:checked + .s-product-options-grid-mode-span {
  border-color: #112847;
  background: #112847;
  color: #fff;
}

body.hattrick-pdp .product-single__info .s-product-options-option-stock-out .s-product-options-grid-mode-span {
  color: #9f9fa9;
  font-size: 12px;
  line-height: 14px;
  text-decoration: line-through;
}

/* ---------- options: colours (thumbnail options) ---------- */
body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

/* Four thumbnails per row, at most 104px each (the size in the design). */
body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper > div {
  flex: none;
  width: min(104px, calc((100% - 24px) / 4));
  margin: 0;
}

body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper label.go-to-slide {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  border: 1.5px solid transparent;
  border-radius: 2px;
  background: #eef0f2;
  overflow: hidden;
}

body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper label.go-to-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper input:checked + label.go-to-slide {
  border-color: #112847;
}

/* ---------- features, gift, instalments ---------- */
body.hattrick-pdp .hattrick-pdp-features {
  order: 8;
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin: 32px 0 0;
  padding: 32px 0 0;
  border-top: 1px solid #e4e4e7;
  list-style: none;
}

body.hattrick-pdp .hattrick-pdp-features__item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  margin: 0;
}

/* The USP drawings differ in proportion: each sits in the same box, centred. */
body.hattrick-pdp .hattrick-pdp-features__icon {
  width: 58px;
  height: 48px;
  object-fit: contain;
}

body.hattrick-pdp .hattrick-pdp-features__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: #112847;
}

body.hattrick-pdp .hattrick-pdp-features__body strong {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

body.hattrick-pdp .hattrick-pdp-features__body span {
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
}

/* The design's gift box replaces the theme's gift widget (its button presses the native one). */
/* The theme's size-guide row is replaced by the design's link; its modal stays in the page. */
body.hattrick-pdp section:has(> salla-product-size-guide) {
  margin: 0 !important;
  padding: 0 !important;
}

body.hattrick-pdp section:has(> salla-product-size-guide) > .center-between {
  display: none;
}

body.hattrick-pdp salla-gifting {
  margin: 0 !important;
}

/* Only the tile is hidden: the component (its button and anything it opens) stays in the page. */
body.hattrick-pdp salla-gifting .s-gifting-widget {
  display: none !important;
}

body.hattrick-pdp .hattrick-pdp-gift[hidden] {
  display: none;
}

body.hattrick-pdp .hattrick-pdp-gift {
  order: 9;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}

body.hattrick-pdp .hattrick-pdp-gift__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 298px;
  color: #000;
}

body.hattrick-pdp .hattrick-pdp-gift__text strong {
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
}

body.hattrick-pdp .hattrick-pdp-gift__text span {
  font-size: 12px;
  font-weight: 300;
  line-height: 14px;
}

body.hattrick-pdp .hattrick-pdp-gift__button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 40px;
  padding: 8px;
  border: 0.5px solid #744c32;
  border-radius: 4px;
  background: #f8f4f2;
  color: #744c32;
  font-size: 14px;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
}

body.hattrick-pdp .hattrick-pdp-installments {
  order: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 32px 0 24px;
}

body.hattrick-pdp .hattrick-pdp-installment {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

body.hattrick-pdp .hattrick-pdp-installment__text {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 58px;
  padding: 16px 12px 0;
  border: 1px solid #e4e4e7;
  border-radius: 2px;
  color: #112847;
  font-size: 12px;
  line-height: 16px;
}

body.hattrick-pdp .hattrick-pdp-installment__logo {
  position: absolute;
  top: -10px;
  inset-inline-start: 12px;
  display: flex;
  align-items: center;
  height: auto;
  padding-inline: 12px;
  background: #fff;
}

body.hattrick-pdp .hattrick-pdp-installment__img {
  display: block;
  height: 21px;
  width: auto;
  max-width: none;
}

body.hattrick-pdp .hattrick-pdp-installment--tabby .hattrick-pdp-installment__img {
  height: 24px;
}

body.hattrick-pdp .hattrick-pdp-installment__more {
  color: #4c5f76;
  font-size: 12px;
  font-weight: 300;
  line-height: 12px;
  text-decoration: underline;
}

/* ---------- quantity, add to cart, Apple Pay ---------- */
body.hattrick-pdp .product-single__info .sticky-product-bar {
  order: 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 8px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  background: transparent;
}

body.hattrick-pdp .product-single__info .sticky-product-bar salla-add-product-button {
  display: contents;
}

body.hattrick-pdp .product-single__info .sticky-product-bar__quantity {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
}

body.hattrick-pdp .product-single__info .s-add-product-button-main {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: 100% !important;
  min-width: 0;
}

/* The theme shrinks the label of this button on phones; keep it readable. */
body.hattrick-pdp .product-single__info .s-add-product-button-main .s-button-text,
body.hattrick-pdp .product-single__info .s-add-product-button-main .s-button-text > span {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap;
}

body.hattrick-pdp .product-single__info salla-quick-buy {
  grid-column: 1 / -1;
  grid-row: 2;
  display: block;
}

body.hattrick-pdp .product-single__info .sticky-product-bar .s-add-product-button-main salla-button,
body.hattrick-pdp .product-single__info .sticky-product-bar .s-add-product-button-main button.s-button-btn {
  display: flex !important;
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: none !important;
}

body.hattrick-pdp .product-single__info .s-add-product-button-main button.s-button-btn {
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 0;
  background: #112847;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

/* Price inside the button, fed by the --pdp-price / --pdp-sar variables that the
   script sets on salla-add-product-button; only while the product is in stock. */
body.hattrick-pdp .product-single__info .sticky-product-bar salla-add-product-button[product-status="sale"] .s-add-product-button-main button.s-button-btn::after {
  content: var(--pdp-price, none);
  display: inline-block;
  padding-left: 20px;
  background: var(--pdp-sar, none) no-repeat left center / 14px 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
}

body.hattrick-pdp .product-single__info .s-quantity-input-container {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  height: 48px;
  border: 1px solid #d4d4d4;
  background: #fff;
}

body.hattrick-pdp .product-single__info .s-quantity-input-button {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

body.hattrick-pdp .product-single__info .s-quantity-input-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  border-inline: 1px solid #d4d4d4;
  background: #f5f5f5;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

body.hattrick-pdp .product-single__info salla-quick-buy apple-pay-button {
  --apple-pay-button-width: 100%;
  --apple-pay-button-height: 48px;
  --apple-pay-button-border-radius: 0;
  display: block;
  width: 100%;
}

/* ---------- accordions ---------- */
body.hattrick-pdp .hattrick-pdp-accordions {
  order: 14;
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}

body.hattrick-pdp .hattrick-pdp-accordion {
  border-bottom: 1px solid #e4e4e7;
}

body.hattrick-pdp .hattrick-pdp-accordion__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 33px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #112847;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  text-align: start;
}

body.hattrick-pdp .hattrick-pdp-accordion__plus {
  width: 24px;
  height: 24px;
  transition: transform 0.2s ease;
}

/* Open: the plus becomes a minus (the icon's horizontal bar, redrawn in the same place). */
body.hattrick-pdp .hattrick-pdp-accordion__head {
  position: relative;
}

body.hattrick-pdp .hattrick-pdp-accordion.is-open .hattrick-pdp-accordion__plus {
  visibility: hidden;
}

body.hattrick-pdp .hattrick-pdp-accordion.is-open .hattrick-pdp-accordion__head::after {
  content: "";
  position: absolute;
  top: 11.1px;
  inset-inline-end: 3.56px;
  width: 16.88px;
  height: 1.8px;
  border-radius: 1px;
  background: #112847;
}

body.hattrick-pdp .hattrick-pdp-accordion__panel {
  padding: 8px 0 24px;
  color: #373737;
  font-size: 14px;
  line-height: 22px;
}

body.hattrick-pdp .hattrick-pdp-accordion__panel[hidden] {
  display: none;
}

body.hattrick-pdp .hattrick-pdp-accordion__text p {
  margin: 0;
}

body.hattrick-pdp .hattrick-pdp-accordion__text p.g {
  height: 10px;
}

body.hattrick-pdp .hattrick-pdp-accordion__text ul {
  margin: 0;
  padding-inline-start: 18px;
}

body.hattrick-pdp .hattrick-pdp-accordion__text li {
  display: list-item;
  margin: 0;
  list-style: disc outside;
}

/* ---------- second features strip ---------- */
body.hattrick-pdp .hattrick-pdp-strip {
  margin: 48px 0;
  padding-inline: 10px;
}

body.hattrick-pdp .hattrick-pdp-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 24px clamp(32px, 9vw, 182px);
}

body.hattrick-pdp .hattrick-pdp-strip__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid #90a1b9;
}

body.hattrick-pdp .hattrick-pdp-strip__icon {
  height: 56px;
  width: auto;
}

body.hattrick-pdp .hattrick-pdp-strip__body {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

body.hattrick-pdp .hattrick-pdp-strip__body strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #122847;
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
}

body.hattrick-pdp .hattrick-pdp-strip__info {
  width: 22px;
  height: 22px;
}

body.hattrick-pdp .hattrick-pdp-strip__body span {
  color: #4c5f76;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
}

/* ---------- reviews ---------- */
/* Stars fill from the left, as drawn in the design. */
body.hattrick-pdp .hattrick-pdp__stars {
  --pdp-star: 14px;
  direction: ltr;
}

body.hattrick-pdp .hattrick-pdp__star {
  width: var(--pdp-star);
  height: var(--pdp-star);
}

body.hattrick-pdp .hattrick-pdp-reviews {
  margin: 0 0 48px;
  padding-inline: 10px;
  color: #0d0702;
}

body.hattrick-pdp .hattrick-pdp-reviews__title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
  color: #112847;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

body.hattrick-pdp .hattrick-pdp-reviews__demo {
  padding: 2px 10px;
  border-radius: 99px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

body.hattrick-pdp .hattrick-pdp-reviews__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

body.hattrick-pdp .hattrick-pdp-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 361px;
  max-width: 100%;
}

body.hattrick-pdp .hattrick-pdp-bars__head {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  column-gap: 8px;
}

body.hattrick-pdp .hattrick-pdp-bars__score {
  color: #000;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

body.hattrick-pdp .hattrick-pdp-bars__note {
  grid-column: 1 / -1;
  color: rgba(13, 7, 2, 0.6);
  font-size: 14px;
  font-weight: 300;
  line-height: 14px;
}

body.hattrick-pdp .hattrick-pdp-bars__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

body.hattrick-pdp .hattrick-pdp-bars__label {
  flex: none;
  min-width: 45px;
  color: #112847;
  font-size: 16px;
  font-weight: 300;
  line-height: 16px;
}

body.hattrick-pdp .hattrick-pdp-bars__track {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  background: #b8b8b8;
  overflow: hidden;
}

body.hattrick-pdp .hattrick-pdp-bars__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: #112847;
}

body.hattrick-pdp .hattrick-pdp-bars__pct {
  flex: none;
  min-width: 36px;
  color: #656565;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  text-align: center;
}

body.hattrick-pdp .hattrick-pdp-overall {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

body.hattrick-pdp .hattrick-pdp-overall__title {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

body.hattrick-pdp .hattrick-pdp-overall__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.hattrick-pdp .hattrick-pdp-overall__score {
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
}

body.hattrick-pdp .hattrick-pdp-overall__note {
  color: rgba(13, 7, 2, 0.6);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

body.hattrick-pdp .hattrick-pdp-write {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 281px;
  max-width: 100%;
}

body.hattrick-pdp .hattrick-pdp-write__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

body.hattrick-pdp .hattrick-pdp-write__button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 42px;
  padding: 10px 24px;
  border: 1px solid #0d0702;
  border-radius: 2px;
  color: #0d0702;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}

body.hattrick-pdp .hattrick-pdp-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

body.hattrick-pdp .hattrick-pdp-review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #cacaca;
}

body.hattrick-pdp .hattrick-pdp-review__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.hattrick-pdp .hattrick-pdp-review__avatar {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

body.hattrick-pdp .hattrick-pdp-review__avatar--empty {
  background: #e4e4e7;
}

body.hattrick-pdp .hattrick-pdp-review__who {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

body.hattrick-pdp .hattrick-pdp-review__who strong {
  color: #000;
  font-size: 19px;
  font-weight: 400;
  line-height: 19px;
}

body.hattrick-pdp .hattrick-pdp-review__line {
  display: flex;
  align-items: center;
  gap: 16px;
  direction: ltr;
}

body.hattrick-pdp .hattrick-pdp-review__score {
  display: inline-block;
  margin-inline-end: -12px;
  color: #000;
  font-size: 19px;
  line-height: 19px;
}

body.hattrick-pdp .hattrick-pdp-review__date {
  color: rgba(0, 0, 0, 0.4);
  font-size: 16px;
  line-height: 16px;
}

body.hattrick-pdp .hattrick-pdp-review__text {
  margin: 0;
  color: #373737;
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
}

body.hattrick-pdp .hattrick-pdp-review__photos {
  display: flex;
  gap: 8px;
}

body.hattrick-pdp .hattrick-pdp-review__photo {
  width: 76px;
  height: 76px;
  object-fit: cover;
}

body.hattrick-pdp .hattrick-pdp-review__photo--demo {
  display: block;
  background: #ececec;
}

/* ---------- product sliders (related / bought together) ---------- */
body.hattrick-pdp .container--product-details .s-slider-block__title-right h2,
body.hattrick-pdp .container--product-details .s-slider-block__title-right .s-slider-block__title-text {
  color: #112847;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card .product-card__image {
  background: #f0f3f5;
  border-radius: 0;
}

body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card .product-card__title,
body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card .product-card__title a {
  color: #112847;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

body.hattrick-pdp .hattrick-pdp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}

body.hattrick-pdp .hattrick-pdp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #cad5e2;
  background: #fff;
  color: #112847;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

body.hattrick-pdp .hattrick-pdp-chip--out {
  color: #9aa5b5;
  text-decoration: line-through;
}

/* Chips that work: buttons (pick a size) or links (go to the product page). */
body.hattrick-pdp button.hattrick-pdp-chip,
body.hattrick-pdp a.hattrick-pdp-chip {
  margin: 0;
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

body.hattrick-pdp button.hattrick-pdp-chip:hover,
body.hattrick-pdp a.hattrick-pdp-chip:hover {
  border-color: #112847;
}

body.hattrick-pdp button.hattrick-pdp-chip:focus-visible,
body.hattrick-pdp a.hattrick-pdp-chip:focus-visible {
  outline: 2px solid #112847;
  outline-offset: 2px;
}

body.hattrick-pdp .hattrick-pdp-chip.is-selected {
  border-color: #112847;
  background: #112847;
  color: #fff;
}

/* The add-to-cart button was pressed before a size was chosen. */
body.hattrick-pdp .hattrick-pdp-chips--need .hattrick-pdp-chip:not(.hattrick-pdp-chip--more) {
  border-color: #dc2626;
}

body.hattrick-pdp .hattrick-pdp-chips--need::after {
  content: "اختر المقاس";
  flex-basis: 100%;
  color: #dc2626;
  font-size: 12px;
  line-height: 16px;
}

body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card .total-price,
body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card .total-price i {
  color: #112847;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

/* Chips beyond the visible count are hidden, "+N" stands in for them. */
body.hattrick-pdp .hattrick-pdp-chip--more {
  direction: ltr;
  border-color: transparent;
  background: transparent;
  color: #4c5f76;
  padding: 0 4px;
}

body.hattrick-pdp .hattrick-pdp-chip--more-mobile {
  display: none;
}

body.hattrick-pdp .hattrick-pdp-chip[data-rank="6"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="7"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="8"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="9"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="10"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="11"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="12"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="13"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="14"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="15"],
body.hattrick-pdp .hattrick-pdp-chip[data-rank="16"] {
  display: none;
}

/* Wishlist heart over the gallery: the box is brand navy at 70% (the theme's .share-and-wish
   opacity) with a white heart; once the product is in the wishlist (the theme adds .is-added
   to .btn--wishlist) the box turns solid white and the heart is red (the theme's own red). */
body.hattrick-pdp .share-and-wish:has(.btn--wishlist.is-added) {
  opacity: 1;
}

body.hattrick-pdp .share-and-wish .btn--wishlist.is-added button {
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(17, 40, 71, 0.12);
}

body.hattrick-pdp .share-and-wish .btn--wishlist.is-added,
body.hattrick-pdp .share-and-wish .btn--wishlist.is-added button,
body.hattrick-pdp .share-and-wish .btn--wishlist.is-added i {
  color: #ef4444 !important;
}

/* The share button is hidden on every screen; only the wishlist heart stays over the gallery. */
body.hattrick-pdp .share-and-wish salla-social-share {
  display: none !important;
}

/* ---------- phones and tablets (design: 440px) ---------- */
@media (max-width: 991px) {
  /* The gallery comes first; title, meta and price sit under its thumbnails (Figma "PDP 1"). */
  body.hattrick-pdp .product-single__columns {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  body.hattrick-pdp .product-single__info {
    display: contents !important;
  }

  body.hattrick-pdp .product-single__slider {
    order: 1;
    width: 100%;
    max-width: none;
    margin-bottom: 16px;
    padding-inline: 0;
  }

  /* Phones: gallery, then the "original product" line, then name, rating and price. */
  body.hattrick-pdp .hattrick-pdp-authentic { order: 2; justify-content: center; margin: 0 0 12px; }
  body.hattrick-pdp .product-single__info .product-single__title { order: 3; margin-bottom: 8px; font-size: 18px; line-height: 26px; }
  body.hattrick-pdp .hattrick-pdp-meta { order: 4; margin-bottom: 8px; }
  body.hattrick-pdp .product-single__info .product-price { order: 5; margin-bottom: 16px; }
  body.hattrick-pdp .product-single__info .product-single__stock-info { order: 6; }
  body.hattrick-pdp .hattrick-pdp-sizeguide { order: 7; margin-top: 8px; }
  body.hattrick-pdp .product-single__info salla-product-options { order: 8; }
  body.hattrick-pdp .hattrick-pdp-features { order: 9; margin-top: 24px; padding-top: 24px; gap: 20px; }
  body.hattrick-pdp .hattrick-pdp-gift { order: 10; margin-top: 32px; }
  body.hattrick-pdp .hattrick-pdp-installments { order: 11; margin: 28px 0 24px; }
  body.hattrick-pdp .hattrick-pdp-accordions { order: 12; margin-top: 8px; margin-bottom: 24px; }


  body.hattrick-pdp .product-single__info .s-product-options-grid-mode {
    gap: 12px;
  }

  body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper {
    gap: 12px;
  }

  body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper > div {
    width: min(92px, calc((100% - 36px) / 4));
  }

  body.hattrick-pdp .product-single__info .s-product-options-grid-mode-span {
    min-height: 40px;
  }

  body.hattrick-pdp .hattrick-pdp-features__icon {
    width: 50px;
    height: 42px;
  }

  body.hattrick-pdp .hattrick-pdp-strip {
    margin: 24px 0;
  }

  /* A row that scrolls sideways, as in the design. */
  body.hattrick-pdp .hattrick-pdp-strip__inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.hattrick-pdp .hattrick-pdp-strip__inner::-webkit-scrollbar {
    display: none;
  }

  body.hattrick-pdp .hattrick-pdp-strip__item {
    flex: 0 0 auto;
    gap: 8px;
    padding-bottom: 12px;
    scroll-snap-align: start;
  }

  body.hattrick-pdp .hattrick-pdp-strip__icon {
    height: 30px;
    max-width: 80px;
  }

  body.hattrick-pdp .hattrick-pdp-strip__body {
    gap: 8px;
  }

  body.hattrick-pdp .hattrick-pdp-strip__body strong {
    gap: 6px;
    font-size: 14px;
    line-height: 14px;
  }

  body.hattrick-pdp .hattrick-pdp-strip__info {
    width: 12px;
    height: 12px;
  }

  body.hattrick-pdp .hattrick-pdp-strip__body span {
    font-size: 12px;
    line-height: 12px;
  }

  /* Reviews: one summary row (rating on one side, write button on the other). */
  body.hattrick-pdp .hattrick-pdp-reviews__title {
    font-size: 20px;
    line-height: 28px;
  }

  body.hattrick-pdp .hattrick-pdp-reviews__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px 12px;
    margin-bottom: 24px;
  }

  body.hattrick-pdp .hattrick-pdp-bars {
    display: contents;
  }

  body.hattrick-pdp .hattrick-pdp-bars__head {
    grid-column: 1;
    grid-row: 1;
  }

  body.hattrick-pdp .hattrick-pdp-bars__row {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  body.hattrick-pdp .hattrick-pdp-overall {
    display: none;
  }

  body.hattrick-pdp .hattrick-pdp-write {
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }

  body.hattrick-pdp .hattrick-pdp-write__title {
    display: none;
  }

  body.hattrick-pdp .hattrick-pdp-write__button {
    height: 34px;
    padding: 6px 18px;
    white-space: nowrap;
  }

  body.hattrick-pdp .hattrick-pdp-review__avatar {
    width: 40px;
    height: 40px;
  }

  body.hattrick-pdp .hattrick-pdp-review__who strong {
    font-size: 14px;
    line-height: 14px;
  }

  body.hattrick-pdp .hattrick-pdp-review__line {
    gap: 12px;
  }

  body.hattrick-pdp .hattrick-pdp-review__score,
  body.hattrick-pdp .hattrick-pdp-review__date {
    font-size: 14px;
    line-height: 14px;
  }

  body.hattrick-pdp .hattrick-pdp-review__photo {
    width: 66px;
    height: 66px;
  }

  body.hattrick-pdp .hattrick-pdp-chip {
    min-width: 30px;
    height: 26px;
    padding: 0 6px;
    font-size: 13px;
  }

  body.hattrick-pdp .hattrick-pdp-chip[data-rank="4"],
  body.hattrick-pdp .hattrick-pdp-chip[data-rank="5"] {
    display: none;
  }

  body.hattrick-pdp .hattrick-pdp-chip--more-desktop {
    display: none;
  }

  body.hattrick-pdp .hattrick-pdp-chip--more-mobile {
    display: inline-flex;
  }
}

/* ---------- desktop layout: image grid + info column ---------- */
@media (min-width: 992px) {
  body.hattrick-pdp .product-single__columns {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2.4%;
  }

  body.hattrick-pdp .product-single__slider {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding-inline: 0;
  }

  body.hattrick-pdp .product-single__info {
    display: flex !important;
    flex-direction: column;
    flex: 0 0 34.2%;
    width: 34.2% !important;
    max-width: none;
    padding-inline: 0;
  }

  body.hattrick-pdp .product-single__slider .product-single__media-col {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .product-single__main-media {
    overflow: visible;
  }

  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .details-slider .swiper {
    height: auto !important;
    overflow: visible;
  }

  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .details-slider .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .details-slider .swiper-slide {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1;
    background: #eef0f2;
    overflow: hidden;
  }

  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .details-slider .product-single__slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .details-slider .s-slider-thumbs,
  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .details-slider .swiper-button-next,
  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .details-slider .swiper-button-prev,
  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .details-slider .s-slider-nav-arrow {
    display: none !important;
  }

  /* Slider mode (fewer than 4 photos): one square photo, thumbnails under it. */
  body.hattrick-pdp.hattrick-pdp-gallery-slider .details-slider .swiper-slide {
    aspect-ratio: 1 / 1;
    background: #eef0f2;
    overflow: hidden;
  }

  body.hattrick-pdp.hattrick-pdp-gallery-slider .details-slider .product-single__slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.hattrick-pdp.hattrick-pdp-gallery-slider .details-slider .s-slider-thumbs {
    margin-top: 8px;
  }

  body.hattrick-pdp.hattrick-pdp-gallery-slider .details-slider .s-slider-thumbs .swiper-slide {
    width: 120px !important;
    height: 120px;
  }

  body.hattrick-pdp.hattrick-pdp-gallery-slider .details-slider .s-slider-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
  }
}

/* ---------- arrows over the thumbnail row (phones; desktop slider mode) ---------- */
body.hattrick-pdp .details-slider .s-slider-thumbs {
  position: relative;
}

body.hattrick-pdp .hattrick-pdp-thumbs-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin: -13px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 40, 71, 0.04);
  color: #112847;
  cursor: pointer;
}

body.hattrick-pdp .hattrick-pdp-thumbs-arrow[hidden] {
  display: none;
}

body.hattrick-pdp .hattrick-pdp-thumbs-arrow--prev {
  inset-inline-start: 7.5px;
}

body.hattrick-pdp .hattrick-pdp-thumbs-arrow--next {
  inset-inline-end: 7.5px;
}

body.hattrick-pdp .hattrick-pdp-thumbs-arrow:disabled {
  background: rgba(255, 255, 255, 0.55);
  color: #8a94a3;
  cursor: default;
}

body.hattrick-pdp .hattrick-pdp-thumbs-arrow svg {
  display: block;
}

/* Desktop: the arrows exist only when the thumbnail slider is shown (fewer than 4 photos
   hides the thumbnails; the grid has none). */
@media (min-width: 992px) {
  body.hattrick-pdp:not(.hattrick-pdp-gallery-slider) .hattrick-pdp-thumbs-arrow {
    display: none;
  }
}

/* =========================================================
   PIXEL PASS (loaded after src/pdp.css, so it wins the cascade)
   Spacing and sizes measured from the Figma frames:
   desktop 1512 (content 1400, info column 479, image grid 888) and
   mobile 440 (16px side margins, blocks 32px apart).
   ========================================================= */

/* The design has no breadcrumb; an in-stock line is not drawn either
   (an out-of-stock product keeps its notice). */
body.hattrick-pdp .container--breadcrumbs {
  display: none !important;
}

body.hattrick-pdp .product-single__info .product-single__stock-info:has(.sicon-check-circle) {
  display: none !important;
}

/* ---------- shared (both breakpoints) ---------- */
/* 16px between the header and the content (padding, so margins cannot collapse). */
body.hattrick-pdp .container--product-details {
  margin-top: 0;
  padding-top: 16px;
}

/* Title box 32px (text 18/28 on top), meta 20px, authentic 21.7px, price 24px. */
body.hattrick-pdp .product-single__info .product-single__title {
  margin: 0;
  padding-bottom: 4px;
  font-size: 18px;
  line-height: 28px;
}

body.hattrick-pdp .hattrick-pdp-meta {
  margin: 10px 0 0;
}

body.hattrick-pdp .hattrick-pdp-authentic {
  margin: 16px 0 0;
}

body.hattrick-pdp .product-single__info .product-price {
  margin: 16px 0 0;
  line-height: 24px;
}

/* Divider above the sizes lives on the guide row; the sizes label then sits on the
   same row as the guide (guide on the left, label on the right). */
body.hattrick-pdp .hattrick-pdp-sizeguide {
  align-self: stretch;
  justify-content: flex-end;
  align-items: center;
  box-sizing: content-box;
  width: auto;
  height: 21px;
  margin: 16px 0 -21px;
  padding: 24px 0 0;
  border-top: 1px solid #e4e4e7;
  pointer-events: none;
}

body.hattrick-pdp .hattrick-pdp-sizeguide > * {
  pointer-events: auto;
}

body.hattrick-pdp .product-single__info salla-product-options {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* The theme insets the options 20px; the design runs them edge to edge. */
body.hattrick-pdp .product-single__info salla-product-options,
body.hattrick-pdp .product-single__info salla-conditional-fields,
body.hattrick-pdp .product-single__info .s-product-options-option-container,
body.hattrick-pdp .product-single__info .s-product-options-option,
body.hattrick-pdp .product-single__info .s-product-options-option-content {
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

body.hattrick-pdp .product-single__info .s-product-options-option-label {
  min-height: 21px;
  margin: 0 0 10px;
  line-height: 21px;
}

/* Size boxes: five per row, all the same width and height. A sold-out size loses its
   text, cannot be picked and has a line through the number. */
body.hattrick-pdp .product-single__info .s-product-options-grid-mode {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 8px;
}

body.hattrick-pdp .product-single__info .s-product-options-grid-mode > label {
  width: 100% !important;
  min-width: 0 !important;
  height: 36px;
  margin: 0;
}

body.hattrick-pdp .product-single__info .s-product-options-grid-mode-span {
  width: 100% !important;
  height: 36px;
  min-height: 0 !important;
  padding: 0 4px !important;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
}

body.hattrick-pdp .product-single__info .s-product-options-option-stock-out {
  pointer-events: none;
  cursor: not-allowed;
}

body.hattrick-pdp .product-single__info .s-product-options-option-stock-out .s-product-options-grid-mode-span {
  border-color: #e4e4e7;
  background: #fafafa;
  color: #a1a1aa;
  font-size: 16px;
  line-height: 20px;
  text-decoration: line-through;
}

/* Instalment cards: logo straddles the top border, the link sits inside the box. */
body.hattrick-pdp .hattrick-pdp-installment {
  display: block;
  padding-top: 11px;
}

body.hattrick-pdp .hattrick-pdp-installment__text {
  display: block;
  height: 58px;
  padding: 14px 12px 0;
  line-height: 16px;
}

body.hattrick-pdp .hattrick-pdp-installment__logo {
  top: 11px;
  transform: translateY(-50%);
  inset-inline-start: 12px;
}

body.hattrick-pdp .hattrick-pdp-installment__more {
  position: absolute;
  right: 6px;
  bottom: 3px;
  line-height: 12px;
}

/* Accordion rows are 33px high including the line. */
body.hattrick-pdp .hattrick-pdp-accordion__head {
  box-sizing: border-box;
  height: 33px;
  min-height: 0;
}

/* ---------- desktop ---------- */
@media (min-width: 992px) {
  /* Content is 1400px wide (56px side margins at 1512). */
  body.hattrick-pdp .container--product-details {
    width: calc(100% - 112px);
    max-width: 1400px !important;
    margin-inline: auto;
    padding-inline: 0;
  }

  body.hattrick-pdp .hattrick-pdp-features {
    margin: 24px 0 0;
    padding: 40px 0 0;
    gap: 25px;
  }

  body.hattrick-pdp .hattrick-pdp-gift {
    margin: 40px 0 0;
  }

  body.hattrick-pdp .hattrick-pdp-installments {
    margin: 32px 0 0;
    column-gap: 14px;
  }

  body.hattrick-pdp .product-single__info .sticky-product-bar {
    margin: 40px 0 0;
    grid-template-columns: minmax(0, 1fr) 160px;
  }

  body.hattrick-pdp .hattrick-pdp-accordions {
    margin-top: 40px;
  }
}

/* ---------- phones and tablets ---------- */
@media (max-width: 991px) {
  body.hattrick-pdp .container--product-details {
    padding-inline: 16px;
  }

  /* Title, meta and price: 26 / 20 / 32 px, 8px apart, 14px above the gallery. */
  body.hattrick-pdp .product-single__info .product-single__title {
    padding-bottom: 0;
    line-height: 26px;
  }

  body.hattrick-pdp .hattrick-pdp-meta {
    margin-top: 8px;
  }

  body.hattrick-pdp .product-single__info .product-price {
    margin: 8px 0 0;
    line-height: 32px;
  }

  body.hattrick-pdp .product-single__info .product-price .total-price {
    line-height: 32px;
  }

  body.hattrick-pdp .product-single__info .product-price .before-price {
    line-height: 28px;
  }

  /* Gallery: full-bleed image, 8px, then 101px thumbnails; wishlist heart 32px. */
  /* 8px between the header and the first photo (the container's own 16px top padding is removed). */
  body.hattrick-pdp .container--product-details {
    padding-top: 0;
  }

  body.hattrick-pdp .product-single__slider {
    margin: 8px -16px 24px;
    width: calc(100% + 32px);
  }

  body.hattrick-pdp .share-and-wish {
    top: 14px !important;
    left: 11px !important;
    right: auto !important;
  }

  body.hattrick-pdp .share-and-wish salla-button.btn--wishlist,
  body.hattrick-pdp .share-and-wish salla-button.btn--wishlist button {
    width: 32px;
    min-width: 0;
    height: 32px;
    padding: 0;
  }

  body.hattrick-pdp .details-slider .s-slider-thumbs {
    margin-top: 8px;
  }

  body.hattrick-pdp .details-slider .s-slider-thumbs .swiper-slide {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  body.hattrick-pdp .details-slider .s-slider-thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
  }

  /* The authentic line sits centred above the name (order/margins: pdp.css). */
  body.hattrick-pdp .hattrick-pdp-authentic {
    justify-content: center;
  }

  body.hattrick-pdp .hattrick-pdp-sizeguide {
    margin: 20px 0 -21px;
    padding-top: 0;
    border-top: 0;
  }

  body.hattrick-pdp .product-single__info .s-product-options-option-label {
    margin-bottom: 16px;
  }

  body.hattrick-pdp .product-single__info .s-product-options-grid-mode {
    gap: 10px 12px;
  }

  body.hattrick-pdp .product-single__info .s-product-options-grid-mode > label,
  body.hattrick-pdp .product-single__info .s-product-options-grid-mode-span {
    height: 40px;
  }

  body.hattrick-pdp .hattrick-pdp-features {
    margin: 32px 0 0;
    padding: 32px 0 0;
    gap: 20px;
  }

  body.hattrick-pdp .hattrick-pdp-gift {
    margin: 32px 0 0;
  }

  body.hattrick-pdp .hattrick-pdp-gift__text span {
    line-height: 17px;
  }

  /* Cards are 204px wide, 17px apart, slightly wider than the 408px column. */
  body.hattrick-pdp .hattrick-pdp-installments {
    margin: 32px -8.5px 0;
    column-gap: 17px;
  }

  body.hattrick-pdp .hattrick-pdp-accordions {
    margin: 32px 0 0;
  }

  /* Quantity 142px, button 258px, 8px between; Apple Pay 8px below. */
  body.hattrick-pdp .product-single__info .sticky-product-bar {
    margin: 40px 0 0;
    grid-template-columns: minmax(0, 1fr) 142px;
  }

  body.hattrick-pdp .hattrick-pdp-strip {
    margin: 40px 0;
    padding-inline: 0;
  }

  body.hattrick-pdp .hattrick-pdp-reviews {
    margin-bottom: 40px;
    padding-inline: 0;
  }

  body.hattrick-pdp .hattrick-pdp-reviews__title {
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 16px;
  }
}

/* ---------- second pass (measured on the Draft preview) ---------- */
/* The theme puts a gap between the empty hook elements that come first in the
   column; the design spacing is made of explicit margins only. */
body.hattrick-pdp .product-single__columns,
body.hattrick-pdp .product-single__info {
  row-gap: 0;
}

body.hattrick-pdp .hattrick-pdp-sizeguide[hidden] {
  display: none !important;
}

/* Accordion row: 32px head + 1px line = 33px. */
body.hattrick-pdp .hattrick-pdp-accordion__head {
  height: 32px;
}

@media (max-width: 991px) {
  /* Wishlist heart sits 11px from the image corner (the media column is inset 4px). */
  body.hattrick-pdp .share-and-wish {
    left: 15px !important;
  }

  /* The theme sizes thumbnails as a quarter; the design wants 101px squares. */
  body.hattrick-pdp .details-slider .s-slider-thumbs .swiper-slide {
    width: 101px !important;
    height: 101px;
  }

  body.hattrick-pdp .hattrick-pdp-gift__button {
    min-width: 138px;
  }

  body.hattrick-pdp .hattrick-pdp-strip__item {
    padding-bottom: 9px;
  }
}

/* Empty theme blocks that carry margins must not sit in front of the title. */
body.hattrick-pdp .product-single__info .s-block--bundle-out-of-stock-alternative,
body.hattrick-pdp .product-single__info salla-quick-order,
body.hattrick-pdp .product-single__info salla-cashback-banner {
  order: 20;
  margin-top: 0 !important;
}


/* Instalment cards: the logo sits on the top-left corner of the box (as in the design);
   the box grows when the text wraps, so the text never touches the "اعرف المزيد" link. */
body.hattrick-pdp .hattrick-pdp-installment__logo {
  inset-inline-start: auto;
  left: 0;
}

body.hattrick-pdp .hattrick-pdp-installment__text {
  height: auto;
  min-height: 74px;
  padding: 18px 10px 34px;
}

body.hattrick-pdp .hattrick-pdp-installment__more {
  right: 10px;
  bottom: 12px;
}

/* ---------- Apple Pay bar (Figma: navy, 48px, "ادفع بواسطة" + logo) ---------- */
body.hattrick-pdp .hattrick-pdp-pay {
  display: none;
  grid-column: 1 / -1;
  grid-row: 2;
  z-index: 1;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 48px;
  background: #112847;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  pointer-events: none;
}

body.hattrick-pdp .hattrick-pdp-pay__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 28px;
}

body.hattrick-pdp .hattrick-pdp-pay__img {
  display: block;
  width: 46px;
  height: auto;
}

/* Shown only while Apple's button exists; that button covers the bar, invisible. */
body.hattrick-pdp .sticky-product-bar:has(salla-quick-buy apple-pay-button) .hattrick-pdp-pay {
  display: flex;
}

body.hattrick-pdp .product-single__info .sticky-product-bar salla-quick-buy {
  position: relative;
  z-index: 2;
  justify-self: stretch;
  width: 100% !important;
  max-width: none !important;
  height: 48px;
}

body.hattrick-pdp .product-single__info .sticky-product-bar salla-quick-buy apple-pay-button {
  width: 100% !important;
  min-width: 100%;
  height: 48px;
  opacity: 0;
  cursor: pointer;
}


/* ---------- third pass: numbers from the Figma frames ---------- */
/* Price row is 24px high. */
body.hattrick-pdp .product-single__info .product-price {
  height: 24px;
  align-items: center;
}

/* The theme leaves 20px under the size grid; the design adds nothing there. */
body.hattrick-pdp .product-single__info .s-product-options-grid-mode,
body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper {
  margin-bottom: 0 !important;
}

body.hattrick-pdp .product-single__info .s-product-options-option-container + .s-product-options-option-container {
  margin-top: 24px;
}

/* The divider lines are 0px high in Figma; ours are 1px, so 1px comes off the padding. */
body.hattrick-pdp .hattrick-pdp-accordion__head {
  height: 32px !important;
  min-height: 32px;
}

/* Quantity box: the minus | number | plus group (123px) is centred in the box. */
body.hattrick-pdp .product-single__info .sticky-product-bar__quantity,
body.hattrick-pdp .product-single__info .sticky-product-bar salla-quantity-input {
  width: 100%;
  max-width: none;
}

body.hattrick-pdp .product-single__info .s-quantity-input-container {
  width: 100%;
  justify-content: center;
}

body.hattrick-pdp .product-single__info .s-quantity-input-input {
  flex: 0 0 43px;
  width: 43px;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  body.hattrick-pdp .hattrick-pdp-sizeguide {
    padding-top: 23px;
  }

  body.hattrick-pdp .hattrick-pdp-features {
    padding-top: 39px;
  }
}

@media (max-width: 991px) {
  body.hattrick-pdp .hattrick-pdp-features {
    padding-top: 31px;
  }

  body.hattrick-pdp .product-single__info .s-product-options-option-container + .s-product-options-option-container {
    margin-top: 30px;
  }
}

@media (max-width: 991px) {
  /* On phones the price row is 32px high (24px on desktop). */
  body.hattrick-pdp .product-single__info .product-price {
    height: 32px;
  }
}

/* Colour option under the sizes, as in the design. The theme renders it first; the
   containers sit in salla-conditional-fields, so flex order moves it without touching
   the component's nodes. The 24px (30px on phones) gap that the rules above put on the
   second container in the DOM moves to the colour container. */
body.hattrick-pdp .product-single__info salla-conditional-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.hattrick-pdp .product-single__info salla-conditional-fields > .s-product-options-option-container.s-product-options-option-container {
  order: 0;
  margin-top: 0;
}

body.hattrick-pdp .product-single__info salla-conditional-fields > .s-product-options-option-container:has(.s-product-options-thumbnails-wrapper, .s-product-options-colors-wrapper) {
  order: 1;
  margin-top: 0;
}

@media (max-width: 991px) {
  body.hattrick-pdp .product-single__info salla-conditional-fields {
    gap: 30px;
  }
}

/* ======================================================================
   Pixel review against the Figma PDP page (desktop frame 1512, phone 440)
   ====================================================================== */

/* Option labels read "اختر المقاس :": the required star becomes a colon, black text. */
body.hattrick-pdp .product-single__info .s-product-options-option-label {
  color: #000;
}

body.hattrick-pdp .product-single__info .s-product-options-option-label b > span {
  display: none;
}

body.hattrick-pdp .product-single__info .s-product-options-option-label b::after {
  content: " :";
}

/* Colour group: a 28px label row (24px on phones), medium weight, then the squares. */
body.hattrick-pdp .product-single__info .s-product-options-option-container:has(.s-product-options-thumbnails-wrapper) .s-product-options-option-label {
  min-height: 28px;
  margin-bottom: 10px;
}

body.hattrick-pdp .product-single__info .s-product-options-option-container:has(.s-product-options-thumbnails-wrapper) .s-product-options-option-label b {
  font-weight: 500;
}

body.hattrick-pdp .product-single__info .s-product-options-option-container:has(.s-product-options-thumbnails-wrapper) .s-product-options-option-content {
  position: relative;
  overflow: visible;
}

/* No check badge or dark veil on the chosen square: the design shows only its 1px frame. */
body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper .s-product-options-thumbnails-icon,
body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper label.go-to-slide::before {
  display: none;
}

/* The chosen colour's name sits under its own square, centred on it (14px). Every square
   keeps an invisible line so the group does not change height when a colour is picked. */
body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper > div > p {
  display: flex;
  justify-content: center;
  margin: 6px 0 0;
  color: #112847;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
  visibility: hidden;
}

body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper > div > input:checked ~ p {
  visibility: visible;
}

body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper label.go-to-slide {
  height: auto;
  border-width: 1px;
}

/* The theme leaves 20px under every group but the last in the DOM; the colour group is
   now the last one on screen, and the design puts nothing after it. */
body.hattrick-pdp .product-single__info salla-conditional-fields > .s-product-options-option-container {
  margin-bottom: 0;
}

body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper input:checked + label.go-to-slide {
  border-color: #000;
}

/* Feature icons: the exact size drawn in the design for each icon (--usp-w / --usp-h);
   the row is 48px high and a taller drawing overflows evenly instead of stretching it.
   Icons without a drawn size fall back to 52px wide, height from their proportions. */
body.hattrick-pdp .hattrick-pdp-features__icon {
  --usp-w: 52px;
  --usp-h: calc(var(--usp-w) * var(--usp-r, 1));
  flex: 0 0 auto;
  width: var(--usp-w);
  height: var(--usp-h);
  margin-block: min(0px, calc((48px - var(--usp-h)) / 2));
  object-fit: fill;
}

body.hattrick-pdp .hattrick-pdp-features__body {
  flex: 1 1 auto;
}

/* Instalment cards: 58px box, text 13px from the top, link inside at the bottom edge. */
body.hattrick-pdp .hattrick-pdp-installment__text {
  min-height: 58px;
  padding: 13px 6px 21px 10px;
  line-height: 20px;
}

body.hattrick-pdp .hattrick-pdp-installment__more {
  right: 6px;
  bottom: 9px;
}

/* Add to cart (in stock): bag icon, "أضف للسلة", then the price, as drawn. The label
   and the icon of the theme are replaced by the drawn ones; other states keep the
   theme's own text. */
/* The theme reverses the button's row (loader position); the design reads bag, label, price from the right. */
body.hattrick-pdp .product-single__info salla-add-product-button[product-status="sale"] .s-add-product-button-main button.s-button-btn {
  flex-direction: row !important;
}

body.hattrick-pdp .product-single__info salla-add-product-button[product-status="sale"] .s-add-product-button-main button.s-button-btn .s-button-text > span {
  gap: 4px;
  font-size: 0;
}

body.hattrick-pdp .product-single__info salla-add-product-button[product-status="sale"] .s-add-product-button-main button.s-button-btn .s-button-text > span > i,
body.hattrick-pdp .product-single__info salla-add-product-button[product-status="sale"] .s-add-product-button-main button.s-button-btn .s-button-text > svg {
  display: none;
}

body.hattrick-pdp .product-single__info salla-add-product-button[product-status="sale"] .s-add-product-button-main button.s-button-btn .s-button-text > span::before {
  content: "أضف للسلة";
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}

body.hattrick-pdp .product-single__info salla-add-product-button[product-status="sale"] .s-add-product-button-main button.s-button-btn .s-button-text > span::after {
  content: "";
  order: -1;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 991px) {
  body.hattrick-pdp .product-single__info .s-product-options-option-container:has(.s-product-options-thumbnails-wrapper) .s-product-options-option-label {
    min-height: 24px;
    margin-bottom: 16px;
  }

  /* Four squares of 92px spread over the 408px column (13.33px apart). */
  body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper {
    gap: 13.33px;
  }

  body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper > div {
    width: min(92px, calc((100% - 40px) / 4));
  }

  body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper input:checked + label.go-to-slide {
    border-color: #112847;
  }

  body.hattrick-pdp .hattrick-pdp-features__icon {
    --usp-w: 50px;
    --usp-h: calc(var(--usp-w) * var(--usp-r, 1));
    width: var(--usp-w);
    height: var(--usp-h);
  }

  body.hattrick-pdp .hattrick-pdp-features__body {
    gap: 8px;
  }

  body.hattrick-pdp .hattrick-pdp-features__body strong {
    font-size: 15px;
    line-height: 15px;
  }

  body.hattrick-pdp .product-single__info .s-product-options-grid-mode-span {
    font-size: 18px;
  }

  body.hattrick-pdp .hattrick-pdp-gift {
    gap: 9px;
  }

  body.hattrick-pdp .hattrick-pdp-gift__text {
    flex: 1 1 auto;
    max-width: none;
  }

  body.hattrick-pdp .hattrick-pdp-gift__text span {
    font-size: 14px;
  }

  body.hattrick-pdp .hattrick-pdp-installment__text {
    padding-right: 10px;
  }

  body.hattrick-pdp .hattrick-pdp-installment__more {
    right: 10px;
    color: #27272a;
  }

  body.hattrick-pdp .product-single__info salla-add-product-button[product-status="sale"] .s-add-product-button-main button.s-button-btn .s-button-text > span::before {
    font-size: 18px;
  }

  body.hattrick-pdp .hattrick-pdp-pay {
    font-size: 18px;
  }
}

/* ---- strip and reviews (Figma desktop frame) ---- */
@media (min-width: 992px) {
  /* Items sit 182px apart at the 1512 frame. */
  body.hattrick-pdp .hattrick-pdp-strip__inner {
    column-gap: clamp(32px, 12.04vw, 182px);
  }

  /* Title block is 63px high before the summary row. */
  body.hattrick-pdp .hattrick-pdp-reviews__title {
    margin-bottom: 31px;
  }

  body.hattrick-pdp .hattrick-pdp-overall {
    width: 266px;
    max-width: 100%;
  }
}

body.hattrick-pdp .hattrick-pdp-reviews {
  padding-inline: 0;
}

/* Rating bars: head, 16px, then rows 24px high and 6px apart. */
body.hattrick-pdp .hattrick-pdp-bars {
  gap: 0;
}

body.hattrick-pdp .hattrick-pdp-bars__head {
  margin-bottom: 16px;
}

body.hattrick-pdp .hattrick-pdp-bars__head .hattrick-pdp__stars {
  gap: 2px;
}

body.hattrick-pdp .hattrick-pdp-bars__row {
  margin-bottom: 0;
}

body.hattrick-pdp .hattrick-pdp-bars__row + .hattrick-pdp-bars__row {
  margin-top: 6px;
}

/* Stars of the summary head are navy, as drawn (the others stay gold). */
body.hattrick-pdp .hattrick-pdp__star--navy {
  fill: #112847;
}

body.hattrick-pdp .hattrick-pdp-overall__note {
  margin-top: -2px;
}

@media (max-width: 991px) {
  /* Phone summary: head, 16px, then the rows 6px apart. */
  body.hattrick-pdp .hattrick-pdp-reviews__summary {
    row-gap: 6px;
  }

  body.hattrick-pdp .hattrick-pdp-bars__head {
    margin-bottom: 10px;
  }

  body.hattrick-pdp .hattrick-pdp-bars__row + .hattrick-pdp-bars__row {
    margin-top: 0;
  }
}

/* ---- USP strip: a row that scrolls sideways on every screen ---- */
/* Cells never wrap and start from the right edge (the start side in RTL); when they do not
   fit the row scrolls. */
body.hattrick-pdp .hattrick-pdp-strip__inner {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

body.hattrick-pdp .hattrick-pdp-strip__item {
  flex: 0 0 auto;
}

@media (min-width: 992px) {
  body.hattrick-pdp .hattrick-pdp-strip__inner {
    padding-bottom: 8px;
  }

  body.hattrick-pdp .hattrick-pdp-strip__inner[data-count="4"],
  body.hattrick-pdp .hattrick-pdp-strip__inner[data-count="5"] {
    column-gap: 48px;
  }
}

/* ---- Strip: cells as drawn ---- */
/* Icon height 56px (66.78px for the shirt's two drawings, --usp-k = 1.1925); the text block
   is centred on the icon and the rule sits 25px under it. Cells are centred on the icon
   (the weight cell is shorter, so it is pushed down by half the difference). */
body.hattrick-pdp .hattrick-pdp-strip__inner {
  align-items: flex-start;
}

body.hattrick-pdp .hattrick-pdp-strip__icon {
  height: calc(56px * var(--usp-k, 1));
  width: auto;
}

body.hattrick-pdp .hattrick-pdp-strip__item {
  padding-bottom: 24px;
}

body.hattrick-pdp .hattrick-pdp-strip__inner[data-tall] .hattrick-pdp-strip__item--short {
  margin-top: 5.39px;
}

@media (max-width: 991px) {
  body.hattrick-pdp .hattrick-pdp-strip__icon {
    height: calc(30.5px * var(--usp-k, 1));
    max-width: 80px;
  }

  body.hattrick-pdp .hattrick-pdp-strip__inner[data-tall] .hattrick-pdp-strip__item--short {
    margin-top: 2.9px;
  }
}

/* ---------- sticky info column (desktop) ---------- */
.hattrick-pdp-barpay { display: none; }

@media (min-width: 992px) {
  body.hattrick-pdp .product-single__columns {
    align-items: flex-start;
  }

  /* State (top / bottom / float) is switched by watchStickyInfo() in pdp.js. */
  body.hattrick-pdp .product-single__info {
    position: sticky;
    top: var(--pdp-sticky-top, 16px);
    margin-top: var(--pdp-sticky-mt, 0);
    align-self: flex-start;
  }
}

/* ---------- purchase bar pinned to the bottom of the screen (phones, Figma 5637:6581) ---------- */
@media (max-width: 991px) {
  body.hattrick-pdp {
    padding-bottom: 160px;
  }

  body.hattrick-pdp .product-single__info .sticky-product-bar {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 50 !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 11px 17px 11px;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) 142px;
    background: #fff;
    border-top: 1px solid #e4e4e7;
    border-radius: 0;
    box-shadow: none !important;
    transform: none !important;
  }

  body.hattrick-pdp .product-single__info .sticky-product-bar .s-quantity-input-input,
  body.hattrick-pdp .product-single__info .sticky-product-bar salla-quick-buy,
  body.hattrick-pdp .product-single__info .sticky-product-bar .hattrick-pdp-pay {
    height: 40px;
  }

  body.hattrick-pdp .hattrick-pdp-barpay {
    display: block;
    grid-column: 1 / -1;
    grid-row: 3;
    height: 38px;
    margin-top: 3px;
    overflow: hidden;
    scrollbar-width: none;
  }

  /* Two copies of the list side by side, moved half their width: a seamless slow loop.
     It stops while the row is touched, and is a plain scrollable row for people who asked
     for less motion. */
  body.hattrick-pdp .hattrick-pdp-barpay__track {
    display: flex;
    width: max-content;
    animation: hattrick-pdp-barpay 30s linear infinite;
    animation-duration: var(--pdp-barpay-time, 30s);
  }

  body.hattrick-pdp .hattrick-pdp-barpay:active .hattrick-pdp-barpay__track {
    animation-play-state: paused;
  }

  body.hattrick-pdp .hattrick-pdp-barpay__track > ul {
    flex: none;
    padding-inline-end: 4px;
  }

  @keyframes hattrick-pdp-barpay {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    body.hattrick-pdp .hattrick-pdp-barpay {
      overflow-x: auto;
    }

    body.hattrick-pdp .hattrick-pdp-barpay__track {
      animation: none;
    }

    body.hattrick-pdp .hattrick-pdp-barpay__track > ul[aria-hidden] {
      display: none;
    }
  }

  body.hattrick-pdp .hattrick-pdp-barpay::-webkit-scrollbar { display: none; }

  body.hattrick-pdp .hattrick-pdp-barpay ul {
    display: flex;
    gap: 8px;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The mini icons sit in a roomy 3:2 picture (a bank or Apple Pay mark fills barely half of
     it). Each cell is as wide as the mark itself, the picture is centred and overflows the
     cell, so the marks are 8px apart whatever their shape. */
  body.hattrick-pdp .hattrick-pdp-barpay li {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--pdp-pay-w, 36px);
    height: 38px;
  }

  body.hattrick-pdp .hattrick-pdp-barpay li:has(img[alt="mada"]) { --pdp-pay-w: 38px; }
  body.hattrick-pdp .hattrick-pdp-barpay li:has(img[alt="credit_card"]) { --pdp-pay-w: 37px; }
  body.hattrick-pdp .hattrick-pdp-barpay li:has(img[alt="bank"]) { --pdp-pay-w: 23px; }
  body.hattrick-pdp .hattrick-pdp-barpay li:has(img[alt="apple_pay"]) { --pdp-pay-w: 26px; }
  body.hattrick-pdp .hattrick-pdp-barpay li:has(img[alt="COD"]) { --pdp-pay-w: 25px; }
  body.hattrick-pdp .hattrick-pdp-barpay li:has(img[alt="tamara_installment"]) { --pdp-pay-w: 30px; }
  body.hattrick-pdp .hattrick-pdp-barpay li:has(img[alt="tabby_installment"]) { --pdp-pay-w: 44px; }

  body.hattrick-pdp .hattrick-pdp-barpay img {
    display: block;
    flex: none;
    width: 44px;
    height: 30px;
    max-width: none;
    object-fit: contain;
  }

  /* Everything fits in the row: no need to move. */
  body.hattrick-pdp .hattrick-pdp-barpay--static .hattrick-pdp-barpay__track {
    animation: none;
    justify-content: center;
    width: 100%;
  }

  body.hattrick-pdp .hattrick-pdp-barpay--static .hattrick-pdp-barpay__track > ul[aria-hidden] {
    display: none;
  }

  /* The methods spread over the whole strip, first mark at one edge and last at the other
     (capped on wide screens so they do not drift apart). */
  body.hattrick-pdp .hattrick-pdp-barpay--static .hattrick-pdp-barpay__track > ul:first-child {
    justify-content: space-between;
    width: 100%;
    max-width: 420px;
    padding-inline-end: 0;
  }
}

/* Sold-out colour: no "نفدت الكمية" badge. The square is dimmed, cannot be picked, and a
   thin diagonal line runs through it, like the struck-out sold-out size. */
body.hattrick-pdp .product-single__info .s-product-options-thumbnails-stock-badge {
  display: none !important;
}

body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper .s-product-options-option-stock-out {
  position: relative;
}

body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper .s-product-options-option-stock-out label.go-to-slide {
  position: relative;
  border-color: #e4e4e7;
  cursor: not-allowed;
}

body.hattrick-pdp .product-single__info .s-product-options-thumbnails-wrapper .s-product-options-option-stock-out label.go-to-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 0.75px), #71717a calc(50% - 0.75px), #71717a calc(50% + 0.75px), transparent calc(50% + 0.75px));
  pointer-events: none;
}

body.hattrick-pdp .hattrick-pdp-pay[hidden] {
  display: none !important;
}

/* No wallet on the device: the pay bar is hidden, so the bar is one row shorter. */
@media (max-width: 991px) {
  body.hattrick-pdp:has(.hattrick-pdp-pay[hidden]) {
    padding-bottom: 120px;
  }

  body.hattrick-pdp .sticky-product-bar:has(.hattrick-pdp-pay[hidden]) .hattrick-pdp-barpay {
    grid-row: 2;
    margin-top: 0;
  }
}

/* No Apple Pay on this device: its (empty) button must not keep a 48px row. */
body.hattrick-pdp .sticky-product-bar:has(.hattrick-pdp-pay[hidden]) salla-quick-buy {
  display: none !important;
}

/* Missing required option (add-to-cart pressed too early). */
body.hattrick-pdp .product-single__info .hattrick-pdp-need .s-product-options-option-label,
body.hattrick-pdp .product-single__info .hattrick-pdp-need .s-product-options-option-label b {
  color: #dc2626;
}

body.hattrick-pdp .product-single__info .hattrick-pdp-need .s-product-options-option-content::after {
  content: "يرجى الاختيار قبل الإضافة للسلة";
  display: block;
  margin-top: 8px;
  color: #dc2626;
  font-size: 12px;
  line-height: 16px;
}

/* ---------- phone: texts under the photos, matched to the designer's frame "PDP (1) 1" ----------
   (440px frame, measured: thumbnails -> "original" line 20px, line -> name 20px, name -> rating
   11px (3px + the rating row's own 8px), rating -> price 10px; price 24px bold, old price 18px medium, rating text 15px.) */
@media (max-width: 991px) {
  body.hattrick-pdp .product-single__slider {
    margin-bottom: 20px;
  }

  body.hattrick-pdp .hattrick-pdp-authentic {
    margin: 0 0 20px !important;
    justify-content: center;
  }

  body.hattrick-pdp .hattrick-pdp-authentic__more {
    margin-inline-start: 3px;
  }

  body.hattrick-pdp .product-single__info .product-single__title {
    margin-bottom: 3px;
  }

  body.hattrick-pdp .product-single__info .product-price {
    margin-top: 10px;
  }

  body.hattrick-pdp .product-single__info .product-price .total-price,
  body.hattrick-pdp .product-single__info .product-price .total-price i {
    font-weight: 700;
  }

  /* The riyal sign is smaller than the digits in the design (13px wide). */
  body.hattrick-pdp .product-single__info .product-price .total-price i {
    font-size: 17px;
  }

  body.hattrick-pdp .product-single__info .product-price .before-price,
  body.hattrick-pdp .product-single__info .product-price .before-price i {
    font-weight: 500;
  }

  /* The design's 440px row (stars + rating + divider + purchases) is 406px wide, so on
     narrower phones it would touch the screen edges: everything in the row shrinks with the
     screen (exactly the design's sizes at 440px). */
  body.hattrick-pdp .hattrick-pdp-meta {
    gap: clamp(10px, 4.5vw, 20px);
  }

  body.hattrick-pdp .hattrick-pdp-meta__rating {
    gap: clamp(6px, 2.3vw, 10px);
    font-size: clamp(12px, 3.4vw, 15px);
    letter-spacing: 0;
  }

  body.hattrick-pdp .hattrick-pdp-meta__rating-text {
    font-size: clamp(12px, 3.4vw, 15px);
  }

  body.hattrick-pdp .hattrick-pdp-meta__rating .hattrick-pdp__stars {
    gap: clamp(2px, 0.9vw, 4px);
  }

  body.hattrick-pdp .hattrick-pdp-meta__rating .hattrick-pdp__star {
    width: clamp(11px, 3.2vw, 14px);
    height: clamp(11px, 3.2vw, 14px);
  }

  body.hattrick-pdp .hattrick-pdp-meta__bought {
    gap: clamp(4px, 1.4vw, 6px);
    font-size: clamp(12px, 3.64vw, 16px);
  }

  body.hattrick-pdp .hattrick-pdp-meta__bought .hattrick-pdp__icon {
    width: clamp(11px, 3.2vw, 14px);
    height: auto;
  }
}

/* A product without a store size guide keeps the guide row (its divider and spacing under the
   price) but not the link itself. */
body.hattrick-pdp .hattrick-pdp-sizeguide[data-empty] > * {
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================
   QUANTITY BOX + SLIDER CARDS (loaded last, matches Figma 5637:5110 / 5637:5398)
   ========================================================= */

/* ---------- quantity: 160x48 box (142 on phones), minus | number | plus ---------- */
body.hattrick-pdp .product-single__info .s-quantity-input-container {
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  padding: 0;
  border: 1px solid #d4d4d4;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.hattrick-pdp .product-single__info .s-quantity-input-button {
  position: relative;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
}

/* The theme's own icons are hidden; the 1px dividers belong to the buttons. */
body.hattrick-pdp .product-single__info .s-quantity-input-button span {
  visibility: hidden;
}

body.hattrick-pdp .product-single__info .s-quantity-input-decrease-button {
  border-right: 1px solid #e5e5e5;
}

body.hattrick-pdp .product-single__info .s-quantity-input-increase-button {
  border-left: 1px solid #e5e5e5;
}

/* The signs are drawn as bars, centred with auto margins on whole pixels (no sub-pixel blur),
   18px long, 2px thick, navy like the signs in the cart. minus: one bar, plus: two bars. */
body.hattrick-pdp .product-single__info .s-quantity-input-button::before,
body.hattrick-pdp .product-single__info .s-quantity-input-increase-button::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: #112847;
}

body.hattrick-pdp .product-single__info .s-quantity-input-button::before {
  width: 18px;
  height: 2px;
}

body.hattrick-pdp .product-single__info .s-quantity-input-increase-button::after {
  width: 2px;
  height: 18px;
}

body.hattrick-pdp .product-single__info .s-quantity-input-input {
  flex: 0 0 42px;
  box-sizing: border-box;
  width: 42px;
  height: 45px;
  padding: 0;
  border: 0;
  background: #f5f5f5;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

/* ---------- sliders use the full 1400px content width ---------- */
body.hattrick-pdp .container--product-details .container,
body.hattrick-pdp .container--product-details .s-blocks-wrapper {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

/* "منتجات مشابهة" (similar-products) lives in .s-before-related; it is only hidden while
   the wrapper holds no block (the empty wrapper adds a gap). Figma order: reviews, then
   "عادة ما يتم شراؤه مع", then "منتجات مشابهة". */
body.hattrick-pdp .container--product-details {
  display: flex;
  flex-direction: column;
}

body.hattrick-pdp .container--product-details > .simplified-products { order: 1; }
body.hattrick-pdp .container--product-details > .s-before-related { order: 2; }
body.hattrick-pdp .container--product-details > .s-after-related { order: 3; }

body.hattrick-pdp .container--product-details .s-before-related:not(:has(.s-block)) {
  display: none;
}

body.hattrick-pdp .container--product-details .s-slider-block__title-right h2,
body.hattrick-pdp .container--product-details .s-slider-block__title-right .s-slider-block__title-text {
  margin: 0;
}

/* "منتجات مشابهة" (and the app's "العملاء شاهدو أيضا" / "عادة ما يتم شراؤه" blocks, when a
   product has them) come from an app, so their header is drawn like the theme's slider header
   of "عادة ما يتم شراؤه مع": 24/500 title, navy underline under the title, grey line across,
   the same distance to the cards. */
body.hattrick-pdp .container--product-details :is(.similar-products__header, .customers-also-viewed__header, .customers-also-bought__header) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 32px;
  border-bottom: 1px solid #eee;
}

body.hattrick-pdp .container--product-details :is(.similar-products__header-side, .customers-also-viewed__header-side, .customers-also-bought__header-side) {
  width: auto;
  padding-bottom: 20px;
  border-bottom: 2px solid #122847;
  margin-bottom: -1px;
}

body.hattrick-pdp .container--product-details :is(.similar-products__title, .customers-also-viewed__title, .customers-also-bought__title) {
  margin: 0;
  color: #112847;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

/* The app's slider carries an empty title bar of its own (33px); our header replaces it. */
body.hattrick-pdp .container--product-details :is(.similar-products__list, .customers-also-viewed__list, .customers-also-bought__list) .s-slider-block__title {
  display: none;
}

body.hattrick-pdp .container--product-details :is(.similar-products__header, .customers-also-viewed__header, .customers-also-bought__header) .s-slider-nav-arrow {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 991px) {
  body.hattrick-pdp .container--product-details :is(.similar-products__header, .customers-also-viewed__header, .customers-also-bought__header) {
    margin-bottom: 16px;
  }
}

/* ---------- card: 268x378 tile, 15px, title 24, chips 28, price 28 (10px apart) ---------- */
body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  text-align: start;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__image {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 268 / 378;
  background: #f0f3f5;
  overflow: hidden;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__image > a {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
}

/* Photos with a white background melt into the grey tile. */
body.hattrick-pdp .container--product-details salla-products-slider .product-card__image img.main-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}

body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card > form,
body.hattrick-pdp .container--product-details salla-products-slider .product-card__content,
body.hattrick-pdp .container--product-details salla-products-slider .product-card__content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  margin: 0;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__content {
  margin-top: 15px;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__subtitle,
body.hattrick-pdp .container--product-details salla-products-slider .product-card__discount,
body.hattrick-pdp .container--product-details salla-products-slider .product-card__buttons,
body.hattrick-pdp .container--product-details salla-products-slider .product-card__enhanced-mini-cart,
body.hattrick-pdp .container--product-details salla-products-slider .product-card__promotion,
body.hattrick-pdp .container--product-details salla-products-slider .product-options:empty {
  display: none !important;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__title {
  height: 24px;
  margin: 0;
  overflow: hidden;
  text-align: start;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__title a {
  display: block;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.hattrick-pdp .container--product-details salla-products-slider .hattrick-pdp-chips {
  flex-wrap: nowrap;
  justify-content: flex-start;
  height: 28px;
  margin: 0;
  overflow: hidden;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__price {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  height: 28px;
  margin: 0;
  text-align: start;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__price .before-price,
body.hattrick-pdp .container--product-details salla-products-slider .product-card__price .before-price i {
  color: #62748e;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
}

/* ---------- card buttons: eye + heart + add, shown over the picture on hover ---------- */
body.hattrick-pdp .hattrick-pdp-card-actions {
  position: absolute;
  inset: auto 10px 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card:hover .hattrick-pdp-card-actions,
body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card:focus-within .hattrick-pdp-card-actions {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

body.hattrick-pdp .hattrick-pdp-card-actions__icons {
  display: flex;
  gap: 8px;
}

body.hattrick-pdp .hattrick-pdp-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  backdrop-filter: blur(2px);
}

body.hattrick-pdp .hattrick-pdp-card-icon__img {
  display: block;
  width: 24px;
  height: 24px;
}

body.hattrick-pdp .hattrick-pdp-card-icon.is-on .hattrick-pdp-card-icon__img {
  filter: invert(21%) sepia(97%) saturate(4000%) hue-rotate(345deg);
}

body.hattrick-pdp .hattrick-pdp-card-add {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  margin: 0;
  padding: 0 24px;
  border: 1px solid #112847;
  border-radius: 0;
  background: #112847;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

body.hattrick-pdp .hattrick-pdp-card-add--below {
  display: none;
}

/* ---------- phones: heart and eye at the top, outlined add button under the card ---------- */
@media (max-width: 991px) {
  body.hattrick-pdp .hattrick-pdp-card-actions {
    inset: 12px auto auto 12px;
    align-items: flex-start;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  body.hattrick-pdp .hattrick-pdp-card-actions__icons {
    flex-direction: column-reverse;
  }

  body.hattrick-pdp .hattrick-pdp-card-actions > .hattrick-pdp-card-add {
    display: none;
  }

  body.hattrick-pdp .hattrick-pdp-card-add--below {
    display: block;
    margin-top: 15px;
    background: #fff;
    color: #112847;
  }

  body.hattrick-pdp .container--product-details salla-products-slider .hattrick-pdp-chips .hattrick-pdp-chip {
    min-width: 34px;
    height: 28px;
  }
}

/* The theme gives every card a 10px margin and the slider a negative one to match;
   the design has 16px between cards and the slider on the content edges. */
body.hattrick-pdp .container--product-details salla-products-slider custom-salla-product-card {
  margin: 0 !important;
}

body.hattrick-pdp .container--product-details salla-products-slider .swiper {
  width: 100% !important;
  margin-inline: 0 !important;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__image {
  height: auto !important;
  max-height: none !important;
}

/* The slide wrapper carries 10px of padding from the theme; the cards fill the slide. */
body.hattrick-pdp .container--product-details salla-products-slider .s-products-slider-card {
  padding-inline: 0 !important;
}

/* Theme rules shrink buttons inside cards; ours keep their 40px circles. */
body.hattrick-pdp .container--product-details salla-products-slider .hattrick-pdp-card-icon {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: none !important;
  height: 40px !important;
  min-height: 40px !important;
}

body.hattrick-pdp .container--product-details salla-products-slider .hattrick-pdp-card-icon__img {
  width: 24px !important;
  height: 24px !important;
  max-width: none !important;
}

body.hattrick-pdp .container--product-details salla-products-slider .hattrick-pdp-card-add {
  flex: none;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
}

/* The theme hides plain buttons inside the card picture; ours must show. */
body.hattrick-pdp .container--product-details salla-products-slider .product-card__image .hattrick-pdp-card-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

body.hattrick-pdp .container--product-details salla-products-slider .product-card__image .hattrick-pdp-card-add {
  display: block !important;
}

@media (max-width: 991px) {
  body.hattrick-pdp .container--product-details salla-products-slider .product-card__image .hattrick-pdp-card-add {
    display: none !important;
  }
}

@media (max-width: 991px) {
  /* The slider runs to the left screen edge, where the next card peeks in. */
  body.hattrick-pdp .container--product-details salla-products-slider .swiper {
    width: calc(100% + 16px) !important;
    margin-left: -16px !important;
  }
}

/* The theme pads the slider container on both sides; the design has none. */
body.hattrick-pdp .container--product-details salla-products-slider .swiper {
  padding-inline: 0 !important;
}

/* ---------- option groups with long labels (print options etc.) ---------- */
body.hattrick-pdp .product-single__info .s-product-options-grid-mode.hattrick-pdp-options--wide {
  grid-template-columns: minmax(0, 1fr);
}

body.hattrick-pdp .product-single__info .hattrick-pdp-options--wide > label,
body.hattrick-pdp .product-single__info .hattrick-pdp-options--wide .s-product-options-grid-mode-span {
  height: auto;
  min-height: 36px;
}

body.hattrick-pdp .product-single__info .hattrick-pdp-options--wide .s-product-options-grid-mode-span {
  justify-content: flex-start;
  padding: 8px 12px !important;
  white-space: normal;
  text-align: start;
  line-height: 20px;
}

/* Reviews follow the product block with the design gap even when the strip is absent. */
body.hattrick-pdp .hattrick-pdp-reviews {
  margin-top: 48px;
}

@media (max-width: 991px) {
  body.hattrick-pdp .hattrick-pdp-reviews {
    margin-top: 40px;
  }
}

/* ---------- slider arrows: shown on phones too (the theme hides them there) ---------- */
body.hattrick-pdp .container--product-details salla-products-slider .s-slider-block__title-left {
  display: flex;
  align-items: center;
  width: auto;
  height: 32px;
}

body.hattrick-pdp .container--product-details salla-products-slider .s-slider-block__title-nav {
  display: flex !important;
  align-items: center;
  gap: 20px;
}

body.hattrick-pdp .container--product-details salla-products-slider .s-slider-nav-arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
}

/* ---------- text options: sizes first, colour names as boxes that fit their text ---------- */
body.hattrick-pdp .product-single__info salla-conditional-fields > .s-product-options-option-container.s-product-options-option-container[data-pdp-kind="size"] {
  order: -1 !important;
}

body.hattrick-pdp .product-single__info .s-product-options-grid-mode.hattrick-pdp-options--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
}

body.hattrick-pdp .product-single__info .s-product-options-grid-mode.hattrick-pdp-options--chips > label {
  flex: 0 0 auto;
  width: auto !important;
}

body.hattrick-pdp .product-single__info .s-product-options-grid-mode.hattrick-pdp-options--chips .s-product-options-grid-mode-span {
  width: auto !important;
  min-width: 89px;
  padding: 0 14px !important;
}

@media (max-width: 991px) {
  body.hattrick-pdp .product-single__info .s-product-options-grid-mode.hattrick-pdp-options--chips .s-product-options-grid-mode-span {
    min-width: 72px;
  }
}
/* PDP:END */