/* ================= PROMOTIONS: announcement bar, homepage New Collection, Offers page, cart notes ================= */

/* ---------- announcement bar (fixed above the fixed header; --promo-h pushes the header and the page down by exactly its height) ---------- */
body.has-promo-bar { --promo-h: 36px; }
.promo-bar {
	position: fixed; top: var(--sx-bar, 0px); left: 0; right: 0; z-index: 905; height: var(--promo-h, 36px);
	display: flex; align-items: center; justify-content: center; background: #D8C3A5; color: #111; overflow: hidden;
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1;
}
.promo-bar__list { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0 1rem; max-width: 100%; }
.promo-bar__item { display: flex; align-items: center; gap: 0.7rem; padding: 0 1.4rem; white-space: nowrap; }
.promo-bar__item + .promo-bar__item { border-inline-start: 1px solid rgba(17, 17, 17, 0.28); }
.promo-bar__cta {
	display: inline-flex; align-items: center; min-height: 22px; padding: 0 0.7rem; border: 1px solid rgba(17, 17, 17, 0.55); border-radius: 11px;
	color: #111; text-decoration: none; font-size: 0.64rem; letter-spacing: 0.08em; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.promo-bar__cta:hover, .promo-bar__cta:focus-visible { background: #111; color: #D8C3A5; border-color: #111; }
.promo-bar__cta:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.promo-bar__dots { display: none; }
@media (max-width: 700px) {
	body.has-promo-bar { --promo-h: 34px; }
	.promo-bar { font-size: 0.66rem; letter-spacing: 0.05em; }
	.promo-bar__item { padding: 0 0.5rem; gap: 0.55rem; }
	.promo-bar__cta { font-size: 0.6rem; padding: 0 0.55rem; }
	/* several announcements: one at a time (rotated by promo-bar.js); the others stay in the DOM */
	.promo-bar--rotating .promo-bar__item { display: none; border: 0; }
	.promo-bar--rotating .promo-bar__item.is-current { display: flex; }
	.promo-bar--rotating .promo-bar__dots { display: flex; gap: 6px; position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); }
	.promo-bar__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 17, 17, 0.3); cursor: pointer; position: relative; }
	.promo-bar__dot::before { content: ''; position: absolute; inset: -8px; } /* bigger touch target than the dot */
	.promo-bar__dot.is-current { background: #111; }
	.promo-bar--rotating .promo-bar__list { padding-inline: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) { .promo-bar__cta { transition: none; } }

/* ---------- homepage: New Collection ---------- */
.new-collection { background: #fff; color: var(--shop-ink, #111); padding: 4rem 4rem 1rem; position: relative; z-index: 1; }
.new-collection__intro { position: relative; display: flex; align-items: flex-end; min-height: 280px; border-radius: 24px; overflow: hidden; background: #f4f1ec; margin-bottom: 1.5rem; }
.new-collection__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-image .new-collection__intro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05) 70%); }
.new-collection__copy { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; width: 100%; padding: 1.75rem 2rem; }
.new-collection__title { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: 0.02em; line-height: 1.05; }
.has-image .new-collection__title { color: #fff; }
.new-collection:not(.has-image) .new-collection__intro { min-height: 150px; align-items: center; }
/* the homepage does not load the shop stylesheet that defines .btn, so this button is fully styled here */
.new-collection__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1.6rem; border-radius: 30px; border: 1px solid #111; background: #111; color: #fff; font: inherit; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.05em; text-decoration: none; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.new-collection__cta:hover { background: #333; border-color: #333; }
.new-collection__cta:focus-visible { outline: 2px solid #0b57d0; outline-offset: 3px; }
.has-image .new-collection__cta { background: #fff; color: #111; border-color: #fff; }
.has-image .new-collection__cta:hover { background: #f4f1ec; border-color: #f4f1ec; }
.new-collection__slider { position: relative; }
.new-collection__row { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.new-collection__row::-webkit-scrollbar { display: none; }
.new-collection__item { min-width: 0; flex: 0 0 calc((100% - 3 * 1.25rem) / 4); scroll-snap-align: start; }
.nc-arrow {
	position: absolute; top: 38%; z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #111; background: #fff; color: #111; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); transition: opacity 0.2s, background 0.2s; padding: 0;
}
.nc-arrow:hover { background: #f4f1ec; }
.nc-arrow:focus-visible { outline: 2px solid #0b57d0; outline-offset: 3px; }
.nc-arrow--prev { inset-inline-start: -12px; }
.nc-arrow--next { inset-inline-end: -12px; }
.nc-arrow[disabled] { opacity: 0; pointer-events: none; }
[dir="rtl"] .nc-arrow svg { transform: scaleX(-1); }
@media (max-width: 900px) {
	.new-collection { padding: 2.5rem 1rem 0.5rem; }
	.new-collection__intro { min-height: 220px; border-radius: 20px; }
	.new-collection:not(.has-image) .new-collection__intro { min-height: 120px; }
	.new-collection__copy { padding: 1.25rem; }
	.new-collection__row { gap: 0.85rem; }
	.new-collection__item { flex-basis: calc((100% - 0.85rem) / 2); }
	.nc-arrow { width: 38px; height: 38px; top: 32%; }
	.nc-arrow--prev { inset-inline-start: -6px; }
	.nc-arrow--next { inset-inline-end: -6px; }
}

/* ---------- Offers page ---------- */
.offers-list { display: grid; gap: 1.5rem; max-width: 1100px; margin: 0 auto 3rem; }
.offer { border: 1px solid #ddd6cc; border-radius: 24px; padding: 1.75rem; background: #fff; scroll-margin-top: calc(var(--header-h, 76px) + var(--promo-h, 0px) + 1rem); }
.offer__title { margin: 0 0 0.35rem; font-size: 1.4rem; }
.offer__desc { margin: 0; color: #6b6b6b; }
.offer__items { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem 1rem; margin: 1.4rem 0 1rem; }
.offer__op { align-self: center; font-size: 1.6rem; font-weight: 300; color: #6b6b6b; padding-bottom: 2.4rem; }
.offer-item { display: grid; gap: 0.3rem; width: 150px; color: inherit; text-decoration: none; }
.offer-item__media { position: relative; display: block; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #f4f1ec; }
.offer-item__media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 0.4rem; }
.offer-item--gift .offer-item__media { outline: 2px solid #111; outline-offset: -2px; }
.offer-item__badge { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; background: #111; color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 12px; white-space: nowrap; }
.offer-item__qty { position: absolute; inset-block-end: 0.5rem; inset-inline-end: 0.5rem; background: #fff; border-radius: 12px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); }
.offer-item__name { font-size: 0.88rem; font-weight: 500; line-height: 1.3; }
.offer-item__price { font-size: 0.88rem; }
.offer-item__price.is-struck, .offer-item__price.is-struck * { text-decoration: line-through; color: #888; }
.offer-item__free { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.offer__terms { margin: 0 0 1.1rem; color: #444; font-size: 0.92rem; }
.offer__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.offer__hint { color: #6b6b6b; font-size: 0.85rem; }
@media (max-width: 600px) {
	.offer { padding: 1.1rem; border-radius: 20px; }
	.offer-item { width: calc(50% - 1.2rem); }
	.offer__op { padding-bottom: 0; align-self: center; }
}

/* ---------- cart / checkout offer notes ---------- */
.offer-note { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border-radius: 14px; font-size: 0.92rem; }
.offer-note--ok { background: #d6ecdf; color: #1e6b3c; }
.offer-note--info { background: #f4f1ec; color: #111; }
.offer-note a { color: inherit; font-weight: 600; }

.offers-head { text-align: center; }
.offers-head .shop-head__title { text-align: center; }
.offer-item__price.is-struck del, .offer-item__price.is-struck ins { text-decoration: line-through; background: none; }

.cart_totals .offer-note, #order_review .offer-note { margin: 0 0 1rem; }

/* ---- NEW tag: plain white pill with dark text (matches the black / white / cream storefront) ---- */
.new-tag {
	display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle;
	background: #fff; color: #111; border: 1px solid #111;
	font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; white-space: nowrap;
	height: 18px; padding: 0 8px; border-radius: 999px; margin-inline-start: 0.5rem;
}
html[lang^="ar"] .new-tag { letter-spacing: 0; font-size: 0.72rem; }
/* product card: the supplied NEW badge image, bottom corner of the photo, clear of Sale / Out of stock (top start), swatches (top end) and the plus button (bottom end). Aspect ratio kept, transparent background untouched. */
.new-badge { position: absolute; z-index: 2; inset-block-end: 0.35rem; inset-inline-start: 0.35rem; width: 76px; height: auto; margin: 0; pointer-events: none; user-select: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22)); }
@media (max-width: 600px) { .new-badge { width: 60px; inset-block-end: 0.25rem; inset-inline-start: 0.25rem; } }
@media (max-width: 360px) { .new-badge { inset-inline-start: auto; inset-inline-end: 0.25rem; } } /* the plus button moves to the start corner on very narrow cards */
/* Arabic: the badge reads small next to Arabic text, so it is about a quarter larger (English keeps the sizes above) */
[dir="rtl"] .new-badge { width: 96px; }
@media (max-width: 600px) { [dir="rtl"] .new-badge { width: 76px; } }
/* category names: the tag follows the name as text, so if the name wraps the tag stays after its last word */
.category-card__label .new-tag { font-size: 0.6rem; height: 19px; padding: 0 9px; margin-inline-start: 0.55rem; vertical-align: 1px; }
.check__label { display: block; }
.check__label.has-new { white-space: nowrap; } /* name and NEW tag always stay on one line */
.check__label .new-tag { font-size: 0.52rem; height: 16px; padding: 0 6px; margin-inline-start: 0.35rem; vertical-align: 1px; }

/* ---- Offers page: nothing live right now ---- */
.offers-empty { max-width: 560px; margin: 1rem auto 3rem; padding: 3rem 1.5rem; text-align: center; background: #f4f1ec; border-radius: 28px; }
.offers-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; color: #111; margin-bottom: 1.1rem; }
.offers-empty__title { margin: 0 0 0.6rem; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.offers-empty__text { margin: 0 auto 1.5rem; max-width: 40ch; color: var(--shop-muted, #6b6b6b); line-height: 1.55; }
.offers-empty__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.offers-more { max-width: 1200px; margin: 0 auto 3rem; }
.offers-more__title { text-align: center; font-size: 1.3rem; margin: 0 0 1.25rem; }
.offers-more__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.offers-more__item { min-width: 0; }
@media (max-width: 800px) { .offers-more__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; row-gap: 1.4rem; } .offers-empty { padding: 2.25rem 1.25rem; border-radius: 22px; } }

/* ---------- Offers page: inline offer configurator (assets/js/offers.js) ---------- */
button.offer-item { background: none; border: 0; padding: 0; font: inherit; text-align: start; cursor: pointer; }
button.offer-item:focus-visible, .offer-opt__btn:focus-visible, .offer-pick__item:focus-visible, .offer-cfg__close:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.offer-item__more { position: absolute; inset-block-end: 0.5rem; inset-inline-start: 0.5rem; background: #111; color: #fff; border-radius: 12px; padding: 2px 8px; font-size: 0.74rem; font-weight: 600; }
.offer__price { white-space: nowrap; }
.offer.is-open { border-color: #111; }
.offer__panel { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid #ddd6cc; }
.offer__panel[hidden] { display: none; }
.offer-cfg { display: grid; gap: 1.4rem; }
.offer-cfg__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.offer-cfg__title { font-size: 1.05rem; }
.offer-cfg__close { background: none; border: 1px solid #ddd6cc; border-radius: 999px; padding: 0.35rem 0.95rem; font: inherit; font-size: 0.85rem; cursor: pointer; }
.offer-cfg__close:hover { border-color: #111; }
.offer-slot { display: grid; gap: 0.8rem; padding: 1.1rem; border-radius: 18px; background: #f4f1ec; }
.offer-slot--gift { outline: 2px solid #111; outline-offset: -2px; background: #fff; }
.offer-slot__title { margin: 0; font-size: 0.95rem; display: flex; align-items: center; gap: 0.6rem; }
.offer-slot__free { background: #111; color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; }
.offer-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6rem; }
.offer-pick__item { display: grid; gap: 0.3rem; padding: 0.45rem; border: 2px solid transparent; border-radius: 14px; background: #fff; font: inherit; text-align: center; cursor: pointer; }
.offer-pick__item img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 10px; background: #f4f1ec; }
.offer-pick__item[aria-pressed="true"] { border-color: #111; }
.offer-pick__name { font-size: 0.78rem; line-height: 1.25; }
.offer-sel { display: flex; align-items: center; gap: 0.8rem; }
.offer-sel__img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: #fff; flex: none; }
.offer-sel__info { display: grid; gap: 0.15rem; min-width: 0; }
.offer-sel__name { font-weight: 600; }
.offer-sel__price s { color: #888; margin-inline-end: 0.35rem; }
.offer-opt { display: grid; gap: 0.4rem; }
.offer-opt__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6b6b6b; }
.offer-opt__list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.offer-opt__btn { min-width: 2.7rem; padding: 0.5rem 0.9rem; border: 1px solid #bdb5a9; border-radius: 999px; background: #fff; font: inherit; font-size: 0.9rem; cursor: pointer; }
.offer-opt__btn[aria-pressed="true"] { background: #111; border-color: #111; color: #fff; }
.offer-opt__btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
.offer-opt__locked { font-size: 0.92rem; }
.offer-slot__need { margin: 0; font-size: 0.85rem; color: #8a5a00; }
.offer-cfg__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem 1.4rem; }
.offer-cfg__total { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.offer-cfg__total strong { font-size: 1.35rem; }
.offer-cfg__total small { color: #6b6b6b; }
.offer-cfg__msg { flex-basis: 100%; margin: 0; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.9rem; }
.offer-cfg__msg[hidden] { display: none; }
.offer-cfg__msg.is-bad { background: #f6d9d6; color: #8a1f17; }
.offer-cfg__msg.is-ok { background: #d6ecdf; color: #1e6b3c; }
.offer-cfg__add:disabled { opacity: 0.45; cursor: not-allowed; }
.cart-free { font-weight: 700; letter-spacing: 0.05em; }
@media (max-width: 640px) {
	.offer__panel { margin-top: 1rem; padding-top: 1rem; }
	.offer-slot { padding: 0.9rem; }
	.offer-cfg__foot { flex-direction: column; align-items: stretch; }
	.offer-cfg__add { width: 100%; }
	.offer-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Offers page: scroll targets clear the fixed header, the add button explains instead of being dead, and phones keep the offer's products in one row */
.offer-slot, .offer__panel { scroll-margin-top: calc(var(--header-h, 76px) + var(--promo-h, 0px) + 0.75rem); }
.offer-slot.is-attn { outline: 2px solid #8a1f17; outline-offset: -2px; animation: offer-attn 0.5s ease 2; }
@keyframes offer-attn { 50% { background: #f6d9d6; } }
.offer-cfg__add.is-incomplete { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .offer-slot.is-attn { animation: none; } }
@media (max-width: 640px) {
	.offer { padding: 1rem; border-radius: 18px; }
	.offer__title { font-size: 1.15rem; }
	.offer__items { flex-wrap: nowrap; gap: 0.35rem; margin: 1rem 0 0.8rem; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: none; }
	.offer__items::-webkit-scrollbar { display: none; }
	.offer-item { flex: 1 1 0; width: auto; min-width: 84px; max-width: 150px; }
	.offer-item__media { border-radius: 14px; }
	.offer-item__name { font-size: 0.76rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.offer-item__badge { font-size: 0.54rem; padding: 2px 6px; inset-block-start: 0.3rem; inset-inline-start: 0.3rem; }
	.offer__op { flex: none; font-size: 1.2rem; padding-bottom: 1.6rem; }
	.offer__terms { font-size: 0.85rem; line-height: 1.5; }
	.offer__choose { width: 100%; }
	.offer__actions { display: block; }
	.offer-slot__title { flex-wrap: wrap; }
	.offer-sel__img { width: 52px; height: 52px; }
	.offer-opt__btn { padding: 0.55rem 0.85rem; }
	.offer-cfg__total strong { font-size: 1.2rem; }
}

/* Offers page on narrow phones (320px and up): nothing may be wider than the screen. The products sit in a 2-column grid (the + / = signs are dropped), long text wraps. */
.offers-list { grid-template-columns: minmax(0, 1fr); }
.offer, .offer__panel, .offer-cfg, .offer-slot { min-width: 0; max-width: 100%; box-sizing: border-box; }
.offer__terms, .offer__title, .offer__desc, .offer-sel__name, .offer-slot__title { overflow-wrap: anywhere; }
@media (max-width: 640px) {
	.offers-page { padding-inline: 1rem; box-sizing: border-box; overflow-x: clip; }
	.offer__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; overflow: visible; }
	.offer__op { display: none; }
	.offer-item { width: auto; min-width: 0; max-width: none; }
	.offer-item__name { font-size: 0.8rem; -webkit-line-clamp: 2; }
	.offer__choose, .offer-cfg__add { width: 100%; box-sizing: border-box; white-space: normal; }
	.offer-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.offer-opt__list { gap: 0.4rem; }
	.offer-sel { align-items: flex-start; }
}