/* ==========================================================================
   Thread of Iman - base layer
   Typography, controls, chrome. Structure is carried by hairlines and space.
   ========================================================================== */

/* --- Typography ---------------------------------------------------------- */

body,
.entry-content,
button,
input,
select,
textarea {
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-base);
  line-height: var(--toi-leading-normal);
  color: var(--toi-text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--toi-surface-page);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.toi-display,
.entry-title,
.woocommerce-loop-product__title,
.product_title,
.wc-block-components-product-name {
  font-family: var(--toi-font-display);
  font-weight: 400;
  color: var(--toi-text-heading);
  letter-spacing: var(--toi-tracking-display);
  text-wrap: balance;
}

/* Display type sits tight. Large type needs less leading, not more. */
h1, h2 { line-height: var(--toi-leading-tight); }
h3, h4 { line-height: var(--toi-leading-snug); }
h5, h6 { line-height: var(--toi-leading-snug); }

h1 { font-size: var(--toi-text-4xl); }
h2 { font-size: var(--toi-text-2xl); }
h3 { font-size: var(--toi-text-xl); }
h4 { font-size: var(--toi-text-lg); }
h5 { font-size: var(--toi-text-md); }
h6 { font-size: var(--toi-text-base); }

/* Italic descenders need room so y, g, j, p, q never clip in display type. */
h1 em, h2 em, h3 em,
h1 i, h2 i, h3 i,
.toi-display em {
  font-style: italic;
  line-height: 1.15;
  padding-bottom: .06em;
  display: inline-block;
}

p { margin: 0 0 var(--toi-space-4); }
p:last-child { margin-bottom: 0; }

/* Running text is held to a readable measure. */
.toi-measure,
.entry-content > p,
.toi-prose p {
  max-width: 68ch;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--toi-dur-1) var(--toi-ease-out),
              color var(--toi-dur-1) var(--toi-ease-out);
}

.entry-content a:not(.wp-block-button__link):not(.toi-btn),
.toi-prose a {
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--toi-taupe-400);
}

a:hover { opacity: var(--toi-hover-fade); }

/* --- Shared label treatment ---------------------------------------------- */

.toi-eyebrow,
.toi-label {
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-text-muted);
  line-height: 1.4;
  margin: 0;
}

.toi-eyebrow--ink { color: var(--toi-text-heading); }

/* --- Focus. Gold is permitted here as a fine accent. --------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--toi-focus-ring);
  outline-offset: 2px;
}

/* --- Buttons ------------------------------------------------------------- */

.toi-btn,
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  border: 1px solid var(--toi-ink-800);
  border-radius: 0;
  background-color: var(--toi-ink-800);
  color: var(--toi-white);
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--toi-dur-1) var(--toi-ease-out),
              border-color var(--toi-dur-1) var(--toi-ease-out),
              color var(--toi-dur-1) var(--toi-ease-out);
}

.toi-btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
  background-color: var(--toi-ink-700);
  border-color: var(--toi-ink-700);
  color: var(--toi-white);
  opacity: 1;
  box-shadow: none;
}

/* Press darkens. Nothing shrinks. */
.toi-btn:active,
.wp-block-button__link:active,
.woocommerce a.button:active,
.woocommerce button.button:active {
  background-color: var(--toi-ink-900);
  border-color: var(--toi-ink-900);
  transform: none;
}

/* Ghost: hairline outline, no fill. */
.toi-btn--ghost,
.is-style-outline .wp-block-button__link,
.woocommerce a.button.wc-backward {
  background-color: transparent;
  color: var(--toi-ink-800);
  border: 1px solid var(--toi-ink-800);
}

.toi-btn--ghost:hover,
.is-style-outline .wp-block-button__link:hover,
.woocommerce a.button.wc-backward:hover {
  background-color: var(--toi-ink-800);
  color: var(--toi-white);
  border-color: var(--toi-ink-800);
}

/* Text button: an underlined label, nothing more. */
.toi-btn--text {
  min-height: 0;
  padding: 0 0 3px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--toi-ink-800);
  color: var(--toi-ink-800);
}

.toi-btn--text:hover {
  background: none;
  color: var(--toi-ink-800);
  opacity: var(--toi-hover-fade);
}

/* On the taupe hero ground the ghost button needs charcoal contrast. */
.toi-hero .toi-btn--ghost {
  border-color: var(--toi-ink-800);
  color: var(--toi-ink-800);
}

