/** Shopify CDN: Minification failed

Line 1109:9 Expected ":"

**/
.variant-wrapper--dropdown {
  display: block;
  width: 100%;
}

.variant-wrapper--dropdown select {
  width: 100%;
}

.variant-input-wrap {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

/* Mobilde Size butonlarina ust bosluk.

   POPULAR badge, main-product.liquid icindeki JS tarafindan label'a
   position: absolute olarak ekleniyor ve butonun ust kenarindan yukari
   tasiyor. Mobilde SIZE etiket satiriyla dip dibe geliyordu; buraya ust
   bosluk verince badge'e yer aciliyor.

   data-handle, secenek adindan handleize ediliyor: size, bead-size,
   size-for-each, chain-size ... hepsini yakalamak icin *= kullaniliyor. */
@media only screen and (max-width: 768px) {
  .variant-input-wrap[data-handle*='size'] {
    padding-top: 14px;
  }
}

/* Four option buttons per row (gap 8px x 3 / 4 = 6px). Phones get a smaller
   label so two-word values like "White Shelf" stay on one line. */
.variant-input {
  width: calc(100% / 4 - 6px);
}

.variant-input-wrap label {
  width: 100%;
  margin: 0 !important;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  border-width: 1.5px;
  padding: 10px;

  height: 100%;
  word-break: break-word;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 768px) {
  .variant-input-wrap label {
    font-size: 12px;
    line-height: 16px;
    padding: 8px 4px;
  }
}

.variant__label[for] {
  font-size: 14px;
  line-height: 23px;
  font-weight: 600;
  letter-spacing: unset !important;
  text-align: left;
}

.product-single__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
  text-align: left;
  margin-bottom: 10px;
}
.product__price-savings {

  color: #1E252C;
  background: #b4e8b2;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  padding: 6px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product__price,
.product__price--compare {
  font-size: 20px;
  line-height: 20px;
  padding-right: 0 !important;
}

.product__price {
  color: #1E252C;
  
}

.product__price--compare {
  color: #6b6b6b;
  font-size: 16px;
}
/*.product__price-savings {
  color: #fff;
  background: #20B150;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 11px;
  font-weight: 500;
  line-height: 17.6px;
  text-align: center;*/
  /* padding: 6px; */
 /* padding: 3px 6px 6px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product__price,
.product__price--compare {
  font-size: 15px;
  line-height: 15px;
  padding-right: 0 !important;
}

.product__price {
  color: #1E252C;
}

.product__price--compare {
  color: #6b6b6b;
}
*/
.product-block .icon-and-text {
  justify-content: left;
}

.sales-points {
  margin: 20px 0;
}

.product-block .icon-and-text span {
  font-size: 15px;
  line-height: 15px;
}

.product-block .add-to-cart,
.product-block .add-to-cart span {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #735846;
  border-color: #735846;
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-align: center;
  gap: 8px;
  letter-spacing: unset;
  font-weight: 700;
  transition: .2s ease-in;
}

.product-block .add-to-cart svg {
  width: 16px;
  height: 16px;
}

.product-block .add-to-cart:hover,
.product-block .add-to-cart:hover span {
  background: #967560;
  border-color: #967560;
}

.shopify-payment-button__button.shopify-payment-button__button--branded {
  height: 56px;
}

.shopify-payment-button {
  margin-top: 8px;
}

/* Product page price in the heading font (Jost); the current price bold,
   the struck-through compare price stays regular weight. */
.product-single__meta .product__price {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-weight: 700;
}
.product-single__meta .product__price--compare {
  font-weight: 400;
}

/* Shop Pay installments line. The banner lives in a shadow root but
   inherits font-size from its host element. */
.product-single__meta shopify-payment-terms {
  font-size: 13px;
}

/* The "More payment options" link under the express button is hidden;
   the express button itself still offers the other wallets. */
.shopify-payment-button__more-options {
  display: none !important;
}

.product-block .payment-buttons .add-to-cart {
  min-height: 56px;
}

/* From tablet up, Add to bag and the express checkout button share one row;
   on phones they stay stacked. */
@media only screen and (min-width: 769px) {
  .product-block .payment-buttons {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .product-block .payment-buttons .add-to-cart,
  .product-block .payment-buttons .shopify-payment-button {
    /* 50% basis, not 0: with a 0 basis the button's padding is added on top
       and Add to bag came out ~40px wider than the express button. */
    flex: 1 1 50%;
    min-width: 0;
    margin-top: 0;
  }
}

.shopify-payment-button__more-options {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  color: #1E252C;
  margin-top: 15px;
}

.product__policies.rte {
  display: none;
}

.loox-rating-label {
  font-size: 13px;
  line-height: 0px;
}

.grid--product-images--partial {
  display: grid;
  gap: 20px;
  grid: "div" "div" "div" / minmax(0, 1fr);
  margin-left: 0 !important;
}

/* Sadece üst seviye kolonlar (galeri / meta / below-gallery) tam genişlik olsun.
   Descendant seçici, ürün bloklarının içindeki .grid .grid__item ögelerini de
   (ör. ürün sayfası iletişim formundaki isim/e-posta alanları) bozuyordu. */
.grid--product-images--partial > .medium-up--one-half {
  width: 100%;
  padding: 0;
}

.product-single__meta {
  padding: 0 !important;
}

.product-single__sticky {
  position: unset;
  top: 0;
}

.product-content-below-gallery {
  padding: 0;
}

/* Product page accordion titles: a touch heavier than the theme's 400.
   Three classes so it beats [data-center-text=true] .collapsible-trigger-btn
   further down, which resets the weight to 400. */
.product-content-below-gallery .product-block .collapsible-trigger-btn {
  font-weight: 600;
}

[data-center-text=true] .collapsible-trigger-btn {
  text-align: left;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner {
  padding-left: 16px;
  color: #6b6b6b;
  font-size: 13px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: -0.02em;
  text-align: left;
  border-bottom:none !important;
  margin-bottom: 0 !important;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner * {
  text-align: left;
  /*margin-left: 0 !important;huseyin*/
}

@media screen and (min-width: 1280px) {
  .collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner * {
    /* width: 70%; */
    text-align: left !important;
  }
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner ul {
  margin-left: 20px !important;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner a {
  display: inline !important;
}

[data-center-text=true] .collapsible-trigger-btn {
  font-size: 13px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 14px;
}

.custom-dropdown {
  position: relative;
}

.custom-dropdown__trigger {
  padding: 10px 12px;
  border: 1px solid #E8E8E1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 17.57px;
  text-align: left;
  color: #000;
}

.custom-dropdown__trigger svg {
  width: 10px;
  transform: rotate(180deg);
}

.custom-dropdown__inside {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-dropdown__inside img {
  width: 22px;
  height: 22px;
  border-radius: 100%;
}

.custom-dropdown__menu {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: 100%;
  background: #fff;
  z-index: 999;
  -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
  -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
  -ms-box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
  -o-box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
  box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  background: #fff;
  transition: .2s ease-in;
  font-size: 14px;
  font-weight: 400;
  line-height: 17.57px;
  color: #000;
}

.dropdown-item:hover {
  background: #F1EEED;
}

.dropdown-item--sold-out {
  opacity: 0.4;
  position: relative;
  cursor: default;
}

.dropdown-item--sold-out * {
  cursor: default;
}

.dropdown-item--sold-out .sold-out-badge {
  margin-left: auto;
  background: #F1EEED;
  padding: 2px 5px;
  font-size: 0.7em;
  font-weight: 700;
  text-transform: uppercase;
}

.dropdown-item img {
  width: 22px;
  height: 22px;
  border-radius: 100%;
}

.iwa--custom--variant .variant-input-wrap {
  display: none;
}

.flickity-page-dots {
  display: none !important;
}

.product-block--price {
  /* display: flex;
  align-items: center;
  justify-content: flex-start; */
  text-align:left;
}

.customer__messages--content {
  display: flex;
  flex-direction: column-reverse;
  gap: 20px;
  padding: 20px;
  background: #F1EEED;
  align-items: center;
  justify-content: center;
}

.customer__messages--profile {
  min-width: 120px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.customer__messages--profile img:first-child {
  width: 65px;
  height: 65px;
  border-radius: 100%;
  object-fit: cover;
}

.customer__messages--profile span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 20.8px;
  letter-spacing: -0.02em;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.customer__messages--profile span svg {
  width: 12px;
  height: 12px;
  margin-left: 10px;
}

.customer__messages--profile img:last-child {
  width: 100%;
  height: 15px;
  object-fit: contain;
  margin-top: 8px;
}

.customer__messages--content p {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  letter-spacing: -0.02em;
  color: #1E252C;
}

.customer-message-pagination.swiper-pagination {
  position: unset;
  margin-top: 30px;
  gap: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-block--tab+.product-block--tab .collapsibles-wrapper {
  border-top: 0 !important;
}

.customer__messages--area {
  margin-bottom: 40px;
}

.customer-message-pagination .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  margin: 0 !important;
  background: #636262;
}

.customer-message-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #636262;
}

.text-center {
  text-align: center;
}

h4.full-width-title {
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 700;
  line-height: 44.8px;
  text-align: center;
}

.grid-product__tag {
  font-size: 9px;
  font-weight: 400;
  line-height: 9px;
  letter-spacing: -0.02em;
  text-align: right;
  text-transform: uppercase;
  padding: 6px;
}

/* The swatch row's single product link (see product-grid-item.liquid). It takes
   over as the flex container so the swatches stay the flex items they were --
   .grid-product__colors keeps its own flex box, this just fills it. */
.grid-product__colors-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.grid-product__rating.loox-rating .loox-rating-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 5px;
}

.grid-product__rating.loox-rating {
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  color: #1E252C;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
}

/*
  On the Arabic storefront Loox tags the element `.rtl` and its own sheet sets
  `.rtl.loox-rating { justify-content: flex-start }`, which loads after ours
  at the same specificity. Under row-reverse in an RTL line, flex-start is the
  left edge, so the stars and count sat left while the title and price sat
  right. flex-end packs them to the right with the stars on the outer edge,
  mirroring the English card. The stars' 5px gap moves to their left side so
  it still separates them from the count. (The older RTL block further down
  is inside a comment and never applied.)
*/
html[dir="rtl"] .grid-product__rating.loox-rating {
  justify-content: flex-end;
}

html[dir="rtl"] .grid-product__rating.loox-rating .loox-rating-content {
  margin-right: 0;
  margin-left: 5px;
}

.grid-product__rating.loox-rating .loox-rating-content svg {
  width: 12px;
  height: 12px;
  color: #FEC933;
}

.grid-product__rating.loox-rating .loox-rating-label {
  display: none;
}

.grid-product__rating.loox-rating .loox-rating-content title {
  color: #1E252C;
  font-size: 11px;
  font-weight: 400;
  line-height: 13.81px;
  text-align: center;
  margin-left: 3px;
}

.grid-product__title,
[data-type_product_capitalize=true] .grid-product__title {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  line-height: 19.6px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #1E252C;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.h3-custom-product-title {
  all: unset;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  line-height: 19.6px;
  letter-spacing: -0.02em;
  text-align: left;
  color: #1E252C;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.grid-product__price {
  text-align: left;
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  color: #767676; /* 4.54:1 on #fff; .grid-product__price--original inherits it */
  margin-top: 8px;
  text-transform: capitalize;
  gap: 5px;
}

.grid-product__price span {
  display: block;
  text-align: left;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 400;
  line-height: 17.55px;
  letter-spacing: -0.02em;
  margin: 0;
}

/* White on #20B150 was 2.81:1. The text cannot go darker, so the green does:
   #298737 is the nearest passing background by the same search. */
.grid-product__price--savings {
  border-radius: 20px;
  background: #298737; /* white on this is 4.55:1 */
  padding: 3px 6px;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 14.4px !important;
  text-align: center;
  color: #fff;
}

/* #FF6161 sat at 2.94:1 on the white card -- the contrast audit's first two
   findings are this and the struck-through price below. These are the nearest
   passing colours by CIEDE2000, not round numbers: the search was over every
   8-bit colour whose luminance clears 4.5:1 on white, minimising perceptual
   distance from the original. #FF6161 -> #D73C42 is dE 11.8, #777777 ->
   #767676 is dE 0.4. Both carry a small margin over 4.5 so the ratio does not
   land on the rounding boundary. */
.discounted--price {
  color: #D73C42; /* 4.55:1 on #fff */
  margin-right: 5px;
}

.grid-product__meta {
  padding: 12px 0 0 0;
}

.grid-product__title,
[data-type_product_capitalize=true] .grid-product__title {
  text-transform: capitalize;
}

.collection-sidebar__group .tag__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  text-align: left;
  color: #1E252C;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.custom__checkbox {
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  border: 1px solid #e0e0e0;
  margin: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s ease-in, background-color .2s ease-in;
  margin-right: 12px;
  border-radius: 5px;
}

.custom__checkbox::before {
  content: "";
  top: 2px;
  left: 6px;
  width: 6px;
  height: 12px;
  opacity: 0;
  position: absolute;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: .3s ease-in-out;
  border-top: 0 solid transparent;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  border-left: 0 solid transparent;
}

input:checked + .custom__checkbox::before {
  opacity: 1;
}

.custom__checkbox--label input:checked + .custom__checkbox {
  background: #1E252C;
  border-color: #1E252C;
}

.tag__count {
  font-size: 13px;
  font-weight: 400;
  line-height: 16.25px;
  text-align: center;
  color: #6b6b6b;
  margin: 0;
}

.tag__filters--custom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.grid__item--sidebar {
  padding-left: 0;
  padding-right: 8px !important;
  padding-left: 8px !important;/*huseyin*/
}

.grid__item--sidebar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.grid__item--sidebar::-webkit-scrollbar-thumb {
  background: #b2b2b2;
}

.grid__item--sidebar .collection-sidebar {
  padding: 0;
}

#CollectionAjaxContent .page-width > .grid {
  margin: 0;
  display: flex;
}

#CollectionAjaxContent .grid .grid__item {
  width: 100% !important;
  padding: 0;
  margin: 0;
}

.collection-content .collection-grid__wrapper .grid.grid--uniform,
.grid__item--search .grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column-gap: 8px;
  grid-row-gap: 24px;
}

.grid__item--sidebar {
  display: none;
}

.js-drawer-open .grid__item--sidebar {
  display: block;
}

.collection-filter__item--count {
  font-size: 16px;
  font-weight: 400;
  line-height: 20.08px;
  color: #1E252C;
  margin: 0;
}

.collection-filter__item {
  margin: 0;
}

.collection-filter {
  margin-bottom: 30px;
}

.grid__item--sidebar .tag-list__header {
  padding: 22px 0;
  font-size: 14px;
  /*font-weight: 500; huseyin deneme*/
  line-height: 21px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
}

.collection-sidebar__group--1 .tag-list__header {
  padding-top: 0;
}

.grid__item--sidebar .tag-list__header .collapsible-trigger__icon {
  position: unset;
  transform: unset;
}


.pagination .next a,
.pagination .prev a {
  background: #735846;
}

.collection-content .pagination {
  padding-top: 30px;
}

/*
  The page links are inline-blocks centred by the ul's text-align. On the
  Arabic storefront theme.css forces `html[dir="rtl"] * { text-align: right
  !important }`, which pushed them to the right edge, so this needs an
  !important of its own.
*/
html[dir="rtl"] .pagination {
  text-align: center !important;
}

/*
  In an RTL row "next" sits at the left end and "previous" at the right, but
  the chevrons are drawn for LTR and pointed the wrong way. Mirror both.
*/
html[dir="rtl"] .pagination .next .icon,
html[dir="rtl"] .pagination .prev .icon {
  transform: scaleX(-1);
}

.card-text--inline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 18px;
}

.card-text--inline .media img {
  width: 100%;
  height: 11px;
  margin-bottom: 25px;
}

.card-text__title {
  margin-bottom: 25px;
}

.card-text__title * {
  font-size: 11px;
  font-weight: 400;
  line-height: 17.6px;
  letter-spacing: -0.02em;
  text-align: center;
}

.card__text__bottom span {
  font-size: 11px;
  font-weight: 600;
  line-height: 13.81px;
  text-align: center;
  display: block;
}

.card__text__bottom p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 0 0;
  text-align: center;
  font-size: 8px;
  font-weight: 400;
  line-height: 10.04px;
  letter-spacing: -0.02em;
  gap: 4px;
}

