/* Opti Plaza base layer (own code, 2026-09-28).
   Tokens, type scale, page width, grid, buttons, fields, focus states, product cards and prices.
   op-luxury.css loads after this file and dresses it; keep the class names it targets.
   Colour tokens come from theme settings through the :root block printed by layout/theme.liquid
   (--color-foreground, --color-background as "r, g, b" triplets, --page-width). */

/* ---- tokens ------------------------------------------------------------------------------------ */
:root {
  --font-body-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-heading-family: 'Didot', 'Bodoni MT', 'Playfair Display', Georgia, serif;
  --font-body-scale: 1;
  --font-heading-scale: 1;
  --gutter-mobile: 1.5rem;
  --gutter-desktop: 5rem;
  --grid-gap-x: 1.2rem;
  --grid-gap-y: 2rem;
  --grid-gap-x-desktop: 2.4rem;
  --grid-gap-y-desktop: 4rem;
  --ink: rgb(var(--color-foreground));
  --ink-75: rgba(var(--color-foreground), 0.75);
  --ink-55: rgba(var(--color-foreground), 0.55);
  --ink-10: rgba(var(--color-foreground), 0.1);
  --ground: rgb(var(--color-background));
  --focus-ring: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- reset ------------------------------------------------------------------------------------- */
/* border-box everywhere: 'inherit' would pass through <details>' content slot, which is content-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  font-family: var(--font-body-family);
  font-size: 1.5rem;
  line-height: 1.8;
  letter-spacing: 0.06rem;
  font-weight: 400;
  color: var(--ink);
  background-color: var(--ground);
}

@media screen and (min-width: 750px) {
  body {
    font-size: 1.6rem;
  }
}

h1, h2, h3, h4, h5,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading-family);
  font-weight: 400;
  letter-spacing: 0.06rem;
  line-height: 1.3;
  color: var(--ink);
  word-break: break-word;
}

h1, .h1 { font-size: 3rem; }
h2, .h2 { font-size: 2.4rem; }
h3, .h3 { font-size: 1.7rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.2rem; }

@media only screen and (min-width: 750px) {
  h1, .h1 { font-size: 4rem; }
  h2, .h2 { font-size: 2.4rem; }
  h3, .h3 { font-size: 1.8rem; }
  h5, .h5 { font-size: 1.3rem; }
}

blockquote {
  font-style: italic;
  border-left: 0.2rem solid var(--ink-10);
  padding-left: 1rem;
  margin: 0 0 1.5rem;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: var(--ink-10);
  margin: 5rem 0;
}

a {
  color: inherit;
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: 1.7;
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.caption-large,
.field__input,
.select__select {
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: 0.04rem;
}

.light {
  opacity: 0.7;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.hidden {
  display: none !important;
}

[hidden] {
  display: none;
}

.isolate {
  position: relative;
  z-index: 0;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.link {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: var(--ink);
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: var(--ink);
}

.link--text:hover {
  color: var(--ink-75);
}

.underline-links-hover:hover a {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > p:first-child { margin-top: 0; }
.rte > p:last-child { margin-bottom: 0; }

.rte a {
  color: rgba(var(--color-foreground), 0.85);
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
}

.rte img {
  height: auto;
  max-width: 100%;
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte table {
  table-layout: fixed;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
}

/* ---- colour scheme wrappers -------------------------------------------------------------------- */
.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  color: rgba(var(--color-foreground), 0.75);
  background-color: var(--ground);
}

.gradient {
  background-attachment: fixed;
}

/* ---- page width + sections --------------------------------------------------------------------- */
.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 var(--gutter-desktop);
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 var(--gutter-desktop);
  }
}

@media screen and (min-width: 990px) {
  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 var(--gutter-desktop);
  }
}

.shopify-section {
  position: relative;
}

.section + .section {
  margin-top: 0;
}

.element-margin-top {
  margin-top: 5rem;
}

.content-for-layout:focus,
.focus-none {
  box-shadow: none;
  outline: 0;
}

.overflow-hidden,
.overflow-hidden-mobile,
.overflow-hidden-tablet {
  overflow: hidden;
}

