/*
Theme Name: Gothelf A. Watches
Theme URI: https://gotawatch.com
Description: Super-light custom theme for Gothelf A. Watches — the redesign, no builder. One CSS file, one JS file. Watches CPT (/product/), brand/model taxonomy (/product-category/), posts at root.
Author: DreamZone
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: gotawatch
*/
/* ===== Gothelf A. Watches — clean redesign (AVW reference) ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Assistant', -apple-system, sans-serif;
  color: #1a1a1a; background: #fff;
  font-size: 16px; line-height: 1.7;
  direction: rtl;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* ---------- TITLES ONLY: display serif. Body/UI stays Assistant ---------- */
h1, h2, h3, .serif, .brand__title, .tile__label {
  font-family: 'Assistant', sans-serif;            /* Hebrew titles stay Assistant */
  font-weight: 600; line-height: 1.22;
}
body.en h1, body.en h2, body.en h3, body.en .serif,
body.en .brand__title, body.en .tile__label {
  font-family: 'Cormorant Garamond', Georgia, serif;    /* English titles */
  /* Cormorant has a small cap-height and a light stroke, so it carries more weight
     than Playfair did. Do NOT set font-size here: it would override each title's
     own clamp() and collapse the headings. */
  font-weight: 600;
}
/* keep these in Assistant — they are UI/product text, not page titles */
.card__title, .sres__t, .hdr__nav a, .blogcat, .btn, .pager__pg,
.modal__form input, .modal__form textarea, .news__form input,
.tile__eyebrow, .section__more, .card__price, .bpost__cat {
  font-family: 'Assistant', sans-serif !important;
}

/* ---------- header ---------- */
.hdr {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 48px; height: 88px; background: #fff; border-bottom: 1px solid #ececec;
  position: sticky; top: 0; z-index: 500;
}
.hdr__nav { display: flex; gap: 28px; font-size: 15px; letter-spacing: .2px; }
.hdr__nav--util { justify-content: flex-end; align-items: center; }
/* the phone must never wrap: a two-line phone stretches its flex siblings and
   pushes About / Contact off the header's centre line (caught at 1024px) */
.hdr__phone { white-space: nowrap; }
.hdr__nav a:hover { opacity: .6; }
.hdr__logo img { height: 44px; width: auto; }
.hdr__phone { font-weight: 600; }
.burger { display: none; }
#mnav { display: none; }