/* --- Forms. Bottom border only, no box. ---------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input {
  width: 100%;
  padding: 10px 0;
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-base);
  color: var(--toi-ink-800);
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--toi-border-input);
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--toi-dur-1) var(--toi-ease-out);
}

input:focus,
textarea:focus,
select:focus,
.woocommerce form .form-row input.input-text:focus {
  border-bottom-color: var(--toi-border-strong);
  box-shadow: none;
  outline-offset: 4px;
}

::placeholder { color: var(--toi-taupe-500); opacity: 1; }

label,
.woocommerce form .form-row label,
.wc-block-components-text-input label {
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-text-muted);
}

/* --- Layout helpers ------------------------------------------------------ */

.toi-container {
  max-width: var(--toi-container-max);
  margin-inline: auto;
  padding-inline: var(--toi-container-pad);
  box-sizing: border-box;
}

.toi-section { padding-block: var(--toi-section-gap); }
.toi-section--tight { padding-block: var(--toi-space-8); }
.toi-section--tint { background-color: var(--toi-surface-tint); }

.toi-stack { display: flex; flex-direction: column; }
.toi-stack--center { align-items: center; text-align: center; }

hr,
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--toi-border-hairline);
  margin-block: var(--toi-space-8);
  opacity: 1;
}

/* --- Header. The only blurred surface on the site. ----------------------- */

header[data-device="desktop"],
.ct-header,
#header {
  background-color: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--toi-border-hairline);
}

/* Site title renders as words in the display face, never as an image. */
.site-title,
.ct-title,
[data-id="logo"] .site-title a {
  font-family: var(--toi-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: var(--toi-tracking-display);
  color: var(--toi-ink-800) !important;
  text-transform: none;
}

.site-description,
.ct-tagline {
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-xs);
  letter-spacing: var(--toi-tracking-wide);
  color: var(--toi-text-muted);
}

/* Navigation: uppercase, tracked, one line at desktop. */
.header-menu-1 > li > a,
.ct-header .menu > li > a,
nav[data-id="menu"] .menu > li > a {
  font-family: var(--toi-font-body) !important;
  font-size: var(--toi-text-xs) !important;
  font-weight: var(--toi-weight-semibold) !important;
  letter-spacing: var(--toi-tracking-caps) !important;
  text-transform: uppercase !important;
  color: var(--toi-ink-800) !important;
  white-space: nowrap;
}

.ct-header .menu > li > a:hover { opacity: var(--toi-hover-fade); }

/* Announcement bar above the header. */
.toi-announce {
  background-color: var(--toi-ink-800);
  color: var(--toi-taupe-100);
  text-align: center;
  font-size: var(--toi-text-xs);
  letter-spacing: var(--toi-tracking-wide);
  padding: 9px var(--toi-container-pad);
  line-height: 1.4;
}

.toi-announce .toi-barakah { color: var(--toi-gold-400); }

/* --- Footer. The only dark surface on the site. --------------------------
   Targets Blocksy's real footer DOM: .ct-footer > [data-row] > .ct-container
   > [data-column]. Styling the theme's own structure rather than replacing
   its templates keeps the footer editable in the Customizer.
   ------------------------------------------------------------------------ */

.ct-footer {
  background-color: var(--toi-surface-inverse);
  color: var(--toi-taupe-300);
  margin-top: var(--toi-section-gap);
}

.ct-footer a { color: var(--toi-taupe-300); }
.ct-footer a:hover { opacity: var(--toi-hover-fade); }

.ct-footer .ct-widget { margin: 0; }

/* Middle row is the four-column brand grid. */
.ct-footer [data-row="middle"] > .ct-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--toi-space-7);
  padding-block: var(--toi-space-8);
  align-items: start;
}

.ct-footer [data-column] { min-width: 0; }

.toi-fw {
  display: flex;
  flex-direction: column;
  gap: var(--toi-space-3);
  font-size: var(--toi-text-sm);
}

.toi-fw--brand { gap: var(--toi-space-2); }

.toi-footer__brand {
  font-family: var(--toi-font-display);
  font-size: var(--toi-text-xl);
  color: var(--toi-taupe-100);
  line-height: 1.2;
}

/* The tagline. Always gold, always the display face, always italic.
   Gold-500 on light grounds clears AA at about 5:1; the lighter gold-400
   is reserved for the charcoal footer where it is the legible one. */
