/*
Theme Name:   Marbler Art
Theme URI:    https://marblerart.com
Description:  Marbler Art child theme for Astra. Design tokens, Turkish-safe typography, site header and footer, product configurator and Product/Offer schema.
Author:       Marbler Art
Template:     astra
Version:      2.6.24
Text Domain:  marbler
*/

/* ==========================================================================
   1. Design tokens
   Single source of truth. Everything below inherits from here.
   ========================================================================== */

:root {
  /* Surfaces */
  --mb-ground:      #F7F4ED;
  --mb-raised:      #FCFAF6;
  --mb-sunk:        #F1ECE1;

  /* Ink */
  --mb-ink:         #241E18;
  --mb-ink-soft:    #5C5148;
  --mb-ink-faint:   #938779;

  /* Brass accent */
  --mb-brass:       #8A6A3B;
  --mb-brass-lift:  #A6844F;
  --mb-vein:        #B99A62;

  /* Lines */
  --mb-line:        #DED3C2;
  --mb-line-soft:   #EAE2D5;

  /* State */
  --mb-ok:          #4A6B4F;
  --mb-warn:        #9C4A32;

  /* Type */
  --mb-display: 'Marcellus', 'Times New Roman', serif;
  --mb-body:    'Jost', 'Segoe UI', -apple-system, sans-serif;

  /* Rhythm */
  --mb-gut:     clamp(20px, 4vw, 48px);
  --mb-maxw:    1280px;
  --mb-measure: 68ch;          /* comfortable prose line length */
  --mb-header:  clamp(96px, 11vw, 148px); /* clearance under the fixed header */

  /* Corners. Controls stay crisp; media is softened. */
  --mb-radius:       4px;
  --mb-radius-media: 10px;

  /* Motion */
  --mb-ease:    cubic-bezier(.22, .61, .36, 1);
}

:root[data-theme="dark"],
.mb-dark {
  --mb-ground:      #191512;
  --mb-raised:      #221D18;
  --mb-sunk:        #120F0D;
  --mb-ink:         #F2ECE1;
  --mb-ink-soft:    #C2B6A5;
  --mb-ink-faint:   #8B7F70;
  --mb-brass:       #C3A067;
  --mb-brass-lift:  #D9BB86;
  --mb-vein:        #A6884F;
  --mb-line:        #382F27;
  --mb-line-soft:   #2A231D;
}

/* ==========================================================================
   2. Typography — Turkish-safe subsetting
   Two @font-face per family. The `latin` file carries a-z AND dotless ı
   (U+0131); `latin-ext` carries ğ Ğ ş Ş İ. Loading only one produces
   mid-word font switching in Turkish. Both are required.
   ========================================================================== */

@font-face {
  font-family: 'Marcellus';
  src: url('assets/fonts/marcellus-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Marcellus';
  src: url('assets/fonts/marcellus-latinext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/jost-latin.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  src: url('assets/fonts/jost-latinext.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body,
.ast-container,
button, input, select, textarea {
  font-family: var(--mb-body);
}

body {
  background: var(--mb-ground);
  color: var(--mb-ink);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5,
.entry-title, .site-title,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--mb-display);
  font-weight: 400;
  color: var(--mb-ink);
  letter-spacing: .015em;
  line-height: 1.22;
}

h1, .entry-title { font-size: clamp(32px, 4.6vw, 56px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }

a { color: var(--mb-brass); text-decoration: none; }
a:hover, a:focus { color: var(--mb-brass-lift); }

/*
 * Links inside running text.
 * Brass on cream is legible at heading sizes but washes out at 17px — the
 * phone and email links on İletişim were the worst case. Ink plus a brass
 * underline keeps them identifiable without dropping contrast.
 */
.mb-prose a:not(.mb-btn),
.entry-content a:not(.mb-btn):not(.button) {
  color: var(--mb-ink);
  text-decoration: underline;
  text-decoration-color: var(--mb-vein);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.mb-prose a:not(.mb-btn):hover,
.entry-content a:not(.mb-btn):not(.button):hover {
  color: var(--mb-brass);
  text-decoration-color: var(--mb-brass);
}

.mb-eyebrow {
  font-family: var(--mb-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mb-ink-faint);
}

.mb-lede {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.6;
  color: var(--mb-ink-soft);
  max-width: 64ch;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.mb-wrap {
  max-width: var(--mb-maxw);
  margin-inline: auto;
  padding-inline: var(--mb-gut);
}

.mb-section { padding-block: clamp(48px, 7vw, 96px); }
.mb-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.mb-rule { border: 0; border-top: 1px solid var(--mb-line); margin: 0; }

/* ==========================================================================
   3b. Page hero
   Astra's header is fixed and overlays page content, so a page rendered
   straight from post_content starts at y=0 and its <h1> ends up behind the
   header. The hero reserves that space and gives every page a title block.
   ========================================================================== */

/*
 * No separate hero markup. The page copy already opens with an eyebrow, an
 * h1 and a lede, so the hero is produced by styling those first children —
 * which means no page.php override and no risk to Elementor-built pages.
 */

.mb-page { padding-top: var(--mb-header); }

.mb-page > .mb-eyebrow {
  display: block;
  margin: 0 0 14px;
}
.mb-page > h1 {
  margin: 0 0 .35em;
  font-size: clamp(34px, 5vw, 60px);
  max-width: 20ch;
}
.mb-page > .mb-lede {
  margin: 0 0 clamp(30px, 4vw, 52px);
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--mb-line-soft);
  max-width: 60ch;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--mb-ink-soft);
}

/* ==========================================================================
   3c. Prose measure
   Applied to the page content wrapper only, so Elementor-built pages keep
   their own full-bleed layouts untouched.
   ========================================================================== */

.mb-prose { max-width: var(--mb-measure); }

.mb-prose > h2 { margin: 1.8em 0 .5em; }
.mb-prose > h3 { margin: 1.6em 0 .4em; }
.mb-prose > p,
.mb-prose > ul,
.mb-prose > ol { margin: 0 0 1.1em; }
.mb-prose > ul,
.mb-prose > ol { padding-left: 1.3em; }
.mb-prose > ul li,
.mb-prose > ol li { margin-bottom: .4em; }
.mb-prose > :first-child { margin-top: 0; }

/* Elements that should escape the measure and use the full column */
.mb-prose > .mb-contact,
.mb-prose > .mb-map,
.mb-prose > figure,
.mb-prose > .wp-block-image { max-width: none; }

/* ==========================================================================
   3d. Contact layout
   ========================================================================== */

.mb-contact {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  margin: clamp(28px, 4vw, 48px) 0;
}
@media (min-width: 900px) {
  .mb-contact { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr); }
}
.mb-contact__info p { margin: 0 0 1.1em; }
.mb-contact__info strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mb-ink-faint);
  margin-bottom: 4px;
}
.mb-contact__form { background: var(--mb-raised); border: 1px solid var(--mb-line-soft); border-radius: var(--mb-radius-media); padding: clamp(20px, 3vw, 36px); }
.mb-contact__form > :first-child { margin-top: 0; }

/* Responsive map embed */
.mb-map {
  position: relative;
  margin: clamp(24px, 4vw, 40px) 0 0;
  border-radius: var(--mb-radius-media);
  overflow: hidden;
  border: 1px solid var(--mb-line-soft);
  aspect-ratio: 16 / 7;
}
.mb-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 700px) { .mb-map { aspect-ratio: 4 / 3; } }

.mb-grid {
  display: grid;
  gap: clamp(20px, 2.5vw, 36px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* ==========================================================================
   4. Buttons
   Primary is dark umber, not brass — brass on cream fails contrast at
   button sizes. Brass arrives on hover.
   ========================================================================== */

.mb-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mb-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid var(--mb-ink);
  border-radius: var(--mb-radius);
  background: var(--mb-ink);
  color: var(--mb-ground);
  cursor: pointer;
  transition: background .25s var(--mb-ease), border-color .25s var(--mb-ease),
              color .25s var(--mb-ease);
}

.mb-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
  background: var(--mb-brass);
  border-color: var(--mb-brass);
  color: #fff;
}

.mb-btn--ghost {
  background: transparent;
  color: var(--mb-ink);
  border-color: var(--mb-line);
}
.mb-btn--ghost:hover {
  background: transparent;
  color: var(--mb-brass);
  border-color: var(--mb-brass);
}

.mb-btn[disabled],
.woocommerce button.button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Visible focus — the theme's own ring, not the browser default */
.mb-btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--mb-brass);
  outline-offset: 2px;
}

/* ==========================================================================
   5. Product cards (shop + category archives)
   ========================================================================== */

.mb-card {
  display: flex;
  flex-direction: column;
  background: var(--mb-raised);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius);
  overflow: hidden;
  transition: border-color .3s var(--mb-ease), transform .3s var(--mb-ease);
}
.mb-card:hover {
  border-color: var(--mb-line);
  transform: translateY(-2px);
}

.mb-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mb-sunk);
  overflow: hidden;
}
.mb-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--mb-ease);
}
.mb-card:hover .mb-card__media img { transform: scale(1.035); }

.mb-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.mb-card__cat  { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-ink-faint); }
.mb-card__name { font-family: var(--mb-display); font-size: 21px; line-height: 1.25; }
.mb-card__name a { color: var(--mb-ink); }
.mb-card:hover .mb-card__name a { color: var(--mb-brass); }
.mb-card__price { margin-top: 4px; font-size: 15px; color: var(--mb-ink-soft); font-variant-numeric: tabular-nums; }
.mb-card__price .amount { color: var(--mb-ink); font-weight: 500; }

/* Astra/Woo loop reset so the card styling actually lands */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 21px; padding: 0; }
.woocommerce ul.products li.product .price { color: var(--mb-ink-soft); font-size: 15px; }
.woocommerce ul.products li.product .price del { color: var(--mb-ink-faint); }

/* ==========================================================================
   6. Marble swatches
   ========================================================================== */

.mb-swatches { display: flex; flex-wrap: wrap; gap: 10px; }

.mb-swatch {
  position: relative;
  width: 58px;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  padding: 0;
  background: none;
  cursor: pointer;
  transition: border-color .2s var(--mb-ease), box-shadow .2s var(--mb-ease);
}
.mb-swatch__chip { display: block; width: 100%; aspect-ratio: 1; border-radius: 1px; background-size: cover; background-position: center; }
.mb-swatch__label { display: block; font-size: 10px; line-height: 1.3; padding: 5px 3px 6px; color: var(--mb-ink-faint); text-align: center; }
.mb-swatch:hover { border-color: var(--mb-vein); }
.mb-swatch[aria-pressed="true"] {
  border-color: var(--mb-brass);
  box-shadow: 0 0 0 1px var(--mb-brass);
}
.mb-swatch[aria-pressed="true"] .mb-swatch__label { color: var(--mb-ink); }

/* ==========================================================================
   7. Configurator
   ========================================================================== */

.mb-config { display: flex; flex-direction: column; gap: 26px; }

.mb-field { display: flex; flex-direction: column; gap: 10px; }
.mb-field__label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-ink-faint);
}
.mb-field__value { letter-spacing: .02em; text-transform: none; font-size: 13px; color: var(--mb-ink); }

.mb-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-choice {
  font-family: var(--mb-body);
  font-size: 13px;
  padding: 10px 16px;
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  background: var(--mb-raised);
  color: var(--mb-ink-soft);
  cursor: pointer;
  transition: all .2s var(--mb-ease);
}
.mb-choice:hover { border-color: var(--mb-vein); color: var(--mb-ink); }
.mb-choice[aria-pressed="true"] {
  border-color: var(--mb-ink);
  background: var(--mb-ink);
  color: var(--mb-ground);
}
.mb-choice__add { font-size: 11px; opacity: .7; margin-left: 6px; }

.mb-price {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid var(--mb-line);
}
.mb-price__now {
  font-family: var(--mb-display);
  font-size: clamp(30px, 3.4vw, 40px);
  color: var(--mb-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.mb-price__note { font-size: 12px; color: var(--mb-ink-faint); }
.mb-price.is-updating .mb-price__now { opacity: .45; }

.mb-spec { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 14px; }
.mb-spec dt { color: var(--mb-ink-faint); }
.mb-spec dd { margin: 0; color: var(--mb-ink-soft); }

/* ==========================================================================
   8. Single product layout
   ========================================================================== */

.mb-pdp { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .mb-pdp { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: start; }
  .mb-pdp__panel { position: sticky; top: 96px; }
}

.mb-gallery { display: flex; flex-direction: column; gap: 12px; }
.mb-gallery__main { background: var(--mb-sunk); border-radius: var(--mb-radius); overflow: hidden; aspect-ratio: 4 / 3; }
.mb-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.mb-gallery__thumbs button { width: 78px; aspect-ratio: 1; padding: 0; border: 1px solid var(--mb-line-soft); border-radius: var(--mb-radius); overflow: hidden; background: var(--mb-sunk); cursor: pointer; }
.mb-gallery__thumbs button[aria-pressed="true"] { border-color: var(--mb-brass); }
.mb-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mb-pdp__title { margin: 0 0 8px; }
.mb-pdp__short { color: var(--mb-ink-soft); margin: 0 0 4px; }

/* ==========================================================================
   9. Notices, badges, misc
   ========================================================================== */

.mb-note {
  border-left: 2px solid var(--mb-vein);
  padding: 12px 0 12px 16px;
  font-size: 14px;
  color: var(--mb-ink-soft);
  background: transparent;
}

.mb-badge {
  display: inline-block;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--mb-line);
  border-radius: 999px;
  color: var(--mb-ink-faint);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--mb-raised);
  border-top-color: var(--mb-brass);
  color: var(--mb-ink);
}