.card__text__bottom p img {
  max-width: 10px;
}

.newsletter-section__content {
  max-width: unset;
  width: 50%;
  flex: 50%;
  padding: 0;
}

.newsletter-section__content p.h1,
.newsletter-section__content p.h2,
.newsletter-section__content p.h3,
.newsletter-section__content p.h4,
.newsletter-section__content p.h5,
.newsletter-section__content p.h6 {
  color: #181818;
  font-size: 22px;
  font-weight: 700;
  line-height: 44px;
  text-align: center;
  margin-bottom: 20px;
}

.newsletter-section__content .rte p {
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  text-align: center;
  color: #1E252C;
  margin-bottom: 26px;
}

.newsletter-section__content .rte p em {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  color: #1E252C;
}

.newsletter-section__content .theme-block {
  margin: 0;
}

.newsletter-section__content form .input-group {
  flex-direction: column;
  width: 100%;
  margin-bottom: 15px;
}

.newsletter-section__content form .input-group input {
  padding: 20px 15px;
  border: 1px solid #777777;
  margin-bottom: 12px;
  color: #6b6b6b;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  height: 56px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.newsletter-section__content form .input-group input::placeholder {
  color: #6b6b6b;
}

.newsletter-section__content form .input-group-btn button {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-align: center;
  color: #fff;
  background: #735846;
  height: 56px;
  text-align: center;
  padding: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: normal;
}

.newsletter-section__image {
  min-width: 460px;
  max-height: 315px;
  flex: 50% 0 0;
}

.newsletter-section__image .image-wrap,
.newsletter-section__image image-element,
.newsletter-section__image img {
  max-height: 315px;
  height: 315px !important;
  position: unset !important;
  padding-bottom: 0 !important;
}

.newsletter-section__content .theme-block:last-child .rte p {
  margin-bottom: 0 !important;
}

.hero__text-shadow {
  text-align: center;
}
@media screen and (max-width: 768px) {
   .hero__text-shadow {
    width:100%;
  }
}

.hero__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero__link .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  margin: 0;
  min-width: 320px;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-align: center;
  letter-spacing: normal;
}

.hero__link .btn + .btn {
  margin: 15px 0 0 0;
  background: transparent !important;
  color: #735846;
  border: 1px solid;
  /* border-color: #735846; */
}

.hero__title * {
  /* huseyin text-transform: capitalize;*/
  font-size: 28px;
  font-weight: 700;
  line-height: 42px;
  text-align: center;
}

.hero__top-subtitle {
  /* huseyin margin-bottom: 24px;*/
  huseyin margin-bottom: 12px;
}

.hero__top-subtitle * {
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  letter-spacing: -0.04em;
  text-align: center;
  text-transform: none;
}

.hero__subtitle {
  /* huseyin margin-top: 24px;*/
  margin-top: 12px;
}

.hero__subtitle * {
  font-size: .8em;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
}

.hero__top-subtitle .animation-contents {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  gap: 8px;
}

.hero__top-subtitle img {
  height: 14px;
  width: auto;
}

.hero__bottom-title {
  margin-top: 15px;
}

.hero__bottom-title * {
  opacity: 1 !important;
}

.hero__bottom-title p {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  margin-bottom: 0;
}

.slideshow__slide--slideshow-0 .hero__title {
  font-size: unset !important;
}

.product-block:empty {
  margin: 0;
}

/* Landmark-only wrapper around the drawer menu list (see drawer-menu.liquid).
   `display: contents` removes its box, so the list it wraps keeps the exact
   place in the flex column it had before the element existed. */
.mobile-nav__landmark {
  display: contents;
}

.product-single__meta .loox-rating {
  margin-bottom: 8px; /*huseyin*/
  text-align: left;
}

/* Loox injects the rating from its app embed after first paint. On products
   that have reviews, hold the row open from the first render so the title and
   everything under it does not jump down when the widget arrives. The child
   keeps carrying the margin everywhere else, so review-less products stay
   exactly as they were.

   The reserved height is one base line box, not a guess. Loox renders the row
   as a block whose only children are an inline-flex star group (its own CSS:
   `svg.loox-icon { width: 1em; height: 1em }`, vertical-align middle) and a
   label our .loox-rating-label rule pins to line-height 0. Neither reaches
   past the block's own strut, so the settled height is exactly the inherited
   line-height: 25.2px at the 18px desktop base, 23.18px at the 16.56px one
   under 769px. Deriving it keeps both breakpoints right and follows the
   merchant's type settings if they ever change. */
.product-single__meta .loox-rating-link--reserved {
  display: flex;
  align-items: center;
  min-height: calc(1em * var(--typeBaseLineHeight));
  margin-bottom: 8px;
}

.product-single__meta .loox-rating-link--reserved .loox-rating {
  width: 100%;
  margin-bottom: 0;
}

.product-single__meta .loox-rating:empty {
  display: none;
}

.drawer__cart-empty {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding: 40px 16px 20px 16px; */
  padding: 14px 16px 14px;
}

.drawer__cart-empty-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 6px;
  /* margin: 30px 0; */
  margin: 5px 0;
  /* row-gap: 20px; */
  row-gap: 5px;
}

.drawer__cart-heading p {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  color: #6b6b6b;
  /* margin: 18px 0 0 0; */
  margin: 5px 0 0 0;
}

.drawer.is-empty .drawer__cart-empty {
  display: flex;
}

.drawer__cart-heading span {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 24px;
  font-weight: 500;
  line-height: 31.2px;
  text-align: center;
  color: #000;
  display: block;
}





.drawer__cart-empty-card {
  width: calc(50% - 3px);
}

.drawer__cart-empty-card a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.drawer__cart-empty-card a img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 160px;
  min-height: 160px;
}

.drawer__cart-empty-card a span {
  display: block;
  /* margin: 16px 0 0 0; */
  margin: 5px 0 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 18.2px;
  letter-spacing: -0.02em;
  text-align: center;
  color: #1E252C;
}

.drawer__cart-empty-card a p {
  color: #6b6b6b;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  text-align: center;
  margin: 8px 0 0 0;
}

/* Cart drawer: full width on phones, 468px on tablets, 700px from 769px
   (enjoythewood-style, see the block after .cart__checkout--message). */
#CartDrawer {
  --iwa-cart-w: min(468px, 100vw);
  width: var(--iwa-cart-w);
  right: calc(-1 * var(--iwa-cart-w));
}

@media screen and (min-width: 769px) {
  #CartDrawer {
    --iwa-cart-w: min(700px, 100vw);
  }
}

#CartDrawer .drawer__fixed-header {
  padding: 0 16px;
  min-height: unset;
  height: 60px;
}

#CartDrawer .drawer__header {
  padding: 20px 0 16px;
  height: 60px;
  min-height: 60px;
  background: #fff;
}

#CartDrawer.drawer--is-open {
  transform: translate(calc(-1 * var(--iwa-cart-w)));
}

/* /ar: the bag icon is on the left, so the drawer slides in from the left. */
html[dir="rtl"] #CartDrawer {
  right: auto;
  left: calc(-1 * var(--iwa-cart-w));
}

html[dir="rtl"] #CartDrawer.drawer--is-open {
  transform: translate(var(--iwa-cart-w));
}

/* /ar home hero: text centred on every slide, phone and desktop. The global
   html[dir="rtl"] * { text-align: right !important } and the per-slide
   alignment styles in slideshow.liquid both lose to this on specificity. */
html[dir="rtl"] .slideshow__slide .hero__text-content,
html[dir="rtl"] .slideshow__slide .hero__text-content * {
  text-align: center !important;
}

html[dir="rtl"] .slideshow__slide .hero__link {
  align-items: center !important;
}

