/** Shopify CDN: Minification failed

Line 1112: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%;
}

/* Buttons used to be locked to a third of the row regardless of their text,
   which left short values like `47.2 x 29.5"` in needlessly wide boxes and
   pushed a fourth option onto its own line.

   Grid rather than flex-grow on purpose: with flex, a lone item on the last
   row stretches to the full width. Grid columns are shared by every row, so
   the last row keeps the same button width and simply leaves empty cells. */
.variant-input-wrap {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  align-items: stretch;
}

.variant-input {
  width: auto;
}

/* theme.css spaces the pickers with `.variant-wrapper+.variant-wrapper`, but
   when Size has in/cm values variant-button.liquid prints the unit-toggle
   stylesheet and scripts right before its wrapper. With Size second (e.g.
   Light Option, then Size) that breaks the adjacency and the two pickers
   touch. The general sibling combinator skips over those tags. */
.variant-wrapper ~ .variant-wrapper {
  margin-top: 25px;
}

/* The inventory block always renders its wrapper, even when every message
   inside is hidden — 15px of nothing plus a 25px margin, sitting between the
   variant pickers and the buy buttons. Collapse it while nothing is visible.

   theme.js adds and removes `.hide` on `.sales-point` as the variant changes,
   and the US warehouse line uses the same pattern, so the block reappears on
   its own the moment there is something to say. */
.product-block--sales-point:not(:has(.sales-point:not(.hide))) {
  display: none;
}

/* Size is the one option where fitting every value on a single row is worth
   trading type size for — the values are short and comparing them side by side
   is the point. Style and Language keep the auto-fit behaviour above. */
@media screen and (max-width: 768px) {
  .variant-input-wrap[data-handle='size'] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .variant-input-wrap[data-handle='size'] label {
    font-size: 11px;
    line-height: 1.3;
    padding: 9px 3px;
    border-radius: 0.45rem;
  }

  /* Style stays two across — its values are long. Matching the size buttons'
     type is enough to bring each label onto a single line: at 11px
     "Prime (with names & rivers)" measures about 148px inside a 158px button. */
  .variant-input-wrap[data-handle='style'] label {
    font-size: 11px;
    line-height: 1.3;
    padding: 9px 6px;
    border-radius: 0.45rem;
  }
}

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


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

.product__price-savings {

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

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

.product__price {
  color: #1E252C;
  
}

.product__price--compare {
  color: #777777;
  font-size: 16px;
}

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

.sales-points {
  margin: 30px 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: 6px;
}

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

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

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

.product__policies.rte {
  display: none;
}

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

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

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

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

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

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

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

.collapsible-trigger-btn--borders+.collapsible-content .collapsible-content__inner {
  padding-left: 16px;
  color: #757575;
  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;
  border-radius: 0.6rem;
  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: #737373;
  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: #d32f2f;
  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: #b95b35; */
}

.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: 10px; /*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: 4px;
  --iwa-cart-r-card: 8px;
  --iwa-cart-r-img: 6px;
  --iwa-cart-r-small: 4px;
  --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;
}

/* Collection tiles round the image but not the tile, and the overlaid tint
   layer sits on the square tile — so the tint showed outside the image's
   corners. The tile already clips its contents, so rounding it here brings the
   image, the tint and the title under one shape. */
.collection-item {
  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: 40px;
        text-align: left;
        margin-bottom: 10px;
  }
  .product-block .add-to-cart {
    height: 56px;
  }

  /* Add to bag and Buy with Shop share one row (as on cfw-tr); "More payment
     options" stays under the express button. 50% basis, not 0: with a 0
     basis Add to bag's padding is added on top and it comes out wider. */
  .product-block .payment-buttons {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  .product-block .payment-buttons .add-to-cart,
  .product-block .payment-buttons .shopify-payment-button {
    flex: 1 1 50%;
    min-width: 0;
    margin-top: 0;
  }
  .product-block .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: 15px; /*huseyin*/
  }
}

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

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

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

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

/* Arabic follows the same grid — the float and the fixed third would fight it,
   and grid handles direction on its own. */
html[dir="rtl"] .variant-input {
  width: auto;
  float: none !important;
}

html[dir="rtl"] .variant-input-wrap {
  direction: rtl;
}

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


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

