/* ===========================================================================
   Design 2.0 — loaded after storefront.css when SITE_DESIGN = "2.0".
   House of Zaina brand: mocha brown header and footer, champagne-gold logo and
   accents, warm cream pages, Cinzel headings, big category tiles. Remove this file (SITE_DESIGN=1.0) to get the
   original editorial look back.
   =========================================================================== */

:root {
  --bg:        #ffffff;
  --bg-deep:   #f3ede5;
  --paper:     #ffffff;
  --ink:       #33241a;
  --soft-ink:  #563d2b;
  --muted:     #6e5039;
  --line:      #e3d5c3;
  --accent:    #6e5039;
  --accent-2:  #563d2b;
  --on-accent: #fbf7f1;
  --mocha:     #6e5039;
  --mocha-deep:#563d2b;
  --champagne: #e6c39a;
  --champagne-deep: #c99a68;
  --gold-grad: linear-gradient(135deg, #f4d9b4 0%, #d4a574 45%, #f0cfa6 70%, #b98a5c 100%);
}
/* Arabic keeps its Noto fonts from storefront.css. */
:root:not([dir="rtl"]) {
  --display: "Cinzel", "Times New Roman", serif;
  --body:    "Jost", "Helvetica Neue", sans-serif;
}

body.design-2 { font-weight: 400; letter-spacing: 0; }
body.design-2::after { display: none; }  /* no paper grain */

.design-2 h1, .design-2 h2, .design-2 h3, .design-2 h4 {
  font-weight: 500; text-transform: uppercase; letter-spacing: .06em; line-height: 1.2;
}
.design-2 .display { font-weight: 500; font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.1; }
.design-2 .display em { font-style: normal; color: var(--champagne); }
.design-2 .eyebrow { color: var(--accent); font-weight: 500; letter-spacing: .28em; }

/* --- top bar, header, menu ----------------------------------------------- */

.design-2 .ship-bar { background: var(--mocha-deep); color: var(--champagne); font-weight: 400; text-transform: uppercase; letter-spacing: .16em; }

.design-2 .site-header { background: var(--mocha); border-bottom: 0; backdrop-filter: none; }
.design-2 .nav__brand {
  display: inline-flex; flex-direction: column; align-items: center; gap: .25rem;
  font-size: 1.35rem; padding: .4rem 0;
  font-family: "Cinzel", serif; font-weight: 500; letter-spacing: .22em; text-indent: 0;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.design-2 .nav__brand:hover { color: transparent; opacity: .85; }
.design-2 .nav__mono { height: 52px; width: auto; }
.design-2 .nav__link { color: #f3e6d6; font-weight: 400; }
.design-2 .nav__link:hover { color: var(--champagne); }
.design-2 .cart-badge { background: var(--gold-grad); color: var(--mocha-deep); font-weight: 600; }
@media (max-width: 600px) {
  .design-2 .nav__mono { height: 34px; }
  .design-2 .nav__brand { font-size: .82rem; letter-spacing: .16em; }
  .design-2 .nav__currency { display: none; }
}

.menu {
  display: flex; justify-content: center; gap: .2rem 2rem; flex-wrap: wrap;
  padding: .2rem clamp(1.1rem, 4vw, 3.5rem) .85rem;
}
.menu__link {
  color: #f3e6d6; font-size: .76rem; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; padding: .3rem 0; border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.menu__link:hover, .menu__link.is-active { color: var(--champagne); border-bottom-color: var(--champagne); }
@media (max-width: 760px) {
  /* One swipeable row on phones instead of wrapping onto several lines. */
  .menu { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 1.4rem; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
}

/* --- buttons --------------------------------------------------------------- */

.design-2 .btn, .design-2 button.btn { font-weight: 500; letter-spacing: .16em; }
.design-2 .btn-dark, .design-2 .btn-primary { background: var(--mocha); border-color: var(--mocha); color: #f6ebdc; }
.design-2 .btn-dark:hover, .design-2 .btn-primary:hover { background: var(--gold-grad); border-color: var(--champagne-deep); color: var(--mocha-deep); }
.design-2 .btn-light { background: var(--gold-grad); border-color: var(--champagne-deep); color: var(--mocha-deep); }
.design-2 .btn-light:hover { background: var(--paper); border-color: var(--paper); color: var(--mocha-deep); }
.design-2 .chip { font-weight: 500; background: var(--bg-deep); border-color: var(--bg-deep); color: var(--ink); }
.design-2 .chip:hover, .design-2 .chip.active { background: var(--mocha); border-color: var(--mocha); color: #f6ebdc; }

/* --- hero ------------------------------------------------------------------ */

.design-2 .hero-carousel { border-bottom: 0; }
.design-2 .hero-slide { min-height: min(78vh, 760px); }
.design-2 .hero-slide__content .eyebrow { color: var(--champagne); }
.design-2 .hero-slide__content .display { color: #fff; }

/* --- product cards --------------------------------------------------------- */

.design-2 .product-card__media, .design-2 .pdp__gallery img, .design-2 .journal-card__media, .design-2 .journal-article__cover { background: #fff; }
.design-2 .product-card__name { font-family: var(--body); font-size: .9rem; font-weight: 400; color: var(--soft-ink); }
.design-2 .product-card__price { color: var(--ink); font-weight: 600; font-size: .9rem; }
.design-2 .product-card__tag { background: var(--gold-grad); color: var(--mocha-deep); font-weight: 600; }
.design-2 .section-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }

/* --- home sections ----------------------------------------------------------- */

.v2-section { padding-top: clamp(2.2rem, 5vw, 4rem); }
.v2-section:last-child { padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.v2-title { text-align: center; font-size: clamp(1.15rem, 2vw, 1.45rem); margin-bottom: 1.6rem; }
/* thin gold line with a four-point sparkle, as on the packaging */
.v2-title::after {
  content: "\2726"; display: block; margin: .55rem auto 0; width: min(240px, 60%);
  font-size: .7rem; line-height: 1; color: var(--champagne-deep); text-align: center;
  background: linear-gradient(var(--champagne-deep), var(--champagne-deep)) left center / 42% 1px no-repeat,
              linear-gradient(var(--champagne-deep), var(--champagne-deep)) right center / 42% 1px no-repeat;
}

.v2-cats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
  max-width: 880px; margin: 0 auto;
}
.v2-cats__item {
  background: var(--bg-deep); text-align: center; padding: .85rem .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.v2-cats__item:hover { background: var(--mocha); color: #f6ebdc; }

.v2-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.v2-tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-deep); }
.v2-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .8s ease; }
.v2-tile:hover img { transform: scale(1.05); }
.v2-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}
.v2-tile__label {
  position: absolute; inset-inline: 0; bottom: 1.6rem; z-index: 2; text-align: center;
  color: #fff; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.1; padding: 0 .8rem;
}
.v2-tile__label::after {
  content: ""; display: block; width: 46px; height: 1px; background: var(--champagne); margin: .6rem auto 0;
}
.v2-tile:hover .v2-tile__label { color: #fff; }

.v2-search__form { max-width: 600px; margin: 0 auto; }
.v2-search__form input {
  width: 100%; border: 1px solid var(--champagne-deep); background: var(--paper); padding: .95rem 1rem;
  text-align: center; font: inherit; font-size: .9rem; color: var(--ink); letter-spacing: .08em;
}
.v2-search__form input::placeholder { color: var(--muted); }
.v2-search__form input:focus { outline: 1px solid var(--mocha); }

.v2-promos {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.2rem;
  min-height: clamp(420px, 46vw, 620px);
}
.v2-promo {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; gap: .9rem; padding: clamp(1.2rem, 2.6vw, 2rem);
  background-size: cover; background-position: center 25%; min-height: 200px;
}
.v2-promo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0) 60%);
}
.v2-promo--tall { grid-column: 2; grid-row: 1 / span 2; }
.v2-promo__title {
  position: relative; color: #fff; font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1.1;
}
.v2-btn {
  position: relative; background: var(--gold-grad); color: var(--mocha-deep); border: 0;
  font-size: .76rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  padding: .7rem 2.2rem;
}
.v2-promo:hover .v2-btn { background: var(--paper); }
.v2-promo:hover .v2-promo__title { color: #fff; }

.v2-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .v2-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .v2-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .v2-cats { grid-template-columns: 1fr 1fr; }
  .v2-tiles { grid-template-columns: 1fr 1fr; }
  .v2-promos { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .v2-promo { min-height: 260px; }
  .v2-promo--tall { grid-column: auto; grid-row: auto; min-height: 420px; }
  .v2-grid { grid-template-columns: 1fr 1fr; }
}

/* --- footer ----------------------------------------------------------------- */

.design-2 .site-footer { background: var(--mocha); border-top: 0; color: #f3e6d6; margin-top: 0; }
.design-2 .site-footer__brand { color: var(--champagne); font-weight: 600; }
.site-footer__mark { flex-basis: 100%; order: -1; text-align: center; padding-bottom: 1.2rem; }
.site-footer__logo { width: 150px; height: auto; margin: 0 auto .6rem; }
.site-footer__tagline {
  margin: 0 0 .6rem; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne);
}
.design-2 .site-footer small { color: rgba(243,230,214,.7); }
.design-2 .site-footer a { color: rgba(243,230,214,.85); }
.design-2 .site-footer a:hover { color: var(--champagne); }

.design-2 .search-overlay { background: rgba(255,255,255,.92); }

/* Thai keeps one sans font in design 2.0 too (see storefront.css). */
:root[lang="th"] {
  --display: "Noto Sans Thai", "Jost", sans-serif;
  --body:    "Noto Sans Thai", "Jost", sans-serif;
}
.design-2 .product-card__tag--ready { background: var(--mocha); color: #f6ebdc; }