/* Screen-reader-only utility (used by the configurator live region) */
.mb-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   10. Reduced motion
   ========================================================================== */

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

/* ==========================================================================
   11. Softened corners
   One radius token, applied last so it also reaches markup produced by
   Elementor, WPZOOM and WooCommerce — none of which know about the design
   system. Scoped to media so buttons and inputs stay crisp.
   ========================================================================== */

.mb-card,
.mb-card__media,
.mb-gallery__main,
.mb-gallery__thumbs button,
.mb-swatch,
.mb-swatch__chip,
.mb-contact__form,
.mb-map,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img,
.woocommerce div.product .flex-control-thumbs img,
.wp-block-image img,
.elementor-widget-image img,
.elementor-widget-image-box .elementor-image-box-img img,
.elementor-widget-theme-post-featured-image img,
.wpzoom-products-grid img,
.elementor-widget-wpzoom-elementor-addons-woo-products img,
.uagb-image__figure img {
  border-radius: var(--mb-radius-media);
}

/* Media inside an already-rounded container should not double-round */
.mb-card__media img,
.mb-gallery__main img,
.mb-gallery__thumbs img,
.mb-map iframe { border-radius: 0; }

/* Slider/hero imagery stays square — rounding a full-bleed banner reads as a
   mistake rather than a decision. */
.elementor-widget-slides img,
.elementor-slides img,
.ast-header-break-point .site-header img { border-radius: 0; }

/* ==========================================================================
   12. Astra palette remap
   Astra drives its entire colour scheme from nine custom properties, and
   Elementor mirrors them. Redefining those is exhaustive in a way that
   chasing individual selectors is not: the factory coral (#fc7978) and
   lime (#75c32c) disappear from buttons, links, badges, focus rings,
   pagination and notices in one move.
   ========================================================================== */

:root {
  --ast-global-color-0: var(--mb-brass);      /* accent  - was #fc7978 */
  --ast-global-color-1: var(--mb-brass-lift); /* accent2 - was #75c32c */
  --ast-global-color-2: var(--mb-ink);        /* headings */
  --ast-global-color-3: var(--mb-ink-soft);   /* body text */
  --ast-global-color-4: var(--mb-ground);     /* light surface */
  --ast-global-color-5: var(--mb-raised);     /* white surface */
  --ast-global-color-6: var(--mb-ink-soft);
  --ast-global-color-7: var(--mb-line-soft);  /* borders */
  --ast-global-color-8: var(--mb-line-soft);

  --e-global-color-astglobalcolor0: var(--mb-brass);
  --e-global-color-astglobalcolor1: var(--mb-brass-lift);
  --e-global-color-astglobalcolor2: var(--mb-ink);
  --e-global-color-astglobalcolor3: var(--mb-ink-soft);
  --e-global-color-astglobalcolor4: var(--mb-ground);
  --e-global-color-astglobalcolor5: var(--mb-raised);
  --e-global-color-astglobalcolor6: var(--mb-ink-soft);
  --e-global-color-astglobalcolor7: var(--mb-line-soft);
  --e-global-color-astglobalcolor8: var(--mb-line-soft);
}

body { background: var(--mb-ground); }

/* ==========================================================================
   13. Site header
   Sticky and opaque, in normal document flow. The header it replaces was
   absolutely positioned and translucent, which is why page titles rendered
   underneath it. A header in flow cannot overlap what follows it, so that
   whole class of bug is designed out rather than padded around.
   ========================================================================== */

:root { --mb-header-h: 76px; }
@media (max-width: 900px) { :root { --mb-header-h: 62px; } }

.mb-skip {
  position: absolute; left: -9999px;
  background: var(--mb-ink); color: var(--mb-raised);
  padding: 12px 20px; z-index: 200;
}
.mb-skip:focus { left: 0; top: 0; }

/* Astra's transparent-header stylesheet carries `#masthead{position:absolute}`.
   An id beats a class, so the class-only rule below never applied and the
   header scrolled away. Matching id+class outranks it without !important. */
#masthead.mb-header,
.mb-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--mb-ground);
  border-bottom: 1px solid var(--mb-line-soft);
  transition: box-shadow .25s var(--mb-ease);
}
.mb-header.is-scrolled { box-shadow: 0 1px 18px rgba(36, 30, 24, .07); }

.mb-header__inner {
  max-width: var(--mb-maxw);
  margin-inline: auto;
  padding-inline: var(--mb-gut);
  height: var(--mb-header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.mb-header__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mb-header__brand img,
.mb-header__brand .custom-logo { height: 34px; width: 34px; object-fit: contain; display: block; } /* the logo file is square; Astra's width attribute was squashing it to 42x34 */
.mb-header__title {
  font-family: var(--mb-display);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--mb-ink);
  text-decoration: none;
  letter-spacing: .01em;
  white-space: nowrap;
}

.mb-nav { justify-self: center; }
.mb-nav__list {
  display: flex; align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
  list-style: none; margin: 0; padding: 0;
}
.mb-nav__list li { position: relative; }
.mb-nav__list a {
  display: block; padding: 6px 0;
  font-size: 15px; letter-spacing: .02em;
  color: var(--mb-ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--mb-ease), border-color .2s var(--mb-ease);
  white-space: nowrap;
}
.mb-nav__list a:hover,
.mb-nav__list .current-menu-item > a,
.mb-nav__list .current_page_item > a,
.mb-nav__list .current-menu-ancestor > a {
  color: var(--mb-ink);
  border-bottom-color: var(--mb-brass);
}

.mb-nav__list .sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  min-width: 210px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--mb-raised);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius);
  box-shadow: 0 10px 30px rgba(36, 30, 24, .10);
  opacity: 0; visibility: hidden; transition: opacity .18s var(--mb-ease);
  z-index: 10;
}
.mb-nav__list li:hover > .sub-menu,
.mb-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.mb-nav__list .sub-menu a { padding: 8px 18px; border-bottom: 0; }
.mb-nav__list .sub-menu a:hover { background: var(--mb-sunk); color: var(--mb-ink); }

.mb-header__actions { display: flex; align-items: center; gap: 6px; }
.mb-header__icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  color: var(--mb-ink);
  text-decoration: none;
  border-radius: var(--mb-radius);
  transition: background .2s var(--mb-ease);
}
.mb-header__icon:hover { background: var(--mb-sunk); }
.mb-header__count {
  position: absolute; top: 4px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--mb-ink); color: var(--mb-ground);
  font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums;
  border-radius: 9px;
}

.mb-header__burger {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
  border-radius: var(--mb-radius);
}
.mb-burger { display: block; width: 20px; }
.mb-burger i {
  display: block; height: 1.5px; background: var(--mb-ink);
  margin: 4px 0; border-radius: 2px;
}

@media (max-width: 900px) {
  .mb-nav { display: none; }
  .mb-header__burger { display: inline-flex; }
  .mb-header__inner { grid-template-columns: auto 1fr; }
  .mb-header__actions { justify-self: end; }
}

.mb-drawer {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(36, 30, 24, .38);
}
.mb-drawer__panel {
  position: absolute; inset: 0 0 0 auto;
  width: min(88vw, 340px);
  background: var(--mb-ground);
  padding: 22px var(--mb-gut);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.mb-drawer__close {
  align-self: flex-end;
  width: 44px; height: 44px; font-size: 26px; line-height: 1;
  background: none; border: 0; color: var(--mb-ink); cursor: pointer;
}
.mb-drawer__list { list-style: none; margin: 8px 0 0; padding: 0; }
.mb-drawer__list li { border-bottom: 1px solid var(--mb-line-soft); }
.mb-drawer__list a {
  display: block; padding: 15px 2px;
  font-size: 17px; color: var(--mb-ink); text-decoration: none;
}
.mb-drawer__list .sub-menu { list-style: none; margin: 0 0 8px; padding-left: 14px; }
.mb-drawer__list .sub-menu a { padding: 10px 2px; font-size: 15px; color: var(--mb-ink-soft); }
body.mb-drawer-open { overflow: hidden; }

/* ==========================================================================
   14. Site footer
   ========================================================================== */

.mb-foot {
  background: var(--mb-sunk);
  border-top: 1px solid var(--mb-line);
  margin-top: clamp(56px, 8vw, 112px);
  color: var(--mb-ink-soft);
}
.mb-foot__inner {
  max-width: var(--mb-maxw);
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) var(--mb-gut);
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .mb-foot__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mb-foot__inner { grid-template-columns: 1.1fr 1fr 1fr 1fr 1.3fr; } }

.mb-foot__head {
  font-family: var(--mb-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mb-ink-faint);
  margin: 0 0 14px;
}
.mb-foot__list { list-style: none; margin: 0; padding: 0; }
.mb-foot__list li { margin-bottom: 9px; }
.mb-foot__list a,
.mb-foot__address a {
  color: var(--mb-ink-soft); text-decoration: none; font-size: 15px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--mb-ease), border-color .2s var(--mb-ease);
}
.mb-foot__list a:hover { color: var(--mb-ink); border-bottom-color: var(--mb-brass); }

.mb-foot__logo img { height: 46px; width: auto; }
.mb-foot__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-top: 18px;
  color: var(--mb-ink-soft);
  border: 1px solid var(--mb-line);
  border-radius: 50%;
  transition: color .2s var(--mb-ease), border-color .2s var(--mb-ease);
}
.mb-foot__social:hover { color: var(--mb-ink); border-color: var(--mb-ink); }

.mb-foot__address {
  font-style: normal; font-size: 15px; line-height: 1.65;
  margin: 0 0 14px;
}
.mb-foot__legal { display: block; color: var(--mb-ink); margin-bottom: 4px; }

.mb-foot__bar {
  border-top: 1px solid var(--mb-line);
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  align-items: center; justify-content: space-between;
  max-width: var(--mb-maxw);
  margin-inline: auto;
  padding: 20px var(--mb-gut);
}
.mb-foot__copy { margin: 0; font-size: 13px; color: var(--mb-ink-faint); }
.mb-foot__pay {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  list-style: none; margin: 0; padding: 0;
}
.mb-foot__pay li {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mb-ink-faint);
}

/* ==========================================================================
   15. Layout corrections
   ========================================================================== */

/* The prose column was flush-left inside a much wider container, leaving an
   arbitrary empty band on the right. Centre it. */
.mb-prose { margin-inline: auto; }

/* With a sticky in-flow header, --mb-header no longer has to reserve space
   for an overlaying bar. It now only sets how much air sits above a page
   title, so it can be smaller and purely typographic. */
:root { --mb-header: clamp(40px, 5vw, 76px); }

/* Lazy-loaded product images collapsed to zero height until they entered the
   viewport, so cards rendered as empty boxes and the grid jumped as they
   arrived. Reserving the ratio fixes both. */
.mb-card__media,
.woocommerce ul.products li.product a img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--mb-sunk);
}

/* Price ranges were breaking onto three lines with a bare dash between. */
.mb-card__price,
.woocommerce ul.products li.product .price {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 6px;
}
.mb-card__price del,
.woocommerce ul.products li.product .price del {
  opacity: .55; font-size: .88em; text-decoration-thickness: 1px;
}
.mb-card__price ins,
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* ==========================================================================
   16. Third-party overlays
   ========================================================================== */

/* The cookie bar is fixed to the bottom and covered page content on every
   screen. Bring it into the palette and keep it off the content. */
#cookie-notice,
.cookie-notice-container,
#cookie-law-info-bar {
  background: var(--mb-ink) !important;
  color: var(--mb-ground) !important;
  font-family: var(--mb-body) !important;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
#cookie-notice a,
#cookie-law-info-bar a { color: var(--mb-ground) !important; }
.cn-button,
#cookie-law-info-bar .cli-plugin-button {
  background: var(--mb-ground) !important;
  color: var(--mb-ink) !important;
  border-radius: var(--mb-radius) !important;
  font-family: var(--mb-body) !important;
  letter-spacing: .04em;
}