/* ---------- header icons + flag ---------- */
.hdr__icons { display: flex; gap: 15px; align-items: center; margin-inline-start: 6px; padding-inline-start: 18px; border-inline-start: 1px solid #ececec; }
.hdr__icons a { display: inline-flex; align-items: center; color: #1a1a1a; }
.hdr__icons a:hover { opacity: .6; }
.hdr__flag svg { display: block; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .15s; }
.hdr__flag:hover svg { transform: scale(1.12); }
/* mobile-only copy of the flag, sits beside the burger (shown ≤860px) */
.hdr__flag--mob { display: none; }
.hdr__icons a { opacity: .85; }
.hdr__icons a:hover { opacity: 1; }

/* ---------- dropdown ---------- */
.has-dd { position: relative; }
.dd-caret { opacity: .6; vertical-align: -1px; }
.dd {
  visibility: hidden; opacity: 0; transition: opacity .15s;
  position: absolute; top: 100%; right: -18px; min-width: 218px;
  background: #fff; border: 1px solid #eee; box-shadow: 0 14px 34px rgba(0,0,0,.1);
  padding: 8px 0; z-index: 600;
}
.en .dd { right: auto; left: -18px; }
.has-dd:hover .dd, .has-dd:focus-within .dd { visibility: visible; opacity: 1; }
.has-dd::after { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 14px; }
.dd a { display: block; padding: 10px 20px; font-size: 14.5px; }
.dd a:hover { background: #f7f6f3; opacity: 1; }

/* ---------- mobile menu extras ---------- */
.mnav__sub a { padding-inline-start: 38px !important; font-size: 15px !important; color: #555 !important; }

/* ---------- LTR (English) adjustments ---------- */
body.en { direction: ltr; }
.en .hero__text--ltr { right: auto; left: 48px; }
.hero__shade--ltr { background: rgba(0,0,0,.10) !important; }
@media (max-width: 860px) {
  .en .hero__text--ltr { left: 22px; right: 22px; }
}

/* ---------- hero ---------- */
.hero { position: relative; height: 82vh; min-height: 460px; overflow: hidden; background: #23262b; }
.hero--boxed { margin: 22px 48px 0; height: 80vh; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero__shade { position: absolute; inset: 0; background: rgba(0,0,0,.10); }
.hero__text { position: absolute; right: 48px; bottom: 48px; color: #fff; max-width: 640px; }
.hero__text h1 { font-size: clamp(38px, 5vw, 64px); color: #fff; margin-bottom: 18px; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.hero__link { text-shadow: 0 2px 12px rgba(0,0,0,.5); display: inline-block; color: #fff; font-size: 15px; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,.7); padding-bottom: 3px; }
.hero__link:hover { border-color: #fff; }

/* ---------- tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 48px 0; }
.tile { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; display: block; }
.tile > img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tile:hover > img { transform: scale(1.04); }
/* site font */ .tile__label { font-weight: 600;
  position: absolute; inset: auto 0 0 0; padding: 60px 24px 20px;
  color: #fff; font-size: 22px; background: linear-gradient(0deg, rgba(0,0,0,.6), transparent);
}
.tile--text { background: #4d5866; color: #fff; display: flex; padding: 56px 48px; }
.tile--text__inner { display: flex; flex-direction: column; height: 100%; width: 100%; }
.tile--text h3 { color: #fff; font-size: clamp(28px, 3.0vw, 58px); line-height: 1.22; font-weight: 600; margin: 16px 0 0; }
.tile--text p { color: #d6dae1; font-size: clamp(15px, 1.08vw, 20px); line-height: 1.85; margin-bottom: 30px; }
.tile__eyebrow { font-size: 12px; letter-spacing: 2px; color: #c3b591; text-transform: uppercase; }
.tile__rule { border: 0; border-top: 1px solid rgba(255,255,255,.3); width: 76px; margin: 26px 0 24px; margin-inline-start: 0; }

/* tall reference band */
.tiles--tall .tile { aspect-ratio: 5 / 7; }
.tile img.pos-top { object-position: center top; }
.tiles--tall .tile__label { font-size: clamp(26px, 2.81vw, 54px); line-height: 1.1; padding: 140px 26px 30px; }
.tiles--tall .tile__label small { display: block; font-size: 12px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; margin-top: 18px; opacity: .95; }
.btn.btn--gold { background: #a89663; color: #fff; border-color: #a89663; letter-spacing: 1.5px; font-size: 13.5px; padding: 17px 30px; }
.tile--text__cta { margin-top: auto; width: 100%; text-align: center; }
.btn.btn--gold:hover { background: #948253; border-color: #948253; color: #fff; }

/* ---------- sections & grid ---------- */
.section { padding: 72px 48px; }
.section--muted { background: #f7f6f3; }
.section__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 34px; }
.section__head h2 { font-size: 34px; }
.section__more { font-size: 14px; color: #6b6b6b; letter-spacing: .5px; }
.section__more:hover { color: #1a1a1a; }
.grid { display: grid; gap: 22px; }
.grid > * { min-width: 0; }
.review blockquote, .card__title { overflow-wrap: anywhere; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- product card (AVW style) ---------- */
.card { display: block; }
.card__imgwrap { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f4f3f1; }
.card__imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card__imgwrap img { transform: scale(1.04); }
.card__badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: #a05252; color: #fff; font-size: 12px; letter-spacing: .5px; padding: 5px 12px;
}
.card__title { margin-top: 14px; font-size: 15.5px; font-weight: 600; }
.card__price { color: #8a8a8a; font-size: 14.5px; }
.card__price del { margin-inline-end: 6px; opacity: .7; }

/* ---------- quote banner ---------- */
.quote { position: relative; height: 46vh; min-height: 300px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote__shade { position: absolute; inset: 0; background: rgba(10, 10, 14, .45); }
.quote blockquote { position: relative; color: #fff; font-size: clamp(24px, 3.2vw, 40px); font-style: italic; text-align: center; padding: 0 24px; }

/* ---------- split (trade-in) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.split__img { height: 100%; min-height: 420px; }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split__body { padding: 64px 72px; }
.split__body h2 { font-size: 36px; margin: 8px 0 16px; }
.split__body p { color: #555; max-width: 46ch; margin-bottom: 26px; }

/* ---------- about ---------- */
.about { text-align: center; max-width: 760px; margin: 0 auto; padding: 76px 24px 66px; }
.about h2 { font-size: 32px; margin: 8px 0 14px; }
.about p { color: #555; margin-bottom: 26px; }

/* ---------- visit (reversed split) ---------- */
.split--rev .split__img { order: 2; }
.split--rev .split__body { order: 1; text-align: start; }

/* ---------- brand logos ---------- */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 26px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 64px 32px; }
.logos img { width: 100%; max-width: 150px; margin: 0 auto; filter: grayscale(1); opacity: .75; transition: all .25s; }
.logos img:hover { filter: none; opacity: 1; }

/* ---------- blog ---------- */
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.bpost__imgwrap { aspect-ratio: 16 / 9; overflow: hidden; background: #f4f3f1; }
.bpost__imgwrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s; }
.bpost:hover .bpost__imgwrap img { transform: scale(1.04); }
.bpost h3 { font-size: 18px; margin-top: 16px; font-weight: 600; }

/* ---------- buttons ---------- */
.btn { display: inline-block; padding: 14px 36px; font-size: 15px; letter-spacing: .5px; border: 1px solid #1a1a1a; background: transparent; cursor: pointer; transition: all .2s; font-family: inherit; }
.btn--dark { background: #1a1a1a; color: #fff; }
.btn--dark:hover { background: transparent; color: #1a1a1a; }
.btn--light { background: #fff; color: #14161a; border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; }

/* ---------- reviews carousel ---------- */
.rcar { position: relative; }
.rcar__track {
  display: flex; gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: 4px 2px 10px;
}
.rcar__track::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 305px; scroll-snap-align: start;
  background: #fff; border: 1px solid #ececec; padding: 26px 24px;
  display: flex; flex-direction: column;
}
.review__stars { color: #c9a24b; letter-spacing: 3px; margin-bottom: 12px; }
.review blockquote { font-size: 14.5px; color: #444; flex: 1; }
.review figcaption { margin-top: 14px; font-weight: 700; font-size: 14px; }
.rcar__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ddd;
  background: #fff; cursor: pointer; font-size: 16px; color: #1a1a1a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.08); transition: all .2s;
}
.rcar__btn:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.rcar__btn--prev { right: -14px; }
.rcar__btn--next { left: -14px; }
body.en .rcar__btn--prev { right: auto; left: -14px; }
body.en .rcar__btn--next { left: auto; right: -14px; }
@media (max-width: 860px) {
  .review { flex-basis: 82vw; }
  .rcar__btn { display: none; }
}

/* ---------- newsletter ---------- */
.news { background: #14161a; color: #fff; text-align: center; padding: 72px 24px; }
.news h2 { color: #fff; font-size: 32px; margin-bottom: 8px; }
.news p { color: #b9b4a8; margin-bottom: 26px; }
.news__form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.news__form input[type=email] { width: min(420px, 88vw); padding: 14px 16px; border: 1px solid #3a3d44; background: #1e2126; color: #fff; font-size: 15px; font-family: inherit; }
.news__form input::placeholder { color: #8b8fa0; }

/* ---------- footer ---------- */
.ftr { background: #101215; color: #cfcbc2; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 48px; padding: 64px 48px 40px; max-width: 1280px; margin: 0 auto; }
.ftr__logo { color: #fff; font-size: 24px; letter-spacing: 1px; }
.ftr__logo-he { color: #b7a98c; letter-spacing: 6px; font-size: 14px; margin: 2px 0 14px; }
.ftr h4 { color: #fff; font-size: 15px; margin-bottom: 14px; letter-spacing: 1px; }
.ftr a { display: block; padding: 3px 0; font-size: 14.5px; }
.ftr a:hover { color: #fff; }
.ftr p { font-size: 14.5px; }
.ftr__social { display: flex; gap: 16px; margin-top: 16px; }
.ftr__social a { color: #cfcbc2; }
.ftr__social a:hover { color: #fff; }
.ftr__bottom { border-top: 1px solid #23262b; text-align: center; padding: 18px; font-size: 13px; color: #8a877f; }

/* ---------- brand page ---------- */
/* full-bleed like the reference: content aligns exactly with the header nav gutters */
.wrap { max-width: none; margin: 0 auto; padding: 0 48px; }
.brand__head { display: flex; justify-content: space-between; align-items: center; padding-top: 44px; }
.brand__title { font-size: clamp(44px, 6vw, 76px); }
.brand__sort { font-size: 14px; color: #6b6b6b; display: flex; gap: 10px; align-items: center; }
.brand__sort select { border: 1px solid #ddd; padding: 10px 14px; font-family: inherit; background: #fff; color: #1a1a1a; }
.brand__intro { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; padding: 26px 0 44px; border-bottom: 1px solid #f0efec; margin-bottom: 40px; }
.brand__intro p { color: #444; max-width: 62ch; }
.brand__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-content: start; }
.brand__facts dt { font-size: 12px; letter-spacing: 1.5px; color: #9a958a; margin-bottom: 4px; }
.brand__facts dd { font-size: 15.5px; }
.grid--catalog { row-gap: 44px; }

/* ---------- pagination ---------- */
.pager { display: flex; gap: 8px; justify-content: center; padding: 56px 0 72px; }
.pager__pg { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; font-size: 15px; padding: 0 14px; }
.pager__pg:hover { border-color: #1a1a1a; }
.pager__pg.current { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* ---------- product page ---------- */
.crumbs { padding: 22px 0 8px; font-size: 13.5px; color: #8a8a8a; }
.crumbs a:hover { color: #1a1a1a; }
.product__layout { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; padding-bottom: 30px; }
.product__gallery { display: grid; gap: 14px; }
.product__gallery img { width: 100%; }
.product__summary { position: sticky; top: 112px; }
.product__summary h1 { font-size: 34px; margin-bottom: 8px; }
.product__price { font-size: 22px; color: #1a1a1a; font-weight: 600; margin-bottom: 18px; }
.product__desc { color: #4a4a4a; margin-bottom: 24px; }
.product__attrs { border-top: 1px solid #eee; margin-bottom: 28px; }
.product__attrs > div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #eee; font-size: 14.5px; }
.product__attrs dt { color: #8a8a8a; }
.product__cta { width: 100%; }
.product__contact { display: block; text-align: center; margin-top: 14px; font-size: 14px; color: #6b6b6b; }
.product__contact:hover { color: #1a1a1a; }

/* ================= responsive ================= */
@media (max-width: 1100px) {
  .hdr { padding: 0 24px; }
  .tiles, .section { padding-left: 24px; padding-right: 24px; }
  .wrap { padding: 0 24px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split__body { padding: 44px 36px; }
}
@media (max-width: 860px) {
  .hdr { grid-template-columns: 42px 1fr 42px; height: 72px; padding: 0 16px; }
  .hdr__nav { display: none; }
  .hdr__logo { justify-self: center; grid-column: 2; }
  .hdr__logo img { height: 36px; }
  .burger { display: block; grid-column: 1; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; padding: 10px 8px; }
  .burger span { display: block; width: 24px; height: 2px; background: #1a1a1a; margin: 5px 0; transition: transform .2s, opacity .2s; }
  body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* panel visibility is handled by the animated rules further down */
  #mnav a { display: block; padding: 15px 22px; border-bottom: 1px solid #f2f2f2; font-size: 16.5px; }
  #mnav a:active { background: #f7f6f3; }

  .hero { height: 64vh; }
  .hero--boxed { margin: 12px 14px 0; height: 58vh; }
  .hero__text { right: 22px; bottom: 28px; left: 22px; }
  .tiles { grid-template-columns: 1fr; padding-top: 16px; }
  .tile { aspect-ratio: 4 / 3; }
  .tiles--tall .tile { aspect-ratio: 4 / 4.6; }
  .tiles--tall .tile--text { aspect-ratio: auto; }
  .tiles--tall .tile__label { padding-top: 90px; font-size: 30px; }
  .tile--text h3 { font-size: 36px; }
  .tile--text p { font-size: 23px; }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  .review blockquote { min-height: 0; }
  .section { padding-top: 48px; padding-bottom: 48px; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .split { grid-template-columns: 1fr; }
  .split__img { min-height: 280px; }
  .split--rev .split__img { order: 1; }
  .split--rev .split__body { order: 2; }
  .logos { grid-template-columns: repeat(3, 1fr); padding: 40px 24px; }
  .grid--2 { grid-template-columns: 1fr; }
  .about { padding: 52px 22px 44px; }
  .brand__head { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 28px; }
  .brand__intro { grid-template-columns: 1fr; gap: 24px; }
  .product__layout { grid-template-columns: 1fr; gap: 28px; }
  .product__summary { position: static; }
  .ftr__grid { grid-template-columns: 1fr; gap: 32px; padding: 44px 22px 32px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- WhatsApp (official green mark) ---------- */
.hdr__wa { opacity: 1 !important; }
.hdr__wa svg { width: 22px; height: 22px; transition: transform .15s; }
.hdr__wa:hover svg { transform: scale(1.1); }
.ftr__social a[aria-label="WhatsApp"] svg { width: 22px; height: 22px; }

/* ---------- enquiry modal ---------- */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__overlay { position: absolute; inset: 0; background: rgba(16,18,21,.55); backdrop-filter: blur(3px); animation: mfade .18s ease-out; }
.modal__card {
  position: relative; width: min(520px, 100%); max-height: 90vh; overflow: auto;
  background: #fff; padding: 40px 40px 32px; box-shadow: 0 30px 70px rgba(0,0,0,.3);
  animation: mrise .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes mfade { from { opacity: 0 } to { opacity: 1 } }
@keyframes mrise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
.modal__x {
  position: absolute; top: 12px; inset-inline-end: 14px; width: 38px; height: 38px;
  border: 0; background: none; font-size: 28px; line-height: 1; color: #8a8a8a; cursor: pointer;
}
.modal__x:hover { color: #1a1a1a; }
.modal__card h2 { font-size: 27px; margin: 10px 0 8px; }
.modal__sub { color: #666; font-size: 15px; margin-bottom: 22px; }
.modal__form { display: grid; gap: 12px; }
.modal__form input, .modal__form textarea {
  width: 100%; padding: 13px 15px; border: 1px solid #ddd; background: #fff;
  font-family: inherit; font-size: 15px; color: #1a1a1a; border-radius: 0;
}
.modal__form input:focus, .modal__form textarea:focus { outline: none; border-color: #a89663; }
.modal__form textarea { resize: vertical; }
.modal__form .btn { width: 100%; margin-top: 4px; }
.modal__wa {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid #eee;
  font-size: 14.5px; color: #444;
}
.modal__wa:hover { color: #25D366; }
.modal__ok { text-align: center; padding: 18px 0 6px; color: #2b7a4b; font-size: 16px; }
body.modal-open { overflow: hidden; }
@media (max-width: 640px) { .modal__card { padding: 34px 22px 26px; } .modal__card h2 { font-size: 23px; } }

/* ---------- search overlay ---------- */
.search[hidden] { display: none; }
.search { position: fixed; inset: 0; z-index: 9500; display: flex; justify-content: center; padding: 90px 20px 20px; }
.search__panel {
  position: relative; width: min(720px, 100%); max-height: 76vh; display: flex; flex-direction: column;
  background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.28); animation: mrise .2s cubic-bezier(.2,.8,.3,1);
}
.search__bar { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #eee; }
.search__bar svg { flex: 0 0 auto; color: #8a8a8a; }
.search__bar input {
  flex: 1; border: 0; outline: none; font-family: inherit; font-size: 18px; color: #1a1a1a;
  background: none; padding: 4px 0;
}
.search__bar .modal__x { position: static; width: 34px; height: 34px; font-size: 26px; }
.search__results { overflow: auto; padding: 8px 0; }
.search__msg { padding: 26px 22px; color: #8a8a8a; font-size: 15px; text-align: center; }
.sres { display: flex; align-items: center; gap: 16px; padding: 12px 20px; }
.sres:hover { background: #f7f6f3; }
.sres img { width: 62px; height: 62px; object-fit: cover; background: #f2f0ee; flex: 0 0 auto; }
.sres__t { font-size: 15.5px; font-weight: 600; }
.sres__p { font-size: 14px; color: #8a8a8a; }
.search__all {
  display: block; text-align: center; padding: 15px; border-top: 1px solid #eee;
  font-size: 14.5px; color: #6b6b6b; letter-spacing: .3px;
}
.search__all:hover { color: #1a1a1a; background: #faf9f7; }
@media (max-width: 640px) {
  .search { padding: 70px 12px 12px; }
  .search__bar input { font-size: 16px; }
}

/* ---------- blog ---------- */
.blog__sub { color: #666; max-width: 62ch; margin: -8px 0 34px; }
.bloglayout { display: grid; grid-template-columns: 230px 1fr; gap: 48px; align-items: start; padding-bottom: 30px; }
.blogside { position: sticky; top: 112px; }
.blogside h4 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #9a958a; margin-bottom: 14px; }
.blogcat {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; border-bottom: 1px solid #f0efec; padding: 11px 2px;
  font-family: inherit; font-size: 15px; color: #444; cursor: pointer; text-align: start;
}
.blogcat span { font-size: 12.5px; color: #a8a49b; }
.blogcat:hover { color: #1a1a1a; }
.blogcat.is-on { color: #1a1a1a; font-weight: 700; border-bottom-color: #a89663; }
.blogmain { min-width: 0; }
.blog .bpost { display: block; }
.bpost__cat { display: inline-block; margin-top: 12px; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #a89663; }
.bpost h3 { font-size: 18px; margin-top: 6px; font-weight: 600; line-height: 1.35; }
.bpost__ex { font-size: 14.5px; color: #6b6b6b; margin-top: 8px; line-height: 1.75; }
.blog__none { padding: 40px 0; color: #8a8a8a; text-align: center; }
.blogwrap { padding-bottom: 40px; }

/* ---------- single post ---------- */
.post__body { max-width: 760px; margin: 0 auto; padding: 10px 0 40px; }
.post__body h1 { font-size: clamp(28px, 3.4vw, 44px); margin: 10px 0 10px; }
.post__date { display: block; color: #9a958a; font-size: 13.5px; letter-spacing: 1px; margin-bottom: 26px; }
.post__hero { width: 100%; margin-bottom: 30px; }
.post__body p { margin-bottom: 18px; line-height: 1.95; color: #333; }
.post__back { margin-top: 22px; }

@media (max-width: 900px) {
  .bloglayout { grid-template-columns: 1fr; gap: 26px; }
  /* content (posts / watches / article) stacks first, the category menu after it */
  .blogside { position: static; order: 2; }
  .blogside h4 { margin-bottom: 8px; }
  .blogcat { padding: 10px 2px; }
}

.blogmore { display: flex; justify-content: center; padding: 40px 0 10px; }
.blogmore[hidden] { display: none; }

/* ---------- article body: inline links & structure ---------- */
.post__body a:not(.btn) {
  color: #1a1a1a; border-bottom: 1px solid #a89663; padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.post__body a:not(.btn):hover { color: #a89663; border-bottom-color: #1a1a1a; }
.post__h { font-size: clamp(21px, 2.1vw, 27px); margin: 34px 0 12px; font-weight: 600; }
.post__list { margin: 0 0 20px; padding-inline-start: 22px; }
.post__list li { margin-bottom: 9px; line-height: 1.9; color: #333; }
.post__body strong, .post__body b { font-weight: 700; }

/* article page keeps the category sidebar */
.post__layout { padding-top: 6px; }
/* the sidebar + article are centered as one unit: the outer gap beside the
   menu equals the outer gap beside the article (Dan, 2026-08-31) */
@media (min-width: 901px) {
  .post__layout { grid-template-columns: 230px minmax(auto, 760px); justify-content: center; }
  /* breadcrumbs start on the same edge as the centered menu+article block
     (230px menu + 48px gap + 760px article) */
  .post .crumbs { max-width: 1038px; margin-inline: auto; }
}
/* no top padding + block eyebrow: the article's category label tops-aligns
   with the sidebar's "categories" heading (an inline span sinks inside the
   body's taller line box) */
.post__layout .post__body { max-width: 760px; margin: 0 auto; padding-top: 0; }
.post__layout .post__body > .tile__eyebrow { display: block; }
a.blogcat { text-decoration: none; }
@media (max-width: 900px) { .post__layout .blogside { margin-bottom: 6px; } }

/* ---------- sell / trade-in ---------- */
.sellwrap { padding-bottom: 50px; }
.sell__layout { align-items: start; }
.sell__intro h2 { font-size: clamp(24px, 2.3vw, 32px); margin-bottom: 14px; }
.sell__intro p { color: #444; line-height: 1.95; max-width: 66ch; margin-bottom: 16px; }
.sell__wa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #444; }
.sell__wa a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #1a1a1a; border-bottom: 1px solid #25D366; padding-bottom: 2px; }
.sell__wa a:hover { color: #25D366; }
.sell__wa svg { width: 20px; height: 20px; }

.sell__steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0 46px; padding: 0; }
.sell__steps li { border-top: 1px solid #e9e7e2; padding-top: 18px; }
.sell__num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #a89663; color: #fff; font-size: 14px; font-weight: 700; }
.sell__steps h3 { font-size: 18px; margin: 12px 0 6px; font-weight: 600; }
.sell__steps p { font-size: 14.5px; color: #666; line-height: 1.8; }

.sell__form-wrap { background: #f7f6f3; padding: 36px 34px; margin-bottom: 34px; }
.sell__form-wrap h2 { font-size: 26px; margin-bottom: 6px; }
.sell__form { max-width: 560px; }
.sell__form input[type=text], .sell__form input[type=tel], .sell__form input[type=email], .sell__form textarea { background: #fff; }
.sell__file { display: block; background: #fff; border: 1px dashed #cfcabd; padding: 16px 18px; }
.sell__file-label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.sell__file input[type=file] { display: block; width: 100%; font-family: inherit; font-size: 14px; color: #444; }
.sell__file input[type=file]::file-selector-button { font-family: inherit; font-size: 14px; padding: 8px 14px; margin-inline-end: 12px; border: 1px solid #1a1a1a; background: #fff; color: #1a1a1a; cursor: pointer; }
.sell__file input[type=file]::file-selector-button:hover { background: #1a1a1a; color: #fff; }
.sell__file-hint { display: block; margin-top: 8px; font-size: 12.5px; color: #8a8a8a; }

.sell__note { border-top: 1px solid #eee; padding-top: 22px; }
.sell__note h3 { font-size: 19px; margin-bottom: 8px; }
.sell__note p { color: #666; font-size: 15px; line-height: 1.9; max-width: 68ch; }

@media (max-width: 900px) {
  .sell__steps { grid-template-columns: 1fr; gap: 18px; margin: 28px 0 34px; }
  .sell__form-wrap { padding: 26px 20px; }
}

/* title-face tuning */
body.en .hero__text h1 { letter-spacing: 0; }
.tile--text h3 { font-weight: 500; }
.post__body h1, .post__h { font-weight: 500; }

/* ---------- about page (recovered from the office session) ---------- */
.team .card__imgwrap { aspect-ratio: 4 / 5; }
.team .card__imgwrap img { object-position: center 18%; }
.team .card__price { margin-top: 2px; }
.about__legal { max-width: 860px; margin: 0 auto; text-align: center; font-size: 13.5px; color: #8a877f; line-height: 1.8; }
.card__badge--sold { background: #3a3f47; }

/* the grey text tile keeps the office type sizes; below 1500px it sizes to its
   content instead of the 5/7 ratio, so the paragraph is never clipped */
@media (min-width: 861px) {
  .tiles--tall .tile { aspect-ratio: auto; }
  .tile--text { padding: clamp(32px, 3.4vw, 56px) clamp(26px, 3.2vw, 48px); }
}

/* ---------- sell page: two pre-filled WhatsApp links ---------- */
.sell__walead { color: #444; margin-bottom: 14px; }
.sell__was { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-bottom: 6px; }
.sell__walabel { display: block; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
                 color: #8a877f; margin-bottom: 7px; }
.sell__wacard a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #1a1a1a;
                  border-bottom: 1px solid #25D366; padding-bottom: 2px; }
.sell__wacard a:hover { color: #25D366; }
.sell__wacard svg { width: 20px; height: 20px; }
@media (max-width: 520px) { .sell__was { gap: 18px 26px; } }

/* ---------- catalogue lazy load ---------- */
.grid--catalog .card.is-lazyhidden { display: none; }
.lazy__end { height: 1px; }
.lazy__status { text-align: center; color: #8a877f; font-size: 13.5px; letter-spacing: .6px; margin: 26px 0 4px; }

/* wide-catalogue: above 1500px the brand pages go 4-up like the reference;
   the shop page keeps 3-up because its sidebar eats the width */
/* brand / collection / shop grids stay 3-up at every width (client preference) */

/* ================= DESKTOP MEGA MENU ================= */
.hdr__logo--mob { display: none; }
.hdr__mob { display: none; }
.caret-side { opacity: .45; margin-inline-start: auto; flex: none; }
[dir="rtl"] .caret-side { transform: scaleX(-1); }

/* full-screen panel, pinned under the sticky header */
/* the trigger must own the full header height, otherwise the strip between the
   link text and the panel is a dead zone and the menu closes as the pointer crosses it */
.hdr__nav--main { align-self: stretch; align-items: stretch; }
/* the nav is stretched so the dropdown trigger can own the full header height —
   every direct child must therefore centre its own text, or it rides the top edge */
.hdr__nav--main > a, .has-dd, .has-dd > a { display: flex; align-items: center; }
.has-dd::after { content: ""; position: absolute; top: 100%; inset-inline: -30px; height: 18px; pointer-events: none; }

.mega {
  position: fixed; top: 88px; inset-inline: 0; width: 100%;
  background: #fff; border-top: 1px solid #ececec; box-shadow: 0 24px 48px rgba(0,0,0,.13);
  visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s;
  z-index: 600;
}
.has-dd.is-open .mega, .has-dd:focus-within .mega { visibility: visible; opacity: 1; }
/* keyboard users still get :focus-within; pointer users are handled in app.js with a
   short close delay, so crossing the gap between trigger and panel never closes it */
.mega__inner { display: flex; align-items: stretch; padding: 26px 48px 30px; gap: 0; min-height: 300px; }
.mega__col { display: flex; flex-direction: column; }
.mega__hd { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
            color: #a9a396; margin-bottom: 14px; }

.mega__col--brands { width: 330px; flex: none; padding-inline-end: 26px; border-inline-end: 1px solid #f0efec; }
.mega__brands { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.mega__brand { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 14px; color: #333; }
.mega__brand.is-on, .mega__brand:hover { background: #f7f6f3; color: #1a1a1a; }
.mega__all { margin-top: auto; padding-top: 16px; font-size: 13px; letter-spacing: .6px; color: #a89663; }

/* the model column opens right beside the brand, so the pointer can travel into it */
.mega__col--models { width: 0; overflow: hidden; transition: width .22s ease, padding .22s ease; }
.mega__col--models.is-showing { width: 340px; padding-inline: 26px; border-inline-end: 1px solid #f0efec; }
.mega__models { display: none; }
.mega__models.is-on { display: block; }
.mega__modelgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.mega__model { display: flex; align-items: baseline; gap: 6px; padding: 7px 10px; font-size: 13.5px; color: #444; white-space: nowrap; }
.mega__model span { font-size: 11px; color: #b3ada0; }
.mega__model.is-on, .mega__model:hover { background: #f7f6f3; color: #1a1a1a; }

.mega__col--watches { flex: 1; min-width: 0; padding-inline-start: 30px; }
.mega__wset { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 920px; }
.mega__wset.is-on { display: grid; }
.megaw { display: block; min-width: 0; }
/* fixed height, not an aspect ratio: the watch column narrows when the models column
   opens, and a ratio-sized image would change the panel's height with it */
.megaw__img { display: block; height: 250px; overflow: hidden; background: #f4f3f0; }
.megaw__img img { width: 100%; height: 100%; object-fit: cover; }
.megaw__t { display: -webkit-box; font-size: 12.5px; line-height: 1.35; margin-top: 9px; color: #1a1a1a;
            -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
            /* always reserve two lines so a one-line title cannot shorten the panel */
            min-height: 2.7em; }
.megaw__p { display: block; font-size: 12.5px; color: #a89663; margin-top: 3px; }
.megaw:hover .megaw__t { color: #a89663; }
@media (max-width: 1100px) { .mega__col--watches { display: none; } }

/* ================= MOBILE MENU (multi-level) ================= */
@media (max-width: 860px) {
  /* burger | logo | icons — icons sit beside the logo at the row's end */
  .hdr { grid-template-columns: 42px 1fr auto; }
  .hdr__logo--full { display: none; }
  .hdr__logo--mob { display: block; height: 30px; width: auto; }
  .hdr { position: sticky; }
  .hdr__logo { position: absolute; left: 50%; transform: translateX(-50%); grid-column: auto; padding: 0; }
  .hdr__mob { display: inline-flex; align-items: center; gap: 14px; grid-column: 3; justify-self: end; }
  .hdr__mob a { display: inline-flex; align-items: center; color: #1a1a1a; }
  .hdr__mob svg { width: 21px; height: 21px; }

  /* the panel itself: swipe-scrollable, never taller than the screen */
  #mnav {
    display: block; position: fixed; top: 72px; left: 0; right: 0; background: #fff; z-index: 400;
    max-height: 0; opacity: 0; transform: translateY(-10px); overflow: hidden; pointer-events: none;
    box-shadow: 0 16px 30px rgba(0,0,0,.14);
    transition: max-height .36s cubic-bezier(.4,0,.2,1), opacity .26s ease, transform .32s cubic-bezier(.4,0,.2,1);
  }
  body.menu-open #mnav {
    max-height: calc(100vh - 72px); opacity: 1; transform: translateY(0); pointer-events: auto;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  }

  /* every row looks identical — one flat full-width line, no boxes, no dividers */
  #mnav > a, .mrow > a, .msub a { display: block; padding: 15px 22px; font-size: 16.5px; }
  #mnav > a, .mrow, .msub > a { border-bottom: 1px solid #f2f2f2; }
  #mnav a:active { background: #f7f6f3; }

  /* the arrow floats at the end of its own row — no cell, no divider */
  .mrow { position: relative; }
  .mrow > a { border-bottom: 0; padding-inline-end: 58px; }
  .mrow__tog {
    position: absolute; inset-inline-end: 4px; top: 0; bottom: 0; width: 52px;
    background: none; border: 0; padding: 0; cursor: pointer; color: #1a1a1a;
    display: flex; align-items: center; justify-content: center;
  }
  .mrow__tog .caret-side {
    width: 19px; height: 19px; stroke-width: 2.2; opacity: .85; margin: 0;
    transition: transform .28s ease;
  }
  .mrow__tog[aria-expanded="true"] .caret-side { transform: rotate(90deg); }

  /* sub-levels slide open downwards */
  .msub { max-height: 0; overflow: hidden; background: #fbfaf8; transition: max-height .3s ease; }
  #mnav .msub > a, #mnav .msub .mrow > a { padding-inline-start: 40px; font-size: 15px; color: #555; }
  .msub .mrow { border-bottom: 1px solid #f2f2f2; }
  .msub--deep { background: #f5f3ef; }
  #mnav .msub--deep > a { padding-inline-start: 62px; font-size: 14px; color: #666; }

  /* language flag: icon-only beside the burger (moved out of the drawer) */
  .hdr__flag--mob { display: inline-flex; align-items: center; grid-column: 2; justify-self: start; margin-inline-start: 4px; }
  .hdr__flag--mob svg { width: 24px; height: 24px; }
}

/* Below ~1200px the three header groups (nav | logo | util) start to collide.
   Drop the phone first — it is repeated in the footer and in the mobile bar —
   then tighten the gaps before anything is allowed to overlap the logo. */
@media (min-width: 861px) and (max-width: 1200px) {
  .hdr { padding: 0 26px; }
  .hdr__nav { gap: 18px; font-size: 14px; }
  .hdr__phone { display: none; }
  .hdr__icons { gap: 12px; padding-inline-start: 12px; margin-inline-start: 2px; }
  .hdr__logo img { height: 40px; width: auto; }
}

/* ---------- floating side menu (shop / brand / category pages) ----------
   Same structure and look as the mobile burger menu. Desktop: off-canvas
   drawer opened by the toggle button. Mobile: rendered statically at the
   bottom of the page, after all the watches. */
.sidemenu-toggle { display: inline-flex; align-items: center; gap: 9px; background: none; border: 1px solid #e2dfd8; padding: 9px 16px; font-size: 14px; cursor: pointer; margin: 0 0 16px; color: #1a1a1a; letter-spacing: .3px; }
.sidemenu-toggle:hover { border-color: #a89663; color: #a89663; }
.sidemenu { background: #fff; }
.sidemenu__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid #eee; font-weight: 600; letter-spacing: 1px; }
.sidemenu__close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; color: #1a1a1a; }
.sidemenu__nav > a, .sidemenu__nav .mrow > a, .sidemenu__nav .msub a { display: block; padding: 15px 22px; font-size: 16.5px; color: #1a1a1a; text-decoration: none; }
.sidemenu__nav > a, .sidemenu__nav .mrow, .sidemenu__nav .msub > a { border-bottom: 1px solid #f2f2f2; }
.sidemenu__nav a:hover { background: #f7f6f3; }
.sidemenu__nav .mrow { position: relative; }
.sidemenu__nav .mrow > a { border-bottom: 0; padding-inline-end: 58px; }
.sidemenu__nav .mrow__tog { position: absolute; inset-inline-end: 4px; top: 0; bottom: 0; width: 52px; background: none; border: 0; padding: 0; cursor: pointer; color: #1a1a1a; display: flex; align-items: center; justify-content: center; }
.sidemenu__nav .mrow__tog .caret-side { width: 19px; height: 19px; stroke-width: 2.2; opacity: .85; margin: 0; transition: transform .28s ease; }
.sidemenu__nav .mrow__tog[aria-expanded="true"] .caret-side { transform: rotate(90deg); }
.sidemenu__nav .msub { max-height: 0; overflow: hidden; background: #fbfaf8; transition: max-height .3s ease; }
.sidemenu__nav .msub > a, .sidemenu__nav .msub .mrow > a { padding-inline-start: 40px; font-size: 15px; color: #555; }
.sidemenu__nav .msub .mrow { border-bottom: 1px solid #f2f2f2; }
.sidemenu__nav .msub--deep { background: #f5f3ef; }
.sidemenu__nav .msub--deep > a { padding-inline-start: 62px; font-size: 14px; color: #666; }

@media (min-width: 901px) {
  .sidemenu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 640; }
  .sidemenu {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(400px, 88vw);
    z-index: 650; overflow-y: auto; box-shadow: 0 0 40px rgba(0,0,0,.18);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .32s cubic-bezier(.4,0,.2,1), visibility 0s .32s linear;
  }
  [dir="rtl"] .sidemenu { transform: translateX(100%); }
  body.sidemenu-open .sidemenu { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.4,0,.2,1); }
  body.sidemenu-open { overflow: hidden; }
}
@media (max-width: 900px) {
  /* static block after all the watches; drawer chrome hidden */
  .sidemenu-toggle, .sidemenu-overlay, .sidemenu__close { display: none !important; }
  .sidemenu { margin-top: 34px; border-top: 1px solid #e9e7e2; }
}