/** Shopify CDN: Minification failed

Line 1080:9 Expected ":"

**/
/* ------------------------------------------------------------------
   Button colours: palette A "Ember Spark", step 1 (2026-10-14).
   Magenta is for buying only: add to cart (PDP, quick view, sticky bar),
   checkout (drawer and cart page) and the hero's first button. Every
   other button is ink. Step 2: terracotta is for decorative icons and
   diagram lines only; selected/active states, links and other controls
   are ink, prices ink, save badges gold with ink text, the cart
   dot magenta, the announcement bar ink with the logo's spectrum under it. Magenta is the logo's #D90091 darkened so white
   text passes 4.5:1 (5.84:1); the old hover violet #5711CB looked like
   the Shop Pay button next to it.
   ------------------------------------------------------------------ */
:root {
  --cfw-buy: #C2007E;
  --cfw-buy-hover: #A3006A;
  --cfw-ink: #1e252c;
  --cfw-ink-hover: #3a434c;
  --cfw-accent: #8A5A45;
  --cfw-accent-hover: #6F4636;
  --cfw-price: #1e252c;
  --cfw-save-bg: #FFEE95;
  --cfw-save-text: #1e252c;
  --cfw-spectrum: linear-gradient(90deg, #57F3FF, #5700C8 38%, #FF0482 70%, #FFEE95);
  --colorAnnouncement: #1e252c;
  --colorCartDot: #C2007E;
  --colorBtnPrimary: #1e252c;
  --colorBtnPrimaryLight: #3a434c;
  --colorBtnPrimaryDim: #14191e;
  --colorBtnPrimaryText: #ffffff;
}

.btn.cart__checkout {
  background: var(--cfw-buy);
  border-color: var(--cfw-buy);
  color: #fff;
}

.btn.cart__checkout:hover {
  background: var(--cfw-buy-hover);
  border-color: var(--cfw-buy-hover);
}

/* Announcement bar: ink, with the logo's spectrum as a 3px rule under it. */
#cst_announcement::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--cfw-spectrum);
  pointer-events: none;
}

/* Collection filter "view all" button (theme.css hard-codes the old rust). */
#view_all_btn {
  background-color: var(--cfw-ink);
}

/* The slideshow prints each slide's "Button color" as
   `.slideshow__slide--<id> .btn { background: … !important }`; the first
   hero button is a buy button, so it overrides that. */
.hero .hero__link > .btn:first-child {
  background: var(--cfw-buy) !important;
  border-color: var(--cfw-buy) !important;
  color: #fff !important;
}

.hero .hero__link > .btn:first-child:hover {
  background: var(--cfw-buy-hover) !important;
  border-color: var(--cfw-buy-hover) !important;
}

/* The second hero button is an outline in the slide's text colour, not in
   the old accent the slide setting gives its border. */
.hero .hero__link > .btn + .btn {
  border-color: currentColor !important;
}

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

/* Four options per row at every width. '- 6px' is the 8px gap shared out
   over four columns (8 * 3 / 4), so the last column lands flush with the
   container edge instead of wrapping. */
.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;
    border-radius:6px;
}

/* Selected option = filled ink with white text (was a 2px outline that read
   the same as the unselected border on phones). Colour swatches keep their
   ring. Unselected buttons darken their border on hover. */
.variant-input-wrap input[type=radio]:checked + label:not(.color-swatch) {
  background: var(--cfw-ink);
  border-color: var(--cfw-ink);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}

/* A selected value that is sold out keeps its strike line and looks muted. */
.variant-input-wrap input[type=radio]:checked + label.disabled:not(.color-swatch) {
  color: rgba(255, 255, 255, 0.55);
}

.variant-input-wrap input[type=radio]:not(:checked) + label:not(.color-swatch):hover {
  border-color: var(--cfw-ink);
}

.variant-input-wrap input[type=radio]:focus-visible + label:not(.color-swatch) {
  outline: 2px solid var(--cfw-ink);
  outline-offset: 2px;
}


/* A quarter of a phone's buy box is about 75px, the narrowest these buttons
   get. Smaller type plus trimmed SIDE padding keeps the longest label,
   "300x187 cm", on one line — roughly 62px of text inside 69px of usable
   width. Vertical padding stays at 8px so the button height does not move. */
@media screen and (max-width: 768px) {
  .variant-input-wrap label {
    font-size: 12px;
    line-height: 1.3;
    padding: 8px 3px;
  }
}

.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: 18px;
}

.product__price-savings {
  color: #fff;
  background: #18863c;
  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 {
  padding-right: 0 !important;
}

/* Satis fiyati: marka yesili, urun basligindan daha belirgin */
.product__price {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
}

.product__price--compare {
  font-size: 15px;
  line-height: 15px;
  font-weight: 400;
}

.product__price {
  color: var(--cfw-price);
}

.product__price--compare {
  color: #777777;
}

.product-block .icon-and-text {
  justify-content: left;
}

.sales-points {
  margin: 25px 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: var(--cfw-buy);
  border-color:rgb(255, 255, 255);
  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;
  border-radius: 10px;
}

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

.product-block .add-to-cart:hover,
.product-block .add-to-cart:hover span {
  background: var(--cfw-buy-hover);
  border-color: var(--cfw-buy-hover);
}

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

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

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

.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. "Bize Sorun" 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;
}

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

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner {
  padding-left: 16px;
  color: #767676;
  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: 10;
  -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;
  border-radius: 0 8px 0 0;
}

.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: 11px;
  font-weight: 400;
  text-align: left;
  color: #1E252C;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
}

.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: #777777;
  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;
}

.grid-product__price--savings {
  border-radius: 20px;
  background: #18863c;
  padding: 3px 6px;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 14.4px !important;
  text-align: center;
  color: #fff;
}

.discounted--price {
  color: #C64B4B;
  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: #777777;
  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: var(--cfw-ink);
}

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

.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: #777777;
  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: #777777;
}

.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: var(--cfw-ink);
  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: currentColor;
  border: 1px solid;
  /* border-color: #578AE6; */
}

.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: capitalize;
}

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

.hero__subtitle * {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  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;
}

/* Rise in with the title/subtitle/buttons (was forced visible with opacity !important) */
.loaded .slideshow__slide.is-selected .hero__bottom-title .animation-contents,
.loaded[data-aos=hero__animation] .hero__bottom-title .animation-contents {
  animation: 1s cubic-bezier(0.26, 0.54, 0.32, 1) 1.1s forwards;
  animation-name: rise-up;
}

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

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