/* Pay-later line under the price (snippets/bnpl-line.liquid, ported from
   iwa-theme): one sentence, three provider marks (Shop Pay, Afterpay, PayPal);
   each mark opens a dialog with that provider's terms. */
.iwa-bnpl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--colorTextBody);
}
.iwa-bnpl__logos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.iwa-bnpl__btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 3px;
}
.iwa-bnpl__btn:focus-visible {
  outline: 2px solid var(--colorTextBody);
  outline-offset: 2px;
}
.iwa-bnpl__mark {
  display: block;
  width: auto;
}
/* Optical sizes: the three wordmarks have different cap heights. */
.iwa-bnpl__mark--shopify_pay { height: 16px; }
.iwa-bnpl__mark--afterpay { height: 15px; }
.iwa-bnpl__mark--paypal { height: 14px; }

/* Marks in the theme's text colour, one tone like the sentence next to them,
   instead of four brand colours (the dialog keeps the brand colours). */
.iwa-bnpl__btn {
  color: inherit;
}
.iwa-bnpl__logos .iwa-bnpl__mark path {
  fill: currentColor;
}
/* One item per provider (separator + mark). The price limits in
   snippets/bnpl-line.liquid hide the ones that don't cover the selected
   variant; a hidden mark, an empty separator or a hidden line leaves no gap. */
.iwa-bnpl__item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.iwa-bnpl[hidden],
.iwa-bnpl__item[hidden],
.iwa-bnpl__sep:empty,
[data-bnpl-fallback][hidden] {
  display: none !important;
}
.iwa-bnpl__dialog {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 24px 22px 20px;
  border: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
  color: var(--colorTextBody);
  font-size: 14px;
  line-height: 1.5;
}
.iwa-bnpl__dialog::backdrop {
  background: rgba(0, 0, 0, .45);
}
.iwa-bnpl__close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}
.iwa-bnpl__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.iwa-bnpl__head .iwa-bnpl__mark {
  height: 24px;
}
.iwa-bnpl__head h2 {
  margin: 0;
  font-size: 17px;
}
.iwa-bnpl__panel p {
  margin: 0 0 10px;
}
.iwa-bnpl__legal {
  font-size: 12px;
  color: #6b6b6b;
}
.iwa-bnpl__legal a {
  text-decoration: underline;
}
/* Shown under whichever provider panel is open. */
.iwa-bnpl__note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--colorBorder, #e8e8e1);
  font-size: 12px;
  color: #6b6b6b;
}
html[dir="rtl"] .iwa-bnpl__close {
  right: auto;
  left: 10px;
}
.iwa-bnpl__panel[hidden] {
  display: none !important;
}

/* Desktop: the pay-later line sits right of the price, set off by a hairline,
   as a small column (sentence above, marks below). */
@media screen and (min-width: 769px) {
  .product-block--price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    container: bnpl-price / inline-size;
  }
  .product-block--price > div:not(.iwa-bnpl) {
    flex-basis: 100%;
  }
  /* flex-basis 0 + the default min-width:auto: the line only drops below the
     price when even its marks row cannot fit; otherwise it takes the space
     left and the sentence wraps (e.g. $269.00 / $359.00 / SAVE 25%). */
  .product-block--price > .iwa-bnpl {
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0 0 0 12px;
    padding-left: 16px;
    border-left: 1px solid var(--colorBorder);
    font-size: 12px;
  }
  html[dir="rtl"] .product-block--price > .iwa-bnpl {
    margin: 0 12px 0 0;
    padding: 0 16px 0 0;
    border-left: 0;
    border-right: 1px solid var(--colorBorder);
  }
}

/* Separators and the short sentence are for phones only. */
.iwa-bnpl__text-short,
.iwa-bnpl__sep {
  display: none;
}
/* Phones: one line, "Shop now, pay later with shop, afterpay or PayPal",
   with smaller marks. */
