/*
Theme Name: Hello Elementor Child
Template: hello-elementor
*/

/* ---- Logo sizing (native WP Custom Logo via [site_logo]) ---- */
.sabai-logo .custom-logo, .sabai-logo img.custom-logo { height: 60px; width: auto; display: block; }
.sabai-logo--footer .custom-logo, .sabai-logo--footer img.custom-logo { height: 80px; width: auto; display: block; margin-bottom: 14px; }

.poya-search-form { display:flex; align-items:center; gap:8px; background:#FFFFFF; border:1px solid #D8CCB6; border-radius:999px; padding:6px 14px; }
.poya-search-form input { border:none; outline:none; background:transparent; font-size:12px; font-family:inherit; color:#14110F; width:120px; letter-spacing:0.01em; }
.poya-search-form input::placeholder { color:#8a8074; }
.poya-search-form svg { flex-shrink:0; }

/* ---- Header search: top black utility bar, pinned right; the "Worldwide
   Shipping..." tagline stays visually centered via absolute positioning so
   the two don't fight over the same flex space. ---- */
.poya-header-search {
  flex-shrink: 0 !important; flex-grow: 0 !important; flex-basis: auto !important;
  width: auto !important;
}
/* Elementor's own --justify-content custom property on this row isn't
   winning the cascade (same class of bug as .poya-eyebrow-center earlier) —
   force it directly. The search shortcode widget itself also stretches to
   fill the row (same "lone flex child" bug as before), which is why
   flex-end alone had no visible effect — pin it to auto width + right. */
.elementor-element-srchrow2 { justify-content: flex-end !important; }
.elementor-element-srchrow2 > .elementor-widget-shortcode {
  flex-grow: 0 !important; flex-shrink: 0 !important; width: auto !important;
  margin-left: auto !important;
}
.poya-bar-row { position: relative !important; }
.poya-eyebrow-center {
  position: absolute !important; left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: auto !important; max-width: max-content !important;
  pointer-events: none !important;
}
@media (max-width: 1024px) {
  .poya-eyebrow-center { position: static; transform: none; }
}

/* ---- Policies page: info cards + size tables ---- */
.poya-info-card { border-top: 1px solid var(--e-global-color-border); padding-top: 1.5em; }
.poya-size-table { width: 100%; border-collapse: collapse; font-size: 0.8125em; color: var(--e-global-color-text); }
.poya-size-table th, .poya-size-table td { text-align: left; padding: 0.6em 0; }
.poya-size-table th { color: var(--e-global-color-muted); font-weight: 400; }
.poya-size-table td { border-top: 1px solid var(--e-global-color-border); }

body, button, input, select, textarea {
  font-family: 'Work Sans', sans-serif;
}

/* ---- Contact form ---- */
.poya-contact-form { display: flex; flex-direction: column; gap: 1.875em; }
.poya-field label {
  display: block; font-size: 0.6875em; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--e-global-color-muted); margin-bottom: 0.5em;
}
.poya-input {
  width: 100%; box-sizing: border-box; border: none; border-bottom: 1px solid var(--e-global-color-border);
  background: transparent; font-family: 'Work Sans', sans-serif; font-size: 0.9375em;
  color: var(--e-global-color-primary); outline: none; padding: 0.875em 0.125em; resize: vertical;
}
.poya-input:focus { border-bottom-color: var(--e-global-color-primary); }
.poya-input::placeholder { color: var(--e-global-color-muted); }
/* Hello Elementor resets every <button> with a pink border/outline — override in all states */
.poya-form-submit,
.poya-form-submit:hover, .poya-form-submit:focus, .poya-form-submit:active, .poya-form-submit:focus-visible {
  cursor: pointer; text-align: center; background: var(--e-global-color-primary) !important; color: var(--e-global-color-white) !important;
  border: none !important; outline: none !important; box-shadow: none !important;
  padding: 1.1em; font-size: 0.6875em; letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 0.5em; font-family: 'Work Sans', sans-serif; width: 100%;
}
.poya-form-submit:hover { background: var(--e-global-color-secondary) !important; }
.poya-form-success {
  background: var(--e-global-color-light_bg); border: 1px solid var(--e-global-color-border);
  padding: 3.5em 2.75em; text-align: center;
}
.poya-form-success-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.75em; margin-bottom: 1em; color: var(--e-global-color-primary); }
.poya-form-success-body { font-size: 0.9375em; line-height: 1.8; color: var(--e-global-color-text); }
.poya-form-error {
  background: #FBEAEA; border: 1px solid #E3B4B4; color: #8a2c2c;
  padding: 1em 1.25em; font-size: 0.875em; margin-bottom: 1.5em;
}
.poya-channel-list { display: flex; flex-direction: column; }
.poya-channel-list a {
  display: flex; justify-content: space-between; padding: 1.125em 0;
  border-bottom: 1px solid var(--e-global-color-border); font-size: 0.9375em; transition: background 0.2s ease, padding-left 0.2s ease;
}
.poya-channel-list a:hover { background: var(--e-global-color-light_bg); padding-left: 0.625em; }
.poya-channel-list a span:first-child {
  color: var(--e-global-color-muted); text-transform: uppercase; font-size: 0.6875em; letter-spacing: 0.1em; align-self: center;
}
.poya-channel-list a span:last-child { color: var(--e-global-color-primary); }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
}