/* ---- grid -------------------------------------------------------------------------------------- */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-gap-x);
  row-gap: var(--grid-gap-y);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-gap-x-desktop);
    row-gap: var(--grid-gap-y-desktop);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-gap-x) * 3 / 4);
  max-width: calc(50% - var(--grid-gap-x) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-gap-x) / 2);
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-gap-x) * 2 / 3);
}

@media screen and (max-width: 749px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-gap-x) / 2);
  }
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-gap-x-desktop) * 3 / 4);
    max-width: calc(50% - var(--grid-gap-x-desktop) / 2);
  }

  .grid--2-col .grid__item,
  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-gap-x-desktop) / 2);
  }

  .grid--3-col .grid__item,
  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-gap-x-desktop) * 2 / 3);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-gap-x-desktop) * 3 / 4);
  }
}

@media screen and (min-width: 990px) {
  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-gap-x-desktop) / 2);
    max-width: calc(50% - var(--grid-gap-x-desktop) / 2);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-gap-x-desktop) * 2 / 3);
    max-width: calc(33.33% - var(--grid-gap-x-desktop) * 2 / 3);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-gap-x-desktop) * 3 / 4);
    max-width: calc(25% - var(--grid-gap-x-desktop) * 3 / 4);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-gap-x-desktop) * 4 / 5);
    max-width: calc(20% - var(--grid-gap-x-desktop) * 4 / 5);
  }

  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-gap-x-desktop) * 5 / 6);
    max-width: calc(16.66% - var(--grid-gap-x-desktop) * 5 / 6);
  }
}

/* ---- media ratio boxes ------------------------------------------------------------------------- */
.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.media {
  display: block;
  position: relative;
  overflow: hidden;
  background-color: rgba(var(--color-foreground), 0.04);
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s var(--ease);
}

.media--square { padding-bottom: 100%; }
.media--portrait { padding-bottom: 125%; }
.media--landscape { padding-bottom: 66.6%; }

/* ---- icons ------------------------------------------------------------------------------------- */
.icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.icon-arrow {
  width: 1.5rem;
}

.icon-caret {
  height: 0.6rem;
  width: 1rem;
}

.icon-close-small {
  width: 1.2rem;
  height: 1.2rem;
}

.icon-plus,
.icon-minus {
  width: 1rem;
  height: 1rem;
}

.icon-success,
.icon-error {
  width: 1.3rem;
  height: 1.3rem;
}

/* ---- focus ------------------------------------------------------------------------------------- */
*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: var(--focus-ring);
}

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
}

/* ---- skip link --------------------------------------------------------------------------------- */
.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

/* ---- buttons ----------------------------------------------------------------------------------- */
.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  min-width: 12rem;
  min-height: 4.5rem;
  padding: 0 3rem;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  color: rgb(var(--color-background));
  background-color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}

.button--secondary {
  color: var(--ink);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.1rem var(--ink);
}

.button--tertiary {
  color: var(--ink-75);
  background-color: transparent;
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: 9rem;
  min-height: 3.5rem;
  box-shadow: inset 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button:disabled,
.button[aria-disabled='true'],
.button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button.loading {
  color: transparent;
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* ---- fields ------------------------------------------------------------------------------------ */
.field {
  position: relative;
  display: flex;
  width: 100%;
  transition: box-shadow 0.1s;
}

.field__input,
.select__select,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 4.5rem;
  min-height: 0.2rem;
  position: relative;
  margin: 0.1rem;
  padding: 1.5rem;
  border: 0;
  border-radius: 0;
  font-size: 1.6rem;
  letter-spacing: 0.04rem;
  color: var(--ink);
  background-color: var(--ground);
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
  transition: box-shadow 0.1s;
}

.field__input:focus,
.select__select:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
  outline: 0;
}

.field__label,
.customer .field label {
  position: absolute;
  left: 2.1rem;
  top: 1.1rem;
  margin-bottom: 0;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.1rem;
  color: var(--ink-75);
  pointer-events: none;
  transition: top 0.1s, font-size 0.1s;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label {
  top: 0.3rem;
  left: 1.6rem;
  font-size: 1rem;
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem;
}

.field__input::placeholder {
  opacity: 0;
}

.field__input::-webkit-search-cancel-button {
  display: none;
}

.field__button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: currentColor;
  background-color: transparent;
}