/* The WordPress admin bar is fixed on desktop, so a sticky header at top:0
   would slide underneath it. Below 600px the admin bar scrolls with the page
   and the offset must go back to zero. */
.admin-bar #masthead.mb-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #masthead.mb-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar #masthead.mb-header { top: 0; } }

/* ==========================================================================
   17. Product grid and section headings on builder-made pages
   The shop and category pages are still Elementor + a WPZOOM product grid.
   They are scheduled to become real WooCommerce archives, but until then
   they are what visitors see, so they get styled properly rather than left.
   ========================================================================== */

/*
 * ul.products computed to `gap: normal 20px` - a 20px COLUMN gap and no row
 * gap at all, which is why rows sat flush against each other. Set both axes
 * explicitly; the row gap is larger because cards read as separate objects
 * vertically but as a series horizontally.
 */
.woocommerce ul.products,
ul.products {
  gap: clamp(34px, 4vw, 56px) clamp(18px, 2vw, 28px) !important;
  margin-bottom: 0;
}

/* Cards in the final row should not stretch to fill the track. */
.woocommerce ul.products li.product,
ul.products li.mb-card { align-self: start; }

/*
 * Card titles were rendering in Astra's Roboto at 22px because Astra's
 * typography rules are more specific than the component rule. Match the
 * display face used everywhere else, and reserve two lines so cards in a row
 * keep their price rows on a common baseline.
 */
.woocommerce ul.products li.product h2.mb-card__name,
ul.products li.product h2.mb-card__name,
h2.mb-card__name {
  font-family: var(--mb-display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--mb-ink);
  margin: 0 0 8px;
  min-height: 2.7em;
}

/*
 * Section headings ("Yan Sehpalar", "Orta Sehpalar") were Trebuchet MS 62px,
 * underlined, with 3.8px tracking. The underline is the loudest problem: an
 * underline on a heading reads as a link. Marcellus has no italic, and a
 * browser-synthesised oblique on a serif display face looks broken, so the
 * heading stays roman and gets a short brass rule instead - a deliberate
 * section marker rather than a link-alike.
 */
.elementor-widget-heading .elementor-heading-title,
h2.elementor-heading-title,
h1.elementor-heading-title {
  font-family: var(--mb-display) !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: .005em !important;
  text-decoration: none !important;
  color: var(--mb-ink) !important;
  margin: 0 0 6px !important;
  padding-bottom: 18px;
  position: relative;
}
.elementor-widget-heading .elementor-heading-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 2px;
  background: var(--mb-brass);
}
.elementor-widget-heading .elementor-heading-title.elementor-align-center::after,
.elementor-widget-heading[class*="text-align-center"] .elementor-heading-title::after {
  left: 50%;
  transform: translateX(-50%);
}

/*
 * Elementor's divider widget shipped as a rule with a filled circle in the
 * middle. Reduce it to a hairline in the palette and drop the ornament.
 */
.elementor-widget-divider .elementor-divider-separator {
  border-top-color: var(--mb-line) !important;
  border-top-width: 1px !important;
}
.elementor-widget-divider .elementor-divider__element,
.elementor-widget-divider .elementor-icon,
.elementor-widget-divider .elementor-divider__text { display: none !important; }
.elementor-widget-divider { padding-block: clamp(18px, 3vw, 34px) !important; }

/*
 * A blue-grey overlay (rgba(144,157,174,.42)) sat over whole sections, which
 * is what read as a cold grey slab against the cream ground.
 */
.elementor-background-overlay { background-color: transparent !important; opacity: 1 !important; }

/* Sections were running edge to edge with no rhythm between them. */
.elementor-top-section { padding-block: clamp(20px, 3vw, 40px); }

/* ==========================================================================
   18. Prices
   Three separate faults were visible on the shop page: a sale price and its
   struck-through original sat on two lines, a price range broke onto three
   lines around a stranded dash, and the figures were formatted in English
   convention with decimals that are always zero.
   ========================================================================== */

/*
 * The amount spans render as block-level, so they stacked. Forcing the
 * container to a block with inline children keeps a range on one line and
 * lets it wrap as a unit if it genuinely does not fit.
 */
.mb-card__price,
.woocommerce ul.products li.product .price,
.woocommerce .product .price {
  display: block;
  text-align: center;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  color: var(--mb-ink);
  white-space: nowrap;
}
.mb-card__price > *,
.woocommerce ul.products li.product .price > *,
.woocommerce .product .price > *,
.mb-card__price bdi,
.woocommerce .price bdi { display: inline; }

/* Original price: quieter, and clearly struck rather than merely faded. */
.mb-card__price del,
.woocommerce .price del {
  color: var(--mb-ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-size: .85em;
  margin-right: .45em;
  opacity: 1;
}
.mb-card__price ins,
.woocommerce .price ins {
  text-decoration: none;
  font-weight: 500;
}

/* "Başlangıç" prefix on configurable products reads as a label, not a figure. */
.mb-card__price .mb-card__from,
.mb-card__price small {
  display: inline;
  font-size: .72em;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mb-ink-faint);
  margin-right: .4em;
}

/* ==========================================================================
   19. Enquiry-only products (concept designs)
   ========================================================================== */

.mb-card__price--enquiry {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mb-ink-faint);
}
.mb-enquiry__btn--card {
  align-self: center;
  margin-top: 10px;
  font-size: 12px;
  padding: 9px 16px;
}

.mb-enquiry {
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius-media);
  background: var(--mb-raised);
  padding: clamp(20px, 3vw, 30px);
  margin: 6px 0 26px;
}
.mb-enquiry__lead { margin: 0 0 18px; color: var(--mb-ink-soft); }
.mb-enquiry__note { margin: 14px 0 0; font-size: 14px; color: var(--mb-ink-faint); }

/* The enquiry subject block on the contact page. */
.mb-subject {
  border-left: 2px solid var(--mb-brass);
  background: var(--mb-sunk);
  border-radius: 0 var(--mb-radius-media) var(--mb-radius-media) 0;
  padding: 18px 22px;
  margin: 0 0 clamp(24px, 3vw, 36px);
}
.mb-subject__label {
  margin: 0 0 4px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mb-ink-faint);
}
.mb-subject__name {
  margin: 0 0 8px;
  font-family: var(--mb-display);
  font-size: clamp(19px, 2vw, 24px);
}
.mb-subject__name a { color: var(--mb-ink); text-decoration: none; border-bottom: 1px solid var(--mb-brass); }
.mb-subject__hint { margin: 0; font-size: 15px; color: var(--mb-ink-soft); }

/* ==========================================================================
   20. Specificity corrections against Astra's typography rules
   Astra styles loop titles with three-class selectors, which outrank the
   single-class component rules above. Matching its weight is the fix; the
   alternative is !important on every property, which is worse to maintain.
   ========================================================================== */

.woocommerce ul.products li.product h2.mb-card__name,
.woocommerce ul.products li.mb-card h2.mb-card__name,
ul.products li.mb-card h2.mb-card__name {
  font-family: var(--mb-display);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--mb-ink);
}
.woocommerce ul.products li.mb-card h2.mb-card__name a,
ul.products li.mb-card h2.mb-card__name a {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-decoration: none;
}

/* ==========================================================================
   21. Product gallery
   Plain images, no slider library, so nothing is hidden behind a JS reveal.
   ========================================================================== */

.mb-gallery { display: grid; gap: 12px; }
.mb-gallery__main {
  margin: 0;
  border-radius: var(--mb-radius-media);
  overflow: hidden;
  background: var(--mb-sunk);
  aspect-ratio: 1 / 1;
}
.mb-gallery__main img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.mb-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px; list-style: none; margin: 0; padding: 0;
}
.mb-gallery__thumbs button {
  display: block; width: 100%; padding: 0;
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media);
  overflow: hidden; background: var(--mb-sunk); cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: border-color .2s var(--mb-ease);
}
.mb-gallery__thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-gallery__thumbs button[aria-pressed="true"] { border-color: var(--mb-brass); }
.mb-gallery__thumbs button:hover { border-color: var(--mb-ink-faint); }

/* The long description, at the same measure as the rest of the site. */
.mb-pdp__detail { max-width: var(--mb-measure); margin-inline: auto; }
.mb-pdp__detail h2,
.mb-pdp__detail h3 { font-family: var(--mb-display); font-weight: 400; }

/* ==========================================================================
   22. Cart, checkout and account
   Templates are WooCommerce's own; only the surface is ours. Overriding
   cart.php or form-checkout.php would mean owning the markup WooCommerce
   changes most often, with a payment gateway in the chain.
   ========================================================================== */

.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce {
  max-width: var(--mb-maxw);
  margin-inline: auto;
  padding-inline: var(--mb-gut);
}

/* The totals column was ~150px wide, so the bank-transfer note wrapped every
   two or three words. Give both columns a sane minimum and let them share. */
.woocommerce-cart .woocommerce::after { content: ""; display: table; clear: both; }
@media (min-width: 900px) {
  .woocommerce-cart-form { width: 60%; float: left; }
  .woocommerce-cart .cart-collaterals { width: 36%; float: right; }
  .woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
}
.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout #order_review_heading {
  font-family: var(--mb-display); font-weight: 400;
  font-size: clamp(20px, 2vw, 26px); margin: 0 0 16px;
}
.woocommerce-cart .cart_totals table,
.woocommerce-checkout .shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td { padding: 12px 0; vertical-align: top; line-height: 1.55; }

.woocommerce table.shop_table,
.woocommerce-checkout #order_review {
  background: var(--mb-raised);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media);
}
.woocommerce table.shop_table th { font-weight: 500; color: var(--mb-ink); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity input {
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  background: var(--mb-raised);
  color: var(--mb-ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--mb-brass);
  outline: 2px solid color-mix(in srgb, var(--mb-brass) 30%, transparent);
  outline-offset: 1px;
}

.woocommerce #payment ul.payment_methods {
  border-bottom: 1px solid var(--mb-line-soft);
  padding: 6px 0 14px;
}
.woocommerce #payment div.payment_box { background: var(--mb-sunk); border-radius: var(--mb-radius); }
.woocommerce #payment div.payment_box::before { border-bottom-color: var(--mb-sunk); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--mb-brass);
  background: var(--mb-raised);
  border-radius: var(--mb-radius);
}

/* ==========================================================================
   23. Landing page
   Sections used only by the front page. The page manages its own widths, so
   marbler_wrap_page_content() skips the front page entirely.
   ========================================================================== */

.mb-h2 {
  font-family: var(--mb-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.15;
  margin: 0 0 clamp(20px, 3vw, 34px);
}

/* --- Hero ---------------------------------------------------------------- */

.mb-hero {
  position: relative;
  min-height: clamp(480px, 72vh, 720px);
  display: grid;
  align-items: end;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.mb-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20, 15, 10, .62) 0%, rgba(20, 15, 10, .18) 55%, rgba(20, 15, 10, .05) 100%);
}
.mb-hero__inner {
  width: 100%;
  padding-block: clamp(40px, 6vw, 80px);
  color: #FCFAF6;
}
.mb-hero__eyebrow { color: rgba(252, 250, 246, .85); }
.mb-hero__title {
  font-size: clamp(34px, 4.6vw, 62px);
  color: #FCFAF6;
  margin: 10px 0 14px;
  max-width: 18ch;
}
.mb-hero__lede {
  font-size: clamp(16px, 1.8vw, 20px);
  color: rgba(252, 250, 246, .88);
  max-width: 52ch;
  margin: 0 0 26px;
}
.mb-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.mb-btn--light {
  background: #FCFAF6;
  color: var(--mb-ink);
}
.mb-btn--light:hover { background: var(--mb-vein); color: var(--mb-ink); }
.mb-btn--ghostlight {
  background: transparent;
  color: #FCFAF6;
  border: 1px solid rgba(252, 250, 246, .55);
}
.mb-btn--ghostlight:hover { border-color: #FCFAF6; background: rgba(252, 250, 246, .1); color: #FCFAF6; }

/* --- Category cards ------------------------------------------------------ */

.mb-cats {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px)  { .mb-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .mb-cats { grid-template-columns: repeat(6, 1fr); } }

.mb-catcard {
  position: relative;
  display: block;
  border-radius: var(--mb-radius-media);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--mb-sunk);
  text-decoration: none;
  isolation: isolate;
}
.mb-catcard img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--mb-ease);
}
.mb-catcard:hover img { transform: scale(1.045); }
.mb-catcard::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 15, 10, .58), rgba(20, 15, 10, 0) 55%);
}
.mb-catcard span {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1;
  color: #FCFAF6;
  font-family: var(--mb-display);
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: .02em;
  line-height: 1.25;
}

/* --- Stone band ----------------------------------------------------------- */