/* ---- Header nav row: logo absolutely centered, independent of menu widths ---- */
.poya-nav-row { position: relative; }
.poya-logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto !important;
  max-width: max-content !important;
  /* This box can end up spanning the full header row edge-to-edge (Elementor's
     own container defaults to width:100% of its containing block once it's
     taken out of flex flow by position:absolute) — pointer-events:none lets
     clicks fall through to the header menu underneath; re-enable on the logo
     itself so it stays clickable. */
  pointer-events: none !important;
}
.poya-logo-center a, .poya-logo-center img, .poya-logo-center .custom-logo {
  pointer-events: auto !important;
}
@media (max-width: 1024px) {
  .poya-logo-center { position: static; transform: none; }
}
.poya-nav-side {
  flex: 0 0 460px !important;
  width: 460px !important;
}
@media (max-width: 1024px) {
  .poya-nav-side { flex: 0 0 auto !important; width: auto !important; }
}

/* ---- Reusable design-system utility classes (special sizes use em, colors use kit globals) ---- */
.poya-eyebrow {
  font-size: 0.6875em; /* ~11px at 16px base */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--e-global-color-secondary);
}
.poya-eyebrow--accent { color: var(--e-global-color-accent); }
.poya-wrap {
  max-width: 90em; /* 1440px */
  margin: 0 auto;
  width: 100%;
}
.poya-section--dark {
  background: var(--e-global-color-primary);
  color: var(--e-global-color-white);
}
.poya-arrow-link {
  font-size: 0.75em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  display: inline-block;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.poya-arrow-link:hover { color: var(--e-global-color-secondary); }

/* ---- Photo placeholder (until owner uploads real photos to Media Library) ---- */
.poya-img-placeholder {
  width: 100%;
  background-image: repeating-linear-gradient(135deg, var(--e-global-color-cream), var(--e-global-color-cream) 12px, var(--e-global-color-light_bg) 12px, var(--e-global-color-light_bg) 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.poya-img-placeholder span {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.6875em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-global-color-muted);
  background: var(--e-global-color-white);
  padding: 8px 14px;
  border: 1px solid var(--e-global-color-muted);
  text-align: center;
}

/* ---- Equal-width photo/card grids ---- */
/* Boxed containers nest real children one level deeper inside .e-con-inner,
   so the grid display has to target whichever level is the true parent. */
.poya-grid, .poya-grid > .e-con-inner {
  display: grid !important;
  gap: 32px;
  width: 100%;
}
.poya-grid--2, .poya-grid--2 > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
.poya-grid--3, .poya-grid--3 > .e-con-inner { grid-template-columns: repeat(3, 1fr); }
.poya-grid--4, .poya-grid--4 > .e-con-inner { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .poya-grid--4, .poya-grid--4 > .e-con-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .poya-grid--2 > .e-con-inner, .poya-grid--3 > .e-con-inner, .poya-grid--4 > .e-con-inner,
  .poya-grid--2, .poya-grid--3, .poya-grid--4 { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
}
/* Elementor sets its own inline --container-widget-width var on grid children
   (meant for its flex system) which fights CSS Grid's default item stretch —
   force full-width, zero-min-width items so text/images wrap inside their cell. */
.poya-grid > *, .poya-grid > .e-con-inner > * {
  min-width: 0 !important;
}
/* Grid cells that hold a real photo directly (no .poya-collection wrapper around them)
   still need a consistent card ratio + crop, same reasoning as above. */
.poya-grid > .elementor-widget-image img,
.poya-grid > .e-con-inner > .elementor-widget-image img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block;
}
/* Individual grid-image crop overrides — default center crop sometimes leaves
   too much empty background and not enough of the actual garment in frame. */
.poya-crop-low img { object-position: center bottom !important; }
.poya-crop-mid img { object-position: center 65% !important; }

/* Shop product cards: force a consistent photo ratio (source images vary wildly
   in native aspect ratio — square, 2:3, 3:4 — which otherwise makes cards in the
   same row render at visibly different heights) and pin price/button to the
   bottom of the card regardless of how many lines the product name wraps to. */
.poya-shop-card, .poya-shop-card.e-con {
  display: flex !important; flex-direction: column; height: 100%;
  border-radius: 6px !important; overflow: hidden;
  border-color: var(--e-global-color-border, #ECE8E0) !important;
  box-shadow: 0 1px 3px rgba(20,17,15,0.05);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.poya-shop-card:hover {
  box-shadow: 0 12px 28px rgba(20,17,15,0.12);
  transform: translateY(-3px);
}
.poya-shop-card > .elementor-widget-image img,
.poya-shop-card > .e-con-inner > .elementor-widget-image img {
  width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block;
}
.poya-shop-card .poya-card-body { flex: 1 1 auto; display: flex !important; flex-direction: column; }
.poya-shop-card .poya-card-body .elementor-widget-button { margin-top: auto; padding-top: 10px; }
.poya-shop-card .poya-card-body .elementor-button {
  width: 100%; text-align: center; transition: background 0.2s ease, color 0.2s ease;
}

/* ---- Order Now button stack (LINE / Instagram / Facebook): equal width,
   evenly spaced, so three follow/contact buttons of different label lengths
   read as one balanced group rather than three mismatched pill sizes. ---- */
.poya-order-actions { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: 340px; }
.poya-order-actions .elementor-widget-button,
.poya-order-actions .elementor-button { width: 100%; text-align: center; }
.poya-order-actions .elementor-button {
  padding-top: 1.05em; padding-bottom: 1.05em; border-radius: 4px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.poya-order-actions .elementor-button:hover { transform: translateY(-2px); }

/* ---- Wishlist heart (injected via JS in wp_footer, see functions.php —
   never written into Elementor JSON, so it can't be lost to an editor
   autosave and doesn't risk another _elementor_data write) ---- */
.poya-shop-card { position: relative; }
.poya-wishlist-heart {
  position: absolute !important; top: 12px !important; right: 12px !important; z-index: 5 !important;
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: rgba(255,255,255,0.9) !important; border: none !important; outline: none !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, background 0.15s ease;
}
.poya-wishlist-heart:focus, .poya-wishlist-heart:focus-visible { outline: none !important; border: none !important; }
.poya-wishlist-heart:hover { transform: scale(1.1); background: #fff; }
.poya-wishlist-heart svg { width: 17px; height: 17px; }
.poya-wishlist-heart svg path {
  stroke: var(--e-global-color-primary, #14110F); fill: none; transition: fill 0.15s ease, stroke 0.15s ease;
}
.poya-wishlist-heart.is-active svg path {
  fill: var(--e-global-color-secondary, #A67C42); stroke: var(--e-global-color-secondary, #A67C42);
}
.poya-wishlist-heart.is-bump { animation: poya-heart-bump 0.35s ease; }
@keyframes poya-heart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.poya-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 12px);
  background: var(--e-global-color-primary, #14110F); color: #fff;
  font-size: 0.8125em; letter-spacing: 0.02em; padding: 0.75em 1.4em;
  border-radius: 999px; opacity: 0; pointer-events: none; z-index: 999;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.poya-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Wishlist count badge on the header cart/account area, if present */
.poya-wishlist-count {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px;
  padding: 0 3px; border-radius: 999px; background: var(--e-global-color-secondary, #A67C42);
  color: #fff; font-size: 0.625em; line-height: 16px; text-align: center; font-weight: 600;
  display: none;
}
.poya-wishlist-count.is-visible { display: block; }

/* ---- Full-bleed absolute fill (hero / behind-the-scenes background layer) ---- */
.poya-abs-fill {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  z-index: 0 !important;
}
.poya-abs-fill, .poya-abs-fill .e-con-inner, .poya-abs-fill > .elementor-widget-shortcode { height: 100%; }

/* ---- Hero ---- */
.poya-hero {
  position: relative !important;
  min-height: 700px !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden;
}
.poya-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  /* Flat dark wash (not just a bottom fade) so white text stays readable
     over the light placeholder pattern; a real editorial photo can lighten
     this once uploaded. */
  background: linear-gradient(180deg, rgba(20,17,15,0.45) 0%, rgba(20,17,15,0.8) 100%);
}
.poya-hero-content { position: relative !important; z-index: 2; padding: 0 4em 4.5em; max-width: 51em; }
@media (max-width: 767px) {
  .poya-hero { min-height: 480px; }
  .poya-hero-content { padding: 0 1.5em 2.5em; }
}

/* ---- Invert heading/text color on dark backgrounds (kit global color, no hardcode) ---- */
.poya-heading-invert .elementor-heading-title { color: var(--e-global-color-white) !important; }
.poya-center-title .elementor-heading-title,
.poya-center-head { text-align: center; }
.poya-center-head .elementor-heading-title { text-align: center; }

/* ---- Buttons ---- */
.poya-btn-invert .elementor-button {
  background: var(--e-global-color-white);
  color: var(--e-global-color-primary);
  border: 1px solid var(--e-global-color-white);
  border-radius: 0;
  padding: 1.1em 2.2em;
  font-size: 0.6875em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.poya-btn-invert .elementor-button:hover { background: transparent; color: var(--e-global-color-white); }
.poya-btn-outline .elementor-button {
  background: transparent;
  color: var(--e-global-color-primary);
  border: 1px solid var(--e-global-color-primary);
  border-radius: 0;
  padding: 0.9em;
  font-size: 0.6875em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.poya-btn-outline .elementor-button:hover { background: var(--e-global-color-primary); color: var(--e-global-color-white); }
.poya-btn-outline-invert .elementor-button {
  background: transparent;
  color: var(--e-global-color-white);
  border: 1px solid var(--e-global-color-white);
  border-radius: 0;
  padding: 1.1em 2.2em;
  font-size: 0.6875em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.poya-btn-outline-invert .elementor-button:hover { background: var(--e-global-color-white); color: var(--e-global-color-primary); }
.poya-btn-block, .poya-btn-block .elementor-button { width: 100%; display: block; text-align: center; }

/* ---- Collections ---- */
.poya-collection { position: relative !important; min-height: 480px !important; overflow: hidden; }
.poya-collection .poya-img-placeholder {
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
}
/* Real photos (swapped in from [img_placeholder]) need the same absolute-fill + crop
   treatment the placeholder box got for free — a plain Elementor image widget has no
   ratio box of its own, so without this it renders at its natural size and leaves the
   surrounding container looking empty/letterboxed. */
.poya-collection > .elementor-widget-image,
.poya-collection > .e-con-inner > .elementor-widget-image {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
}
.poya-collection > .elementor-widget-image .elementor-widget-container,
.poya-collection > .e-con-inner > .elementor-widget-image .elementor-widget-container { height: 100%; }
.poya-collection > .elementor-widget-image img,
.poya-collection > .e-con-inner > .elementor-widget-image img {
  width: 100% !important; height: 100% !important; object-fit: cover; display: block;
}
.poya-collection::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(20,17,15,0.75) 0%, rgba(20,17,15,0.25) 55%, rgba(20,17,15,0.1) 100%);
}
.poya-collection-caption {
  position: absolute !important; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2.5em;
}

/* ---- Full-bleed collection banner (Collections page) — side-lit, vertically centered caption ---- */
.poya-collection--full { min-height: 620px !important; }
.poya-collection--full.poya-align-start::after {
  background: linear-gradient(90deg, rgba(20,17,15,0.72) 0%, rgba(20,17,15,0.15) 55%);
}
.poya-collection--full.poya-align-end::after {
  background: linear-gradient(270deg, rgba(20,17,15,0.72) 0%, rgba(20,17,15,0.15) 55%);
}
.poya-collection-caption--banner {
  position: absolute !important; top: 0; bottom: 0; z-index: 2;
  justify-content: center !important;
  padding: 2.5em 4em;
  max-width: 36em;
}
.poya-align-start .poya-collection-caption--banner { left: 0; }
.poya-align-end .poya-collection-caption--banner { right: 0; }
@media (max-width: 1024px) {
  .poya-collection-caption--banner { max-width: 100%; padding: 2em; }
}

/* ---- Journal article cards ---- */
.poya-article-img-frame { min-height: 320px !important; margin-bottom: 20px; }
.poya-article-card { display: flex; flex-direction: column; }

/* ---- Side image column (matches its flex-row sibling's height) ---- */
.poya-side-image { position: relative !important; min-height: 420px !important; }
.poya-side-image .poya-img-placeholder {
  position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
}
.poya-side-image > .elementor-widget-image,
.poya-side-image > .e-con-inner > .elementor-widget-image {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
}
.poya-side-image > .elementor-widget-image .elementor-widget-container,
.poya-side-image > .e-con-inner > .elementor-widget-image .elementor-widget-container { height: 100%; }
.poya-side-image > .elementor-widget-image img,
.poya-side-image > .e-con-inner > .elementor-widget-image img {
  width: 100% !important; height: 100% !important; object-fit: cover; display: block;
}

/* ---- Behind the scenes ---- */
.poya-bts {
  position: relative !important;
  min-height: 480px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.poya-bts::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: rgba(20,17,15,0.7);
}
.poya-bts-content { position: relative !important; z-index: 2; padding: 2.5em; text-align: center; }

/* ---- Header nav / menu reset ---- */
.poya-menu {
  display: flex;
  align-items: center;
  gap: 2em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.poya-menu li { list-style: none; }
.poya-menu a {
  font-size: 0.6875em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e-global-color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.poya-menu a:hover { color: var(--e-global-color-secondary); }

.poya-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 36px;
  height: 36px;
}
.poya-cart-link svg path { transition: stroke 0.15s ease; }
.poya-cart-link:hover svg path { stroke: var(--e-global-color-secondary); }
.poya-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-white);
  font-size: 0.625em;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}

.poya-wishlist-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 36px;
  height: 36px;
}
.poya-wishlist-link svg path { transition: stroke 0.15s ease, fill 0.15s ease; }
.poya-wishlist-link:hover svg path { stroke: var(--e-global-color-secondary); }
.poya-wishlist-link.has-items svg path { fill: var(--e-global-color-primary); }
.poya-wishlist-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-white);
  font-size: 0.625em;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}

/* ---- Hamburger ---- */
#site-burger {
  cursor: pointer;
  width: 26px;
  height: 20px;
  position: relative;
  display: none;
}
#site-burger span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--e-global-color-primary);
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
}
#site-burger span:nth-child(1) { top: 0; }
#site-burger span:nth-child(2) { top: 9px; }
#site-burger span:nth-child(3) { top: 18px; }
#site-burger.is-open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
#site-burger.is-open span:nth-child(2) { opacity: 0; }
#site-burger.is-open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* Hello Elementor gives every <button> a pink reset border — neutralize it here */
#site-burger, #site-burger:hover, #site-burger:focus, #site-burger:active, #site-burger:focus-visible {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#site-mobile-dropdown {
  display: none;
  width: 100%;
  background: var(--e-global-color-white);
  border-top: 1px solid var(--e-global-color-border);
}
#site-mobile-dropdown.is-open { display: block; }
#site-mobile-dropdown .poya-menu {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}
#site-mobile-dropdown .poya-menu a {
  display: block;
  width: 100%;
  padding: 1em 1.5em;
  border-bottom: 1px solid var(--e-global-color-border);
}

@media (max-width: 1024px) {
  #site-burger { display: block; }
}

/* ---- Responsive visibility helpers (used via container "CSS Classes") ---- */
.poya-desktop-only { display: flex; }
.poya-mobile-only { display: none; }
@media (max-width: 1024px) {
  .poya-desktop-only { display: none !important; }
  .poya-mobile-only { display: flex !important; }
}

/* ---- Footer columns (shrinkable, so 3-up doesn't overflow at tablet width) ---- */
.poya-footer-col { flex: 1 1 0 !important; min-width: 0 !important; }

/* ---- Footer menus ---- */
.poya-menu--footer_1 a, .poya-menu--footer_2 a, .poya-menu--footer_3 a {
  color: var(--e-global-color-white);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.9375em;
  white-space: normal;
}
.poya-menu--footer_1, .poya-menu--footer_2, .poya-menu--footer_3 {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75em;
}

/* ---- Floating "Let's Talk" button (links straight to LINE @poyagroup) ----
   Bottom-LEFT, deliberately opposite Chaty's bottom-right corner so the two
   floating widgets never overlap or compete for the same space. */
.poya-chat-btn {
  position: fixed;
  z-index: 50;
  bottom: 32px;
  left: 32px;
  cursor: pointer;
  background: var(--e-global-color-primary);
  color: var(--e-global-color-white) !important;
  padding: 16px 26px;
  border-radius: 30px;
  font-size: 0.75em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(20,17,15,0.22);
}
.poya-chat-btn:hover { background: var(--e-global-color-secondary); }
@media (max-width: 767px) {
  .poya-chat-btn { bottom: 20px; left: 20px; padding: 13px 20px; }
}

/* ---- Footer QR codes ---- */
.poya-qr-item { text-align: center; }
.poya-qr-item img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  background: var(--e-global-color-white);
  padding: 8px;
}
.poya-qr-item .poya-qr-label {
  font-size: 0.6875em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--e-global-color-muted);
  margin-top: 10px;
}