@media screen and (max-width: 768px) {
  .iwa-bnpl {
    gap: 4px 5px;
    font-size: 12px;
  }
  .iwa-bnpl__text-long {
    display: none;
  }
  .iwa-bnpl__text-short {
    display: inline;
    white-space: nowrap;
  }
  .iwa-bnpl__logos {
    gap: 3px;
    white-space: nowrap;
  }
  .iwa-bnpl__sep {
    display: inline;
  }
  .iwa-bnpl__sep--comma {
    margin-left: -2px;
  }
  .iwa-bnpl__btn {
    height: 20px;
    padding: 0;
  }
  .iwa-bnpl__logos .iwa-bnpl__mark--shopify_pay { height: calc(13px * var(--bnpl-s, 1)); }
  .iwa-bnpl__logos .iwa-bnpl__mark--afterpay { height: calc(12px * var(--bnpl-s, 1)); }
  .iwa-bnpl__logos .iwa-bnpl__mark--paypal { height: calc(11px * var(--bnpl-s, 1)); }
}

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

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

/* Stock lines (New Jersey warehouse, in stock) line up left with the rest of
   the info column. */
.product-block .icon-and-text {
  justify-content: flex-start;
}

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

/* 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
   (8px, 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: 8px;
}

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

/* Phones: editor-pasted images in rich text (collection descriptions etc.)
   can carry fixed side margins, e.g. margin-left/right: 200px on
   /collections/wooden-world-map, which pushed the page to 573px at 390. */
@media only screen and (max-width: 768px) {
  .rte img[style*="margin"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ------------------------------------------------------------------
   Mobile menu (#NavDrawer, snippets/drawer-menu.liquid), 2026-10-11.
   Phones get the bag's look: a white panel inset 8px from the screen
   edges over the same dark overlay, 8px 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: 8px;
    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: 6px;
  --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, 8px 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: 8px;
  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;
}
/* Auto-fit rather than a fixed third: six short colour names fit one row on
   desktop and three on mobile, instead of leaving half of every box empty. */
.custom-variant-wrapper--buttons .custom-dropdown__menu {
  position: static !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  gap: 6px;
  box-shadow: unset;
}

/* The colour group needs its own breathing room — the size group below it is
   a different component and brings no top margin of its own. */
.custom-variant-wrapper--buttons {
  margin-bottom: 22px;
}

/* Swatch beside the name rather than above it. The column layout made every
   option two lines tall — a 50px dot stacked over its label — which is most of
   why the colour group took so much vertical space. */
.custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #e8e8e1;
  border-radius: 0.6rem;

  width: auto;
  min-width: 0;
}

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

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

/* Country / currency picker (multi-selectors.liquid), 2026-10-14: the utility
   bar and footer pickers in the site's control style. The list is an 8px card
   with the hairline border and soft shadow of the drawers, 6px rounded rows
   with the warm hover fill, and a check on the current country instead of the
   theme's underline. The footer toggle is a bordered 6px control like the sort
   select; the utility bar toggle stays plain text with a hover fill. The
   chevron turns while the list is open (theme.js sets aria-expanded). */
form.multi-selectors {
  --cfw-loc-ink: #1e252c;
  --cfw-loc-line: var(--iwa-ctl-line, #e8e8e1);
  --cfw-loc-soft: #f4f2ee;
  --cfw-loc-r: var(--iwa-ctl-r, 6px);
  --cfw-loc-panel-r: 8px;
}

form.multi-selectors .faux-select.disclosure__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--cfw-loc-r);
  color: var(--cfw-loc-ink);
  position: relative;
  vertical-align: top;
  transition: background-color .15s ease, border-color .15s ease;
}

/* The chevron is absolutely placed; anchor it to the button (not the
   .disclosure box, which inline-flex left a few px taller) so it centres. */
form.multi-selectors .disclosure {
  line-height: 0;
}

form.multi-selectors .disclosure__toggle {
  line-height: var(--typeBaseLineHeight);
}

form.multi-selectors .disclosure__toggle .disclosure-list__label {
  padding-left: 0;
}

form.multi-selectors .disclosure__toggle .icon-chevron-down {
  transition: transform .2s ease;
}

form.multi-selectors .disclosure__toggle[aria-expanded="true"] .icon-chevron-down {
  transform: translateY(-50%) rotate(180deg);
}

form.multi-selectors .disclosure__toggle:focus-visible {
  outline: 2px solid var(--cfw-loc-ink);
  outline-offset: 2px;
}

/* Utility bar: plain text, rounded hover fill; the right edge stays put. */
.cst_announcement-side form.multi-selectors .faux-select.disclosure__toggle {
  padding: 5px 26px 5px 8px;
}