.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: #777777;
  /* 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: #777777;
  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)));
}

#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: var(--cfw-ink);
  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: #777777;
  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: #18863c;
}

.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: var(--cfw-buy);
  gap: 8px;
}

#CartDrawer .cart__checkout-wrapper button:hover {
  background: var(--cfw-buy-hover);
}


#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, port of iwa-theme),
   in this theme's copper accent and rounded 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: #8A5A45;
  --iwa-cart-soft: #f4f2ee;
  --iwa-cart-sale: #c20000;
  /* Corners: buttons, cards/panels, photos, small chips (badge, tags, qty). */
  --iwa-cart-r-btn: 10px;
  --iwa-cart-r-card: 10px;
  --iwa-cart-r-img: 8px;
  --iwa-cart-r-small: 6px;
  --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 {
  overflow: hidden;
  border-radius: var(--iwa-cart-r-card);
  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, .loox-float-toggler-container) {
  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;
  border-radius: var(--iwa-cart-r-small);
  background: var(--cfw-buy);
  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;
  border-radius: var(--iwa-cart-r-card);
  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;
  overflow: hidden;
  border-radius: var(--iwa-cart-r-img);
  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: var(--iwa-cart-sale);
}

#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;
  border-radius: var(--iwa-cart-r-small);
  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;
  border-radius: var(--iwa-cart-r-small);
  background: #fbeceb;
  color: var(--iwa-cart-sale);
  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%;
  overflow: hidden;
  border-radius: var(--iwa-cart-r-card);
  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;
  border-radius: var(--iwa-cart-r-btn);
  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(--cfw-ink);
}

#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: var(--iwa-cart-r-small);
  font-size: 14px;
}

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

#CartDrawer .cart__checkout-wrapper button {
  height: 54px;
  padding: 0 24px;
  gap: 10px;
  border-radius: var(--iwa-cart-r-btn);
  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;
  border-radius:6px;
}

.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: 36px;
    text-align: left;
    margin-bottom: 10px;
  }
  .product-block .add-to-cart {
    height: 56px;
  }

  /* Desktop has room for both buy buttons on one row. The stacked layout's
     8px top margin on the dynamic checkout button becomes the row gap.
     50% basis, not 0: with a 0 basis Add to bag's padding is added on top
     and it came out ~40px wider than the express button.
     The unbranded button has no height of its own, so match the 56px above. */
  .payment-buttons {
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }

  .payment-buttons .add-to-cart,
  .payment-buttons .shopify-payment-button {
    flex: 1 1 50%;
    min-width: 0;
    margin-top: 0;
  }

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

  /* Gallery and info column take half the page width each. */
  .grid--product-images--partial {
    grid: "div div" auto "div div" minmax(0, 1fr) / minmax(0, 0.5fr) minmax(0, 0.5fr);
  }
  .grid--product-images--partial {
    gap: 50px;
    row-gap: 20px;
  }

  /* Gallery thumbnails sit in a vertical rail left of the main image. The
     section keeps thumbnail_position "below", so phones keep the partial
     slider with horizontal thumbs; 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 {
    flex: 1 1 auto;
    min-width: 0;
  }
  .grid--product-images--partial .product__thumbs--below {
    position: relative;
    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;
    scrollbar-width: none;
  }
  .grid--product-images--partial .product__thumbs--below .product__thumbs--scroller::-webkit-scrollbar {
    display: none;
  }
  .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;
  }

  /* The "below the gallery" blocks (Product Detail, Size & Specification,
     Shipping, Ask a question) join the info column under the buy buttons,
     and Frequently Bought Together follows them. The gallery spans all three
     rows and sticks under the sticky header, so it stays put until the info
     column ends (a sticky grid item is held inside its grid).
     --cfw-sticky-top is set by cfw-custom.js from the 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(--cfw-sticky-top, 90px);
  }
  .grid--product-images--partial:not(.grid--product-images-right) > .product-single__sticky + .grid__item {
    grid-column: 2;
    grid-row: 1;
  }
  .grid--product-images--partial:not(.grid--product-images-right) > .product-content-below-gallery {
    grid-column: 2;
    grid-row: 2;
  }
  /* FBT is a direct grid child too (unhidden once its products load). */
  .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 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 {
    margin-bottom: 5.2px; /*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;
  }
}

#fsb_placeholder .fsb_progress_bar{
  margin-left:0 !important;
  margin-right:0 !important;
}
.cst_fsb-progress{
  margin: 0 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.cst_fsb-progress span{
  font-size:13.5px;
}
/*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% / 3 - 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;
}
*/


/* ==========================================================================
   Kategori aciklamasi dikey ritmi
   theme.css tum .rte basliklarina 60px ust bosluk veriyor. Uzun kategori
   metinlerinde bu, basliklarin oncesinde devasa bosluklar birakiyor, buna
   karsilik paragraf araligi 25px'te kaliyor ve metin dagilmis gorunuyor.
   Asagisi sadece koleksiyon sayfasinda daha dengeli bir ritim kurar:
   her baslik kendinden sonraki metne, oncekinden daha yakin durur.
   ========================================================================== */
.template-collection .rte h2,
.template-collection .rte h3,
.template-collection .rte h4,
.template-collection .rte h5,
.template-collection .rte h6 {
  margin-top: 32px;
  margin-bottom: 10px;
}

.template-collection .rte h2 {
  margin-top: 40px;
}

.template-collection .rte h2:first-child,
.template-collection .rte h3:first-child,
.template-collection .rte h4:first-child {
  margin-top: 0;
}

.template-collection .rte p,
.template-collection .rte ul,
.template-collection .rte ol {
  margin-bottom: 14px;
}

.template-collection .rte ul,
.template-collection .rte ol {
  margin-top: 0;
}

.template-collection .rte > *:last-child {
  margin-bottom: 0;
}

/* Thumbnails are lazy: give the item its width up front, or it collapses to the
   placeholder and grows to 80px when the image arrives (layout shift). */
.product__thumbs--below .product__thumb-item {
  width: 80px;
}

/* The theme's .grid clearfix ::after becomes a grid item here and stretches to
   the row height; when the product columns settle it collapses, which counted as
   a layout shift on desktop. A grid container needs no clearfix. */
.grid--product-images--partial::after {
  display: none;
}

/* Product page: less space between the header and the breadcrumb on desktop.
   The theme pads .page-content--product by 45px; with the breadcrumb's own
   margin that left a ~60px gap. */
@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;
  }
}

/* Product info column rhythm: the review row sits 10px above the title (the
   same as title -> pitch), every other block 25px apart, and the same 25px
   before the accordion tabs and before Frequently Bought Together.
   The review row keeps its 25px height before Loox fills it, so the title
   and everything under it don't move when the stars arrive. */
.product-rating-link {
  display: block;
  min-height: 26px; /* Loox's row is 25.19px; a whole pixel so nothing moves */
  margin-bottom: 10px;
}
.product-rating-link .loox-rating {
  margin: 0;
}
.product-single__title {
  margin-top: 0;
}
/* Two classes: additional_products.css and fbt-products.css load after this
   file and set 16px / 1rem with one. */