.toi-tagline {
  font-family: var(--toi-font-display);
  font-style: italic;
  font-size: var(--toi-text-md);
  color: var(--toi-gold-500);
  line-height: 1.3;
  padding-bottom: .08em;
  display: inline-block;
}

.ct-footer .toi-tagline,
.toi-announce .toi-tagline {
  color: var(--toi-gold-400);
}

/* Stretched link: the whole category tile is clickable, but the markup
   stays a plain native link so it survives an editor change. */
.toi-tile a.toi-tile__label::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.toi-footer__heading {
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-bold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-taupe-100);
  margin-bottom: var(--toi-space-1);
}

.toi-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--toi-space-3);
  font-size: var(--toi-text-sm);
}

.toi-footer__note {
  font-size: var(--toi-text-sm);
  max-width: 34ch;
  line-height: var(--toi-leading-normal);
}

.toi-footer__join {
  align-self: flex-start;
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-taupe-100);
  border-bottom: 1px solid var(--toi-taupe-600);
  padding-bottom: 3px;
  margin-top: var(--toi-space-1);
}

/* Bottom row: a single hairline over the inverse ground, nothing more. */
.ct-footer [data-row="bottom"] {
  border-top: 1px solid rgba(247, 245, 241, .12);
}

.ct-footer [data-row="bottom"] > .ct-container {
  padding-block: 18px;
}

.ct-footer .ct-footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--toi-space-4);
  font-size: var(--toi-text-xs);
  letter-spacing: .06em;
  color: var(--toi-taupe-500);
}

.ct-footer .ct-footer-copyright a { color: var(--toi-taupe-500); }

/* Footer inputs keep the bottom-border-only treatment. */
.ct-footer input[type="email"],
.ct-footer input[type="text"] {
  border-bottom-color: var(--toi-taupe-600);
  color: var(--toi-taupe-100);
}

.ct-footer ::placeholder { color: var(--toi-taupe-600); }

/* --- Motion. Quiet by design, and fully removable. ----------------------- */

.toi-fade-up {
  animation: toi-fade-up var(--toi-dur-3) var(--toi-ease-out) both;
}

@keyframes toi-fade-up {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .toi-fade-up { animation: none; opacity: 1; transform: none; }
  .toi-card__media img,
  .toi-tile__media { transform: none !important; }
}

/* --- Footer responsive collapse, declared explicitly --------------------- */

@media (max-width: 999.98px) {
  .ct-footer [data-row="middle"] > .ct-container {
    grid-template-columns: 1fr 1fr;
    gap: var(--toi-space-6);
  }

  /* The brand column spans the full width so the tagline is never orphaned. */
  .ct-footer [data-column="widget-area-1"] { grid-column: 1 / -1; }
}

@media (max-width: 689.98px) {
  .ct-footer [data-row="middle"] > .ct-container {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--toi-space-6);
    padding-block: var(--toi-space-7);
  }

  .ct-footer .ct-footer-copyright {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--toi-space-2);
    text-align: left;
  }
}
/* ==========================================================================
   Thread of Iman - components
   Cards carry no border, no shadow and no radius. An image block on taupe
   with text beneath it. Structure comes from alignment and space.
   ========================================================================== */

/* --- Declared local placeholder ------------------------------------------
   No photography was supplied, so image slots render as flat taupe blocks
   in the brand's own colours. Swapping in a real featured image replaces
   these with no further change.
   ------------------------------------------------------------------------ */

.toi-ph,
img.toi-ph {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--toi-ph-tone, var(--toi-taupe-300));
  object-fit: cover;
  border-radius: 0;
}

/* --- Full bleed -----------------------------------------------------------
   Blocksy is a classic theme, so it does not ship the theme.json root padding
   variables that Gutenberg's own alignfull rule depends on. This escapes any
   container without them, and holds if the page is later rebuilt elsewhere.
   body already carries overflow-x: hidden, so no horizontal scrollbar.
   -------------------------------------------------------------------------- */

.entry-content > .alignfull,
.toi-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: auto;
  max-width: 100vw;
}

/* --- Hero ----------------------------------------------------------------
   The hero background is a Style setting on the container in Elementor, not
   a rule here, so the colour picker in the panel actually works.
   ------------------------------------------------------------------------ */

/* The hero is the one full-bleed moment, and only on the homepage. */
.home .entry-content > .toi-hero.alignfull {
  margin-top: calc(-1 * var(--toi-space-8));
}