/* ---- About page: narrow centered text columns ---- */
.poya-narrow-md { max-width: 42.5em; margin-left: auto; margin-right: auto; } /* ~680px, body copy */
.poya-narrow-lg { max-width: 58.75em; margin-left: auto; margin-right: auto; } /* ~940px, big headlines */

/* ---- About page: asymmetric "Moments in POYA" photo grid (1.3fr/1fr/1fr) ---- */
.poya-moments-grid, .poya-moments-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 28px;
  width: 100%;
}
@media (max-width: 1024px) {
  .poya-moments-grid, .poya-moments-grid > .e-con-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .poya-moments-grid, .poya-moments-grid > .e-con-inner { grid-template-columns: 1fr; gap: 16px; }
}
.poya-moments-grid > *, .poya-moments-grid > .e-con-inner > * { min-width: 0 !important; }

/* ---- Photo caption overlay (bottom-left label on a placeholder/image) ---- */
.poya-photo-caption {
  position: absolute !important; left: 20px; bottom: 20px; z-index: 2;
  color: var(--e-global-color-white);
  font-size: 0.75em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.poya-photo-frame { position: relative !important; overflow: hidden; }

/* ---- Footer brand social links ---- */
.poya-social-links a {
  display: block;
  color: var(--e-global-color-white);
  font-size: 0.9375em;
  text-decoration: none;
  margin-bottom: 8px;
}
.poya-social-links a:hover { color: var(--e-global-color-secondary); }