.mb-stoneband {
  background: var(--mb-sunk);
  border-block: 1px solid var(--mb-line-soft);
  padding-block: clamp(48px, 7vw, 96px);
}
.mb-stoneband__inner {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (min-width: 940px) { .mb-stoneband__inner { grid-template-columns: minmax(300px, 5fr) 7fr; } }
.mb-stoneband__text p { max-width: 52ch; color: var(--mb-ink-soft); }
.mb-stoneband__text .mb-btn { margin-top: 8px; }

.mb-stoneband__chips {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(3, 1fr);
  list-style: none; margin: 0; padding: 0;
}
.mb-stoneband__chips li { text-align: center; }
.mb-stoneband__chips img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--mb-line);
  display: block;
  margin-bottom: 8px;
}
.mb-stoneband__chips span {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--mb-ink-soft);
}

/* --- Steps ---------------------------------------------------------------- */

.mb-steps { padding-block: clamp(48px, 7vw, 96px); background: var(--mb-raised); border-block: 1px solid var(--mb-line-soft); }
.mb-steps__list {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
@media (min-width: 800px) { .mb-steps__list { grid-template-columns: repeat(3, 1fr); } }
.mb-steps__num {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--mb-brass);
  border-radius: 50%;
  color: var(--mb-brass);
  font-family: var(--mb-display);
  font-size: 18px;
  margin-bottom: 12px;
}
.mb-steps__list h3 {
  font-family: var(--mb-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px);
  margin: 0 0 8px;
}
.mb-steps__list p { margin: 0; color: var(--mb-ink-soft); font-size: 15px; }
.mb-steps__list a { color: var(--mb-ink); border-bottom: 1px solid var(--mb-brass); text-decoration: none; }

/* --- Props ---------------------------------------------------------------- */

.mb-props {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px)  { .mb-props { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mb-props { grid-template-columns: repeat(3, 1fr); } }
.mb-props li {
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media);
  background: var(--mb-raised);
  padding: clamp(18px, 2.4vw, 28px);
}
.mb-props h3 {
  font-family: var(--mb-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .04em;
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mb-line-soft);
  position: relative;
}
.mb-props h3::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 34px; height: 2px;
  background: var(--mb-brass);
}
.mb-props p { margin: 0; font-size: 14px; color: var(--mb-ink-soft); }

/* --- Contact CTA band ------------------------------------------------------ */

.mb-ctaband {
  background: var(--mb-ink);
  padding-block: clamp(48px, 6vw, 84px);
  margin-top: clamp(40px, 6vw, 80px);
}
.mb-ctaband__inner {
  display: grid;
  gap: 24px;
  align-items: center;
  justify-items: start;
}
@media (min-width: 900px) { .mb-ctaband__inner { grid-template-columns: 1fr auto; } }
.mb-ctaband h2 {
  font-family: var(--mb-display);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px);
  color: var(--mb-ground);
  margin: 0;
  max-width: 30ch;
}

/* The front page's product grid comes from the [products] shortcode; give it
   the same rhythm as the archive grids. */
.home ul.products { margin-top: 6px; }

/* iyzico "ile Öde" mark in the footer payment row. Kept in brand colour -
   the asset is the coloured variant iyzico distributes for exactly this. */
.mb-foot__pay { align-items: center; }
.mb-foot__pay-iyzico img {
  height: 30px; width: auto; display: block;
}

/* ==========================================================================
   24. Full-bleed breakout
   Astra renders page content inside .ast-container (boxed, padded), which
   was clipping the landing sections to a card in the middle of the screen.
   The breakout stretches selected sections to the real viewport edges
   regardless of what container Astra puts around them.
   ========================================================================== */

.mb-hero,
.mb-stoneband,
.mb-steps,
.mb-ctaband {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.mb-ctaband { margin-bottom: calc(-1 * clamp(56px, 8vw, 112px)); }

/* The front page ends with the CTA band; the footer follows immediately. */
.home .mb-foot { margin-top: 0; }

/* Astra adds its own padding around page content on the front page; the
   sections manage their own spacing. */
.home .site-content .ast-container,
.home .entry-content { padding-inline: 0; }
.home .entry-content > .mb-hero { margin-top: calc(-1 * clamp(20px, 4vw, 60px)); }

/* Stone chips: the source photos are slabs on showroom walls, so a plain
   centre crop showed mostly wall. The disc clips a zoomed crop centred on
   the slab itself. */
.mb-stoneband__disc {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--mb-line);
  margin-bottom: 8px;
}
.mb-stoneband__disc img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  border: 0;
  margin: 0;
  transform: scale(1.9);
}

/* The contact form card heading rendered at display size inside the card. */
.mb-contact__form h2 {
  font-size: clamp(18px, 2vw, 23px);
  margin: 0 0 18px;
}

/* ==========================================================================
   25. Responsive corrections
   The complaint pattern was the same everywhere: full-bleed bands next to a
   1120px Astra container made the boxed sections read as a narrow card, and
   inside cramped columns text broke every few words.
   ========================================================================== */

/* Astra caps its container at 1120px. On the front page the sections manage
   their own widths, so the cap only made the grids look toy-sized against
   the full-bleed hero. */
.home #content .ast-container {
  max-width: none;
  padding-inline: 0;
}

/* Category cards: bigger at every size. 2-up on phones, 3-up on tablets and
   laptops, 6-up only where six genuinely fit. */
.mb-cats { grid-template-columns: repeat(2, 1fr); }
.mb-catcard { aspect-ratio: 1 / 1; }
@media (min-width: 700px) {
  .mb-cats { grid-template-columns: repeat(3, 1fr); }
  .mb-catcard { aspect-ratio: 4 / 3; }
}
@media (min-width: 1440px) {
  .mb-cats { grid-template-columns: repeat(6, 1fr); }
  .mb-catcard { aspect-ratio: 4 / 5; }
}
.mb-catcard span { font-size: clamp(16px, 1.5vw, 21px); }

/* "Neden Marbler Art?" was hard to read at 15/14px. */
.mb-props h3 { font-size: 17px; letter-spacing: .02em; }
.mb-props p { font-size: 15.5px; line-height: 1.6; }

/* Single-stone products name the stone with the price. */
.mb-card__stonename {
  display: block;
  text-align: center;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mb-brass);
  margin-bottom: 2px;
}

/* ==========================================================================
   26. Checkout layout
   The billing fields and the order summary were sharing whatever width the
   theme left over, so labels and the totals wrapped every two or three
   words. Explicit two-column grid on wide screens, single column below.
   ========================================================================== */

@media (min-width: 1000px) {
  form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
  form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 4; }
  form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; }
  form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--mb-header-h) + 16px); }
}

/* Inside the narrower customer column, billing and shipping stack instead of
   fighting for half the width each. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
  width: 100%;
  float: none;
  max-width: none;
}

/* Paired fields (name/surname, postcode/city) side by side, everything else
   full width, labels on their own line. */
.woocommerce form .form-row { display: block; margin-bottom: 14px; }
.woocommerce form .form-row label { display: block; margin-bottom: 4px; line-height: 1.4; }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select { width: 100%; padding: 11px 13px; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 48.5%; display: inline-block; vertical-align: top; }
.woocommerce form .form-row-first { margin-right: 2%; }
.woocommerce form .form-row-wide { width: 100%; }

/* Order review table cells were wrapping mid-word. */
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th {
  padding: 10px 14px;
  line-height: 1.5;
  vertical-align: top;
}
.woocommerce-checkout #order_review table.shop_table { table-layout: auto; }

/* ==========================================================================
   27. Forms in the palette
   The WPForms submit rendered white-on-white on /iletisim/.
   ========================================================================== */

.wpforms-form input[type="submit"],
.wpforms-form button[type="submit"],
.wpforms-submit {
  background: var(--mb-ink) !important;
  color: var(--mb-ground) !important;
  border: 0 !important;
  border-radius: var(--mb-radius) !important;
  padding: 13px 26px !important;
  font-family: var(--mb-body) !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--mb-ease);
}
.wpforms-form input[type="submit"]:hover,
.wpforms-form button[type="submit"]:hover,
.wpforms-submit:hover {
  background: var(--mb-brass) !important;
  color: var(--mb-ground) !important;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea,
.wpforms-form select {
  border: 1px solid var(--mb-line) !important;
  border-radius: var(--mb-radius) !important;
  background: var(--mb-raised) !important;
  color: var(--mb-ink) !important;
}

/* Editorial figures inside prose pages. Wider than the text measure on
   purpose - the image breathes past the column the way print layouts do. */
.mb-prose .mb-figure,
.mb-figure {
  margin: clamp(28px, 4vw, 48px) 0;
}
.mb-prose > .mb-figure { max-width: none; }
.mb-figure img {
  width: 100%;
  border-radius: var(--mb-radius-media);
  display: block;
}
.mb-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--mb-ink-faint);
  letter-spacing: .02em;
}

/* ==========================================================================
   28. Width and rhythm, round three
   ========================================================================== */

/* The 68ch prose read as "half the page" on wide screens. 82ch (~800px) is
   still comfortably readable and fills the frame noticeably better; the
   lede and h1 widen with it. */
:root { --mb-measure: 82ch; }
.mb-page > h1 { max-width: 24ch; }
.mb-page > .mb-lede { max-width: 70ch; }

/* Category cards: three across, large, everywhere above tablet. The 6-up
   variant made each card ~200px on ordinary laptops - too small to read
   the furniture. */
@media (min-width: 1440px) {
  .mb-cats { grid-template-columns: repeat(3, 1fr); }
  .mb-catcard { aspect-ratio: 4 / 3; }
}

/* --- Store grid: equal card dimensions ----------------------------------- */

/* Cards varied in height with title length and the enquiry button. The card
   becomes a full-height flex column and its last row (price or button) pins
   to the bottom, so every card in a row shares its baseline. */
.woocommerce ul.products li.mb-card,
ul.products li.mb-card {
  height: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.mb-card__media { flex: 0 0 auto; }
.mb-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.mb-card__body > :last-child { margin-top: auto; padding-top: 8px; }

/* --- Shop archive chrome ------------------------------------------------- */

.mb-cats--shop { margin: 0 0 clamp(28px, 4vw, 44px); }

.woocommerce .ast-archive-description { margin: clamp(24px, 4vw, 44px) 0 6px; }
.woocommerce h1.ast-archive-title,
h1.page-title.ast-archive-title {
  font-family: var(--mb-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 48px);
  margin: 0 0 18px;
}
.woocommerce-result-count { color: var(--mb-ink-faint); font-size: 14px; }
.woocommerce-ordering select {
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  background: var(--mb-raised);
  color: var(--mb-ink);
  padding: 8px 12px;
}

/* --- Mermer Yelpazemiz separators ---------------------------------------- */

/* The stone catalogue used CoBlocks' dynamic separator: a thick 100px rule
   that read as a scar between entries. It becomes breathing space with a
   short centred brass tick - the same section marker used elsewhere. */
.wp-block-coblocks-dynamic-separator {
  border: 0 !important;
  background: none !important;
  height: clamp(48px, 7vw, 96px) !important;
  position: relative;
  margin: 0 !important;
}
.wp-block-coblocks-dynamic-separator::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 2px;
  background: var(--mb-brass);
}
.wp-block-coblocks-dynamic-separator hr { display: none; }

/* --- Footer payment icons ------------------------------------------------ */

.mb-foot__pay { gap: 10px; }
.mb-foot__pay-icon { line-height: 0; }
.mb-foot__pay-icon svg { display: block; }

/* ==========================================================================
   29. Sectioned shop + commerce widths
   ========================================================================== */

/* Commerce screens were capped by Astra's 1120px container, which read as a
   small box in the middle of a wide monitor. */
.woocommerce-cart #content .ast-container,
.woocommerce-checkout #content .ast-container,
.woocommerce-account #content .ast-container,
.post-type-archive-product #content .ast-container {
  max-width: 1440px;
}
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce { max-width: none; }

@media (min-width: 1000px) {
  form.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 520px);
  }
}

/* Order-summary product names were wrapping every word. */
.woocommerce-checkout #order_review table.shop_table td.product-name { width: 68%; }

.mb-shop__head { margin: clamp(24px, 4vw, 48px) 0 clamp(8px, 2vw, 20px); }
.mb-shop__head h1 { margin: 0; font-size: clamp(32px, 3.8vw, 52px); }

.mb-shop__section { padding: clamp(28px, 4vw, 52px) 0 0; }
.mb-shop__bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--mb-line);
  padding-bottom: 12px;
  margin-bottom: clamp(20px, 3vw, 32px);
  position: relative;
}
.mb-shop__bar::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 54px; height: 2px;
  background: var(--mb-brass);
}
.mb-shop__title {
  font-family: var(--mb-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 34px);
  margin: 0;
}
.mb-shop__title a { color: var(--mb-ink); text-decoration: none; }
.mb-shop__title a:hover { color: var(--mb-brass); }
.mb-shop__all {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mb-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--mb-brass);
  white-space: nowrap;
}
.mb-shop__all:hover { color: var(--mb-ink); }