html[dir="rtl"] .slideshow__slide .hero__top-subtitle .animation-contents {
  justify-content: center !important;
}

/* /ar section headings: EN centres them, but theme.css forces every element
   right in RTL (html[dir="rtl"] * { text-align: right !important }). Put
   back the centring EN has: section headers (+ their "View all" button),
   product feed and shoppable social titles, and rich text set to centre. */
html[dir="rtl"] [data-type_headers_align_text=true] .section-header,
html[dir="rtl"] [data-type_headers_align_text=true] .section-header *,
html[dir="rtl"] .section-product__feed--title,
html[dir="rtl"] .section-product__feed--title *,
html[dir="rtl"] .section-product__feed--description,
html[dir="rtl"] .section-shoppable__social--title,
html[dir="rtl"] .section-shoppable__social--title *,
html[dir="rtl"] .index-section > .text-center,
html[dir="rtl"] .index-section > .text-center * {
  text-align: center !important;
}

#CartDrawer .drawer__title {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 16px;
  font-weight: 700;
  line-height: 24.19px;
  text-align: left;
  color: #2A2A2A;
  text-transform: capitalize;
}

.drawer__cart-empty-button a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  background: #735846;
  text-align: center;
  padding: 15px;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  color: #fff !important;
}

.drawer__cart-empty-bottom--desc {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  color: #2A2A2A;
  margin-top: 15px;
}

#CartDrawer .drawer__scrollable {
  padding: 30px 16px 20px 16px;
  display: block;
}

.drawer .cart__image {
  flex: 0 0 90px;
  margin-right: 16px;
}

.cart__image img {
  width: 90px;
  height: 90px;
  object-fit: cover;
}

.cart__item-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 19.6px;
  text-align: left;
  color: #1E252C;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart__item--variants {
  margin-bottom: 2px;
}

.cart__item--variants * {
  color: #6b6b6b;
  font-size: 12px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: left;
}

.cart__item-sub {
  margin-top: 14px;
}

.cart__item-sub .js-qty__adjust--minus {
  border-right: 0.1rem solid var(--colorDrawerBorder);
}

.cart__item-sub .js-qty__wrapper {
  width: 100px;
  max-width: 100px;
  height: 35px;
}

.cart__item-sub .js-qty__wrapper .js-qty__num {
  font-size: 13px;
  font-weight: 400;
  line-height: 15.73px;
  color: #1E252C;
  height: 100%;
}

.cart__item-sub .js-qty__adjust--plus {
  border-left: 0.1rem solid var(--colorDrawerBorder);
}

.cart__item-price-col {
  display: flex;
  align-items: center;
}

.cart__item-price-col span {
  font-size: 14px;
  font-weight: 700;
  line-height: 17.57px;
  text-align: left;
}

.cart-note-drawer--label {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 16px;
  font-weight: 700;
  line-height: 21.6px;
  text-align: left;
  letter-spacing: normal !important;
  text-transform: capitalize !important;
  margin: 0;
}

.drawer__footer-title {
  font-size: 15px;
  font-weight: 400;
  line-height: 18.83px;
  text-align: left;
  letter-spacing: normal;
  color: #1E252C;
  text-transform: capitalize;
}

.drawer__footer-desc {
  font-size: 15px;
  font-weight: 600;
  line-height: 18.83px;
  text-align: left;
  color: #1E252C;
}

.drawer__footer-free-shipping {
  color: #20B150;
}

.drawer__footer {
  padding: 20px 16px 25px 16px;
  -webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
  -moz-box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
  -ms-box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
  -o-box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
  box-shadow: 0 0px 10px rgba(0, 0, 0, .15);
}

.cart__item-row {
  margin: 0 0 8px 0;
}

#CartDrawer .cart__checkout-wrapper {
  margin-top: 15px;
}

#CartDrawer .cart__checkout-wrapper button {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: normal;
  padding: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 25.6px;
  text-align: center;
  color: #fff;
  background: #735846;
  gap: 8px;
}

#CartDrawer .cart__checkout-wrapper button svg {
  width: 11.2px;
  height: 14px;
}

.cart__checkout--message {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: center;
  color: #1E252C;
  margin: 15px 0 0 0;
  letter-spacing: normal;
}

/* ------------------------------------------------------------------
   Cart drawer, enjoythewood.com layout (2026-10-10), square corners.
   A white panel inset from the screen edge; uppercase title with a count
   badge; trust strip; item = photo | title, price, options | quantity;
   "Complete your order with" cards; footer with subtotal, order-note
   toggle, checkout and payment marks. Everything is scoped to #CartDrawer
   so the cart page (same cart-item snippet) keeps its own look.
   ------------------------------------------------------------------ */
.cart__item-price-inline {
  display: none;
}

#CartDrawer {
  --iwa-cart-inset: 8px;
  --iwa-cart-pad: 24px;
  --iwa-cart-ink: #1e252c;
  --iwa-cart-muted: #5f6368;
  --iwa-cart-accent: #735846;
  --iwa-cart-soft: #f1eeed;
  --iwa-cart-line: #e8e8e1;
  padding: var(--iwa-cart-inset);
  background: transparent;
  box-shadow: none;
  color: var(--iwa-cart-ink);
}

@media screen and (min-width: 769px) {
  #CartDrawer {
    --iwa-cart-inset: 16px;
    --iwa-cart-pad: 40px;
  }
}

#CartDrawer .drawer__contents {
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, .12);
}

/* Page overlay. The theme's own (.main-content:after) is light grey and
   sits under the sticky header section (z-index 28), which holds this
   drawer. While the bag is open that section is lifted above the page and
   a dark overlay inside it, just under the drawer, covers everything. */
.iwa-cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

html.js-drawer-open .shopify-section:has(#CartDrawer.drawer--is-open) {
  z-index: 1000;
}

html.js-drawer-open .shopify-section:has(#CartDrawer.drawer--is-open) .iwa-cart-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease;
}

html:has(#CartDrawer.drawer--is-open) .main-content:after {
  display: none;
}

/* Nothing under the open bag reacts to touch: floating buttons that sit
   above every layer (chat launcher z 2147483646, back to top) are hidden,
   a drag on the overlay doesn't pan the page, and the drawer's own scroll
   areas stop at their ends instead of handing the scroll to the page.
   update-cart-count.js also cancels drags that nothing in the drawer can
   take, for iOS, where overflow: hidden on the page doesn't stop touch
   scrolling. */
html:has(#CartDrawer.drawer--is-open) :is(.chat-facade, #reamaze-widget, #reamaze-wrapper, .back-to-top) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.iwa-cart-overlay {
  touch-action: none;
}

#CartDrawer .drawer__scrollable,
#CartDrawer .drawer__cart-empty,
#CartDrawer .cart-notes {
  overscroll-behavior: contain;
}

/* Header: title + badge, close, trust strip */
#CartDrawer .drawer__fixed-header {
  height: auto;
  min-height: 0;
  padding: 20px var(--iwa-cart-pad) 24px;
}

/* Header and footer keep their full height; only the item list shrinks
   and scrolls. As flex items they could shrink below their content on a
   short screen (iPhone with Safari's toolbar), and the trust strip then
   overlapped the first item. */
#CartDrawer .drawer__fixed-header,
#CartDrawer .drawer__footer {
  flex: none;
}

#CartDrawer .drawer__inner,
#CartDrawer .drawer__scrollable {
  min-height: 0;
}

#CartDrawer .drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  min-height: 0;
  padding: 0 0 8px;
  border-bottom: 0;
}

#CartDrawer .drawer__title {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  margin: 0;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--iwa-cart-ink);
}

#CartDrawer .iwa-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  background: var(--iwa-cart-accent);
  color: #fff;
  font-family: var(--typeBasePrimary), var(--typeBaseFallback);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

#CartDrawer .drawer__close {
  width: auto;
}

#CartDrawer .drawer__close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-inline-end: -4px;
}

#CartDrawer .drawer__close-button .icon {
  width: 30px;
  height: 30px;
}

#CartDrawer .iwa-cart-trust {
  display: flex;
  margin: 4px 0 0;
  padding: 10px 0;
  list-style: none;
  background: var(--iwa-cart-soft);
}

#CartDrawer .iwa-cart-trust li {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0 6px;
  color: var(--iwa-cart-accent);
}

#CartDrawer .iwa-cart-trust svg {
  flex: none;
  width: 18px;
  height: 18px;
}

#CartDrawer .iwa-cart-trust span {
  color: #000;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
}

@media screen and (min-width: 769px) {
  #CartDrawer .drawer__fixed-header {
    padding-top: 32px;
  }

  #CartDrawer .drawer__title {
    font-size: 20px;
  }

  #CartDrawer .iwa-cart-count {
    min-width: 24px;
    height: 24px;
  }

  #CartDrawer .iwa-cart-trust {
    padding: 12px 0;
  }

  #CartDrawer .iwa-cart-trust svg {
    width: 20px;
    height: 20px;
  }

  #CartDrawer .iwa-cart-trust span {
    font-size: 11px;
    text-align: start;
  }
}

/* Items */
#CartDrawer .drawer__scrollable {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 var(--iwa-cart-pad) 24px;
}

#CartDrawer .cart__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#CartDrawer .cart__item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 12px;
  align-items: start;
  margin: 0;
  padding: 0;
  border: 0;
}

#CartDrawer .cart__image {
  grid-row: 1 / span 2;
  width: 80px;
  margin: 0;
}

#CartDrawer .cart__image .image-wrap,
#CartDrawer .cart__image img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: cover;
}

#CartDrawer .cart__item-details {
  display: contents;
}

#CartDrawer .cart__item-title {
  min-width: 0;
  font-size: 14px;
}

#CartDrawer .cart__item-name {
  display: block;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--iwa-cart-ink);
  -webkit-line-clamp: 3;
}

/* Price and the discount code tag share one line (both inline boxes). */
#CartDrawer .cart__item-price-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 10px 6px 0;
  vertical-align: middle;
  font-size: 14px;
  line-height: 1.5;
  color: var(--iwa-cart-ink);
}

#CartDrawer .cart__item-price-inline .cart__discount {
  color: #b3261e;
}

#CartDrawer .cart__item-price-inline s {
  font-size: 12px;
  color: var(--iwa-cart-muted);
}

#CartDrawer .cart__item--variants,
#CartDrawer .cart__item--properties {
  margin: 0;
}

#CartDrawer .cart__item--variants *,
#CartDrawer .cart__item--properties,
#CartDrawer .cart__item--properties * {
  font-size: 12px;
  line-height: 1.6;
  color: var(--iwa-cart-muted);
}

/* Options on one line: "Size: 18.5x18.5" | 47x47 cm / Color: Gold". */
#CartDrawer .cart__item--variants > div {
  display: inline;
}

#CartDrawer .cart__item--variants > div + div::before {
  content: " / ";
}

/* Quantity: [−][1][+] in grey squares, Remove next to it (phones) or
   under it (desktop). */
#CartDrawer .cart__item-sub {
  grid-column: 2;
  display: flex;
  margin: 0;
  line-height: 1;
}

#CartDrawer .cart__item-sub > div:first-child {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
}

#CartDrawer .cart__item-price-col {
  display: none;
}

#CartDrawer .js-qty__wrapper {
  display: flex;
  align-items: center;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 32px;
  border: 0;
  background: transparent;
}

#CartDrawer .js-qty__adjust {
  position: static;
  order: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: #f5f5f3;
  color: var(--iwa-cart-ink);
}

#CartDrawer .js-qty__adjust:hover {
  background: #ebe9e5;
}

#CartDrawer .js-qty__adjust--plus {
  order: 2;
}

#CartDrawer .js-qty__adjust .icon {
  width: 10px;
  height: 10px;
}

#CartDrawer .js-qty__adjust .icon path {
  fill: currentColor;
}

#CartDrawer .js-qty__wrapper .js-qty__num {
  order: 1;
  width: 40px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  line-height: 32px;
  color: var(--iwa-cart-ink);
}

#CartDrawer .cart__remove {
  display: block;
  margin: 0;
}