.grid--product-images--partial .apc-container {
  margin-bottom: 25px;
}
.product-block .sales-points {
  margin: 0;
}
.product-block .sales-points--us-inventory {
  margin-bottom: 10px;
}
.grid--product-images--partial #cst-fbt {
  margin-top: 25px;
}
/* Selleasy add-on card: 25px under it like the other blocks (app default
   20px). Set on the card itself so an empty block adds no space. */
.selleasy-block-product-addon .lb-upsell-ppa-card-cont {
  margin-bottom: 25px !important;
}
@media screen and (min-width: 990px) {
  .grid--product-images--partial {
    row-gap: 0;
  }
}

/* WhatsApp contact line (snippets/product-whatsapp.liquid): the whole line is
   one link; only the call to action is bold and underlined. */
a.product-whatsapp {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}
.product-whatsapp__cta {
  font-weight: 700;
  text-decoration: underline;
}
/* Left-aligned on every width, at the key benefits' size (14px, 13px on
   phones). Beats .product-block .icon-and-text span (15px / line-height 15px). */
.sales-point a.product-whatsapp {
  display: flex;
  justify-content: flex-start;
  text-align: start;
}
.product-block .product-whatsapp .product-whatsapp__text,
.product-block .product-whatsapp .product-whatsapp__cta {
  font-size: 14px;
  line-height: 1.4;
}
/* WhatsApp chat badge: white logo on WhatsApp green, in place of the stock
   dot. */
.sales-point .product-whatsapp__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  animation: product-whatsapp-pulse 2s infinite;
}
@keyframes product-whatsapp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sales-point .product-whatsapp__icon { animation: none; }
}
.product-whatsapp__icon svg {
  width: 13px;
  height: 13px;
}
@media only screen and (max-width: 768px) {
  .product-block .product-whatsapp .product-whatsapp__text,
  .product-block .product-whatsapp .product-whatsapp__cta {
    font-size: 13px;
  }
  .sales-point .product-whatsapp__icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
  }
  .product-whatsapp__icon svg {
    width: 12px;
    height: 12px;
  }
}

/* Product page accordion titles: 14px semibold (theme default 13px/400).
   Three classes so it beats [data-center-text=true] .collapsible-trigger-btn. */
.product-content-below-gallery .product-block .collapsible-trigger-btn {
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Product accordions: body text up from 13px to 15px, headings down from the
   30px page h2 / 23px h3 to sizes that sit one step above the text, and
   tighter paragraph spacing (was 25px). Same scale as islamicwallartstore.com.
   -------------------------------------------------------------------------- */
.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;
}

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

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

/* Product page accordions: one rounded frame around the whole stack
   (10px, same as the cards). The theme draws each tab's sides on its title
   button and open panel and the dividers as each tab's bottom border, so
   the corners can't be rounded tab by tab; the frame takes over the outer
   edges and the dividers stay. Only when the column holds nothing but tabs. */
.product-content-below-gallery:not(:has(> :not(.product-block--tab))) {
  margin-bottom: 25px;
  overflow: hidden;
  border: 1px solid var(--colorBorder, #e8e8e1);
  border-radius: 10px;
}

.product-content-below-gallery:not(:has(> :not(.product-block--tab))) .collapsible-trigger-btn--borders,
.product-content-below-gallery:not(:has(> :not(.product-block--tab))) .collapsible-trigger-btn--borders + .collapsible-content .collapsible-content__inner {
  border-left: 0;
  border-right: 0;
}

.product-content-below-gallery:not(:has(> :not(.product-block--tab))) > .product-block--tab:first-child .collapsible-trigger-btn--borders {
  border-top: 0;
}

.product-content-below-gallery:not(:has(> :not(.product-block--tab))) > .product-block--tab:last-child {
  margin-bottom: 0;
}

.product-content-below-gallery:not(:has(> :not(.product-block--tab))) > .product-block--tab:last-child .collapsibles-wrapper--border-bottom {
  border-bottom: 0;
}

/* ------------------------------------------------------------------
   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, 10px corners like the bag, and a round
   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;
}

/* The theme hides the left drawer at left -350px, but the menu is full
   width, so on close it stopped with a 40px strip on screen and then
   vanished. Hide and slide it by its own width instead (2026-10-13). */
#NavDrawer.drawer--left {
  left: -100%;
}

#NavDrawer.drawer--left.drawer--is-open {
  transform: translateX(100%);
}

@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);
    --iwa-nav-r: 10px;
    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: 50%;
    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;
    overflow: hidden;
    border-radius: var(--iwa-nav-r);
    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, .loox-float-toggler-container) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Heavier sub-items: second and third level go from 400 to 600. The
     top level already draws at Figtree 800 (700 asked, 800 is the face
     loaded for headings). */
  #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: 10px;
  --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 results in the collection page's drawer layout (filter_style
   drawer): the hr above already spaces them, so no collection top padding. */
.search-content__results.collection-content {
  padding-top: 0;
}

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

/* ------------------------------------------------------------------
   Collection grid, enjoythewood style (2026-10-11)
   Card: one-line title, copper price, struck compare-at price, discount pill,
   static stars + (count). Breadcrumbs: home icon | All collections | menu trail.
   Sub-collection cards under the collection title (snippets/cfw-collection-tree).
   ------------------------------------------------------------------ */

/* Labels on the image: rounded copper pill, top left. The sale badge is gone;
   the discount pill in the price row says the same thing. */
.grid-product__tag {
  top: 10px;
  left: 10px;
  right: auto;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: left;
}

.grid-product__tag--custom {
  background: var(--cfw-ink);
  color: #fff;
}

html[dir="rtl"] .grid-product__tag {
  left: auto;
  right: 10px;
}

.grid-product__meta {
  padding: 12px 4px 0;
  text-align: center;
}

.grid-product__title,
[data-type_product_capitalize=true] .grid-product__title {
  display: block;
  margin-top: 0;
  text-align: center;
  -webkit-line-clamp: unset;
}

/* One line; whatever doesn't fit ends in "…". */
.h3-custom-product-title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.grid-product__price {
  justify-content: center;
  gap: 4px 8px;
  margin-top: 6px;
}

.grid-product__price .discounted--price {
  margin: 0;
  color: var(--cfw-price);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.grid-product__price .grid-product__price--original {
  display: block;
  margin: 0;
  color: #1e252c;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: line-through;
  opacity: 0.75;
}

.grid-product__price .grid-product__price--savings {
  margin: 0;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--cfw-save-bg);
  color: var(--cfw-save-text);
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.grid-product__rating.cfw-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  color: #1e252c;
  font-size: 13px;
  line-height: 1;
}