/* Mermer Yelpazemiz: Spectra gives the text column a quarter of the row,
   which broke the copy into a word or two per line. */
@media (min-width: 900px) {
  .page-id-7515 .wp-block-uagb-container .wp-block-uagb-container:first-child { min-width: 34%; }
}

/* ==========================================================================
   30. Full-bleed without overflow
   100vw includes the vertical scrollbar, so the breakout sections were 8px
   wider than the viewport and the page scrolled sideways. On the front page
   Astra's container is already uncapped, so the sections can simply fill it.
   ========================================================================== */
.home .mb-hero,
.home .mb-stoneband,
.home .mb-steps,
.home .mb-ctaband {
  width: 100%;
  margin-inline: 0;
}
.home .entry-content > .mb-hero { margin-top: 0; }
html, body { overflow-x: clip; }

/* Astra's WooCommerce stylesheet caps the checkout form at 1080px regardless
   of its container. Lift it; the grid above decides the column widths. */
/* !important: Astra's WooCommerce stylesheet is enqueued after this one. */
.woocommerce-checkout form.checkout,
.woocommerce form.woocommerce-checkout { max-width: none !important; width: 100%; }
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals { max-width: none; }

/* Inside the checkout grid the two blocks still carried Astra's float-era
   widths (55% / 40% of their tracks). Fill the tracks. The Sipariş
   Sözleşmeleri contract block is a third form child; it belongs under the
   billing fields, not floating between columns. */
@media (min-width: 1000px) {
  form.woocommerce-checkout #customer_details,
  form.woocommerce-checkout #order_review,
  form.woocommerce-checkout #order_review_heading { width: 100% !important; float: none !important; }
  form.woocommerce-checkout #manuel_checkout_alanlari,
  form.woocommerce-checkout .kc-classic-contract-wrapper { grid-column: 1; width: 100% !important; float: none !important; }
  /* Billing spans the first three rows so the order review (row 2) sits
     directly under its heading (row 1) instead of below the whole form. */
  form.woocommerce-checkout #customer_details { grid-row: 1 / span 3; }
  form.woocommerce-checkout #order_review { align-self: start; }
  form.woocommerce-checkout #manuel_checkout_alanlari,
  form.woocommerce-checkout .kc-classic-contract-wrapper { grid-row: 4; }
}
.woocommerce-checkout #order_review table.shop_table th.product-name,
.woocommerce-checkout #order_review table.shop_table td.product-name { width: 62%; word-break: normal; }

/* Grid distributes a spanning item's height across every row it spans, which
   inflated the heading row and left a 300px gap above the order table. Two
   explicit rows - the heading's own height, then everything else - keep the
   table directly under its heading. */
@media (min-width: 1000px) {
  form.woocommerce-checkout { grid-template-rows: max-content 1fr; }
  form.woocommerce-checkout #customer_details { grid-row: 1 / span 2 !important; }
  form.woocommerce-checkout #order_review_heading { grid-row: 1; align-self: end; }
  form.woocommerce-checkout #order_review { grid-row: 2; }
  form.woocommerce-checkout #manuel_checkout_alanlari,
  form.woocommerce-checkout .kc-classic-contract-wrapper { grid-row: 3; }
}
.woocommerce-checkout #order_review_heading {
  border: 0 !important; background: none !important;
  padding: 0 0 10px !important; margin: 0 !important;
}

/* ==========================================================================
   31. Blog hub and posts
   ========================================================================== */

/* Latest-posts block as cards. The block's own list markup is kept; only
   the presentation changes. */
.mb-prose > .mb-posts { max-width: none; }
.wp-block-latest-posts.mb-posts {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  grid-template-columns: 1fr;
  list-style: none; margin: 0 0 clamp(36px, 5vw, 64px); padding: 0;
}
@media (min-width: 640px)  { .wp-block-latest-posts.mb-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wp-block-latest-posts.mb-posts { grid-template-columns: repeat(3, 1fr); } }
.wp-block-latest-posts.mb-posts li {
  margin: 0;
  background: var(--mb-raised);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.wp-block-latest-posts.mb-posts .wp-block-latest-posts__featured-image { margin: 0; }
.wp-block-latest-posts.mb-posts .wp-block-latest-posts__featured-image img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0;
}
.wp-block-latest-posts.mb-posts li > a {
  display: block;
  padding: 18px 20px 4px;
  font-family: var(--mb-display);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.3;
  color: var(--mb-ink);
  text-decoration: none;
}
.wp-block-latest-posts.mb-posts .wp-block-latest-posts__post-date {
  padding: 0 20px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mb-ink-faint);
}
.wp-block-latest-posts.mb-posts .wp-block-latest-posts__post-excerpt {
  padding: 8px 20px 20px; margin: 0;
  font-size: 15px; color: var(--mb-ink-soft);
}
.wp-block-latest-posts.mb-posts .wp-block-latest-posts__post-excerpt a { color: var(--mb-brass); text-decoration: none; }

/* Guide cards */
.mb-prose > .mb-guides { max-width: none; }
.mb-guides {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: 1fr;
  margin: 8px 0 clamp(36px, 5vw, 64px);
}
@media (min-width: 700px) { .mb-guides { grid-template-columns: repeat(2, 1fr); } }
.mb-guide {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--mb-raised);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media);
  text-decoration: none;
  color: var(--mb-ink-soft);
  transition: border-color .2s var(--mb-ease), transform .3s var(--mb-ease);
}
.mb-guide:hover { border-color: var(--mb-brass); transform: translateY(-2px); }
.mb-guide__tag { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-brass); }
.mb-guide strong { font-family: var(--mb-display); font-weight: 400; font-size: clamp(18px, 1.8vw, 22px); color: var(--mb-ink); }
.mb-guide span:last-child { font-size: 14.5px; }

/* Single post: title and meta in the display face, content at the measure. */
.single-post .entry-header { max-width: var(--mb-measure); margin: clamp(32px, 5vw, 64px) auto 8px; }
.single-post .entry-header .entry-title {
  font-family: var(--mb-display); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 48px); line-height: 1.15;
}
.single-post .entry-meta { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mb-ink-faint); }
.single-post .post-thumb img,
.single-post .entry-content > figure:first-child img { border-radius: var(--mb-radius-media); }
.mb-page--post { padding-top: 0; }

/* Posts archive (Astra's blog loop) */
.blog .ast-article-post, .archive .ast-article-post {
  background: var(--mb-raised); border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media); padding: clamp(18px, 2.4vw, 28px);
}
.blog .entry-title a, .archive .entry-title a { font-family: var(--mb-display); font-weight: 400; color: var(--mb-ink); }

/* The block library sizes grid items as calc(100%/3 - 1.25em) of the item's
   own track, which inside our grid collapsed every card to ~99px. */
.wp-block-latest-posts.mb-posts.is-grid li,
.wp-block-latest-posts.mb-posts li { width: 100% !important; max-width: none; }

/* ==========================================================================
   32. Category landing pages
   Title and lede at the measure; the product grid escapes it and takes the
   full container; the long-form category copy returns to the measure below.
   ========================================================================== */

.mb-prose > .woocommerce,
.mb-prose > .mb-catgrid { max-width: none; }
.mb-catgrid { margin: clamp(20px, 3vw, 36px) 0 clamp(36px, 5vw, 64px); }
.mb-catgrid ul.products { margin-top: 0; }

/* The copy after the grid reads as an article: its first heading gets the
   same section marker used elsewhere. */
.mb-catcopy > h2:first-child {
  position: relative; padding-bottom: 14px; margin-top: 0;
}
.mb-catcopy > h2:first-child::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 54px; height: 2px; background: var(--mb-brass);
}

/* FAQ as native disclosure widgets - no plugin, keyboard accessible. */
.mb-faq details {
  border-bottom: 1px solid var(--mb-line-soft);
  padding: 4px 0;
}
.mb-faq details:first-of-type { border-top: 1px solid var(--mb-line-soft); }
.mb-faq summary {
  cursor: pointer; list-style: none;
  padding: 16px 40px 16px 0;
  font-family: var(--mb-display); font-size: clamp(17px, 1.6vw, 20px);
  color: var(--mb-ink); position: relative;
}
.mb-faq summary::-webkit-details-marker { display: none; }
.mb-faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--mb-brass); font-size: 22px; line-height: 1;
}
.mb-faq details[open] summary::after { content: "\2212"; }
.mb-faq details > *:not(summary) { padding: 0 0 16px; color: var(--mb-ink-soft); }

/* Post featured image: a wide, capped-height banner rather than a full
   portrait crop that pushes the article below the fold. */
.single-post .ast-single-post-featured-section img,
.single-post .post-thumb-img-content img,
.single-post .entry-content > .wp-block-post-featured-image img,
.single-post figure.post-thumb img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--mb-radius-media);
}
.single-post .ast-single-post-featured-section,
.single-post .post-thumb { max-width: var(--mb-maxw); margin: 0 auto clamp(20px, 3vw, 36px); }

/* Cart totals: the box read small next to the wide cart table. Wider column,
   larger figures, and the grand total set apart. */