.toi-hero__inner {
  min-height: clamp(420px, 58vh, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--toi-space-5);
  padding-block: var(--toi-space-9);
}

.toi-hero h1,
.toi-hero .toi-hero__title {
  font-size: var(--toi-text-4xl);
  max-width: 16ch;
  margin: 0;
  color: var(--toi-ink-800);
  line-height: var(--toi-leading-tight);
}

.toi-hero__sub {
  max-width: 46ch;
  margin: 0;
  color: var(--toi-ink-700);
  font-size: var(--toi-text-md);
}

.toi-hero__actions {
  display: flex;
  gap: var(--toi-space-3);
  margin-top: var(--toi-space-2);
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 689.98px) {
  .toi-hero__inner {
    min-height: 0;
    padding-block: var(--toi-space-8);
    gap: var(--toi-space-4);
  }
  .toi-hero__actions { width: 100%; flex-direction: column; }
  .toi-hero__actions .toi-btn { width: 100%; }
}

/* --- Section head -------------------------------------------------------- */

.toi-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--toi-space-5);
  margin-bottom: var(--toi-space-6);
}

.toi-sectionhead__text { display: flex; flex-direction: column; gap: var(--toi-space-2); }
.toi-sectionhead h2 { margin: 0; font-size: var(--toi-text-2xl); }

@media (max-width: 689.98px) {
  .toi-sectionhead {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--toi-space-3);
  }
}

/* --- Product grid -------------------------------------------------------- */

.toi-grid {
  display: grid;
  gap: var(--toi-grid-gutter);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.toi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1099.98px) {
  .toi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899.98px) {
  .toi-grid,
  .toi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .toi-grid,
  .toi-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Product card -------------------------------------------------------- */

.toi-card {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.toi-card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--toi-surface-tint);
  aspect-ratio: 3 / 4;
}

.toi-card__media img,
.toi-card__media .toi-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--toi-dur-3) var(--toi-ease-out);
}

.toi-card:hover .toi-card__media img,
.toi-card:hover .toi-card__media .toi-ph {
  transform: scale(var(--toi-img-zoom));
}

.toi-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--toi-space-2);
  padding-top: var(--toi-space-4);
}

.toi-card__title {
  font-family: var(--toi-font-display);
  font-size: var(--toi-text-md);
  line-height: var(--toi-leading-snug);
  color: var(--toi-text-heading);
  margin: 0;
}

.toi-card__price {
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-sm);
  color: var(--toi-text-body);
}

.toi-card__price del { color: var(--toi-text-muted); margin-right: 6px; opacity: .8; }
.toi-card__price ins { text-decoration: none; color: var(--toi-ink-800); }

/* Colour swatches. Pill radius is permitted here. */
.toi-swatches { display: flex; gap: 6px; }

.toi-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--toi-radius-pill);
  border: 1px solid var(--toi-border-hairline);
  display: inline-block;
}

/* Badges. Pill radius is permitted here. */
.toi-badge {
  position: absolute;
  top: var(--toi-space-3);
  left: var(--toi-space-3);
  z-index: 2;
  font-size: 11px;
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--toi-radius-pill);
  background-color: var(--toi-white);
  color: var(--toi-ink-800);
  line-height: 1.4;
}

.toi-badge--fill { background-color: var(--toi-ink-800); color: var(--toi-taupe-100); }
.toi-badge--gold { background-color: transparent; border: 1px solid var(--toi-gold-500); color: var(--toi-gold-500); }

/* Add to bag reveals on hover, and is always present for keyboard and touch. */
.toi-card__add {
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-ink-800);
  border-bottom: 1px solid var(--toi-ink-800);
  align-self: flex-start;
  padding-bottom: 2px;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--toi-dur-2) var(--toi-ease-out);
}

.toi-card:hover .toi-card__add,
.toi-card:focus-within .toi-card__add { opacity: 1; }

@media (hover: none) {
  .toi-card__add { opacity: 1; }
}

/* --- Category tiles ------------------------------------------------------ */

.toi-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--toi-grid-gutter);
}

.toi-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: var(--toi-space-5);
  overflow: hidden;
  box-sizing: border-box;
}

/* Tile background colours are Style settings on each tile in Elementor. */

.toi-tile__label {
  position: relative;
  z-index: 2;
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-ink-800);
  border-bottom: 1px solid var(--toi-ink-800);
  padding-bottom: 3px;
}

.toi-tile:hover .toi-tile__label { opacity: var(--toi-hover-fade); }