.cfw-stars__icons {
  --cfw-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6.1 6.7.8-4.9 4.6 1.3 6.6L12 17.4l-6 3.3 1.3-6.6-4.9-4.6 6.7-.8z'/%3E%3C/svg%3E");
  display: block;
  flex: 0 0 auto;
  width: 85px;
  height: 17px;
  background: linear-gradient(90deg, #f5b923 var(--cfw-fill, 100%), #dcdcdc var(--cfw-fill, 100%));
  -webkit-mask: var(--cfw-star) 0 0 / 17px 17px repeat-x;
  mask: var(--cfw-star) 0 0 / 17px 17px repeat-x;
}

@media screen and (min-width: 769px) {
  .h3-custom-product-title {
    font-size: 16px;
    line-height: 22px;
  }

  .grid-product__price {
    gap: 4px 10px;
    margin-top: 8px;
  }

  .grid-product__price .discounted--price {
    font-size: 20px;
  }

  .grid-product__price .grid-product__price--original {
    font-size: 16px;
  }

  .grid-product__price .grid-product__price--savings {
    padding: 4px 9px;
    font-size: 14px !important;
  }

  .grid-product__rating.cfw-stars {
    margin-top: 8px;
    font-size: 15px;
  }

  .cfw-stars__icons {
    width: 100px;
    height: 20px;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;
  }
}

/* Breadcrumbs: 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: var(--cfw-ink);
}

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

/* Sub-collection cards under the collection title. Centred while they fit,
   a sideways scroll when they don't (auto margins collapse to 0 then). */
.cfw-subcol {
  margin: 8px auto 0;
  max-width: 1800px;
}

.cfw-subcol__list {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 4px 17px 10px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.cfw-subcol__list::-webkit-scrollbar {
  display: none;
}

.cfw-subcol__item {
  flex: 0 0 auto;
  width: 36vw;
  max-width: 160px;
  margin: 0;
  scroll-snap-align: start;
}

.cfw-subcol__item:first-child {
  margin-left: auto;
}

.cfw-subcol__item:last-child {
  margin-right: auto;
}

.cfw-subcol__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #1e252c;
  text-decoration: none;
}

.cfw-subcol__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #f2f0ed;
}

.cfw-subcol__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cfw-subcol__link:hover .cfw-subcol__img img {
  transform: scale(1.04);
}

.cfw-subcol__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

.cfw-subcol__link[aria-current="page"] .cfw-subcol__img {
  box-shadow: 0 0 0 2px var(--cfw-ink);
}

.cfw-subcol__link[aria-current="page"] .cfw-subcol__title {
  color: var(--cfw-ink);
  font-weight: 700;
}

@media screen and (min-width: 990px) {
  .cfw-subcol__list {
    gap: 20px;
    padding: 4px 40px 12px;
    scrollbar-width: thin;
  }

  .cfw-subcol__list::-webkit-scrollbar {
    display: block;
    height: 6px;
  }

  .cfw-subcol__item {
    width: clamp(150px, 12vw, 230px);
    max-width: none;
  }

  .cfw-subcol__title {
    font-size: 13px;
  }
}

/* Filters in the drawer: the sidebar column keeps only the (fixed) drawer, so it
   takes no width, and the grid gets the full page width. minmax(0, 1fr) stops wide
   images from stretching the columns past the page. */
.collection-content--drawer .grid__item--sidebar {
  flex: 0 0 0;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}

.collection-content--drawer #CollectionAjaxContent .grid .grid__item.grid__item--content {
  padding-left: 0;
}

@media screen and (min-width: 769px) {
  .collection-content--drawer .grid__item--sidebar {
    display: block;
  }

  .collection-content--drawer .collection-grid__wrapper .grid.grid--uniform {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (min-width: 990px) {
  .collection-content--drawer .collection-grid__wrapper .grid.grid--uniform {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* The filter drawer, in the mobile menu's style (2026-10-12): a white panel inset
   8px from the edges, 10px corners, a round close button centred above it and the
   bag's dark overlay. A tap on the gaps around the panel closes it (.iwa-nav-backdrop
   is a .js-drawer-close). Phones keep the theme's full-width left drawer around the
   panel; larger screens get a 420px panel, like the cart drawer. */
#FilterDrawer {
  --iwa-nav-inset: 8px;
  --iwa-nav-close: 48px;
  --iwa-nav-top: calc(var(--iwa-nav-close) + 2 * 12px);
  --iwa-nav-r: 10px;
  padding: var(--iwa-nav-top) var(--iwa-nav-inset) var(--iwa-nav-inset);
  background: transparent;
  box-shadow: none;
}

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

#FilterDrawer .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: 50%;
  background: #fff;
  color: #1e252c;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}

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

#FilterDrawer .drawer__contents {
  position: relative;
  overflow: hidden;
  border-radius: var(--iwa-nav-r);
  z-index: 1;
  background: var(--colorDrawers);
  box-shadow: 0 0 40px rgba(0, 0, 0, .12);
}

/* The title stays; its close button is replaced by the one above the panel. */
#FilterDrawer .drawer__close {
  display: none;
}

/* The theme's overlay (.main-content:after) is light grey and sits under the
   header; while the filters are open (and while they close: theme.Drawers sets
   data-drawer-closing) it is the bag's dark overlay over everything but the drawer. */
html:has(#FilterDrawer.drawer--is-open) .main-content:after,
html[data-drawer-closing="FilterDrawer"] .main-content:after {
  z-index: 999;
  background-color: #000;
}

html.js-drawer-open:has(#FilterDrawer.drawer--is-open) .main-content:after {
  animation-name: cfw-filter-overlay-on;
}

html[data-drawer-closing="FilterDrawer"]:not(.js-drawer-open) .main-content:after {
  animation-name: cfw-filter-overlay-off;
}

@keyframes cfw-filter-overlay-on {
  from { opacity: 0; }
  to { opacity: .85; }
}

@keyframes cfw-filter-overlay-off {
  from { opacity: .85; }
  to { opacity: 0; }
}

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

/* On phones the sidebar column is display: none unless a drawer is open
   (.js-drawer-open .grid__item--sidebar). Closing the filters dropped the class at
   once, so the slide-out was cut off, transitionend never fired and the drawer kept
   .is-transitioning (display: block) at left -350px: the next drawer to open (the
   menu) showed a strip of it behind. The column holds only the fixed drawer, so it
   can stay in the layout. */
.grid__item--sidebar:has(#FilterDrawer) {
  display: block;
}

@media screen and (min-width: 769px) {
  #FilterDrawer.drawer--left {
    left: calc(-420px - 2 * var(--iwa-nav-inset));
    width: calc(420px + 2 * var(--iwa-nav-inset));
  }

  #FilterDrawer.drawer--left.drawer--is-open {
    transform: translateX(calc(420px + 2 * var(--iwa-nav-inset)));
  }
}