@media (min-width: 900px) {
  .woocommerce-cart-form { width: 56%; }
  .woocommerce-cart .cart-collaterals { width: 41%; }
}
.woocommerce-cart .cart_totals { padding: clamp(18px, 2.4vw, 28px); }
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td { font-size: 16px; padding: 14px 0; }
.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td { font-size: 20px; padding-top: 18px; }
.woocommerce-cart .cart_totals tr.order-total .amount { font-family: var(--mb-display); font-size: 26px; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-method-notice,
.woocommerce-cart .cart_totals #shipping_method + p,
.woocommerce-cart .cart_totals small { font-size: 14px; line-height: 1.55; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { font-size: 14px; padding: 16px 24px; }

/* ==========================================================================
   33. Mermer Yelpazemiz - stone rows
   Replaces the Spectra 25/75 split that broke the copy into a word or two
   per line. Image and text share the row evenly; rows alternate sides.
   ========================================================================== */
.mb-prose > .mb-stones { max-width: none; }
.mb-stones { display: grid; gap: clamp(36px, 5vw, 72px); margin: clamp(28px, 4vw, 48px) 0; }
.mb-stone {
  display: grid; gap: clamp(20px, 3vw, 44px); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .mb-stone { grid-template-columns: 1.15fr 1fr; }
  .mb-stone:nth-child(even) .mb-stone__media { order: 2; }
}
.mb-stone__media { margin: 0; }
.mb-stone__media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  border-radius: var(--mb-radius-media); border: 1px solid var(--mb-line-soft);
}
.mb-stone__text h2 { margin: 6px 0 12px; font-size: clamp(24px, 2.6vw, 34px); }
.mb-stone__text p { margin: 0; color: var(--mb-ink-soft); max-width: 48ch; }
.mb-stone__text .mb-eyebrow { color: var(--mb-brass); }

/* Category landing pages: the product grid was inheriting the 82ch reading
   measure, so cards came out small. It now spans the container width the
   shop uses; the copy above and below stays at the measure. */
.mb-prose > .mb-catgrid {
  width: min(1440px, calc(100vw - 2 * var(--mb-gut)));
  position: relative; left: 50%; transform: translateX(-50%);
}
.mb-catgrid .woocommerce-result-count,
.mb-catgrid .woocommerce-ordering { margin-bottom: 18px; }
.mb-catgrid ul.products li.mb-card h2.mb-card__name { font-size: clamp(17px, 1.6vw, 21px); }

/* Cart grand total: the VAT note inherited the display face and wrapped. */
.woocommerce-cart .cart_totals tr.order-total .includes_tax,
.woocommerce-cart .cart_totals tr.order-total .includes_tax .amount {
  font-family: var(--mb-body); font-size: 13px; color: var(--mb-ink-faint); display: inline; white-space: nowrap;
}
.woocommerce-cart .cart_totals tr.order-total td { line-height: 1.3; }

/* 34. Review-pass fixes (2026-09-04) */
/* Astra's inline heading rule (.entry-content :where(h1..h6) Merriweather 700)
   was winning on content and category pages. Pin the display face. */
#content .entry-content :is(h1, h2, h3, h4, h5, h6),
#content .mb-prose :is(h1, h2, h3, h4, h5, h6),
#content .mb-page :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--mb-display); font-weight: 400; line-height: 1.15;
}
/* Contrast: the faint ink was 3.2:1 on cream. */
:root { --mb-ink-faint: #6E6355; }
.mb-card__stonename, .mb-eyebrow, .woocommerce-result-count { color: var(--mb-ink-faint); }
.mb-config__swatch-label, .mb-stoneband__label { font-size: 11px; }
/* Commerce screens: title and lead-time note */
.mb-commerce__title { font-family: var(--mb-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 42px); margin: 0 0 22px; line-height: 1.1; }
.woocommerce-checkout .mb-commerce__title { margin-bottom: 26px; }
.mb-leadnote { font-size: 14px; line-height: 1.6; color: var(--mb-ink-soft); margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--mb-line); background: var(--mb-paper, #fff); }
.woocommerce-checkout .mb-leadnote { margin: 0 0 16px; }
/* Checkout: customer type block and corporate rows */
.woocommerce-checkout .mb-customer-type { margin-bottom: 8px; }
.woocommerce-checkout .mb-corp-field { display: none; }
.woocommerce-checkout .mb-corp-field[style*="block"] { display: block; }
.woocommerce-checkout #order_review table.shop_table td.product-name { width: 64%; word-break: normal; overflow-wrap: anywhere; }
/* Cart: hide struck prices on the line items until the catalogue is re-priced */
.woocommerce-cart td.product-price del, .woocommerce-checkout .product-total del { display: none; }

/* Commerce titles sit on the commerce grid, not the 1080px prose column. */
.woocommerce-cart .mb-commerce__title,
.woocommerce-checkout .mb-commerce__title,
.woocommerce-account .mb-commerce__title { max-width: none !important; width: auto; margin-left: 0 !important; margin-right: 0 !important; padding-top: 6px; } /* Astra's inherit-container-width rule outranks plain classes */
/* Single-column cards on phones: no stretched blank space above the price. */
@media (max-width: 640px) {
  .woocommerce ul.products li.mb-card, ul.products li.mb-card { height: auto; }
  .mb-card__body > :last-child { margin-top: 0; padding-top: 12px; }
}


/* ==========================================================================
   35. Product page
   Stone selector, price states, buy/enquiry areas, spec, story, trust
   strip, FAQ, related and the sticky mobile bar. Everything lives under
   mb-pdp__*; the grid, media and panel rules from section 8 still apply.
   ========================================================================== */

/* --- Frame ---------------------------------------------------------------- */
.mb-pdp-page { padding-top: clamp(14px, 2vw, 24px); }
@media (min-width: 900px) {
  .mb-pdp__panel { top: calc(var(--mb-header-h) + 16px); }
}
.mb-pdp__panel { display: flex; flex-direction: column; gap: 18px; }
.mb-pdp__panel > * { margin: 0; }

/* Breadcrumb */
.mb-pdp__crumbs { font-size: 13px; color: var(--mb-ink-faint); margin: 0 0 clamp(10px, 1.5vw, 18px); }
.mb-pdp__crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.mb-pdp__crumbs li { display: inline-flex; align-items: center; }
.mb-pdp__crumbs li + li::before { content: "\203A"; margin: 0 8px; color: var(--mb-line); }
.mb-pdp__crumbs a { color: var(--mb-ink-soft); text-decoration: none; }
.mb-pdp__crumbs a:hover { color: var(--mb-brass); }
.mb-pdp__crumbs [aria-current] { color: var(--mb-ink); }
@media (max-width: 600px) {
  .mb-pdp__crumbs li:first-child { display: none; }
  .mb-pdp__crumbs li:nth-child(2)::before { display: none; }
  .mb-pdp__crumbs li:last-child { display: none; }
}

/* Eyebrow, title, short description */
.mb-pdp__eyebrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.mb-pdp__eyebrow a { color: inherit; text-decoration: none; }
.mb-pdp__eyebrow a:hover { color: var(--mb-brass); }
.mb-pdp__eyebrow-sep { color: var(--mb-line); }
.mb-pdp__title { font-size: clamp(28px, 3.4vw, 42px); margin: 0; }
.mb-pdp__short { font-size: clamp(16px, 1.6vw, 18px); max-width: 52ch; }
.mb-pdp__short p { margin: 0; }

/* --- Stone selector ------------------------------------------------------- */
.mb-pdp__stones { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.mb-pdp__stones-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.mb-pdp__stones-row + .mb-pdp__stones-head { margin-top: 14px; }
.mb-pdp__stones-current { font-size: 14px; color: var(--mb-ink); }
.mb-pdp__stones-hint { font-size: 12px; letter-spacing: .04em; color: var(--mb-ink-faint); }
.mb-pdp__stones-row { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.mb-pdp__stones-row--other { gap: 8px; }
.mb-pdp__stones-note { font-size: 13px; color: var(--mb-ink-soft); min-height: 1.3em; }
.mb-pdp__stones-note--other { color: var(--mb-ink-faint); }

.mb-pdp__stone {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 76px; padding: 4px 0 2px;
  border: 0; background: none; cursor: pointer; color: var(--mb-ink-faint);
  font-family: var(--mb-body);
  border-radius: var(--mb-radius);
}
.mb-pdp__stone--other { width: 44px; padding: 0; }
.mb-pdp__stone-disc {
  display: block; width: 64px; height: 64px;
  border-radius: 50%; overflow: hidden;
  border: 1px solid var(--mb-line);
  background: var(--mb-sunk);
  transition: border-color .2s var(--mb-ease), box-shadow .2s var(--mb-ease);
}
.mb-pdp__stone--other .mb-pdp__stone-disc { width: 44px; height: 44px; }
.mb-pdp__stone-disc img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.9); /* slabs on showroom walls: zoom past the wall */
}
.mb-pdp__stone-disc--letter {
  display: grid; place-items: center;
  font-family: var(--mb-display); font-size: 22px; color: var(--mb-ink-soft);
}
.mb-pdp__stone--other .mb-pdp__stone-disc--letter { font-size: 16px; }
.mb-pdp__stone-label { font-size: 11px; line-height: 1.25; text-align: center; letter-spacing: .01em; }
.mb-pdp__stone-tag {
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mb-brass);
}
.mb-pdp__stone:hover .mb-pdp__stone-disc { border-color: var(--mb-vein); }
.mb-pdp__stone[aria-pressed="true"] .mb-pdp__stone-disc {
  border-color: var(--mb-brass);
  box-shadow: 0 0 0 1px var(--mb-brass);
}
.mb-pdp__stone[aria-pressed="true"] { color: var(--mb-ink); }
.mb-pdp__stone:focus-visible { outline: none; }
.mb-pdp__stone:focus-visible .mb-pdp__stone-disc { outline: 2px solid var(--mb-brass); outline-offset: 2px; }
.mb-pdp__stone--locked { cursor: default; }

/* --- Price ---------------------------------------------------------------- */
.mb-pdp__price { padding-top: 18px; border-top: 1px solid var(--mb-line); transition: opacity .14s var(--mb-ease); }
.mb-pdp__price-line { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.mb-pdp__price-now {
  font-family: var(--mb-display);
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1;
  color: var(--mb-ink);
  font-variant-numeric: tabular-nums;
}
.mb-pdp__price-was {
  font-size: 15px; color: var(--mb-ink-faint);
  text-decoration: line-through; text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
.mb-pdp__price-note, .mb-pdp__price-sub { margin: 6px 0 0; font-size: 13px; color: var(--mb-ink-faint); }
.mb-pdp__price-sub { color: var(--mb-ink-soft); }
.mb-pdp__price--enquiry .mb-pdp__price-now { font-size: clamp(26px, 3vw, 34px); }
.mb-pdp__price--unavailable .mb-pdp__price-now { font-size: clamp(20px, 2.2vw, 26px); color: var(--mb-warn); }
.mb-pdp__price.is-updating .mb-pdp__price-now { opacity: .45; }

/* --- Buy area (WooCommerce's own form, restyled) ------------------------- */
.mb-pdp__buy table.variations,
.mb-pdp__buy .woocommerce-variation,
.mb-pdp__buy .reset_variations,
.mb-pdp__buy .acovsw-attribute-style,
.mb-pdp__buy .woocommerce-variation-availability,
.mb-pdp__buy .stock,
.acovsw-attribute-style { display: none !important; }
.mb-pdp__buy form.cart,
.mb-pdp__buy .woocommerce-variation-add-to-cart {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px; margin: 0;
}
.mb-pdp__buy form.variations_form { margin: 0; }
.mb-pdp__buy .single_variation_wrap { width: 100%; }
.mb-pdp__buy .quantity {
  display: inline-flex; align-items: center;
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius);
  background: var(--mb-raised); overflow: hidden; margin: 0; float: none;
}
.mb-pdp__buy .quantity .qty {
  width: 54px; min-height: 50px; border: 0; background: transparent;
  text-align: center; font-family: var(--mb-body); font-size: 15px; color: var(--mb-ink);
  -moz-appearance: textfield; appearance: textfield; margin: 0; padding: 0;
}
.mb-pdp__buy .quantity .qty::-webkit-outer-spin-button,
.mb-pdp__buy .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mb-pdp__buy .quantity .ast-qty-placeholder,
.mb-pdp__buy .quantity .minus,
.mb-pdp__buy .quantity .plus {
  display: inline-grid; place-items: center; width: 38px; min-height: 50px;
  color: var(--mb-ink-soft); text-decoration: none; font-size: 18px; line-height: 1;
  border: 0; background: transparent; cursor: pointer; user-select: none;
}
.mb-pdp__buy .quantity .ast-qty-placeholder:hover { color: var(--mb-brass); background: var(--mb-sunk); }
.mb-pdp__buy .single_add_to_cart_button,
.woocommerce .mb-pdp__buy button.single_add_to_cart_button.alt {
  flex: 1 1 200px; min-height: 52px; margin: 0;
  font-size: 13px; letter-spacing: .12em;
}
.mb-pdp__buy .single_add_to_cart_button.disabled,
.mb-pdp__buy .single_add_to_cart_button.wc-variation-selection-needed { opacity: .45; cursor: not-allowed; }
.mb-pdp__buy .added_to_cart { display: block; width: 100%; font-size: 14px; }

/* --- Enquiry area ---------------------------------------------------------- */
.mb-pdp__enquiry-box { margin: 0; }
.mb-pdp__enquiry-box .mb-enquiry__btn { width: 100%; min-height: 52px; }
.mb-pdp__back {
  display: inline-block; margin-top: 14px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font-family: var(--mb-body); font-size: 13px; color: var(--mb-ink);
  text-decoration: underline; text-decoration-color: var(--mb-vein); text-underline-offset: 3px;
}
.mb-pdp__back:hover { color: var(--mb-brass); text-decoration-color: var(--mb-brass); }

/* Lead note */
.mb-pdp__lead { margin: 0; }

/* --- Spec and links ------------------------------------------------------- */
.mb-pdp__spec-wrap { padding-top: 18px; border-top: 1px solid var(--mb-line); }
.mb-pdp__spec { gap: 8px 24px; }
.mb-pdp__spec dt { white-space: nowrap; }
.mb-pdp__spec-hint { display: block; font-size: 12px; color: var(--mb-ink-faint); }
.mb-pdp__links { font-size: 13px; color: var(--mb-ink-faint); display: flex; flex-wrap: wrap; gap: 6px 10px; }
.mb-pdp__links a { color: var(--mb-ink-soft); text-decoration: underline; text-decoration-color: var(--mb-line); text-underline-offset: 3px; }
.mb-pdp__links a:hover { color: var(--mb-brass); text-decoration-color: var(--mb-brass); }

/* --- Story ---------------------------------------------------------------- */
.mb-pdp__story {
  max-width: var(--mb-measure); margin-inline: auto;
  padding-block: clamp(36px, 5vw, 64px);
}
.mb-pdp__story > h2 { margin: 0 0 .7em; font-size: clamp(24px, 2.6vw, 32px); }
.mb-pdp__story h3 { font-family: var(--mb-display); font-weight: 400; font-size: clamp(18px, 1.8vw, 22px); }
.mb-pdp__story p:empty { display: none; }
.mb-pdp__story ul, .mb-pdp__story ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.mb-pdp__story li { margin-bottom: .5em; }

/* --- Trust strip ----------------------------------------------------------- */
.mb-pdp__make { padding-block: clamp(40px, 6vw, 80px); }
.mb-pdp__make-list { counter-reset: none; }
.mb-pdp__make .mb-h2 { margin-bottom: clamp(20px, 3vw, 34px); }

/* --- FAQ ------------------------------------------------------------------ */
.mb-pdp__faq { max-width: var(--mb-measure); margin-inline: auto; padding-block: clamp(36px, 5vw, 64px); }
.mb-pdp__faq .mb-h2 { margin-bottom: clamp(14px, 2vw, 22px); }
.mb-pdp__faq details > p { margin: 0; }

/* --- Related --------------------------------------------------------------- */
.mb-pdp__related { padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 80px); }
.mb-pdp__related section.related > h2,
.mb-pdp__related section.up-sells > h2 {
  font-family: var(--mb-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 clamp(18px, 2.5vw, 28px);
}
.mb-pdp__related:empty { display: none; }

/* --- Sticky mobile bar ------------------------------------------------------ */
.mb-pdp__bar {
  display: none;
  position: fixed; bottom: 0; inset-inline: 0; z-index: 90;
  align-items: center; gap: 12px;
  padding: 10px var(--mb-gut);
  background: var(--mb-ground);
  border-top: 1px solid var(--mb-line);
  box-shadow: 0 -8px 24px rgba(36, 30, 24, .06);
}
@media (max-width: 899px) {
  .mb-pdp__bar.is-visible { display: flex; }
  body.mb-pdp-bar-open { padding-bottom: 72px; }
}
.mb-pdp__bar-price {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--mb-display); font-size: 20px; line-height: 1.1; color: var(--mb-ink);
  font-variant-numeric: tabular-nums;
}
.mb-pdp__bar-price small { display: block; font-family: var(--mb-body); font-size: 11px; color: var(--mb-ink-faint); margin-top: 3px; }
.mb-pdp__bar-cta { flex: 0 0 auto; min-height: 48px; padding-inline: 22px; font-size: 12px; }
.mb-pdp__bar-cta[disabled] { opacity: .45; cursor: not-allowed; }

/* Konsept: no priced group, the single stone row reads as a plain list. */
.mb-pdp--konsept .mb-pdp__stones-row--other { gap: 10px 12px; }

/* 36. Hero as a real image (LCP): the background JPEG became a responsive
   <img> with WebP sources; scrim and copy stack above it. */
.mb-hero { position: relative; overflow: hidden; background: var(--mb-ink); }
.mb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; margin: 0; }
.mb-hero__scrim { z-index: 1; }
.mb-hero__inner { position: relative; z-index: 2; }
/* 37. Tap targets (Lighthouse target-size): quantity controls and thumbs at 44px. */
.mb-pdp__buy .quantity .qty, .mb-pdp__buy .quantity button, .mb-pdp__buy .quantity a { min-height: 44px; min-width: 44px; }
.mb-gallery__thumbs button { min-width: 44px; min-height: 44px; }
.mb-pdp__stone { min-width: 44px; min-height: 44px; }
.mb-pdp__links a { padding: 8px 2px; display: inline-block; }