#CartDrawer .cart__remove a {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--iwa-cart-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media screen and (min-width: 769px) {
  #CartDrawer .cart__item {
    grid-template-columns: 96px minmax(0, 1fr) auto;
  }

  #CartDrawer .cart__image {
    grid-row: 1;
  }

  #CartDrawer .cart__image,
  #CartDrawer .cart__image .image-wrap,
  #CartDrawer .cart__image img {
    width: 96px;
    height: 96px;
  }

  #CartDrawer .cart__item-title {
    padding-top: 10px;
  }

  #CartDrawer .cart__item-name {
    font-size: 13px;
  }

  #CartDrawer .cart__item-sub {
    grid-column: 3;
    grid-row: 1;
    padding-top: 10px;
  }

  #CartDrawer .cart__item-sub > div:first-child {
    flex-direction: column;
    gap: 10px;
  }

  #CartDrawer .cart__remove a {
    font-size: 11px;
  }
}

#CartDrawer .cart__item-discount-tags {
  display: inline-flex;
  flex-wrap: wrap;
  vertical-align: middle;
  gap: 4px;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

#CartDrawer .cart__item-discount-tags li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 3px 8px;
  background: #f9ecea;
  color: #b3261e;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .03em;
  text-transform: uppercase;
}

/* Empty bag: content starts at the top and scrolls. It used to be centred
   in a flex column, which pushed the heading up under the trust strip when
   the screen was shorter than the content. */
#CartDrawer .drawer__cart-empty {
  flex: 1 1 auto;
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--iwa-cart-pad) 24px;
}

#CartDrawer.is-empty .drawer__cart-empty {
  display: flex;
}

#CartDrawer .drawer__cart-empty-area {
  width: 100%;
}

#CartDrawer .drawer__cart-heading {
  margin: 8px 0 20px;
  text-align: center;
}

#CartDrawer .drawer__cart-heading span {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--iwa-cart-ink);
}

#CartDrawer .drawer__cart-heading p {
  max-width: 420px;
  margin: 6px auto 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--iwa-cart-muted);
}

#CartDrawer .drawer__cart-empty-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

#CartDrawer .drawer__cart-empty-card {
  width: auto;
  margin: 0;
}

#CartDrawer .drawer__cart-empty-card a {
  display: block;
  height: 100%;
  background: var(--iwa-cart-soft);
  text-align: start;
}

#CartDrawer .drawer__cart-empty-card a img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

#CartDrawer .drawer__cart-empty-card a span {
  margin: 0;
  padding: 10px 12px 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: start;
  color: var(--iwa-cart-ink);
}

#CartDrawer .drawer__cart-empty-card a p {
  margin: 0;
  padding: 2px 12px 12px;
  font-size: 12px;
  line-height: 1.5;
  text-align: start;
  color: var(--iwa-cart-muted);
}

#CartDrawer .drawer__cart-empty-button {
  margin-top: 20px;
}

#CartDrawer .drawer__cart-empty-button a {
  height: 54px;
  padding: 0 24px;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* The trust strip above already says this. */
#CartDrawer .drawer__cart-empty-bottom--desc {
  display: none;
}

@media screen and (min-width: 769px) {
  #CartDrawer .drawer__cart-heading span {
    font-size: 22px;
  }

  #CartDrawer .drawer__cart-empty-cards {
    gap: 16px;
  }

  #CartDrawer .drawer__cart-empty-button {
    margin-top: 24px;
  }

  #CartDrawer .drawer__cart-empty-button a {
    height: 56px;
  }
}

/* Footer */
#CartDrawer .drawer__footer {
  padding: 24px var(--iwa-cart-pad);
  border-top: 1px solid var(--iwa-cart-line);
  box-shadow: none;
}

#CartDrawer .cart__item-row {
  margin: 0 0 8px;
}

#CartDrawer .iwa-cart-total {
  align-items: baseline;
}

#CartDrawer .iwa-cart-total .drawer__footer-title,
#CartDrawer .iwa-cart-total .drawer__footer-desc {
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--iwa-cart-ink);
}

#CartDrawer .iwa-cart-note summary {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--iwa-cart-accent);
}

#CartDrawer .iwa-cart-note summary::-webkit-details-marker {
  display: none;
}

#CartDrawer .iwa-cart-note textarea {
  display: block;
  width: 100%;
  min-height: 80px;
  margin: 8px 0 0;
  border: 1px solid var(--iwa-cart-line);
  border-radius: 0;
  font-size: 14px;
}

#CartDrawer .cart__checkout-wrapper {
  margin-top: 20px;
}

#CartDrawer .cart__checkout-wrapper button {
  height: 54px;
  padding: 0 24px;
  gap: 10px;
  border-radius: 0;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

#CartDrawer .cart__checkout-wrapper button svg {
  width: 13px;
  height: 15px;
}

/* One row however many methods the store has: the marks shrink to fit. */
#CartDrawer .iwa-cart-payments {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

#CartDrawer .iwa-cart-payments li {
  flex: 0 1 30px;
  min-width: 0;
  margin: 0;
  line-height: 0;
}

#CartDrawer .iwa-cart-payments svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 38 / 24;
}

@media screen and (min-width: 769px) {
  #CartDrawer .drawer__footer {
    padding: 32px var(--iwa-cart-pad);
  }

  #CartDrawer .iwa-cart-total .drawer__footer-title,
  #CartDrawer .iwa-cart-total .drawer__footer-desc {
    font-size: 22px;
  }

  #CartDrawer .cart__checkout-wrapper {
    margin-top: 24px;
  }

  #CartDrawer .cart__checkout-wrapper button {
    height: 56px;
  }

  #CartDrawer .iwa-cart-payments {
    gap: 4px;
  }

  #CartDrawer .iwa-cart-payments li {
    flex-basis: 32px;
  }
}

.grid-product__image-mask .image-wrap img {
  aspect-ratio: 1 / 1;
}

.search-content .page-width {
  max-width: 1800px;
}

@media screen and (min-width: 430px) {
  .hero__link .btn {
    min-width: 390px;
  }
}

@media screen and (min-width: 990px) {
  .product-single__title {
    font-size: 28px;
    font-weight: 700;
    line-height: 35px;
    text-align: left;
    margin-bottom: 10px;
  }
  .product-block .add-to-cart {
    height: 56px;
  }
  .grid--product-images--partial {
    grid: "div div" auto "div div" minmax(0, 1fr) / minmax(0, 0.55fr) minmax(0, 0.45fr);
  }
  .grid--product-images--partial {
    gap: 40px;
    row-gap: 20px;
  }

  /* Desktop gallery: thumbnails sit in a vertical rail left of the main image.
     The section keeps thumbnail_position "below" so the phone layout (partial
     slider + horizontal thumbs) is untouched; this only reflows it once the
     page splits into two columns. The rail takes the main image's height and
     scrolls; theme.js scrolls the active thumb into view on either axis. */
  .grid--product-images--partial .product__photos--below {
    display: flex;
    align-items: stretch;
  }
  .grid--product-images--partial .product__photos--below .product__main-photos {
    min-width: 0;
  }
  .grid--product-images--partial .product__thumbs--below {
    order: -1;
    flex: 0 0 80px;
    max-width: 80px;
    margin: 0 15px 0 0;
  }
  .grid--product-images--partial .product__thumbs--below .product__thumbs--scroller {
    position: absolute;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: normal;
  }
  .grid--product-images--partial .product__thumbs--below .product__thumb-item {
    display: block;
    width: auto;
    max-width: none;
    margin: 0 0 12px;
  }
  .grid--product-images--partial .product__thumbs--below .product__thumb-item:last-child {
    margin-bottom: 0;
  }
  html[dir="rtl"] .grid--product-images--partial .product__thumbs--below {
    order: 1;
    margin: 0 0 0 15px;
  }

  /* Desktop: the "below the gallery" blocks (Product Detail, Size &
     Specification, Shipping, Ask a Question) join the info column, and the
     gallery spans all three rows and sticks under the header. It scrolls away
     only once the right column ends, because a sticky grid item is held
     inside its grid. --iwa-sticky-top is set by custom-islamic.js from the
     stuck header's height. */
  .grid--product-images--partial:not(.grid--product-images-right) {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .grid--product-images--partial:not(.grid--product-images-right) > .product-single__sticky {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    position: sticky;
    top: var(--iwa-sticky-top, 20px);
    /* Follows the header as it slides in (same timing as the reveal). */
    transition: top 0.6s ease-out;
  }
  .grid--product-images--partial:not(.grid--product-images-right) > .product-single__sticky + .grid__item {
    grid-column: 2;
    grid-row: 1;
  }
  /* Frequently Bought Together is a direct grid child too (unhidden once its
     products load). It goes under the accordion tabs, last in the column. */
  .grid--product-images--partial:not(.grid--product-images-right) > .product-content-below-gallery {
    grid-column: 2;
    grid-row: 2;
  }
  .grid--product-images--partial:not(.grid--product-images-right) > cart-recommendations {
    grid-column: 2;
    grid-row: 3;
  }
  /* No FBT products: drop the third row, or its row gap is left as an
     empty 20px band under the tabs. */
  .grid--product-images--partial:not(.grid--product-images-right):has(> cart-recommendations.hidden) {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .grid--product-images--partial:not(.grid--product-images-right):has(> cart-recommendations.hidden) > .product-single__sticky {
    grid-row: 1 / span 2;
  }
  .customer__messages--content {
    flex-direction: row;
    gap: 34px;
  }
  .customer__messages--profile {
    flex-direction: column;
    gap: 0;
  }
  .customer__messages--profile img:first-child {
    margin-bottom: 20px;
  }
  h4.full-width-title {
    margin-bottom: 40px;
    font-size: 40px;
    font-weight: 700;
    line-height: 64px;
    text-align: center;
  }
  .collection-content .collection-grid__wrapper .grid.grid--uniform,
  .grid__item--search .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 16px;
    grid-row-gap: 24px;
  }
  #CollectionAjaxContent .grid .grid__item.grid__item--content {
    padding-left: 32px;
  }
  .grid__item--sidebar {
    display: block;
    min-width: 260px;
    max-width: 260px;
  }
  .newsletter-section {
    padding: 80px 0;
  }
  .newsletter-section__content p.h1,
  .newsletter-section__content p.h2,
  .newsletter-section__content p.h3,
  .newsletter-section__content p.h4,
  .newsletter-section__content p.h5,
  .newsletter-section__content p.h6 {
    font-size: 28px;
    font-weight: 700;
    line-height: 44px;
  }
  .newsletter-section__content .rte p {
    font-size: 18px;
    font-weight: 400;
    line-height: 28.8px;
  }
  .hero__title * {
    font-size: 56px;
    font-weight: 700;
    line-height: 78.4px;
  }
  .hero__top-subtitle * {
    font-size: 15px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: -0.04em;
  }
  .hero__subtitle * {
    font-size: 18px;
    line-height: 28.8px;
  }
  .hero__subtitle {
    margin-top: 30px;
  }
  .hero__bottom-title {
    margin-top: 15px;
  }
  .hero__bottom-title p {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
  }
  .product-single__meta .loox-rating,
  .product-single__meta .loox-rating-link--reserved {
    margin-bottom: 15px; /*huseyin*/
  }
}

@media screen and (min-width: 1280px) {
  .grid__item--sidebar {
    min-width: 308px;
    max-width: 308px;
  }
  .collection-content .collection-grid__wrapper .grid.grid--uniform,
  .grid__item--search .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 989px) {
  .collection-filter {
    flex-wrap: unset;
    justify-content: space-between;
    position: unset;
    top: 17px;
    z-index: 5;
  }
  .collection-filter__item--drawer {
    display: block !important;
  }
  .collection-filter .btn {
    text-align: left;
    width: auto;
    height: auto;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 16.32px;
  }
  .collection-filter__item--count {
    flex: 1 1 100%;
    order: 3;
    display: none;
  }
  .collection-filter select {
    width: auto;
    padding: 12px 25px 12px 14px;
    height: auto;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 16.32px;
  }
  .collection-filter__sort-container {
    display: flex;
    justify-content: flex-end;
  }
  .newsletter-section {
    padding: 40px 0 !important;
  }
  .newsletter-section__image {
    display: none;
  }
  .newsletter-section__content {
    width: 100%;
    flex: unset;
  }
  .grid--product-images--partial {
    gap: 0;
  }
}