@media (max-width: 689.98px) {
  .toi-tiles { grid-template-columns: minmax(0, 1fr); }
  .toi-tile { aspect-ratio: 16 / 9; }
}

/* --- Brand note ---------------------------------------------------------- */

.toi-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--toi-space-4);
}

.toi-note__quote {
  font-family: var(--toi-font-display);
  font-size: var(--toi-text-xl);
  line-height: var(--toi-leading-snug);
  color: var(--toi-text-heading);
  max-width: 52ch;
  margin: 0;
}

/* ==========================================================================
   WooCommerce
   ========================================================================== */

.woocommerce .woocommerce-breadcrumb {
  font-size: var(--toi-text-xs);
  letter-spacing: var(--toi-tracking-wide);
  text-transform: uppercase;
  color: var(--toi-text-muted);
  margin-bottom: var(--toi-space-5);
}

/* Loop cards inherit the brand card: no border, no shadow, no radius. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  text-align: left;
  padding: 0;
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  border-radius: 0;
  box-shadow: none;
  margin-bottom: var(--toi-space-4);
  transition: transform var(--toi-dur-3) var(--toi-ease-out);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--toi-font-display);
  font-size: var(--toi-text-md);
  line-height: var(--toi-leading-snug);
  color: var(--toi-text-heading);
  padding: 0;
  margin: 0 0 var(--toi-space-2);
}

.woocommerce ul.products li.product .price {
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-sm);
  color: var(--toi-text-body);
  font-weight: var(--toi-weight-body);
}

.woocommerce ul.products li.product .price del { color: var(--toi-text-muted); }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--toi-ink-800); }

/* Sale flash. Pill radius permitted on badges. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background-color: var(--toi-ink-800);
  color: var(--toi-taupe-100);
  border-radius: var(--toi-radius-pill);
  font-size: 11px;
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  min-width: auto;
  min-height: auto;
  padding: 4px 12px;
  line-height: 1.4;
  top: var(--toi-space-3);
  left: var(--toi-space-3);
  right: auto;
  margin: 0;
}

/* Single product */
.woocommerce div.product .product_title {
  font-family: var(--toi-font-display);
  font-size: var(--toi-text-2xl);
  line-height: var(--toi-leading-snug);
  margin-bottom: var(--toi-space-3);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-lg);
  color: var(--toi-ink-800);
  font-weight: var(--toi-weight-body);
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--toi-text-body);
  max-width: 60ch;
  margin-block: var(--toi-space-4);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin-bottom: var(--toi-space-6);
  border-bottom: 1px solid var(--toi-border-hairline);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0 var(--toi-space-6) 0 0;
  padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-text-muted);
  padding: 0 0 var(--toi-space-3);
  display: block;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--toi-ink-800);
  border-bottom-color: var(--toi-ink-800);
}

/* Quantity stepper */
.woocommerce .quantity .qty {
  width: 64px;
  text-align: center;
  border: 1px solid var(--toi-border-hairline);
  border-radius: 0;
  min-height: 48px;
  padding: 0;
  background-color: var(--toi-white);
}

/* Variation swatches sit as plain selects with the brand underline. */
.woocommerce div.product form.cart .variations {
  margin-bottom: var(--toi-space-5);
  border: none;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  border: none;
  padding: 0 0 var(--toi-space-4);
  vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
  font-size: var(--toi-text-xs);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-text-muted);
  margin: 0;
}

.woocommerce div.product form.cart .reset_variations {
  font-size: var(--toi-text-xs);
  letter-spacing: var(--toi-tracking-wide);
  text-transform: uppercase;
  color: var(--toi-text-muted);
}

/* Cart and checkout tables lose their boxes. */
.woocommerce table.shop_table {
  border: none;
  border-radius: 0;
  border-collapse: collapse;
}

.woocommerce table.shop_table th {
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-text-muted);
  border-bottom: 1px solid var(--toi-border-hairline);
  padding: 0 var(--toi-space-3) var(--toi-space-3) 0;
}

.woocommerce table.shop_table td {
  border-top: none;
  border-bottom: 1px solid var(--toi-border-hairline);
  padding: var(--toi-space-4) var(--toi-space-3) var(--toi-space-4) 0;
  vertical-align: middle;
}

.woocommerce table.shop_table .product-name a {
  font-family: var(--toi-font-display);
  font-size: var(--toi-text-md);
  color: var(--toi-text-heading);
}