/* Scroll snap would otherwise park the first card on the edge, eating the gutter. */
.cfw-subcol__list {
  scroll-padding-inline: 17px;
}

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

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

  /* Product page: long trails stop at two lines with "…" (2026-10-12).
     Visual only, the full trail stays in the HTML and the BreadcrumbList JSON-LD. */
  .template-product .breadcrumb .breadcrumb__list {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

@media screen and (min-width: 990px) {
  .cfw-subcol__list {
    scroll-padding-inline: 40px;
  }
}

/* Card labels, stacked top left like enjoythewood (New / Best Seller / custom / Sale,
   at most two; snippets/product-grid-item). Small and close to the corner. */
.grid-product__tags {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: none;
}

html[dir="rtl"] .grid-product__tags {
  left: auto;
  right: 6px;
  align-items: flex-end;
}

.grid-product__tags .grid-product__tag {
  position: static;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--cfw-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
}

.grid-product__tags .grid-product__tag--sold-out {
  background: #1e252c;
}

@media screen and (min-width: 769px) {
  .grid-product__tags {
    top: 8px;
    left: 8px;
    gap: 5px;
  }

  html[dir="rtl"] .grid-product__tags {
    right: 8px;
  }

  .grid-product__tags .grid-product__tag {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
  }
}

/* All collections page (/collections): 2 columns on phones, 4 on desktop, square
   rounded tiles, no tint; the title sits white in the middle of the image with a
   soft shadow instead of a background so it reads on light photos too. */
.grid.cfw-allcols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

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

.cfw-allcols .collection-item {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
}

.cfw-allcols .collection-image {
  height: 0;
  padding-top: 100% !important;
}

.cfw-allcols .collection-item--overlaid::after {
  display: none;
}

.cfw-allcols .collection-item__title,
.cfw-allcols .collection-item__title span {
  background: none;
  color: #fff;
}

.cfw-allcols .collection-item__title {
  padding: 0 10px;
  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.cfw-allcols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .cfw-allcols .collection-item__title {
    font-size: 22px;
  }
}

/* All collections tiles built from the main menu (snippets/cfw-coltile). */
.cfw-coltile {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
}

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

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

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

.cfw-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) {
  .cfw-coltile__title {
    font-size: 22px;
  }
}

/* ------------------------------------------------------------------
   Product page price block, enjoythewood style (2026-10-11):
   copper price, struck compare-at price, copper % pill, "SKU: …" under it,
   then the pay-later / installments line, then the key benefits.
   ------------------------------------------------------------------ */
.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; the 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 {
  color: var(--cfw-price);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

.product-block--price .product__price--compare {
  color: #1e252c;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: line-through;
  opacity: 0.75;
}

.product-block--price .product__price-savings {
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--cfw-save-bg);
  color: var(--cfw-save-text);
  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;
  }
}

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

/* Key benefits: smaller, black round ticks (EN .kb-list, TR .product-block--benefits). */
/* [data-product-blocks] for weight: key-benefits.css loads after this file. */
[data-product-blocks] .kb-list {
  gap: 6px;
}

[data-product-blocks] .kb-list li,
[data-product-blocks] .product-block--benefits li {
  font-size: 14px;
  line-height: 1.35;
  align-items: flex-start;
}

[data-product-blocks] .kb-list li::before {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: #111;
  font-size: 10px;
}

.product-block--benefits li {
  gap: 9px;
  margin-bottom: 6px;
}

.product-block--benefits .product-benefits__tick {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  padding: 3px;
  border-radius: 50%;
  background: #111;
  stroke: #fff;
  stroke-width: 2.6;
  opacity: 1;
}

@media screen and (max-width: 768px) {
  [data-product-blocks] .kb-list li,
  [data-product-blocks] .product-block--benefits li {
    font-size: 13px;
  }
}

/* ------------------------------------------------------------------
   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: var(--cfw-buy);
  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;
}

/* ------------------------------------------------------------------
   Collection toolbar, enjoythewood style (2026-10-11): "Sort by: Best selling"
   in bold with a round grey chevron on the right; the Filter button on the left
   in the same language (round grey icon + bold word), no boxes.
   ------------------------------------------------------------------ */
.collection-filter .btn.cfw-tool,
.collection-filter .cfw-tool {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #1e252c;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.collection-filter .btn.cfw-tool.btn--tertiary-active {
  background: none;
  color: #1e252c;
}

.cfw-tool__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ececec;
  color: #1e252c;
}

.collection-filter .cfw-tool__icon .icon {
  width: 18px;
  height: 18px;
  margin: 0;
}

.collection-filter .btn.cfw-tool.btn--tertiary-active .cfw-tool__icon {
  background: var(--cfw-ink);
  color: #fff;
}

.collection-filter .btn.cfw-tool:hover .cfw-tool__icon,
.cfw-sort:hover .cfw-tool__icon {
  background: #e0e0e0;
}

.collection-filter__item--sort {
  display: flex;
  justify-content: flex-end;
}

.collection-filter__sort-container.cfw-sort {
  position: relative;
  display: inline-flex;
  background: none;
}

/* The native select covers the face, invisible, so it gets the tap. */
.collection-filter .cfw-sort select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.cfw-sort:focus-within .cfw-tool__icon {
  outline: 2px solid #1e252c;
  outline-offset: 2px;
}

@media screen and (max-width: 768px) {
  .collection-filter .btn.cfw-tool,
  .collection-filter .cfw-tool {
    gap: 8px;
    font-size: 15px;
  }

  .cfw-tool__icon {
    width: 30px;
    height: 30px;
  }
}

/* Collection grid rhythm: the card's own parts closer together, more air
   between one row of products and the next. */
.grid-product__meta {
  padding-top: 10px;
}

.grid-product__price {
  margin-top: 4px;
}

.grid-product__rating.cfw-stars {
  margin-top: 4px;
}

.collection-content .collection-grid__wrapper .grid.grid--uniform,
.grid__item--search .grid {
  grid-row-gap: 36px;
}

@media screen and (min-width: 769px) {
  .grid-product__price,
  .grid-product__rating.cfw-stars {
    margin-top: 5px;
  }

  .collection-content .collection-grid__wrapper .grid.grid--uniform,
  .grid__item--search .grid {
    grid-row-gap: 48px;
  }
}

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

/* Product Detail "Read More" (snippets/tab.liquid): the site's control corners. */
#show-more-btn {
  border-radius: var(--iwa-ctl-r, 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;
   border-radius: 0.6rem;

  width: calc(100% / 3 - 6px);
}

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

/* ------------------------------------------------------------------
   Homepage collection row, enjoythewood style (2026-10-11,
   sections/cfw-collection-row): square photo cards, white uppercase
   title in the middle. Swipe row with a peeking card below 990px,
   one row of equal columns from 990px.
   ------------------------------------------------------------------ */
.cfw-colrow {
  margin: 20px 0 8px;
}

.cfw-colrow__list {
  display: flex;
  gap: 12px;
  margin: 0 -17px;
  padding: 0 17px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 17px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cfw-colrow__list::-webkit-scrollbar {
  display: none;
}

.cfw-colrow__item {
  flex: 0 0 calc((100% - 24px) / 2.4);
  margin: 0;
  scroll-snap-align: start;
}

.cfw-colrow__card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: #f2f0ed;
}

.cfw-colrow__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

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

.cfw-colrow__card:hover img {
  transform: scale(1.04);
}