@media screen and (max-width: 768px) {
  .product__main-photos {
    margin-bottom: 0;
  }
  .product__thumbs--below {
    margin-top: 10px;
  }
  .hero__text-content.vertical-center {
    vertical-align: bottom;
    padding-bottom: 30px;
  }
  .hero__text-content .hero__link {
    margin-top: 30px;
  }
  .hero--mobile--690px {
    height: 690px;
  }
}

/*brk
html[dir="rtl"] {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .product-single__title,
html[dir="rtl"] .variant-input-wrap label,
html[dir="rtl"] .product-block--price,
html[dir="rtl"] .collapsible-content__inner,
html[dir="rtl"] .custom-dropdown__trigger,
html[dir="rtl"] .variant__label[for] {
  text-align: right !important;
}

html[dir="rtl"] .collapsible-content__inner,
html[dir="rtl"] .collapsible-content__inner * {
  direction: rtl !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

html[dir="rtl"] .custom-dropdown__menu {
  left: auto !important;
  right: 0 !important;
}

html[dir="rtl"] .grid-product__rating.loox-rating {
  justify-content: flex-start !important;
  flex-direction: row !important;
}

html[dir="rtl"] .grid-product__title,
html[dir="rtl"] .grid-product__price,
html[dir="rtl"] .collection-sidebar__group .tag__text,
html[dir="rtl"] .product-single__meta .loox-rating {
  text-align: right !important;
}

html[dir="rtl"] .variant-input {
  width: calc(100% / 4 - 6px);
  float: right !important;
}

html[dir="rtl"] .variant-input-wrap {
  flex-wrap: wrap;
  justify-content: flex-end !important;
}

html[dir="rtl"] .dropdown-item {
  justify-content: flex-end !important;
}

html[dir="rtl"] .dropdown-item img {
  margin-left: 0 !important;
  margin-right: 8px !important;
}
/* brk2-inner için ekledin/
html[dir="rtl"] .collapsible-content__inner {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .collapsible-content__inner ul,
html[dir="rtl"] .collapsible-content__inner ol {
  padding-right: 1.5em !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  list-style-position: inside !important;
  text-align: right !important;
}

html[dir="rtl"] .collapsible-content__inner ul li,
html[dir="rtl"] .collapsible-content__inner ol li {
  direction: rtl !important;
  text-align: right !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
*/

.notransition, .hero__image-wrapper, .hero__image {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
   transition: none !important;
  
   animation: none !important;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  -o-animation: none !important;
  -ms-animation: none !important;

  opacity: 1 !important;
  transform: none !important;
}

/* Loox: sharp corners on carousel rating holder */
body .loox-carousel-card-item-rating-holder,
#loox-app .loox-carousel-card-item-rating-holder {
  border-radius: 0 !important;
}

/* ============================================================
   SLIDESHOW HERO — icerik her zaman gorunur alana sigsin
   ------------------------------------------------------------
   Sorun: .hero sabit yukseklik (orn. 450px) + overflow:hidden,
   slide/text height:100% ile bu yukseklige kilitliydi. Uzun
   baslik + aciklama (ozellikle tablet ~769-1024px) sigmayinca
   kirpiliyordu.
   Cozum: yukseklik zincirindeki 100% kilidini kir, hero'yu
   icerige gore buyut; tasarim yukseklikleri min-height olarak
   korunur (icerik kisaysa gorunum AYNI kalir, uzunsa kirpmadan
   buyur). Dikey ortalama table-cell yerine flex ile.
   Kapsam: yalniz .slideshow-wrapper (slideshow.liquid),
   yalniz TEK SLIDE'li hero'lar ([data-slide-count="1"]) ve
   yalniz SABIT yukseklikli hero'lar:
     - masaustu: .hero:not([data-natural])  (natural mod haric)
     - mobil:    .hero[data-mobile-natural=false] (auto/natural haric)
   NEDEN tek slide: cok slide'li hero'da (orn. ana sayfa) Flickity
   hucreleri position:absolute yapip viewport yuksekligini kendi
   hesaplar; height:auto bunu cokertip hero'yu gorunmez yapiyordu.
   Cok slide'li hero'lar, hero-video.liquid ve natural mod orijinal
   davranisinda kalir.
   ============================================================ */

/* --- Masaustu/tablet (>=769px), tek slide + sabit yukseklikli hero --- */
@media screen and (min-width: 769px) {
  .slideshow-wrapper .hero[data-slide-count="1"]:not([data-natural]) { height: auto; }

  .slideshow-wrapper .hero[data-slide-count="1"]:not([data-natural]) .hero__text-wrap { height: auto; }
  .slideshow-wrapper .hero[data-slide-count="1"]:not([data-natural]) .hero__text-wrap .page-width {
    display: block;
    height: auto;
  }
  .slideshow-wrapper .hero[data-slide-count="1"]:not([data-natural]) .hero__text-content {
    display: block;
    width: 100%;
  }

  /* Slide: icerige gore yukseklik + dikey ortalama (flex). */
  .slideshow-wrapper .hero[data-slide-count="1"]:not([data-natural]) .slideshow__slide:first-child,
  .slideshow-wrapper .hero[data-slide-count="1"]:not([data-natural]) .flickity-slider .slideshow__slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
  }
  .slideshow-wrapper .hero[data-slide-count="1"]:not([data-natural]) .slideshow__slide:has(.hero__text-content.vertical-bottom) {
    justify-content: flex-end;
  }
  .slideshow-wrapper .hero[data-slide-count="1"]:not([data-natural]) .hero__image-wrapper { height: 100%; }

  /* min-height = orijinal tasarim yukseklikleri */
  .slideshow-wrapper .hero--450px[data-slide-count="1"] .slideshow__slide { min-height: 450px; }
  .slideshow-wrapper .hero--550px[data-slide-count="1"] .slideshow__slide { min-height: 550px; }
  .slideshow-wrapper .hero--590px[data-slide-count="1"] .slideshow__slide { min-height: 590px; }
  .slideshow-wrapper .hero--650px[data-slide-count="1"] .slideshow__slide { min-height: 650px; }
  .slideshow-wrapper .hero--750px[data-slide-count="1"] .slideshow__slide { min-height: 750px; }
  .slideshow-wrapper .hero--100vh[data-slide-count="1"]  .slideshow__slide { min-height: 100vh; }
}

/* --- Mobil (<=768px), tek slide + sabit yukseklikli hero (auto/natural haric) --- */
@media screen and (max-width: 768px) {
  .slideshow-wrapper .hero[data-slide-count="1"][data-mobile-natural="false"] { height: auto; }

  .slideshow-wrapper .hero[data-slide-count="1"][data-mobile-natural="false"] .hero__text-wrap { height: auto; }
  .slideshow-wrapper .hero[data-slide-count="1"][data-mobile-natural="false"] .hero__text-wrap .page-width {
    display: block;
    height: auto;
  }
  .slideshow-wrapper .hero[data-slide-count="1"][data-mobile-natural="false"] .hero__text-content {
    display: block;
    width: 100%;
  }

  .slideshow-wrapper .hero[data-slide-count="1"][data-mobile-natural="false"] .slideshow__slide:first-child,
  .slideshow-wrapper .hero[data-slide-count="1"][data-mobile-natural="false"] .flickity-slider .slideshow__slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
  }
  .slideshow-wrapper .hero[data-slide-count="1"][data-mobile-natural="false"] .slideshow__slide:has(.hero__text-content.vertical-bottom) {
    justify-content: flex-end;
  }
  .slideshow-wrapper .hero[data-slide-count="1"][data-mobile-natural="false"] .hero__image-wrapper { height: 100%; }

  /* min-height = orijinal mobil tasarim yukseklikleri */
  .slideshow-wrapper .hero--mobile--250px[data-slide-count="1"][data-mobile-natural="false"] .slideshow__slide { min-height: 250px; }
  .slideshow-wrapper .hero--mobile--300px[data-slide-count="1"][data-mobile-natural="false"] .slideshow__slide { min-height: 300px; }
  .slideshow-wrapper .hero--mobile--400px[data-slide-count="1"][data-mobile-natural="false"] .slideshow__slide { min-height: 400px; }
  .slideshow-wrapper .hero--mobile--500px[data-slide-count="1"][data-mobile-natural="false"] .slideshow__slide { min-height: 500px; }
  .slideshow-wrapper .hero--mobile--690px[data-slide-count="1"][data-mobile-natural="false"] .slideshow__slide { min-height: 690px; }
  .slideshow-wrapper .hero--mobile--100vh[data-slide-count="1"][data-mobile-natural="false"] .slideshow__slide { min-height: 90vh; }
}

/* ==========================================================================
   Buy-box icerik bloklari: short_pitch ve key_benefits
   Metafield bossa Liquid tarafinda hicbir sey basilmaz, bu yuzden burada
   bos-kap durumu icin kural yok.
   ========================================================================== */

/* Same muted grey as the accordion text (#6b6b6b), one size down from 15px. */
.product-short-pitch {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #6b6b6b;
  text-align:justify;
}

.product-key-benefits ul {
  /* Tema kaynakli ust/sol/sag degerleri sifirlanir. Alt margin'e
     DOKUNULMAZ: buy-box'in dikey ritmi ondan geliyor. */
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  list-style: none;
}

/* Tighter than the 25px block rhythm: the list reads as part of the buy
   box (about 16px under the buttons) and ends without extra space before
   the next row. */
.product-block--key-benefits {
  margin-top: -9px;
  margin-bottom: 0;
}

/* Phones: the product grid has no row gap there, so keep a little air
   before the accordion that follows. */
@media only screen and (max-width: 768px) {
  .product-block--key-benefits {
    margin-bottom: 20px;
  }
}

.product-key-benefits ul {
  margin-bottom: 0;
}

.product-key-benefits li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 26px;
  font-size: 14px;
  line-height: 1.5;
  list-style: none;
}

.product-key-benefits li:last-child {
  margin-bottom: 0;
}

/* Mobilde tema .product-single__meta'ya text-align: center veriyor (theme.css,
   max-width: 768px). Bloklar onun icinde oldugu icin madde metinleri ortalaniyor,
   tik ise mutlak konumlu ve solda kaliyor -- metin ortada yuzuyor gibi duruyor.
   Ogenin kendisine yazilan deger miras alinan degeri her zaman ezdigi icin
   spesifiklik yarisina girmek gerekmiyor.
   'start' mantiksal: LTR'de sol, RTL'de sag. */
@media only screen and (max-width: 768px) {
  .product-key-benefits,
  .product-key-benefits ul,
  .product-key-benefits li {
    text-align: start;
  }
}

/* Tik: Add to bag kahvesinde dolu daire icinde beyaz tik, tek bir SVG.
   Iki pseudo-element ile cizilen surumde dondurulmus tik dairenin
   ortasina oturmuyordu. Dikeyde ilk satirin ortasina hizalanir:
   line-height 1.5 oldugu icin ortasi 0.75em. */
.product-key-benefits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.75em - 9px);
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23735846'/%3E%3Cpath d='M5.2 9.3l2.5 2.5 5.1-5.3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

html[dir='rtl'] .product-key-benefits li {
  padding-left: 0;
  padding-right: 26px;
}

html[dir='rtl'] .product-key-benefits li::before {
  left: auto;
  right: 0;
}



/* Product thumbnails below the gallery: give each item a fixed width.
   With only max-width set, the inline-block item shrank to its lazyload
   placeholder (~5px tall) and grew to 80px when the image arrived, pushing
   the product info column down (Lighthouse CLS 0.29 on mobile). */
.product__thumbs--below .product__thumb-item {
  width: 80px;
}

/* Gallery slides other than the starting one now load lazily. theme.css hides
   every .image-element (opacity 0) unless loading=eager, and the fade-in that
   would reveal it is disabled (image-element renders no-data-aos), so lazy
   slides stayed invisible after loading. */