/* ==========================================================================
   38. Product options
   Three stone groups (Standart / Varsayılan alternatifler / Diğer taşlar)
   and the customisation pills (Ölçü, Kenar profili, Bitiriş, Kalınlık,
   collapsed Diğer seçenekler). Section 35 rules still apply.
   ========================================================================== */

/* --- Stone groups ----------------------------------------------------------- */
.mb-pdp__stones-main { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: flex-start; }
.mb-pdp__stones-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mb-pdp__stones-group--standard { padding-right: 22px; border-right: 1px solid var(--mb-line); }
.mb-pdp__stones-group--defaults { flex: 1 1 200px; }
.mb-pdp__stones-cap {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mb-ink-faint);
}
.mb-pdp__stone--soon .mb-pdp__stone-disc { opacity: .85; border-style: dashed; }
.mb-pdp__stone-tag--soon { color: var(--mb-ink-faint); text-transform: none; letter-spacing: .04em; font-size: 10px; }
@media (max-width: 420px) {
  .mb-pdp__stones-group--standard { padding-right: 0; border-right: 0; }
}

/* --- Options block ----------------------------------------------------------- */
.mb-pdp__opts { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; border-top: 1px solid var(--mb-line); }
.mb-pdp__opt { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mb-pdp__opt-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; padding: 0; margin: 0 0 2px;
}
.mb-pdp__opt-current { font-size: 14px; color: var(--mb-ink); text-align: right; }
.mb-pdp__opt-hint { margin: 0; font-size: 12px; color: var(--mb-ink-faint); }

.mb-pdp__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-pdp__pill { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.mb-pdp__pill-body {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius);
  background: var(--mb-raised); color: var(--mb-ink-soft);
  font-size: 13px; line-height: 1.2;
  transition: border-color .2s var(--mb-ease), box-shadow .2s var(--mb-ease), color .2s var(--mb-ease);
}
.mb-pdp__pill--icon .mb-pdp__pill-body { flex-direction: column; align-items: flex-start; gap: 6px; min-width: 96px; }
.mb-pdp__pill-icon { display: block; width: 40px; height: 24px; color: var(--mb-ink-soft); }
.mb-pdp__pill-label { font-variant-numeric: tabular-nums; }
.mb-pdp__pill-label small { font-size: 11px; color: var(--mb-ink-faint); margin-left: 2px; }
.mb-pdp__pill-delta { font-size: 11px; letter-spacing: .04em; color: var(--mb-ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-pdp__pill-delta:empty { display: none; }
.mb-pdp__pill:hover .mb-pdp__pill-body { border-color: var(--mb-vein); color: var(--mb-ink); }
.mb-pdp__pill input:checked ~ .mb-pdp__pill-body {
  border-color: var(--mb-brass); box-shadow: 0 0 0 1px var(--mb-brass);
  color: var(--mb-ink);
}
.mb-pdp__pill input:checked ~ .mb-pdp__pill-body .mb-pdp__pill-icon { color: var(--mb-brass); }
.mb-pdp__pill input:checked ~ .mb-pdp__pill-body .mb-pdp__pill-delta { color: var(--mb-brass); }
.mb-pdp__pill input:focus-visible ~ .mb-pdp__pill-body { outline: 2px solid var(--mb-brass); outline-offset: 2px; }

/* Collapsed groups */
.mb-pdp__opts-more { margin: 0; border-top: 1px solid var(--mb-line-soft); }
.mb-pdp__opts-more summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 0;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mb-ink-soft);
}
.mb-pdp__opts-more summary::-webkit-details-marker { display: none; }
.mb-pdp__opts-more summary::after { content: "\002B"; margin-left: auto; font-size: 18px; line-height: 1; color: var(--mb-ink-faint); }
.mb-pdp__opts-more[open] summary::after { content: "\2212"; }
.mb-pdp__opts-more summary:hover { color: var(--mb-brass); }
.mb-pdp__opts-more-count {
  font-size: 10px; letter-spacing: .06em; text-transform: none;
  padding: 2px 8px; border-radius: 999px;
  background: var(--mb-sunk); color: var(--mb-brass);
}
.mb-pdp__opts-more-body { display: flex; flex-direction: column; gap: 16px; padding: 4px 0 8px; }

/* Notes */
.mb-pdp__opts-note { margin: 0; font-size: 12px; color: var(--mb-ink-faint); }
.mb-pdp__opts-note--legal { color: var(--mb-ink-soft); }
.mb-pdp__opts-note--legal a { color: inherit; text-decoration: underline; text-decoration-color: var(--mb-line); text-underline-offset: 3px; }
.mb-pdp__opts-note--legal a:hover { color: var(--mb-brass); text-decoration-color: var(--mb-brass); }

/* Contact aside: option lines under the stone line */
.mb-subject__option { margin-top: 2px; }

/* ==========================================================================
   39. Article body (blog posts)
   The posts were rendering with Astra's defaults: full viewport measure, no
   rhythm, unstyled disclosures. This gives the article the same typographic
   system the rest of the site uses, without touching the markup the posts
   were authored in.
   ========================================================================== */

.single-post .entry-content {
  max-width: var(--mb-measure);
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.75;
  color: var(--mb-ink-soft);
}
.single-post .entry-content > * { max-width: 100%; }
.single-post .entry-content > p { margin: 0 0 1.15em; }
.single-post .entry-content > p:last-child { margin-bottom: 0; }

/* Opening paragraph: larger, in the darker ink, with a brass rule above it. */
.single-post .entry-content > .mb-lede {
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.62;
  color: var(--mb-ink);
  max-width: none;
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 2px solid var(--mb-brass);
}

/* Section headings in the display face, with room above them. */
.single-post .entry-content > h2 {
  font-family: var(--mb-display);
  font-weight: 400;
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.2;
  color: var(--mb-ink);
  margin: clamp(38px, 4.5vw, 60px) 0 .55em;
}
.single-post .entry-content > h2 + p { margin-top: 0; }
.single-post .entry-content > h3 {
  font-family: var(--mb-display);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 23px);
  color: var(--mb-ink);
  margin: clamp(26px, 3vw, 36px) 0 .5em;
}

.single-post .entry-content > ul,
.single-post .entry-content > ol { margin: 0 0 1.3em; padding-left: 1.25em; }
.single-post .entry-content > ul li,
.single-post .entry-content > ol li { margin-bottom: .55em; }
.single-post .entry-content strong { color: var(--mb-ink); font-weight: 500; }

/* Images inside an article sit on the raised surface with the media radius. */
.single-post .entry-content figure { margin: clamp(28px, 3.5vw, 44px) 0; }
.single-post .entry-content figure img,
.single-post .entry-content > img { border-radius: var(--mb-radius-media); display: block; width: 100%; height: auto; }
.single-post .entry-content figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--mb-ink-faint);
  text-align: center;
}

/* Closing questions reuse the FAQ disclosure pattern from the other pages. */
.single-post .entry-content details {
  border-bottom: 1px solid var(--mb-line-soft);
  padding: 4px 0;
}
.single-post .entry-content details:first-of-type { border-top: 1px solid var(--mb-line-soft); }
.single-post .entry-content summary {
  cursor: pointer; list-style: none;
  padding: 16px 40px 16px 0;
  font-family: var(--mb-display); font-size: clamp(17px, 1.6vw, 20px);
  color: var(--mb-ink); position: relative;
}
.single-post .entry-content summary::-webkit-details-marker { display: none; }
.single-post .entry-content summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--mb-brass); font-size: 22px; line-height: 1;
}
.single-post .entry-content details[open] summary::after { content: "\2212"; }
.single-post .entry-content details > *:not(summary) { padding: 0 0 16px; margin: 0; }

/* The heading that introduces the questions carries the eyebrow treatment. */
.single-post .entry-content > h2:last-of-type { margin-bottom: .35em; }

/* Astra prints tags and a comment form under the article; neither belongs on
   a product brand journal. */
.single-post .entry-content + .entry-meta,
.single-post .ast-single-post-order .post-tags { color: var(--mb-ink-faint); font-size: 13px; }

/* ==========================================================================
   40. Account screens
   WooCommerce ships the account area as a bullet list next to a paragraph.
   This turns the navigation into a panel, gives the login and register forms
   the same field treatment as checkout, and puts both on the site's palette.
   ========================================================================== */

.woocommerce-account .woocommerce {
  max-width: var(--mb-wrap, 1180px);
  margin-inline: auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; }

@media (min-width: 860px) {
  .woocommerce-account .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content { margin-top: 0; }
  .woocommerce-account div.woocommerce > .woocommerce-MyAccount-navigation {
    float: left; width: 258px; margin-right: clamp(28px, 4vw, 52px);
  }
  .woocommerce-account div.woocommerce > .woocommerce-MyAccount-content { overflow: hidden; }
}

/* --- Navigation panel ----------------------------------------------------- */
.woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 6px;
  background: var(--mb-raised);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media);
}
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--mb-ink-soft);
  text-decoration: none;
  border-radius: calc(var(--mb-radius-media) - 4px);
  border-bottom: 1px solid var(--mb-line-soft);
  transition: background .18s var(--mb-ease), color .18s var(--mb-ease);
}
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }
.woocommerce-MyAccount-navigation li a:hover { background: var(--mb-sunk); color: var(--mb-ink); }
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--mb-sunk);
  color: var(--mb-ink);
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--mb-brass);
}

/* The navigation is a control, so it does not take the body link underline. */
.woocommerce-account .entry-content .woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-navigation li a {
  border-bottom: 1px solid var(--mb-line-soft);
  text-decoration: none;
  background-image: none;
}
.woocommerce-MyAccount-navigation li:last-child a { border-bottom: 0; }

/* --- Content -------------------------------------------------------------- */
.woocommerce-MyAccount-content {
  color: var(--mb-ink-soft); font-size: 16px; line-height: 1.7;
  background: var(--mb-raised);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
}
.woocommerce-MyAccount-content > :first-child { margin-top: 0; }
.woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
  font-family: var(--mb-display); font-weight: 400; color: var(--mb-ink);
  font-size: clamp(20px, 2.2vw, 26px); margin: 28px 0 12px;
}
.woocommerce-MyAccount-content table { border-color: var(--mb-line-soft); font-size: 15px; }
.woocommerce-MyAccount-content table th { color: var(--mb-ink); font-weight: 500; }
.woocommerce-MyAccount-content .woocommerce-Address {
  background: var(--mb-raised);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media);
  padding: clamp(16px, 2.2vw, 22px);
}
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin-top: 0; }