.cfw-colrow__title {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #fff;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.35);
}

@media only screen and (min-width: 590px) {
  .cfw-colrow__item {
    flex-basis: calc((100% - 36px) / 3.4);
  }
}

@media only screen and (min-width: 769px) {
  .cfw-colrow {
    margin: 32px 0 12px;
  }

  .cfw-colrow__list {
    margin: 0 -40px;
    padding: 0 40px;
    scroll-padding: 0 40px;
  }

  .cfw-colrow__title {
    font-size: 18px;
  }
}

@media only screen and (min-width: 990px) {
  .cfw-colrow__list {
    display: grid;
    grid-template-columns: repeat(var(--cfw-colrow-count, 6), minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* ------------------------------------------------------------------
   Homepage product row, enjoythewood "Our Bestsellers" style
   (2026-10-11, sections/cfw-product-row): theme product cards in one
   swipe row, 1.5 cards on phones, 5.2 on desktop, round arrows on
   hover from 990px.
   ------------------------------------------------------------------ */
.cfw-prow {
  margin: 40px 0;
}

.cfw-prow__head {
  margin-bottom: 20px;
  text-align: center;
}

.cfw-prow__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Always underlined (2026-10-14): phones have no hover, and without the
   line "SHOP ALL" / "TÜMÜNÜ GÖR" read as a subheading, not a link. The
   line fades on hover instead of disappearing. Product rows, Inspired by
   you and the country chips all use this class. */
.cfw-prow__link {
  display: inline-block;
  margin-top: 6px;
  color: #1e252c;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
  text-transform: uppercase;
  transition: text-decoration-color 0.2s ease;
}

.cfw-prow__link:hover {
  color: #1e252c;
  text-decoration-color: rgba(30, 37, 44, 0.35);
}

.cfw-prow__viewport {
  position: relative;
}

.cfw-prow__track {
  display: flex;
  gap: 16px;
  margin: 0 -17px;
  padding: 0 17px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 17px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cfw-prow__track::-webkit-scrollbar {
  display: none;
}

.cfw-prow__track > .grid__item {
  float: none;
  flex: 0 0 calc((100% - 16px) / 1.5);
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

/* The theme reveals images through its scroll animation, which never sees
   the cards added from the <template>; show them all as they load. */
.cfw-prow .image-element {
  opacity: 1;
}

.cfw-prow__arrow {
  display: none;
}

@media only screen and (min-width: 590px) {
  .cfw-prow__track > .grid__item {
    flex-basis: calc((100% - 32px) / 2.5);
  }
}

@media only screen and (min-width: 769px) {
  .cfw-prow {
    margin: 56px 0;
  }

  .cfw-prow__head {
    margin-bottom: 28px;
  }

  .cfw-prow__title {
    font-size: 28px;
  }

  .cfw-prow__link {
    margin-top: 8px;
    font-size: 16px;
  }

  .cfw-prow__track {
    gap: 20px;
    margin: 0 -40px;
    padding: 0 40px;
    scroll-padding: 0 40px;
  }

  .cfw-prow__track > .grid__item {
    flex-basis: calc((100% - 60px) / 3.5);
  }
}

@media only screen and (min-width: 990px) {
  .cfw-prow__track {
    gap: 24px;
    margin: 0;
    padding: 0;
    scroll-padding: 0;
  }

  .cfw-prow__track > .grid__item {
    flex-basis: calc((100% - 120px) / 5.2);
  }

  .cfw-prow__arrow {
    position: absolute;
    top: var(--cfw-prow-mid, 40%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #1e252c;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
  }

  .cfw-prow__arrow[hidden] {
    display: none;
  }

  .cfw-prow__arrow--prev {
    left: 12px;
  }

  .cfw-prow__arrow--next {
    right: 12px;
  }

  .cfw-prow__viewport:hover .cfw-prow__arrow,
  .cfw-prow__arrow:focus-visible {
    opacity: 1;
  }
}

/* Empty bag: collection card titles and counts centred (2026-10-11). */
#CartDrawer .drawer__cart-empty-card a span,
#CartDrawer .drawer__cart-empty-card a p {
  text-align: center;
}

/* Homepage collection and product rows use the full screen width on large
   screens (2026-10-11). Text sections and every other page keep the theme's
   1500px cap, so lines stay readable. */
.template-index .cfw-colrow .page-width,
.template-index .cfw-prow .page-width,
.template-index .cfw-insp .page-width {
  max-width: none;
}

/* ------------------------------------------------------------------
   Homepage "Inspired by you" row, enjoythewood style (2026-10-11,
   sections/cfw-inspired): 3:4 customer photos with the product name at
   the bottom. 2.3 cards on phones, 6.3 from 990px, 8.4 from 1600px; cards with a
   loop show a play badge and fade the video in over the photo.
   ------------------------------------------------------------------ */
.cfw-insp {
  margin: 40px 0;
}

.cfw-insp__viewport {
  --cfw-prow-mid: 50%;
}

/* Loox rating line under the Inspired heading (2026-10-15, replaced the homepage
   Loox carousel). Wraps under the sentence on phones, one line from 590px. */
.cfw-insp__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 8px;
  margin: 8px 0 0;
  color: #1e252c;
  font-size: 14px;
  line-height: 1.4;
}

.cfw-insp__stars {
  color: #fec933;
  font-size: 16px;
  letter-spacing: 1px;
}

.cfw-insp__rating-link {
  flex-basis: 100%;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cfw-insp__rating-link:hover {
  color: inherit;
}

@media only screen and (min-width: 590px) {
  .cfw-insp__rating {
    font-size: 15px;
  }

  .cfw-insp__rating-link {
    flex-basis: auto;
  }
}

.cfw-insp__track {
  display: flex;
  gap: 10px;
  margin: 0 -17px;
  padding: 0 17px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 17px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cfw-insp__track::-webkit-scrollbar {
  display: none;
}

.cfw-insp__item {
  flex: 0 0 calc((100% - 20px) / 2.3);
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
}

.cfw-insp__card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: #f2f0ed;
  color: #fff;
  text-decoration: none;
}

.cfw-insp__card::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

.cfw-insp__card img,
.cfw-insp__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cfw-insp__card img {
  transition: transform 0.4s ease;
}

.cfw-insp__card:hover img {
  transform: scale(1.04);
}

.cfw-insp__video {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cfw-insp__card.is-playing .cfw-insp__video {
  opacity: 1;
}

.cfw-insp__play {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding-left: 2px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  transition: opacity 0.2s ease;
}

.cfw-insp__card.is-playing .cfw-insp__play {
  opacity: 0;
}

/* Own colour: the theme's a:hover would darken the hovered card's title. */
.cfw-insp__name {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0 10px 14px;
  color: #fff;
  font-family: var(--typeHeaderPrimary), var(--typeHeaderFallback);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35);
}

.cfw-insp__by {
  display: block;
  margin-top: 2px;
  font-family: var(--typeBasePrimary), var(--typeBaseFallback);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

@media only screen and (min-width: 590px) {
  .cfw-insp__item {
    flex-basis: calc((100% - 30px) / 3.3);
  }
}

@media only screen and (min-width: 769px) {
  .cfw-insp {
    margin: 56px 0;
  }

  .cfw-insp__track {
    gap: 14px;
    margin: 0 -40px;
    padding: 0 40px;
    scroll-padding: 0 40px;
  }

  .cfw-insp__item {
    flex-basis: calc((100% - 56px) / 4.3);
  }

  .cfw-insp__name {
    font-size: 14px;
    padding-bottom: 16px;
  }
}

@media only screen and (min-width: 990px) {
  .cfw-insp__track {
    gap: 16px;
    margin: 0;
    padding: 0;
    scroll-padding: 0;
  }

  .cfw-insp__item {
    flex-basis: calc((100% - 96px) / 6.3);
  }
}

@media only screen and (min-width: 1600px) {
  .cfw-insp__item {
    flex-basis: calc((100% - 128px) / 8.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cfw-insp__card img {
    transition: none;
  }

  .cfw-insp__card:hover img {
    transform: none;
  }
}

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

/* Collection header, 2026-10-13: a faint warm band behind title, breadcrumbs and
   sub-collection cards, so it reads apart from the white product grid. Desktop
   cards are mega-menu sized (119-154px), and the scrollbar gives way to two
   arrows centred under the row (desktop only, phones swipe). */
.section--collection-header {
  background: #f7f6f3;
  padding-bottom: 12px;
}

.cfw-subcol__arrows {
  display: none;
}

@media screen and (min-width: 990px) {
  .cfw-subcol__list {
    scrollbar-width: none;
  }

  .cfw-subcol__list::-webkit-scrollbar {
    display: none;
  }

  .cfw-subcol__item {
    width: clamp(119px, 9vw, 154px);
  }

  .cfw-subcol__arrows {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
  }

  .cfw-subcol__arrows[hidden] {
    display: none;
  }

  .cfw-subcol__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #dedad3;
    border-radius: 50%;
    background: #fff;
    color: #1e252c;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
  }

  .cfw-subcol__arrow:hover:not(:disabled) {
    border-color: #1e252c;
  }

  .cfw-subcol__arrow:disabled {
    opacity: 0.35;
    cursor: default;
  }

  [dir="rtl"] .cfw-subcol__arrow svg {
    transform: scaleX(-1);
  }
}

/* Mega menu gap below 1200px, so seven cards still fit at 1024. */
@media screen and (min-width: 990px) and (max-width: 1199px) {
  .cfw-subcol__list {
    gap: 16px;
  }
}

/* Cart drawer bands: the fixed header (title + trust strip) and the
   subtotal/checkout footer sit on a light tint with a hairline, so they
   read as separate from the scrolling item list. */
#CartDrawer {
  --iwa-cart-band: #f7f6f2;
}

#CartDrawer .drawer__fixed-header,
#CartDrawer .drawer__fixed-header .drawer__header,
#CartDrawer .drawer__footer {
  background: var(--iwa-cart-band);
}

#CartDrawer .drawer__fixed-header {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--iwa-cart-line);
}

#CartDrawer .iwa-cart-trust,
#CartDrawer .iwa-cart-note textarea {
  background: #fff;
}

#CartDrawer .drawer__scrollable {
  padding-top: 24px;
}

/* Tighter bands, so the item list gets more of the screen. The header band
   sits halfway between the original (20/24px) and the tightest (12/12px)
   version; its padding-top is also the floor for the title alignment in
   snippets/drawer-x-on-trigger.liquid. */
#CartDrawer .drawer__fixed-header {
  padding-top: 16px;
  padding-bottom: 18px;
}

#CartDrawer .drawer__header {
  padding-bottom: 6px;
}

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