.product-main-slide .image-element {
  opacity: 1;
}

/* Back-to-top button (snippets/back-to-top.liquid). Logical insets so the
   start/end placement mirrors on the Arabic storefront. */
.back-to-top {
  position: fixed;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--colorBtnPrimary);
  color: var(--colorBtnPrimaryText);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:focus-visible {
  outline: 2px solid var(--colorBtnPrimary);
  outline-offset: 3px;
}

.back-to-top__icon {
  width: 22px;
  height: 22px;
}

.back-to-top--start {
  inset-inline-start: 16px;
}

.back-to-top--end {
  inset-inline-end: 16px;
}

.back-to-top--center {
  left: 50%;
  margin-left: -22px;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}

/* Stand-in for the Re:amaze launcher (snippets/chat-facade.liquid). Size,
   offset and gradient copy Re:amaze's own launcher and its widget colour
   setting, so the swap to the real one is invisible. */
.chat-facade {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(115, 88, 70) 0%, rgb(157, 138, 126) 100%);
  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 3px 0;
  color: #fff;
  opacity: 0.95;
  cursor: pointer;
}

.chat-facade[hidden] {
  display: none;
}

.chat-facade__icon {
  width: 100%;
  height: 100%;
}

.chat-facade:focus-visible {
  outline: 2px solid rgb(115, 88, 70);
  outline-offset: 3px;
}

.chat-facade.is-loading .chat-facade__icon {
  animation: chat-facade-pulse 0.9s ease-in-out infinite;
}

@keyframes chat-facade-pulse {
  50% { opacity: 0.4; }
}

@media only screen and (min-width: 769px) {
  .chat-facade {
    width: 58px;
    height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-facade.is-loading .chat-facade__icon {
    animation: none;
  }
}

/* Sticky header slide (theme.js scrollHandler). Stock theme.css sets
   transition: none on the stuck header and a 0.4s snap-in on --opening;
   --animate is added a frame after the header goes fixed and hidden, so
   only real show/hide moves animate. Showing is slower than hiding. */
.site-header.site-header--stuck.site-header--animate {
  transition: transform 0.25s ease-in;
}
.site-header.site-header--stuck.site-header--animate.site-header--opening {
  transition: transform 0.6s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .site-header.site-header--stuck.site-header--animate,
  .site-header.site-header--stuck.site-header--animate.site-header--opening {
    transition: none;
  }
}

/* ==========================================================================
   Product page rhythm below the buy box: trust bar -> Loox reviews -> A+ ->
   FAQ -> recommendations all sit one --iwa-pdp-gap apart (40px phone, 64px
   from 769px), measured from visible content to visible content. Loox's
   iframe carries 20px of its own space above and 30px below the widget, so
   those are subtracted. A hairline in the A+ module colour separates the
   reviews from the A+ story.
   ========================================================================== */
.template-product { --iwa-pdp-gap: 40px; }

@media screen and (min-width: 769px) {
  .template-product { --iwa-pdp-gap: 64px; }
}

.template-product .shopify-section:has(#looxReviews) > .index-section {
  margin: calc(var(--iwa-pdp-gap) - 20px) 0 0;
}

.template-product .shopify-section:has(#looxReviews) + .iwa-aplus-section .iwa-ap__inner {
  padding-top: calc(var(--iwa-pdp-gap) - 30px);
}

.template-product .shopify-section:has(#looxReviews) + .iwa-aplus-section .iwa-ap-m--flush {
  border-top: 1px solid var(--iwa-line);
  padding-top: var(--iwa-pdp-gap);
}

.template-product .iwa-aplus-section .iwa-ap__inner,
.template-product .iwa-aplus-section .iwa-ap-m:last-child {
  padding-bottom: 0;
}

.template-product .shopify-section.index-section:has(.faq-wrapper) {
  margin: var(--iwa-pdp-gap) 0 0;
}

.template-product .shopify-section.index-section:has(.faq-wrapper) .faq-wrapper {
  margin-top: 0;
}

/* The FAQ's "Still have questions?" line is wrapped in an inline
   padding: 20px 0, hence the !important. */
.template-product .faq-wrapper > div:last-child {
  padding-bottom: 0 !important;
}

.template-product .faq-wrapper .faq-text {
  margin-bottom: 0;
}

.template-product product-recommendations > .index-section {
  margin-top: var(--iwa-pdp-gap);
}

/* Product page: less space between the (slim) header and the breadcrumb on
   desktop. The theme pads .page-content--product by 45px; with the
   breadcrumb's own 10px margin that left a 55px gap, now 26px. */
@media screen and (min-width: 769px) {
  .page-content.page-content--product {
    padding-top: 16px;
    /* The theme's 75px left a wide empty band under the FBT row before the
       next section. */
    padding-bottom: 32px;
  }
}

/* Pay-later line under the price (snippets/bnpl-line.liquid): one sentence,
   four provider marks; each mark opens a dialog with that provider's terms. */
.iwa-bnpl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--colorTextBody);
}
.iwa-bnpl__logos {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.iwa-bnpl__btn {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 3px;
}
.iwa-bnpl__btn:focus-visible {
  outline: 2px solid var(--colorTextBody);
  outline-offset: 2px;
}
.iwa-bnpl__btn {
  align-items: center;
  height: 24px;
  padding: 0 2px;
}
.iwa-bnpl__mark {
  display: block;
  width: auto;
}
/* Optical sizes: the four wordmarks have different cap heights. */
.iwa-bnpl__mark--shopify_pay { height: 16px; }
.iwa-bnpl__mark--klarna { height: 12px; }
.iwa-bnpl__mark--afterpay { height: 15px; }
.iwa-bnpl__mark--paypal { height: 14px; }
.iwa-bnpl__dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 24px 22px 20px;
  border: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
  color: var(--colorTextBody);
  font-size: 14px;
  line-height: 1.5;
}
.iwa-bnpl__dialog::backdrop {
  background: rgba(0, 0, 0, .45);
}
.iwa-bnpl__close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}
.iwa-bnpl__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.iwa-bnpl__head .iwa-bnpl__mark {
  height: 24px;
}
.iwa-bnpl__head .iwa-bnpl__mark--klarna { height: 18px; }
.iwa-bnpl__head h2 {
  margin: 0;
  font-size: 17px;
}
.iwa-bnpl__panel p {
  margin: 0 0 10px;
}
.iwa-bnpl__legal {
  font-size: 12px;
  color: #6b6b6b;
}
.iwa-bnpl__legal a {
  text-decoration: underline;
}
html[dir="rtl"] .iwa-bnpl__close {
  right: auto;
  left: 10px;
}
.iwa-bnpl__panel[hidden] {
  display: none !important;
}

/* Desktop: the pay-later line sits right of the price, set off by a hairline,
   as a small column (sentence above, marks below). */
@media screen and (min-width: 769px) {
  .product-block--price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    container: bnpl-price / inline-size;
  }
  .product-block--price > div:not(.iwa-bnpl) {
    flex-basis: 100%;
  }
  .product-block--price > .iwa-bnpl {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin: 0 0 0 18px;
    padding-left: 22px;
    border-left: 1px solid var(--colorBorder);
    font-size: 12px;
  }
  html[dir="rtl"] .product-block--price > .iwa-bnpl {
    margin: 0 18px 0 0;
    padding: 0 22px 0 0;
    border-left: 0;
    border-right: 1px solid var(--colorBorder);
  }
}

/* Separators and the short sentence are for phones only. */
.iwa-bnpl__text-short,
.iwa-bnpl__sep {
  display: none;
}
/* Phones: one line, "Shop now, pay later with shop, Klarna., afterpay or
   PayPal", with smaller marks. Very narrow screens may still wrap. */
@media screen and (max-width: 768px) {
  .iwa-bnpl {
    gap: 4px 5px;
    font-size: 12px;
  }
  .iwa-bnpl__text-long {
    display: none;
  }
  .iwa-bnpl__text-short {
    display: inline;
    white-space: nowrap;
  }
  .iwa-bnpl__logos {
    gap: 3px;
    white-space: nowrap;
  }
  .iwa-bnpl__sep {
    display: inline;
  }
  .iwa-bnpl__sep--comma {
    margin-left: -2px;
  }
  .iwa-bnpl__btn {
    height: 20px;
    padding: 0;
  }
  .iwa-bnpl__logos .iwa-bnpl__mark--shopify_pay { height: calc(13px * var(--bnpl-s, 1)); }
  .iwa-bnpl__logos .iwa-bnpl__mark--klarna { height: calc(9.5px * var(--bnpl-s, 1)); }
  .iwa-bnpl__logos .iwa-bnpl__mark--afterpay { height: calc(12px * var(--bnpl-s, 1)); }
  .iwa-bnpl__logos .iwa-bnpl__mark--paypal { height: calc(11px * var(--bnpl-s, 1)); }
}
/* 360-389px phones (iPhone SE/mini, small Androids): everything ~12% smaller
   so the line still fits on one row. */
@media screen and (max-width: 389px) {
  .iwa-bnpl {
    --bnpl-s: 0.86;
    gap: 4px;
    font-size: 10.5px;
  }
  .iwa-bnpl__logos {
    gap: 2px;
  }
}

/* Desktop with a narrow product column (about 769-1300px viewports): under
   560px the price block can't hold the line beside the price, so it goes under
   it as the one-row phone version, without the hairline. (Same as cfw-en.) */
@container bnpl-price (max-width: 559px) {
  .product-block--price > .iwa-bnpl {
    flex: 0 0 100%;
    flex-direction: row;
    align-items: center;
    gap: 4px 5px;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    font-size: 12px;
  }
  html[dir="rtl"] .product-block--price > .iwa-bnpl {
    margin: 8px 0 0;
    padding: 0;
    border: 0;
  }
  .iwa-bnpl__text-long { display: none; }
  .iwa-bnpl__text-short { display: inline; white-space: nowrap; }
  .iwa-bnpl__logos { gap: 3px; white-space: nowrap; }
  .iwa-bnpl__sep { display: inline; }
  .iwa-bnpl__sep--comma { margin-left: -2px; }
  .iwa-bnpl__btn { height: 20px; padding: 0; }
  .iwa-bnpl__logos .iwa-bnpl__mark--shopify_pay { height: 13px; }
  .iwa-bnpl__logos .iwa-bnpl__mark--klarna { height: 9.5px; }
  .iwa-bnpl__logos .iwa-bnpl__mark--afterpay { height: 12px; }
  .iwa-bnpl__logos .iwa-bnpl__mark--paypal { height: 11px; }
}

/* Shown under every provider panel: these options aren't offered everywhere. */
.iwa-bnpl__availability {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--colorBorder);
  font-size: 12px;
  color: #6b6b6b;
}

/* --------------------------------------------------------------------------
   Buy box spacing scale (product info column)

   Three steps instead of the mix of 10/15/16/25px the blocks had:
   - inner (12px): an option label to its buttons, swatches or dropdown;
   - group (24px): one option to the next, the stock line before the buttons
     uses half of it, the benefit list under the buttons uses all of it;
   - block (28px phones, 32px desktop): between the blocks themselves.
   Tabs and the title header keep the theme's own spacing.
   -------------------------------------------------------------------------- */
.product-single__meta {
  --iwa-gap-inner: 12px;
  --iwa-gap-group: 24px;
  --iwa-gap-block: 28px;
}

@media only screen and (min-width: 769px) {
  .product-single__meta {
    --iwa-gap-block: 32px;
  }
}

.product-single__meta .product-block:not(.product-block--tab):not(.product-block--header) {
  margin-bottom: var(--iwa-gap-block);
}

/* The buy buttons block wraps a second .product-block; its margin would
   collapse into the outer one and override the gap set below. */
.product-single__meta .product-block .product-block:not(.product-block--tab):not(.product-block--header) {
  margin-bottom: 0;
}

/* Option label -> control. Overrides the 10px theme default and the 15px
   desktop Size row in size-unit-switch.css. */