.field__button > .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.select {
  position: relative;
  display: flex;
}

.select .icon-caret {
  position: absolute;
  top: calc(50% - 0.2rem);
  right: 1.5rem;
  pointer-events: none;
}

.select__select {
  cursor: pointer;
  padding: 0 4rem 0 1.5rem;
  line-height: 1.6;
}

textarea.field__input {
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* ---- right to left: live keeps the page grid left to right and runs text blocks right to left ---- */
html[lang='ar'] h1,
html[lang='ar'] h2,
html[lang='ar'] h3,
html[lang='ar'] h4,
html[lang='ar'] p,
html[lang='ar'] li,
html[lang='ar'] .rte,
html[lang='ar'] .product__title,
html[lang='ar'] .product__description,
html[lang='ar'] .card__heading,
html[lang='ar'] .price,
html[lang='ar'] .collection-hero__text,
html[lang='ar'] .accordion__content,
html[lang='ar'] .op-assurance,
html[lang='ar'] .footer-block__details-content {
  direction: rtl;
  text-align: right;
}

html[lang='ar'] table {
  direction: rtl;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- pagination -------------------------------------------------------------------------------- */
.pagination-wrapper {
  margin-top: 4rem;
}

@media screen and (min-width: 990px) {
  .pagination-wrapper {
    margin-top: 5rem;
  }
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination__list > li {
  flex: 1 0 4.4rem;
  max-width: 4.4rem;
}

.pagination__list > li:not(:last-child) {
  margin-right: 1rem;
}

.pagination__item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 4.4rem;
  padding: 0;
  font-size: 1.4rem;
  text-decoration: none;
  color: rgb(var(--color-foreground));
}

a.pagination__item:hover::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  width: 2rem;
  height: 0.1rem;
  transform: translateX(-50%);
  background-color: currentColor;
}

.pagination__item--current {
  cursor: not-allowed;
}

.pagination__item--current::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.8rem;
  width: 2rem;
  height: 0.1rem;
  transform: translateX(-50%);
  background-color: currentColor;
}

.pagination__item-arrow .icon-caret {
  width: 1rem;
  height: 0.6rem;
}

.pagination__item--prev .icon-caret {
  transform: rotate(90deg);
}

.pagination__item--next .icon-caret {
  transform: rotate(-90deg);
}

/* ---- journal cards ----------------------------------------------------------------------------- */
.article-card .card__information {
  padding: 0;
}

.article-card__info {
  margin: 0.8rem 0 0;
}

.article-card__info .circle-divider::after {
  content: '\2022';
  margin: 0 0.8rem;
}

.article-card__info .circle-divider:last-child::after {
  display: none;
}

.article-card__excerpt {
  width: 100%;
  margin-top: 1.2rem;
}

.article-card__footer:empty {
  display: none;
}

.article-card__image--small { padding-bottom: 11rem; }
.article-card__image--medium { padding-bottom: 22rem; }
.article-card__image--large { padding-bottom: 33rem; }

.card--text.article-card__image--small,
.card--text.article-card__image--medium,
.card--text.article-card__image--large {
  padding-bottom: 0;
}

/* ---- share control ----------------------------------------------------------------------------- */
.share-button {
  display: block;
  position: relative;
}

.share-button__button {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.4rem;
  padding: 0;
  border: 0;
  font-size: 1.4rem;
  text-decoration: none;
  color: rgb(var(--color-foreground));
  background: transparent;
  cursor: pointer;
}

.share-button__button .icon {
  width: 1.4rem;
  height: 1.6rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  max-width: 44rem;
}

.share-button__fallback .field__input {
  padding-right: 5rem;
}

.share-button__message {
  font-size: 1.2rem;
}

/* ---- sign-up band / banner --------------------------------------------------------------------- */
.op-newsletter .newsletter-form,
.op-signup-banner .newsletter-form {
  margin: 2rem auto 0;
  max-width: 36rem;
}

.op-signup-banner {
  position: relative;
}

.op-signup-banner__media img {
  display: block;
  width: 100%;
  height: auto;
}

.op-signup-banner__box {
  padding-top: 4rem;
  padding-bottom: 4rem;
}