#CartDrawer .drawer__scrollable {
  padding-top: 20px;
}

#CartDrawer .drawer__footer {
  padding-top: 14px;
  padding-bottom: 14px;
}

#CartDrawer .drawer__footer .cart__item-row {
  margin-bottom: 4px;
}

#CartDrawer .drawer__footer .iwa-cart-total {
  padding-top: 0;
}

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

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

#CartDrawer .iwa-cart-payments {
  margin-top: 10px;
}

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

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

  #CartDrawer .drawer__footer {
    padding-top: 20px;
    padding-bottom: 20px;
  }

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

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

/* Bag close X: a little bigger (the X over the header's bag icon and the
   drawer's own X, which shows for keyboard focus; its 32px box stays so the
   title row keeps its height). */
#CartDrawer + .iwa-x {
  --iwa-x-size: 48px;
}

#CartDrawer + .iwa-x .icon,
#CartDrawer .drawer__close-button .icon {
  width: 36px;
  height: 36px;
}

/* Desktop bag header as it was on the morning of 2026-10-13, with the band
   tint kept: no hairline, the original padding and the drawer's own 30px X
   (snippets/drawer-x-on-trigger.liquid leaves the bag alone from 769px).
   Phones keep the bands above. */
@media screen and (min-width: 769px) {
  #CartDrawer .drawer__fixed-header {
    padding-top: 32px;
    padding-bottom: 24px;
    border-bottom: 0;
  }

  #CartDrawer .drawer__header {
    padding-bottom: 8px;
  }

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

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

/* Phone bag X: bigger, its right edge on the trust strip's right edge (the
   snippet sets the position). */
#CartDrawer + .iwa-x {
  --iwa-x-size: 52px;
}

#CartDrawer + .iwa-x .icon {
  width: 44px;
  height: 44px;
}

/* Product gallery before Flickity runs. The theme shows the first slide at
   full width, then Flickity jumps to the starting slide (the variant's image,
   not always the first) and, on phones, shrinks it to a centred 75% card while
   the viewport height animates down. Show the starting slide at its final size
   from the first paint so nothing moves. Single-image products never get
   Flickity, so they keep full width. */