/* --- Login, register and lost password ------------------------------------ */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce-account .woocommerce-ResetPassword {
  max-width: 470px;
  margin-inline: auto;
  background: var(--mb-raised);
  border: 1px solid var(--mb-line-soft);
  border-radius: var(--mb-radius-media);
  padding: clamp(22px, 3vw, 34px);
}
.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row { margin-bottom: 16px; padding: 0; }
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label {
  display: block; margin-bottom: 6px;
  font-size: 13px; letter-spacing: .04em; color: var(--mb-ink-soft);
}
.woocommerce-account .woocommerce-form-login input.input-text,
.woocommerce-account .woocommerce-form-register input.input-text,
.woocommerce-account .woocommerce-ResetPassword input.input-text {
  width: 100%;
  padding: 12px 14px;
  background: var(--mb-ground);
  border: 1px solid var(--mb-line);
  border-radius: 6px;
  color: var(--mb-ink);
  font-family: var(--mb-body); font-size: 15px;
}
.woocommerce-account .woocommerce-form-login input.input-text:focus,
.woocommerce-account .woocommerce-form-register input.input-text:focus { border-color: var(--mb-brass); outline: none; }
.woocommerce-account .woocommerce-form-login__rememberme { font-size: 14px; color: var(--mb-ink-soft); }
.woocommerce-account .woocommerce-LostPassword { margin: 12px 0 0; font-size: 14px; }
.woocommerce-account .woocommerce-privacy-policy-text { font-size: 13.5px; color: var(--mb-ink-faint); }

/* Two columns on wide screens when both login and register are shown. */
@media (min-width: 900px) {
  .woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
  .woocommerce-account .u-columns.col2-set .col-1,
  .woocommerce-account .u-columns.col2-set .col-2 { width: auto; float: none; }
  .woocommerce-account .u-columns.col2-set .woocommerce-form-login,
  .woocommerce-account .u-columns.col2-set .woocommerce-form-register { max-width: none; }
}

/* Astra's meta row is replaced by the date line printed into the article. */
.single-post .entry-meta,
.single-post .ast-single-post-order .entry-meta { display: none; }
.single-post .entry-content > .mb-postdate {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mb-ink-faint);
}


/* ==========================================================================
   41. Option pill grids and the projects band
   ========================================================================== */

/* Icon pill groups (edge profile) wrapped into an uneven cascade with five
   items of different label lengths. An auto-fill grid keeps every card the
   same width and aligns the rows. */
.mb-pdp__opt[data-mb-opt="kenar"] .mb-pdp__pills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}
.mb-pdp__opt[data-mb-opt="kenar"] .mb-pdp__pill,
.mb-pdp__opt[data-mb-opt="kenar"] .mb-pdp__pill-body { width: 100%; }
.mb-pdp__opt[data-mb-opt="kenar"] .mb-pdp__pill-body { min-height: 92px; box-sizing: border-box; }
.mb-pdp__opt-hint { margin: 8px 0 0; font-size: 13px; color: var(--mb-ink-faint); }

/* Projects band: visually distinct from the "Neden Marbler Art?" cards that
   follow it. Sunk ground, a two column split, and a brass-ticked checklist
   instead of card tiles. */
.mb-projects { background: var(--mb-sunk); padding-block: clamp(48px, 7vw, 96px); }
.mb-projects__inner {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .mb-projects__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.mb-projects__intro .mb-h2 { margin-bottom: 16px; }
.mb-projects__intro p { color: var(--mb-ink-soft); font-size: 16.5px; line-height: 1.65; margin: 0 0 18px; }
.mb-projects__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--mb-line);
}
@media (min-width: 640px) { .mb-projects__list { grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 40px); } }
.mb-projects__list li {
  position: relative;
  padding: 18px 0 18px 34px;
  border-bottom: 1px solid var(--mb-line);
}
.mb-projects__list li::before {
  content: "";
  position: absolute; left: 0; top: 24px;
  width: 18px; height: 10px;
  border-left: 2px solid var(--mb-brass); border-bottom: 2px solid var(--mb-brass);
  transform: rotate(-45deg);
}
.mb-projects__list h3 {
  font-family: var(--mb-display); font-weight: 400;
  font-size: 18px; line-height: 1.25; margin: 0 0 6px; color: var(--mb-ink);
}
.mb-projects__list p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--mb-ink-soft); }
.mb-projects__note { margin: 22px 0 0; font-size: 14.5px; color: var(--mb-ink-soft); }

/* Article video: same radius as images, never loads until pressed. */
.single-page .mb-video,
.mb-video { margin: clamp(24px, 3vw, 40px) 0; }
.mb-video video { display: block; width: 100%; height: auto; border-radius: var(--mb-radius-media); background: var(--mb-sunk); }
.mb-video figcaption { margin-top: 10px; font-size: 13.5px; color: var(--mb-ink-faint); text-align: center; }

/* Portrait video (the factory film is shot vertically): centred, capped by
   viewport height, its own aspect ratio, never stretched into a 16:9 box. */
.mb-video--portrait video {
  width: auto; max-width: 100%;
  height: auto; max-height: min(78vh, 820px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
}
.mb-video--portrait { text-align: center; }

/* Slab photo request links (Mermer Yelpazemiz cards and the product stone panel). 2026-09-05 */
.mb-stone__photo { margin-top: 10px; font-size: 14px; }
.mb-stone__photo a, .mb-pdp__photo a { color: var(--mb-brass); text-decoration: underline; text-underline-offset: 3px; }
.mb-stone__photo a:hover, .mb-pdp__photo a:hover { color: var(--mb-brass-lift); }
.mb-pdp__photo { margin: 10px 0 0; font-size: 13px; color: var(--mb-ink-soft); }

/* Floating WhatsApp button (2026-09-05). Bottom right, above the sticky product bar on phones. */
.mb-wa { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 12px; border-radius: 999px; background: #25D366; color: #fff; text-decoration: none; font: 500 14px/1 var(--mb-body); box-shadow: 0 6px 18px rgba(36, 30, 24, 0.22); transition: transform .15s ease, box-shadow .15s ease; }
.mb-wa:hover, .mb-wa:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(36, 30, 24, 0.28); }
.mb-wa svg { flex: none; }
@media (max-width: 767px) { .mb-wa { right: 12px; bottom: 84px; padding: 12px; } .mb-wa__label { display: none; } }
body.single-product .mb-wa { bottom: 84px; }
/* Checkout, order-pay and order-received (2.6.4): smaller, icon only, bottom LEFT, clear of the
   order summary and pay button. Below 1000px (one column checkout) it steps aside while the
   place-order button is on screen (mb-wa--away, set by the script in inc/setup.php). */
.mb-wa.mb-wa--checkout { left: 16px; right: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); padding: 9px; gap: 0; }
.mb-wa.mb-wa--checkout svg { width: 22px; height: 22px; }
@media (max-width: 767px) { .mb-wa.mb-wa--checkout { left: 12px; right: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); padding: 9px; } }
@media (max-width: 999px) { .mb-wa.mb-wa--checkout.mb-wa--away { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ==========================================================================
   29. English site (2.6.0)
   Language switch, English chrome and the fallback enquiry form. Everything
   keys on body.mb-lang-en / body.mb-en-home (inc/i18n.php), never on a
   cookie, so the per-URL page cache stays correct.
   ========================================================================== */

.mb-lang {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  margin-right: 4px;
}
.mb-lang a {
  padding: 8px 6px;
  color: var(--mb-ink-soft); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--mb-ease), border-color .2s var(--mb-ease);
}
.mb-lang a:hover { color: var(--mb-ink); }
.mb-lang a[aria-current] { color: var(--mb-ink); border-bottom-color: var(--mb-brass); }
.mb-lang__sep { color: var(--mb-line); }
.mb-lang--drawer { margin: 22px 0 0; font-size: 14px; }
.mb-lang--drawer a { padding: 10px 8px; }

/* 2026-09-22: with three languages the header switch pushed the burger off the
   edge on a phone and the row looked cut off. Below 600px only the drawer copy
   shows, where there is room for full size tap targets. */
@media (max-width: 599px) {
  .mb-lang--header { display: none; }
  .mb-lang--drawer {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 26px; padding-top: 18px;
    border-top: 1px solid var(--mb-line);
    font-size: 15px;
  }
  .mb-lang--drawer a { padding: 12px 14px; min-height: 44px; display: inline-flex; align-items: center; }
}

/* Without the account and cart icons the header actions hold only the switch
   and the burger; keep them on the right edge at every width. */
.mb-lang-en .mb-header__actions,
.mb-lang-de .mb-header__actions { justify-self: end; }

/* Footer without the account column: four columns instead of five. */
@media (min-width: 1000px) { .mb-foot--en .mb-foot__inner { grid-template-columns: 1.1fr 1fr 1fr 1.3fr; } }
.mb-foot__pay-note { max-width: 42ch; }

/* The English home is a regular page built from the front page sections. */
.mb-en-home ul.products { margin-top: 6px; }
.mb-en-home .mb-foot { margin-top: 0; }
.mb-en-home .site-content .ast-container,
.mb-en-home .entry-content { padding-inline: 0; }
.mb-en-home .entry-content > .mb-hero { margin-top: calc(-1 * clamp(20px, 4vw, 60px)); }

/* English category pages carry a [products] grid inside the prose page;
   the grid breaks out of the reading measure like figures do. */
.mb-prose > .woocommerce,
.mb-prose > .mb-catgrid { max-width: none; }
.mb-prose > .woocommerce { margin: clamp(24px, 3vw, 40px) 0; }

/* Shop landing head taken from the en/shop page content. */
.mb-shop__head--page .mb-lede { max-width: var(--mb-measure); }

/* Notices on the contact page after a fallback submission. */
.mb-notice--ok, .mb-notice--error {
  padding: 14px 18px; margin: 0 0 18px;
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius);
  background: var(--mb-raised); font-size: 15px;
}
.mb-notice--ok { border-color: var(--mb-vein); }
.mb-notice--error { border-color: #B0563E; color: #7A3524; }

/* Fallback enquiry form (English contact page). */
.mb-enquiry-form { display: grid; gap: 16px; }
.mb-enquiry-form__row { display: grid; gap: 6px; }
.mb-enquiry-form__row label,
.mb-enquiry-form__check { font-size: 14px; color: var(--mb-ink-soft); }
.mb-enquiry-form__row label small { color: var(--mb-ink-faint); }
.mb-enquiry-form input[type="text"],
.mb-enquiry-form input[type="email"],
.mb-enquiry-form input[type="tel"],
.mb-enquiry-form textarea,
.mb-enquiry-form select {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--mb-line); border-radius: var(--mb-radius);
  background: var(--mb-raised); color: var(--mb-ink);
  font: inherit; font-size: 15px;
}
.mb-enquiry-form textarea { min-height: 140px; resize: vertical; }
.mb-enquiry-form__two { display: grid; gap: 16px; }
@media (min-width: 640px) { .mb-enquiry-form__two { grid-template-columns: 1fr 1fr; } }
.mb-enquiry-form__check { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.mb-enquiry-form__check input { margin-top: 4px; flex: none; }
.mb-enquiry-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mb-enquiry-form .mb-btn { justify-self: start; }

/* ==========================================================================
   16. Footer newsletter (inc/leads.php)
   ========================================================================== */
.mb-news { border-top: 1px solid var(--mb-line); background: var(--mb-paper, #FCFAF6); position: relative; }
.mb-news__inner {
  max-width: var(--mb-maxw); margin-inline: auto; padding: 36px var(--mb-gut);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px 48px; align-items: center;
}
.mb-news__title { font-size: 22px; margin: 0 0 8px; }
.mb-news__lede { margin: 0; font-size: 15px; color: var(--mb-ink-soft); }
.mb-news__form { display: grid; gap: 12px; }
.mb-news__row { display: flex; gap: 10px; flex-wrap: wrap; }
.mb-news__row input[type="email"] {
  flex: 1 1 240px; min-width: 0; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--mb-line); background: #fff; color: var(--mb-ink);
}
.mb-news__row input[type="email"]:focus { outline: 2px solid var(--mb-vein, #8A6A3B); outline-offset: 1px; }
.mb-news__btn { flex: 0 0 auto; }
.mb-news__check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--mb-ink-soft); line-height: 1.5; }
.mb-news__check input { margin-top: 3px; flex: 0 0 auto; }
.mb-news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mb-news__msg { margin: 0; font-size: 14px; padding: 10px 12px; border: 1px solid var(--mb-line); }
.mb-news__msg--ok { border-color: var(--mb-vein, #8A6A3B); }
.mb-news__msg--err { border-color: #B0563E; color: #7A3524; }
@media (max-width: 760px) { .mb-news__inner { grid-template-columns: 1fr; gap: 18px; padding: 28px var(--mb-gut); } }