.product-single__meta .variant__label[for],
.product-single__meta label.variant__label--has-size-guide[for],
.product-single__meta .variant__label[for]:has(.iwa-unit-switch) {
  margin-bottom: var(--iwa-gap-inner);
}

/* The POPULAR badge sits 10px above its button (top:-10px, set inline by
   main-product.liquid). Size rows always reserve that room, so the row does
   not jump when the badge is added after load; any other option only when it
   carries a badge. The label -> badge distance then matches label -> control
   elsewhere. */
.product-single__meta .variant-input-wrap[data-handle*='size'],
.product-single__meta .variant-input-wrap:has(.popular-badge) {
  padding-top: 10px;
}

.product-single__meta .variant-wrapper + .variant-wrapper {
  margin-top: var(--iwa-gap-group);
}

/* Design Option switcher (additional_products): rendered without a block
   wrapper, so it gets the same label gap and block gap here. */
.product-single__meta .apc-label {
  display: block;
  margin: 0 0 var(--iwa-gap-inner);
  font-size: 14px;
}

.product-single__meta .apc-container {
  margin-bottom: var(--iwa-gap-block);
}

/* Stock line belongs to the buttons under it (a hidden script and the
   inventory data div sit between them, so ~ rather than +). */
.product-single__meta .product-block--sales-point:has(.icon--inventory):has(~ .product-block .add-to-cart) {
  margin-bottom: calc(var(--iwa-gap-group) / 2 + 4px);
}

.product-single__meta .product-block--sales-point + .product-block--sales-point {
  margin-top: calc(var(--iwa-gap-inner) - var(--iwa-gap-block));
}

/* Benefit list under the buttons. */
.product-single__meta .product-block:has(.add-to-cart):has(+ .product-block--key-benefits) {
  margin-bottom: var(--iwa-gap-group);
}