[data-has-slideshow="true"] .product-slideshow:not(.flickity-enabled) .product-main-slide {
  display: none;
}
[data-has-slideshow="true"] .product-slideshow:not(.flickity-enabled) .product-main-slide.starting-slide {
  display: block;
}
@media only screen and (max-width: 768px) {
  .grid--product-images--partial [data-has-slideshow="true"] .product-slideshow:not(.flickity-enabled) .starting-slide {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Sub-collection cards on phones, 2026-10-13: three full cards and a fifth of
   the fourth, so the row reads as swipeable. Width = (viewport - 17px left
   gutter - 3 gaps) / 3.2. */
@media screen and (max-width: 768px) {
  .cfw-subcol__list {
    gap: 10px;
  }

  .cfw-subcol__item {
    width: calc((100vw - 17px - 3 * 10px) / 3.2);
  }
}

/* Sub-collection row, Etsy style (2026-10-14). Phones and tablets: 2.75 cards in
   4:5, small bold title left-aligned under the image, swipe only. Desktop: bigger square
   cards, round dark arrows over the row's two ends (hidden at each end), and the
   side that hides cards fades out (is-scrolled / has-more from the snippet). */
.cfw-subcol {
  position: relative;
}

.cfw-subcol__list {
  gap: 12px;
  scroll-padding-inline: 17px;
}

.cfw-subcol__item {
  width: min(calc((100vw - 17px - 2 * 12px) / 2.75), 200px);
  max-width: none;
}

.cfw-subcol__link {
  align-items: stretch;
  gap: 8px;
}

.cfw-subcol__img {
  aspect-ratio: 4 / 5;
}

.cfw-subcol__img picture {
  display: contents;
}

.cfw-subcol__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: start;
  text-transform: none;
  color: #222;
}

@media screen and (min-width: 990px) {
  .cfw-subcol {
    --subcol-w: clamp(170px, 14vw, 230px);
    --subcol-fade-s: 0px;
    --subcol-fade-e: 0px;
  }

  .cfw-subcol.is-scrolled {
    --subcol-fade-s: 96px;
  }

  .cfw-subcol.has-more {
    --subcol-fade-e: 96px;
  }

  .cfw-subcol__list {
    gap: 16px;
    padding: 4px 40px 12px;
    scroll-padding-inline: 40px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--subcol-fade-s), #000 calc(100% - var(--subcol-fade-e)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--subcol-fade-s), #000 calc(100% - var(--subcol-fade-e)), transparent 100%);
  }

  [dir="rtl"] .cfw-subcol__list {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--subcol-fade-s), #000 calc(100% - var(--subcol-fade-e)), transparent 100%);
    mask-image: linear-gradient(to left, transparent 0, #000 var(--subcol-fade-s), #000 calc(100% - var(--subcol-fade-e)), transparent 100%);
  }

  .cfw-subcol__item {
    width: var(--subcol-w);
  }

  .cfw-subcol__img {
    aspect-ratio: 1 / 1;
  }

  .cfw-subcol__title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 500;
  }

  .cfw-subcol__arrows {
    position: absolute;
    top: calc(4px + var(--subcol-w) / 2);
    left: 0;
    right: 0;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0 16px;
    pointer-events: none;
  }

  .cfw-subcol__arrow {
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 0;
    background: #222;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
    transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
  }

  .cfw-subcol__arrow svg {
    width: 9px;
    height: 16px;
  }

  .cfw-subcol__arrow:hover:not(:disabled) {
    transform: scale(1.06);
  }

  .cfw-subcol__arrow:focus-visible {
    outline: 2px solid var(--cfw-ink);
    outline-offset: 2px;
  }

  .cfw-subcol__arrow:disabled {
    opacity: 0;
    visibility: hidden;
  }

  [dir="rtl"] .cfw-subcol__arrow svg {
    transform: scaleX(-1);
  }
}

/* Nested add-on lines (snippets/product-addon.liquid, cart-item.liquid): the
   inscription sits under its map, indented with a smaller picture, and has no
   quantity buttons of its own (it follows the map's quantity). */
.cart__item--nested .js-qty__wrapper { display: none !important; }
.cart__item-nested-qty { margin-bottom: 6px; font-size: 14px; }
.cart__item--nested { position: relative; }
#CartDrawer .cart__items .cart__item--nested { margin-top: -12px; padding-left: 28px; }
#CartDrawer .cart__item--nested::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 10px;
  height: 22px;
  border-left: 1px solid var(--iwa-ctl-line, #e8e8e1);
  border-bottom: 1px solid var(--iwa-ctl-line, #e8e8e1);
}
#CartDrawer .cart__item--nested {
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 14px;
}
#CartDrawer .cart__item--nested .cart__image,
#CartDrawer .cart__item--nested .cart__image .image-wrap,
#CartDrawer .cart__item--nested .cart__image img {
  width: 52px;
  height: 52px;
}
@media screen and (min-width: 769px) {
  #CartDrawer .cart__item--nested { grid-template-columns: 52px minmax(0, 1fr) auto; }
  #CartDrawer .cart__item--nested .cart__item-title { padding-top: 0; }
}
.template-cart .cart__item--nested { padding-left: 40px; }

/* Product thumbs: always visible. AOS reveals images by their page offset and only
   re-checks on window scroll, so thumbs scrolled into view inside the desktop
   rail (its own scroller) stayed at opacity 0. */
.product__thumbs .product__thumb .image-element {
  opacity: 1;
  animation: none;
}

/* Add-on product's own page (tag _addon): a note instead of the buy buttons. */
.addon-only-note {
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--iwa-ctl-line, #e8e8e1);
  border-radius: var(--iwa-ctl-r, 6px);
  font-size: 15px;
  line-height: 1.5;
  text-align: start;
}

/* "Already included" note on a cart line (cart-item.liquid, custom.included_with). */
.cart__item-included {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: var(--iwa-ctl-r, 6px);
  background: #fff6e0;
  color: #6b4e00;
  font-size: 13px;
  line-height: 1.45;
  text-align: start;
}

/* ------------------------------------------------------------------
   Colour boxes in the size buttons' style (2026-10-15): same 6px corners,
   1px border ring, 42px height and 14px type as .variant-input-wrap label;
   the selected colour is filled ink with white bold text, like a selected
   size. .is-selected comes from Liquid (first paint) and
   dropdown-sold-out-handler.js (changes). The !important box-shadows beat
   the inline 2px outlines that several older scripts still write.
   ------------------------------------------------------------------ */
.custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item {
  justify-content: center;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--cfw-ink);
  font-size: 14px;
  line-height: 22.4px;
  box-shadow: 0 0 0 1px var(--colorBorder) !important;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item:not(.is-selected):not(.dropdown-item--sold-out):hover {
  background: #fff;
  box-shadow: 0 0 0 1px var(--cfw-ink) !important;
}

.custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item.is-selected {
  background: var(--cfw-ink);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--cfw-ink) !important;
}

/* A white ring keeps a black or dark swatch visible on the ink fill. */
.custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item.is-selected img {
  box-shadow: 0 0 0 1.5px #fff;
}

/* Swatch beside the name, as on cfw-en, instead of stacked above it; long
   names ("Koyu Kahverengi") wrap inside the box. */
.custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  text-align: center;
}

.custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item img {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Phones: the option buttons drop to 12px type with 8px 3px padding, so the
   colour boxes follow. */
@media screen and (max-width: 768px) {
  /* nowrap keeps the swatch beside the name; only the words wrap
     ("Açık / Kahverengi" in an 85px box). */
  .custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item {
    flex-wrap: nowrap;
    gap: 5px;
    padding: 8px 3px;
    font-size: 12px;
    line-height: 1.3;
  }

  .custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item img {
    width: 14px;
    height: 14px;
  }
}