.cst_announcement-side form.multi-selectors .faux-select.disclosure__toggle:hover,
.cst_announcement-side form.multi-selectors .faux-select.disclosure__toggle[aria-expanded="true"] {
  background: rgba(30, 37, 44, .06);
}

/* Footer: bordered control. */
.site-footer form.multi-selectors .faux-select.disclosure__toggle {
  min-height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--cfw-loc-line);
  background: #fff;
  font-size: 13px;
  letter-spacing: .02em;
}

.site-footer form.multi-selectors .faux-select.disclosure__toggle:hover,
.site-footer form.multi-selectors .faux-select.disclosure__toggle[aria-expanded="true"] {
  border-color: var(--cfw-loc-ink);
}

.site-footer form.multi-selectors .faux-select .icon {
  right: 13px;
}

/* The list. */
form.multi-selectors .disclosure-list {
  min-width: 260px;
  min-height: 0;
  max-height: min(420px, 60vh);
  margin: 0 0 8px;
  padding: 6px;
  border: 1px solid var(--cfw-loc-line);
  border-radius: var(--cfw-loc-panel-r);
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .12);
  color: var(--cfw-loc-ink);
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d6d3cc transparent;
  z-index: 30;
}

form.multi-selectors .disclosure-list--down {
  margin: 8px 0 0;
}

form.multi-selectors .disclosure-list__item {
  padding: 0;
}

form.multi-selectors .disclosure-list__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--cfw-loc-r);
  text-decoration: none;
  outline: none;
}

form.multi-selectors .disclosure-list__option:hover,
form.multi-selectors .disclosure-list__option:focus-visible,
form.multi-selectors .disclosure-list__item--current .disclosure-list__option {
  background: var(--cfw-loc-soft);
}

form.multi-selectors .disclosure-list__option:focus-visible {
  box-shadow: inset 0 0 0 2px var(--cfw-loc-ink);
}

form.multi-selectors .disclosure-list .disclosure-list__label,
form.multi-selectors .disclosure-list__option:hover .disclosure-list__label,
form.multi-selectors .disclosure-list__option:focus .disclosure-list__label,
form.multi-selectors .disclosure-list__item--current .disclosure-list__label {
  flex: 1;
  padding-left: 0;
  font-size: inherit !important;
  text-decoration: none;
}

form.multi-selectors .disclosure-list__item--current .disclosure-list__option {
  font-weight: 600;
}

form.multi-selectors .disclosure-list__item--current .disclosure-list__option::after {
  content: "";
  flex: none;
  width: 12px;
  height: 7px;
  margin: 0 2px -2px 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}

form.multi-selectors .disclosure-list .currency-flag {
  flex: none;
}

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

/* ------------------------------------------------------------------
   Homepage "Find your country" chips (2026-10-14, sections/cfw-country-chips):
   pill links with a round product thumbnail. One swipe row on phones,
   centred and wrapping from 769px. The highlighted chip is the copper
   "All countries" pill (same copper as the mega menu "All" tile).
   ------------------------------------------------------------------ */
.cfw-cchips {
  margin: 40px 0;
}

.cfw-cchips__text {
  margin: 6px 0 0;
  color: #5c6166;
  font-size: 14px;
}

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

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

.cfw-cchips__item {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
}

.cfw-cchips__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 5px 20px 5px 5px;
  border: 1px solid #e3ded7;
  border-radius: 999px;
  background: #fff;
  color: #1e252c;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.cfw-cchips__chip:hover {
  border-color: #1e252c;
  color: #1e252c;
}

.cfw-cchips__chip img {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #f2f0ed;
}

.cfw-cchips__chip--all,
.cfw-cchips__chip--all:hover {
  padding: 5px 24px;
  border-color: #b95b35;
  background: #b95b35;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.cfw-cchips__chip--all:hover {
  background: #a24e2c;
  border-color: #a24e2c;
}

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

  .cfw-cchips__text {
    font-size: 15px;
  }

  .cfw-cchips__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

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

/* Phones: the size buttons drop to 11px type and 0.45rem corners (32px tall),
   so the colour boxes beside them follow. */
@media screen and (max-width: 768px) {
  .custom-variant-wrapper--buttons .custom-dropdown__menu .dropdown-item {
    gap: 5px;
    padding: 9px 3px;
    border-radius: 0.45rem;
    font-size: 11px;
    line-height: 1.3;
  }

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