.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-text-muted);
  margin-bottom: var(--toi-space-4);
}

.woocommerce-cart .cart-collaterals .cart_totals {
  background-color: var(--toi-surface-tint);
  padding: var(--toi-space-6);
}

.woocommerce .cart_totals table.shop_table td,
.woocommerce .cart_totals table.shop_table th {
  border-bottom-color: rgba(47, 47, 49, .12);
}

/* Delivery threshold note in the bag. */
.toi-delivery-note {
  font-size: var(--toi-text-sm);
  letter-spacing: var(--toi-tracking-wide);
  color: var(--toi-text-muted);
  border-bottom: 1px solid var(--toi-border-hairline);
  padding-bottom: var(--toi-space-4);
  margin-bottom: var(--toi-space-5);
}

.toi-delivery-note--met { color: var(--toi-state-success); }
.toi-delivery-note .woocommerce-Price-amount { color: var(--toi-ink-800); font-weight: var(--toi-weight-semibold); }

/* Notices take brand colours, never default green and yellow. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
  background-color: var(--toi-surface-tint);
  border-top: 2px solid var(--toi-ink-800);
  border-radius: 0;
  color: var(--toi-text-body);
  font-size: var(--toi-text-sm);
}

.woocommerce-message::before { color: var(--toi-state-success); }
.woocommerce-info::before { color: var(--toi-ink-800); }
.woocommerce-error { border-top-color: var(--toi-state-error); }
.woocommerce-error::before { color: var(--toi-state-error); }

/* Result count and ordering */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-size: var(--toi-text-xs);
  letter-spacing: var(--toi-tracking-wide);
  text-transform: uppercase;
  color: var(--toi-text-muted);
}

/* Empty cart is composed, not a bare line of text. */
.woocommerce .cart-empty,
.wc-empty-cart-message {
  font-family: var(--toi-font-display);
  font-size: var(--toi-text-xl);
  color: var(--toi-text-heading);
  text-align: center;
  padding-block: var(--toi-space-7) var(--toi-space-4);
}

.woocommerce .return-to-shop { text-align: center; padding-bottom: var(--toi-space-8); }

/* --- WooCommerce responsive collapse, declared explicitly ---------------- */

@media (max-width: 899.98px) {
  .woocommerce div.product div.images,
  .woocommerce div.product div.summary {
    float: none;
    width: 100%;
    margin-bottom: var(--toi-space-6);
  }
}

@media (max-width: 689.98px) {
  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td {
    text-align: right;
    padding: var(--toi-space-3) 0;
  }

  .woocommerce table.shop_table_responsive tr td::before {
    font-size: var(--toi-text-xs);
    font-weight: var(--toi-weight-semibold);
    letter-spacing: var(--toi-tracking-caps);
    text-transform: uppercase;
    color: var(--toi-text-muted);
  }

  .woocommerce-cart .cart-collaterals .cart_totals { padding: var(--toi-space-5); }

  .woocommerce .quantity .qty { min-height: 44px; }

  .woocommerce div.product form.cart .button,
  .woocommerce a.button,
  .woocommerce button.button { width: 100%; }

  .woocommerce div.product form.cart .variations select { min-height: 44px; }
}

/* ==========================================================================
   Elementor interop

   Layout mechanics (direction, alignment, gap, padding, min-height and
   background) are NOT set here. They live in each element's own Elementor
   settings so the Layout and Style panels actually work when you change them.
   If a value were also hardcoded in this file it would silently win, and the
   panel control would appear to do nothing.

   What stays here is appearance Elementor has no control for, or that is a
   brand rule rather than a preference: type, button treatment, aspect ratios,
   hover behaviour and the stretched tile link.
   ========================================================================== */

/* Gaps come from each container's Elementor gap setting, so the default
   per-widget bottom margin is removed to avoid doubling up. */
.elementor .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* Measure limits. Elementor has no max-width control for text. */
.elementor .toi-hero__title { max-width: 16ch; }
.elementor .toi-hero__sub { max-width: 46ch; }
.elementor .toi-note__quote { max-width: 52ch; }

/* --- Category tiles ------------------------------------------------------
   This grid is the one layout still held in CSS. Elementor's flex controls
   cannot express a fixed 3-up grid with a clean mobile collapse, so the
   column count is set here. To change it, edit this rule.
   ------------------------------------------------------------------------ */

.elementor .toi-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--toi-grid-gutter);
}