.product-single__meta .product-block--key-benefits {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Product accordions (About this piece, Size & specification, Translation,
   Shipping): body text up from 13px to 15px, headings down from the 36px
   page h2 (26px on phones) to sizes that sit one step above the text, and
   tighter paragraph spacing (was 25px desktop / 15px phones).
   -------------------------------------------------------------------------- */
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner p {
  margin: 0 0 12px;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h1,
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h2 {
  font-size: 19px;
  line-height: 1.3;
  margin: 22px 0 8px;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h3 {
  font-size: 17px;
  line-height: 1.35;
  margin: 18px 0 6px;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h4,
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h5,
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h6 {
  font-size: 15px;
  line-height: 1.4;
  margin: 16px 0 6px;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner ul,
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner ol {
  margin-bottom: 12px;
}

/* Accordion titles and option labels ("SIZE:", "COLOR:", Design Option):
   one step heavier than the 600 bold, from the 700 face loaded in
   snippets/font-face.liquid. The selected value next to the label stays 400. */
.product-block--tab .collapsible-trigger-btn,
.product-single__meta .variant__label[for],
.product-single__meta .apc-label {
  font-family: "IWA Base Heavy", var(--typeBasePrimary), var(--typeBaseFallback);
  font-weight: 700;
}

.product-single__meta .variant__label-info {
  font-family: var(--typeBasePrimary), var(--typeBaseFallback);
}

/* Product descriptions often carry inline heading margins
   (style="margin-top: 20px; margin-bottom: 15px"), which beat the scale
   above; vertical margins only, so any inline indent stays. */
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h1,
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h2 {
  margin-top: 22px !important;
  margin-bottom: 8px !important;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h3 {
  margin-top: 18px !important;
  margin-bottom: 6px !important;
}

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h4,
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h5,
.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner h6 {
  margin-top: 16px !important;
  margin-bottom: 6px !important;
}

/* The theme's .grid clearfix ::after becomes a grid item in the product grid
   and lands in an extra row, leaving an empty row gap under the last block
   (FBT). A grid container needs no clearfix. Same fix as iwa-tr-theme 03ce1eb. */
.grid--product-images--partial::after {
  display: none;
}

/* Klaviyo embedded sign-up form (home page custom content): its image
   column has min-width 450px, so on phones the form widened the page to
   ~600px. The browser then zoomed the page out, the cart drawer no longer
   covered the screen and its footer fell below it, and the form's text
   and email field sat off-screen. Stack the two columns on phones. */
@media screen and (max-width: 768px) {
  form.klaviyo-form {
    flex-wrap: wrap !important;
  }

  form.klaviyo-form > div {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  form.klaviyo-form > div img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ------------------------------------------------------------------
   Mobile menu (#NavDrawer, snippets/drawer-menu.liquid), 2026-10-11.
   Phones get the bag's look: a white panel inset 8px from the screen
   edges over the same dark overlay, square corners, and the close button
   centred above the panel (enjoythewood.com). A tap on any gap around the
   panel closes the menu: it lands on .iwa-nav-backdrop, a .js-drawer-close.
   ------------------------------------------------------------------ */
.iwa-nav-backdrop,
.iwa-nav-close {
  display: none;
}

@media screen and (max-width: 768px) {
  #NavDrawer {
    --iwa-nav-inset: 8px;
    --iwa-nav-close: 48px;
    --iwa-nav-top: calc(var(--iwa-nav-close) + 2 * 12px);
    padding: var(--iwa-nav-top) var(--iwa-nav-inset) var(--iwa-nav-inset);
    background: transparent;
    box-shadow: none;
  }

  #NavDrawer .iwa-nav-backdrop {
    display: block;
    position: absolute;
    inset: 0;
  }

  #NavDrawer .iwa-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 2;
    width: var(--iwa-nav-close);
    height: var(--iwa-nav-close);
    margin-left: calc(var(--iwa-nav-close) / -2);
    padding: 0;
    border: 0;
    border-radius: var(--buttonRadius, 0);
    background: #fff;
    color: #1e252c;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
  }

  #NavDrawer .iwa-nav-close .icon {
    width: 26px;
    height: 26px;
  }

  #NavDrawer .drawer__contents {
    position: relative;
    z-index: 1;
    background: #fff;
    box-shadow: 0 0 40px rgba(0, 0, 0, .12);
  }

  /* The old close row at the top of the panel is replaced by the button
     above it. */
  #NavDrawer .drawer__fixed-header {
    display: none;
  }

  /* The theme pulls the list up by the gutter (-20px) to sit under that
     row; without it the first item touched the panel top (4px). */
  #NavDrawer .mobile-nav {
    margin-top: 0;
  }

  /* Same overlay as the open bag (.iwa-cart-overlay lives in this header
     section too), and the floating buttons step aside. */
  html.js-drawer-open .shopify-section:has(#NavDrawer.drawer--is-open) {
    z-index: 1000;
  }

  html.js-drawer-open .shopify-section:has(#NavDrawer.drawer--is-open) .iwa-cart-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .35s ease;
  }

  html:has(#NavDrawer.drawer--is-open) .main-content:after {
    display: none;
  }

  html:has(#NavDrawer.drawer--is-open) :is(.chat-facade, #reamaze-widget, #reamaze-wrapper, .back-to-top) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Heavier menu items. Top level asks for 700 but Muli is only loaded at
     400/600, so it drew at 600; the "IWA Base Heavy" face (700) gives it
     the weight. Second and third level go from 400 to 600. */
  #NavDrawer .mobile-nav__link--top-level span {
    font-family: "IWA Base Heavy", var(--typeBasePrimary), var(--typeBaseFallback);
  }

  #NavDrawer .mobile-nav__sublist :is(.mobile-nav__link, .mobile-nav__faux-link) {
    font-weight: 600;
  }
}

/* Search page and collection toolbar: one control standard (2026-10-11).
   The search field, the Filter button and the sort select share one height,
   one 1px border, the site's button corners (--iwa-ctl-r, the same as the
   PDP Add to bag) and the page gutter, so their edges line up with the
   product grid below. */
:root {
  --iwa-ctl-h: 46px;
  --iwa-ctl-r: 0px;
  --iwa-ctl-line: #e8e8e1;
}

.search-content .search__input-wrap {
  border: 0;
}

.search-content .search__input-wrap .search__input {
  height: var(--iwa-ctl-h);
  margin: 0;
  padding: 0 16px 0 44px;
  border: 1px solid var(--iwa-ctl-line);
  border-radius: var(--iwa-ctl-r);
  font-size: 16px;
  line-height: 1.2;
}

.search-content .btn--search_cstm {
  left: 14px;
  right: auto;
  transform: translateY(-50%);
}

html[dir="rtl"] .search-content .search__input-wrap .search__input {
  padding: 0 44px 0 16px;
}

html[dir="rtl"] .search-content .btn--search_cstm {
  left: auto;
  right: 14px;
}

.search-content hr.hr--medium {
  margin: 24px 0;
}

.collection-filter .btn,
.collection-filter select {
  box-sizing: border-box;
  height: var(--iwa-ctl-h);
  border: 1px solid var(--iwa-ctl-line);
  border-radius: var(--iwa-ctl-r);
}

.collection-filter .btn {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  line-height: 1;
}

.collection-filter .btn .icon {
  top: 0;
}

.collection-filter select {
  padding: 0 36px 0 16px;
  line-height: 1.2;
  background-position: right 14px center;
}

html[dir="rtl"] .collection-filter select {
  padding: 0 16px 0 36px;
  background-position: left 14px center;
}

@media screen and (max-width: 768px) {
  /* Was 20px left / 10px right; the grid below sits at the 17px page gutter. */
  .search-content predictive-search form {
    margin-left: 17px;
    margin-right: 17px;
  }
}

@media screen and (min-width: 769px) {
  .search-content hr.hr--medium {
    margin: 32px 0;
  }
}

/* Search page title: "409 results for "world map"" replaces the breadcrumb
   and the "Search" heading (sections/main-search.liquid). */
.search-page__header {
  margin: 0 0 24px;
}

.search-page__title {
  margin: 0;
  padding: 0 17px;
  color: #1e252c;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-weight: var(--typeHeaderWeight);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  overflow-wrap: anywhere;
}

@media screen and (min-width: 769px) {
  .search-page__header {
    margin-bottom: 32px;
  }

  .search-page__title {
    font-size: 24px;
  }
}

/* ------------------------------------------------------------------
   Cart bubble with the item count (enjoythewood style, 2026-10-11): a round
   badge on the bag's lower right corner. theme.js updateCount() fills
   .cart-link__bubble-num and toggles --visible on every cart change.
   ------------------------------------------------------------------ */
.cart-link .cart-link__bubble.cart-link__bubble--visible {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  width: auto;
  padding: 0 5px;
  /* From the icon's top (the link box is taller than the 24px icon): the
     badge centre sits just inside the bag's lower right corner. */
  top: 10px;
  right: -7px;
  bottom: auto;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #735846;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

html[dir="rtl"] .cart-link .cart-link__bubble.cart-link__bubble--visible {
  right: auto;
  left: -7px;
}

.cart-link__bubble-num {
  display: block;
}

/* ------------------------------------------------------------------
   Product options (2026-10-11): every option heading, the Design / Product
   Option switcher included, in the same dark bold type, the chosen value bold
   too, and a hairline between the option groups.
   ------------------------------------------------------------------ */
.product-single__meta .variant__label[for],
.product-single__meta .apc-label {
  color: #1e252c;
  font-weight: 700;
}

.product-single__meta .variant__label-info,
.product-single__meta .variant__label-info span {
  color: #1e252c;
  font-weight: 700;
}

.product-single__meta .apc-container:has(+ .product-block .variant-wrapper) {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e8e8e1;
}

.product-single__meta .variant-wrapper ~ .variant-wrapper {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e8e8e1;
}

/* The chosen value after an option heading in the heading's heavy face too
   (the base face has no bold cut loaded, so weight alone did nothing). */
.product-single__meta .variant__label-info,
.product-single__meta .variant__label-info span {
  font-family: "IWA Base Heavy", var(--typeBasePrimary), var(--typeBaseFallback);
}

/* ------------------------------------------------------------------
   Option buttons (2026-10-11): one column count for every option group on a
   product, set by the group with the most values (snippets/product-template,
   --opt-cols): 1-2 values -> two buttons fill the row, 3 -> three, 4+ -> four.
   Buttons share the row equally; longer labels wrap inside the button.
   Colour swatch groups keep their own layout, and so do the custom swatch
   pickers (.iwa--custom--variant), whose native fieldset stays hidden.
   ------------------------------------------------------------------ */
.product-block--options .variant-input-wrap:not(:has(.color-swatch)):not(.iwa--custom--variant .variant-input-wrap) {
  display: grid;
  grid-template-columns: repeat(var(--opt-cols, 4), minmax(0, 1fr));
  gap: 8px;
}

.product-block--options .variant-input-wrap:not(:has(.color-swatch)):not(.iwa--custom--variant .variant-input-wrap) .variant-input {
  width: auto;
  min-width: 0;
  margin: 0;
}

.product-block--options .variant-input-wrap:not(:has(.color-swatch)):not(.iwa--custom--variant .variant-input-wrap) label {
  width: 100%;
  height: 100%;
  white-space: normal;
}

@media screen and (max-width: 768px) {
  .product-block--options .variant-input-wrap:not(:has(.color-swatch)):not(.iwa--custom--variant .variant-input-wrap) {
    gap: 6px;
  }
}

/* Colour swatch boxes (snippets/custom-dropdown when it shows every colour as a
   box, .custom-variant-wrapper--buttons) take the same columns as the option
   buttons. More colours than that stay a dropdown and keep their own layout. */
.product-block--options .custom-variant-wrapper--buttons .custom-dropdown__menu {
  display: grid !important;
  grid-template-columns: repeat(var(--opt-cols, 4), minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.product-block--options .custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item {
  width: auto !important;
  min-width: 0;
  max-width: none;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .product-block--options .custom-variant-wrapper--buttons .custom-dropdown__menu {
    gap: 6px !important;
  }
}

/* ------------------------------------------------------------------
   Colour swatches shown as boxes (snippets/custom-dropdown,
   .custom-variant-wrapper--buttons). Moved here from the deferred
   custom-dropdown-show_all_variants.css (2026-10-11): while that file was
   still loading, the page drew the plain dropdown (its trigger with the
   product image, unstyled square boxes) and then jumped to this layout.
   ------------------------------------------------------------------ */
.custom-variant-wrapper--buttons .custom-dropdown__trigger {
  display: none !important;
}
.custom-variant-wrapper--buttons .custom-dropdown__menu {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem;
  box-shadow: unset;
}

.custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item {
  flex-direction: column;
  text-align: center;
  border: 1px solid #e8e8e1;

  /* Four per row: the 0.4rem gap x 3 spread over 4 items is 0.3rem. */
  width: calc(100% / 4 - 0.3rem);
}

@media only screen and (max-width: 768px) {
  .custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item {
    padding: 8px 4px;
    font-size: 12px;
    line-height: 16px;
  }
}

.custom-variant-wrapper--buttons .sold-out-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 5px;
  font-size: 0.8em;
  border-radius: 3px;
  color: red;
  pointer-events: none;
}

/* Product page title (2026-10-11): 20px / 30px on phones, 25px / 33px from
   769px. Two classes: the h1 also carries the theme's .h2 sizes. */
.product-single__meta .product-single__title,
h1.product-single__title {
  font-size: 20px;
  line-height: 30px;
}

@media screen and (min-width: 769px) {
  .product-single__meta .product-single__title,
  h1.product-single__title {
    font-size: 25px;
    line-height: 33px;
  }
}

/* --------------------------------------------------------------------------
   Product page price block, same layout as colorfullworlds (2026-10-11), in
   IWA's own colours: big price, struck compare-at price, a "30%" box instead
   of the round "SAVE 30%" pill, "SKU: …" under them, then the pay-later /
   installments line. Key benefits follow right after (templates/product.json).
   -------------------------------------------------------------------------- */
.product-block--price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: 12px;
  text-align: start;
}

.product-block--price > div:not(.iwa-bnpl),
.product-block--price > p {
  flex-basis: 100%;
}

/* SKU right under the price row; installments line and policies after it. */
.product-block--price > .product-price-sku {
  order: 3;
}

.product-block--price > div:not(.iwa-bnpl):not([data-unit-price-wrapper]) {
  order: 4;
}

.product-block--price .product__price,
.product-block--price .product__price--compare {
  margin: 0;
  padding: 0 !important;
}

.product-block--price .product__price {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.product-block--price .product__price--compare {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: line-through;
}

.product-block--price .product__price-savings {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

.product-price-sku {
  margin: 6px 0 0;
  color: #6b6b6b;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.product-price-sku:has([data-sku]:empty) {
  display: none;
}

@media screen and (max-width: 768px) {
  .product-block--price > .iwa-bnpl {
    order: 4;
    flex-basis: 100%;
    margin-top: 8px;
  }
}

@media screen and (min-width: 769px) {
  .product-block--price .product__price {
    font-size: 28px;
  }

  .product-block--price .product__price--compare {
    font-size: 24px;
  }

  .product-block--price .product__price-savings {
    font-size: 19px;
  }

  .product-price-sku {
    font-size: 15px;
  }
}

/* Key benefits now sit under the price block instead of under the buttons. */
.product-single__meta .product-block--key-benefits {
  margin-top: 0;
}

@media screen and (max-width: 768px) {
  .product-single__meta .product-key-benefits li {
    font-size: 13px;
  }
}

.product-single__meta .product-block--key-benefits {
  margin-bottom: var(--iwa-gap-block);
}

/* Narrow desktop column: the pay-later line drops under the price, so it also
   goes after the SKU. */
@container bnpl-price (max-width: 559px) {
  .product-block--price > .iwa-bnpl {
    order: 4;
  }
}

/* Short pitch and key benefits in the standard body text colour; a little
   less room around the price block (24px desktop / 20px phones); black ticks
   that start 3px in from the edge. */
.product-short-pitch,
.product-key-benefits li {
  color: var(--colorTextBody);
}

.product-single__meta .product-block--short-pitch.product-block:not(.product-block--tab):not(.product-block--header),
.product-single__meta .product-block--price.product-block:not(.product-block--tab):not(.product-block--header):has(+ .product-block--key-benefits) {
  margin-bottom: 20px;
}

@media screen and (min-width: 769px) {
  .product-single__meta .product-block--short-pitch.product-block:not(.product-block--tab):not(.product-block--header),
  .product-single__meta .product-block--price.product-block:not(.product-block--tab):not(.product-block--header):has(+ .product-block--key-benefits) {
    margin-bottom: 24px;
  }
}

.product-key-benefits li {
  padding-left: 29px;
}

.product-key-benefits li::before {
  left: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23111'/%3E%3Cpath d='M5.2 9.3l2.5 2.5 5.1-5.3' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[dir="rtl"] .product-key-benefits li {
  padding-left: 0;
  padding-right: 29px;
}

html[dir="rtl"] .product-key-benefits li::before {
  left: auto;
  right: 3px;
}

/* ------------------------------------------------------------------
   Breadcrumbs, colorfullworlds-style (2026-10-11): home icon | All collections |
   main-menu trail | current page (snippets/breadcrumbs + snippets/menu-trail).
   Uppercase, thin bars between, current page lighter.
   ------------------------------------------------------------------ */
.breadcrumb {
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-transform: uppercase;
}

.breadcrumb .cst-breadcrumb_text {
  color: #1e252c;
}

.breadcrumb a.cst-breadcrumb_text {
  font-weight: 700;
  text-decoration: none;
}

.breadcrumb a.cst-breadcrumb_text:hover {
  color: #735846;
}

.breadcrumb .breadcrumb__current {
  font-weight: 400;
}

.breadcrumb .breadcrumb__divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 10px;
  background: currentColor;
  opacity: 0.35;
  vertical-align: -1px;
}

.breadcrumb .breadcrumb__home {
  display: inline-flex;
  vertical-align: -2px;
}

.template-product .breadcrumb a.cst-breadcrumb_text {
  color: #1e252c !important;
  font-size: 12px;
}

.template-product .breadcrumb .breadcrumb__current,
.template-product .breadcrumb .breadcrumb__divider {
  color: #6b6b6b !important;
  font-size: 12px;
}

.collection-header--title .breadcrumb {
  margin: 10px 0 0;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .breadcrumb {
    font-size: 11px;
  }

  .breadcrumb .breadcrumb__divider {
    margin: 0 8px;
  }
}

/* All collections page (/collections): the main-menu collections as square tiles,
   2 columns on phones and 4 on desktop, white title centred on the image
   (sections/list-collections-template, snippets/menu-coltile). */
.grid.iwa-allcols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.iwa-allcols > .grid__item {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.iwa-coltile {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
}

.iwa-coltile__img {
  position: relative;
  display: block;
  padding-top: 100%;
  background: #f2f0ed;
}

.iwa-coltile__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.iwa-coltile:hover .iwa-coltile__img img {
  transform: scale(1.04);
}

.iwa-coltile__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #fff;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-weight: var(--typeHeaderWeight);
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 14px rgba(0, 0, 0, 0.55);
}

@media screen and (min-width: 769px) {
  .grid.iwa-allcols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .iwa-coltile__title {
    font-size: 22px;
  }
}

/* Empty bag: compact collection cards (2026-10-12). Each card is a small square
   photo with the title and product count beside it, two cards per row, so the
   whole empty bag (cards and the shop-all button) stays on screen. The square
   cards were 182px on phones and 286px on desktop; the button ended below a
   900px-tall window. */
#CartDrawer .drawer__cart-empty-cards {
  gap: 8px;
}

#CartDrawer .drawer__cart-empty-card a {
  display: grid;
  grid-template-columns: var(--iwa-empty-thumb, 56px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  padding: 6px;
}

/* The photo comes wrapped in <image-element>; the wrapper is the grid item. */
#CartDrawer .drawer__cart-empty-card a > image-element {
  display: block;
  grid-column: 1;
  grid-row: 1 / 3;
  width: var(--iwa-empty-thumb, 56px);
  height: var(--iwa-empty-thumb, 56px);
  overflow: hidden;
  border-radius: calc(var(--iwa-cart-r-card, 0px) / 2);
}

#CartDrawer .drawer__cart-empty-card a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#CartDrawer .drawer__cart-empty-card a span {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0;
  font-size: 13px;
  line-height: 1.3;
  text-align: start;
}

#CartDrawer .drawer__cart-empty-card a p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding: 2px 0 0;
  font-size: 12px;
  line-height: 1.4;
  text-align: start;
}

@media screen and (min-width: 769px) {
  #CartDrawer .drawer__cart-empty-cards {
    --iwa-empty-thumb: 72px;
    gap: 10px;
  }

  #CartDrawer .drawer__cart-empty-card a {
    column-gap: 12px;
    padding: 8px;
  }

  #CartDrawer .drawer__cart-empty-card a span {
    font-size: 14px;
  }
}

/* Cart drawer while an add, remove or quantity change is on its way:
   totals dim and checkout waits; an add shows a placeholder row. */
#CartDrawer.is-updating [data-subtotal],
#CartDrawer.is-updating .cart__discounts,
#CartDrawer.is-updating .iwa-cart-count {
  opacity: .45;
  transition: opacity .15s;
}
#CartDrawer.is-updating .cart__checkout {
  pointer-events: none;
  opacity: .6;
}
.iwa-cart-skel {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  grid-auto-rows: min-content;
  column-gap: 20px;
  row-gap: 12px;
  padding: 0 0 20px;
}
.iwa-cart-skel span {
  display: block;
  height: 14px;
  background: linear-gradient(90deg, #ececec 25%, #f6f6f6 50%, #ececec 75%);
  background-size: 200% 100%;
  animation: iwaCartSkel 1.1s linear infinite;
}
.iwa-cart-skel span:first-child {
  grid-row: 1 / span 3;
  height: 80px;
}
.iwa-cart-skel span:nth-child(2) { width: 70%; }
.iwa-cart-skel span:nth-child(3) { width: 35%; }
@keyframes iwaCartSkel {
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .iwa-cart-skel span { animation: none; }
}