/* Aspect ratio has no Elementor equivalent. Each tile's background colour is
   a Style setting on that tile and is deliberately not set here. */
.elementor .toi-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* --- Buttons take the brand treatment ------------------------------------ */

.elementor .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--toi-font-body);
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  line-height: 1.2;
  border: 1px solid var(--toi-ink-800);
  border-radius: 0;
  background-color: var(--toi-ink-800);
  color: var(--toi-white);
  box-shadow: none;
  fill: var(--toi-white);
  transition: background-color var(--toi-dur-1) var(--toi-ease-out),
              border-color var(--toi-dur-1) var(--toi-ease-out),
              color var(--toi-dur-1) var(--toi-ease-out);
}

.elementor .elementor-button:hover,
.elementor .elementor-button:focus {
  background-color: var(--toi-ink-700);
  border-color: var(--toi-ink-700);
  color: var(--toi-white);
  opacity: 1;
}

.elementor .elementor-button:active {
  background-color: var(--toi-ink-900);
  border-color: var(--toi-ink-900);
  transform: none;
}

/* Ghost variant. Put toi-ghost in the widget's Advanced > CSS Classes. */
.elementor .toi-ghost .elementor-button {
  background-color: transparent;
  color: var(--toi-ink-800);
  border-color: var(--toi-ink-800);
}

.elementor .toi-ghost .elementor-button:hover {
  background-color: var(--toi-ink-800);
  color: var(--toi-white);
}

/* Text variant: an underlined label, nothing more. */
.elementor .toi-linkbtn .elementor-button,
.elementor .toi-tile .elementor-button {
  min-height: 0;
  padding: 0 0 3px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--toi-ink-800);
  color: var(--toi-ink-800);
}

.elementor .toi-linkbtn .elementor-button:hover,
.elementor .toi-tile .elementor-button:hover {
  background: none;
  color: var(--toi-ink-800);
  opacity: var(--toi-hover-fade);
}

/* The whole tile is clickable, using the label's own link. */
.elementor .toi-tile .elementor-button::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.elementor .toi-tile:hover .elementor-button { opacity: var(--toi-hover-fade); }

/* --- Responsive ----------------------------------------------------------
   Direction changes are handled by each container's own mobile settings.
   Only what Elementor cannot express is declared here.
   ------------------------------------------------------------------------ */

@media (max-width: 689.98px) {
  .elementor .toi-tiles { grid-template-columns: minmax(0, 1fr); }
  .elementor .toi-tile { aspect-ratio: 16 / 9; }

  .elementor .toi-hero__actions .elementor-widget-button,
  .elementor .toi-hero__actions .elementor-button { width: 100%; }
}
/* --- Prose pages ---------------------------------------------------------
   These classes sit on the Elementor widget wrapper, so the styled element
   is addressed as a descendant.
   ------------------------------------------------------------------------ */

.toi-lede,
.toi-lede p {
  font-family: var(--toi-font-display);
  font-size: var(--toi-text-lg);
  line-height: var(--toi-leading-snug);
  color: var(--toi-text-heading);
  max-width: 54ch;
}

.toi-prose h2,
.toi-prose h3 { margin: 0; }
.toi-prose p { max-width: 68ch; }

.toi-prose ul,
.toi-prose ol {
  margin: 0;
  padding-left: 1.1em;
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  gap: var(--toi-space-2);
}

.toi-prose li { line-height: var(--toi-leading-normal); }

/* Tables carry hairlines only, matching the rest of the system. */
.toi-table table {
  width: 100%;
  border-collapse: collapse;
  max-width: 560px;
}

.toi-table th {
  text-align: left;
  font-size: var(--toi-text-xs);
  font-weight: var(--toi-weight-semibold);
  letter-spacing: var(--toi-tracking-caps);
  text-transform: uppercase;
  color: var(--toi-text-muted);
  border-bottom: 1px solid var(--toi-border-hairline);
  padding: 0 var(--toi-space-5) var(--toi-space-3) 0;
}

.toi-table td {
  border-bottom: 1px solid var(--toi-border-hairline);
  padding: var(--toi-space-3) var(--toi-space-5) var(--toi-space-3) 0;
  font-size: var(--toi-text-base);
}

.toi-table tr:last-child td { border-bottom: none; }

@media (max-width: 480px) {
  .toi-table th,
  .toi-table td { padding-right: var(--toi-space-3); font-size: var(--toi-text-sm); }
}