/* Radisa Gallery — WordPress-specific additions only.
   NEVER override prototype.css / ecommerce.css base styles here.
   Those files are the source of truth (identical to the prototype). */

/* WP-specific resets */
html { overflow-x: hidden; }
body { overflow-x: hidden; width: 100%; }
img { max-width: 100%; height: auto; }
.wp-block-image img { border: 1px solid var(--r-rosa); }

/* Admin bar offset */
body.admin-bar .r-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .r-header { top: 46px; }
}

/* Nav links (WP menu outputs <a> not <button>) */
.r-nav a {
  background: none; border: none; padding: 6px 0; color: inherit;
  font-size: 13px; opacity: 0.7;
  position: relative; white-space: nowrap;
  transition: opacity 0.2s ease; text-decoration: none;
}
.r-nav a:hover { opacity: 1; }
.r-nav a[data-active="true"] { opacity: 1; }
.r-nav a[data-active="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--r-charcoal);
}

/* Badge (cart / wishlist counters in header) */
.r-badge {
  position: absolute; top: -3px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--r-accent, var(--r-charcoal)); color: var(--r-ivory);
  font-family: var(--r-mono); font-size: 9px; line-height: 15px; text-align: center;
  letter-spacing: 0; pointer-events: none;
}

/* Card wishlist heart: reveal on hover, always visible on touch */
.r-card__wish {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(244,240,234,0.55);
  background: var(--r-ivory); color: var(--r-accent, var(--r-charcoal));
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.r-card:hover .r-card__wish { opacity: 1; }

/* Hide lang switch until multilingual is implemented */
.r-header__lang { display: none !important; }

/* Promo bar: force single line on desktop */
.r-promobar__msg { flex-wrap: nowrap; }

/* Gallery thumbnail strip */
.r-gallery-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px;
}
.r-gallery-strip button {
  position: relative;
  padding: 0; border: none; cursor: pointer; aspect-ratio: 1 / 1;
  outline: 1px solid var(--r-charcoal-12); outline-offset: 0;
  background: transparent; overflow: hidden;
}
.r-gallery-strip button.is-active { outline: 1px solid var(--r-charcoal); }
.r-gallery-strip button img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Breadcrumb */
.r-breadcrumb {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--r-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--r-charcoal-70);
  padding: 18px 0; border-bottom: 1px solid var(--r-charcoal-06);
}
.r-breadcrumb a { color: var(--r-charcoal-70); text-decoration: none; cursor: pointer; }
.r-breadcrumb a:hover { color: var(--r-charcoal); }

/* Pagination */
.r-pagination {
  display: flex; justify-content: center; gap: 8px; margin-top: 72px;
}
.r-pagination a,
.r-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--r-charcoal-12);
  font-family: var(--r-mono); font-size: 12px;
  color: var(--r-charcoal); text-decoration: none;
  transition: all 0.2s ease;
}
.r-pagination a:hover { border-color: var(--r-charcoal); }
.r-pagination .current {
  background: var(--r-charcoal); color: var(--r-ivory);
  border-color: var(--r-charcoal);
}

/* WP search overlay */
.r-search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(28, 26, 24, 0.92);
  backdrop-filter: blur(12px);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
}
.r-search-overlay.is-open { display: flex; }
.r-search-overlay .search-field {
  width: 100%; max-width: 920px;
  background: none; border: none;
  border-bottom: 1px solid var(--r-ivory-70);
  color: var(--r-ivory);
  font-family: var(--r-serif);
  font-size: clamp(28px, 5vw, 56px);
  padding: 16px 0;
}
.r-search-overlay .search-field::placeholder { color: rgba(244,240,234,0.4); }
.r-search-overlay .search-field:focus { outline: none; border-bottom-color: var(--r-ivory); }
.r-search-overlay__close {
  position: absolute; top: 40px; right: 40px;
  background: none; border: none; color: var(--r-ivory);
  font-size: 24px; cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE GRID UTILITY CLASSES
   Add these to elements that have inline grid styles.
   The inline styles define the desktop layout; these classes
   override grid-template-columns at smaller viewports.
   ════════════════════════════════════════════════════════════════ */

/* ── Mobile hamburger menu ────────────────────────────────── */
.r-burger {
  display: none; background: none; border: none; padding: 6px;
  color: var(--r-charcoal); cursor: pointer; line-height: 0;
}
.r-mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 100;
  background: var(--r-ivory); flex-direction: column;
  padding: 80px 32px 40px; overflow-y: auto;
}
.r-mobile-nav.is-open { display: flex; }
.r-mobile-nav__close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; color: var(--r-charcoal);
  font-size: 28px; cursor: pointer; line-height: 1;
}
.r-mobile-nav a {
  display: block; padding: 16px 0;
  font-family: var(--r-serif); font-size: 28px;
  color: var(--r-charcoal); text-decoration: none;
  border-bottom: 1px solid var(--r-charcoal-06);
  letter-spacing: -0.01em;
}
.r-mobile-nav a:last-child { border-bottom: none; }
.r-mobile-nav__util {
  margin-top: auto; padding-top: 32px;
  display: flex; gap: 24px; align-items: center;
  border-top: 1px solid var(--r-charcoal-12);
}

/* ════════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 1080px — TABLET
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  /* Header */
  .r-header__inner { padding: 14px 24px; }
  .r-nav { display: none; }
  .r-burger { display: inline-flex; }

  /* Sections: reduce vertical padding */
  .r-section { padding-block: 80px !important; }

  /* Grids: 2-col asymmetric → stack */
  .rg-2a { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Grids: 4-col → 2-col */
  .rg-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Grids: 6-col → 3-col */
  .rg-6 { grid-template-columns: repeat(3, 1fr) !important; }

  /* Grids: 5-col → 3-col */
  .rg-5 { grid-template-columns: repeat(3, 1fr) !important; }

  /* Grids: 3-col → 2-col */
  .rg-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Grids: 2-col symmetric → stack */
  .rg-2 { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Grids: sidebar layout → stack */
  .rg-aside { grid-template-columns: 1fr !important; gap: 48px !important; }

  /* Servizi 3-col panel → stack */
  .rg-service { grid-template-columns: 1fr !important; }
  .rg-service > div { border-left: none !important; border-bottom: 1px solid var(--r-charcoal-12); }
  .rg-service > div:last-child { border-bottom: none; }

  /* Footer */
  .r-footer { padding: 56px 32px 32px; }
  .r-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  /* Promobar */
  .r-promobar__msg { flex-wrap: wrap; }
  .r-promobar__inner { padding: 0 24px; }

  /* Shipping banner */
  .r-shipbar__inner { padding: 0 24px; }
  .r-shipbar__msg { font-size: 10px; }

  /* Product page: image + details → stack */
  .rg-product { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* Showroom hero split → stack */
  .rg-hero-split { grid-template-columns: 1fr !important; min-height: auto !important; }

  /* Detail rows */
  .rg-detail { grid-template-columns: 120px 1fr !important; }

  /* Checkout 2-col */
  .rg-checkout { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 768px — MOBILE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Prevent horizontal overflow */
  .r-shell, main, section, .r-page { max-width: 100vw; overflow-x: hidden; }

  /* Container: reduce 56px padding to 20px */
  .r-container { padding: 0 20px !important; }
  .r-container--wide { padding: 0 20px !important; }

  /* Header */
  .r-header__inner { padding: 12px 16px !important; gap: 12px !important; }
  .r-header__util { gap: 10px !important; }
  .r-logo-img { height: 38px !important; }

  /* Promobar */
  .r-promobar__inner { padding: 0 16px !important; min-height: 36px !important; gap: 10px !important; }
  .r-promobar__msg { font-size: 9px !important; gap: 10px !important; padding: 8px 0 !important; }

  /* Shipping banner */
  .r-shipbar__inner { padding: 0 16px !important; min-height: 38px !important; gap: 8px !important; }
  .r-shipbar__msg { font-size: 8.5px !important; padding: 8px 0 !important; gap: 6px !important; }

  /* Footer: reduce side padding */
  .r-footer { padding: 48px 20px 28px !important; }

  /* Hero: prevent overflow from long numtag or atmos labels */
  .r-numtag { white-space: normal !important; }
  .r-atmos__hint { font-size: 8px !important; }

  /* Eyebrow: allow wrap */
  .r-eyebrow { flex-wrap: wrap; }
  .r-eyebrow__line { width: 20px; }

  /* Sections: tighter vertical spacing */
  .r-section { padding-block: 56px !important; }
  .r-section--tight { padding-block: 36px !important; }

  /* Hero: shrink min-height */
  .r-hero { min-height: 80vh !important; }

  /* Display type: scale down */
  .r-display { font-size: clamp(32px, 8vw, 56px) !important; }
  .r-h2 { font-size: clamp(28px, 6vw, 44px) !important; }

  /* Grids further collapse */
  .rg-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .rg-6 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .rg-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .rg-3 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .rg-2 { gap: 32px !important; }
  .rg-2a { gap: 32px !important; }

  /* Footer */
  .r-footer { padding: 48px 20px 28px; }
  .r-footer__grid { grid-template-columns: 1fr !important; gap: 36px; }
  .r-footer__bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Cards: prevent overflow on narrow 2-col */
  .r-card__wish { opacity: 1; }
  .r-card { overflow: hidden; }
  .r-card__name {
    font-size: 16px;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: normal;
  }
  .r-card__meta { font-size: 9px !important; gap: 4px !important; flex-wrap: nowrap; overflow: hidden; }
  .r-card__meta > span { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }
  .r-card__price { font-size: 10px !important; flex-shrink: 0; }
  .r-card__info { gap: 3px; overflow: hidden; min-width: 0; }
  .r-pill {
    font-size: 8px !important; padding: 3px 6px !important; letter-spacing: 0.1em !important;
    overflow: hidden; text-overflow: ellipsis; max-width: 50%; flex-shrink: 1; min-width: 0;
  }

  /* Buttons */
  .r-btn { padding: 12px 18px; font-size: 11px; }

  /* Search overlay */
  .r-search-overlay { padding-top: 20vh; }
  .r-search-overlay .search-field { font-size: clamp(22px, 5vw, 36px); }
  .r-search-overlay__close { top: 20px; right: 20px; }

  /* Gallery strip: 4-col on mobile is fine but smaller gap */
  .r-gallery-strip { gap: 4px; }

  /* Breadcrumb: wrap */
  .r-breadcrumb { flex-wrap: wrap; gap: 8px; font-size: 9px; }

  /* Pagination */
  .r-pagination { margin-top: 48px; }

  /* Checkout / Account form fields */
  .rg-form { grid-template-columns: 1fr !important; }

  /* Account nav: horizontal scroll on mobile */
  .r-acct__nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Promo bar close button */
  .r-promobar__x { margin-left: auto; }

  /* Collection rows in oggetti archive */
  .rg-coll { grid-template-columns: 1fr 1fr !important; }

  /* Chips: wrap and scroll */
  .rg-chips { flex-wrap: wrap; gap: 8px; }

  /* Events grid */
  .rg-events { grid-template-columns: 1fr !important; gap: 32px !important; }
  .rg-events-main { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════
   BREAKPOINT: ≤ 480px — SMALL MOBILE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Display type: even smaller */
  .r-display { font-size: clamp(28px, 9vw, 42px) !important; }
  .r-h2 { font-size: clamp(24px, 7vw, 36px) !important; }

  /* Grids */
  .rg-4 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .rg-6 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .rg-events-main { grid-template-columns: 1fr !important; }

  /* Hero */
  .r-hero { min-height: 70vh !important; padding-bottom: 48px !important; }

  /* Cards: tighter on small screens */
  .r-card__info { padding: 10px 0 0; }
  .r-card__name { font-size: 14px !important; -webkit-line-clamp: 1; }
  .r-card__meta { font-size: 8px !important; }
  .r-pill { display: none !important; }

  /* Footer */
  .r-footer__bottom { font-size: 9px; }

  /* Section text sizes */
  .r-body { font-size: 14px; }

  /* Account grids */
  .rg-form { gap: 20px !important; }

  /* Buttons: full width on mobile */
  .rg-btns { flex-direction: column; }
  .rg-btns .r-btn { width: 100%; justify-content: center; }

  /* Detail rows: stack on small mobile */
  .rg-detail { grid-template-columns: 1fr !important; gap: 4px !important; }
}

/* ════════════════════════════════════════════════════════════════
   BOOKING PAGE — button-as-card reset & layout tweaks
   ════════════════════════════════════════════════════════════════ */
button.r-visit-card {
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* ════════════════════════════════════════════════════════════════
   WooCommerce form fields — match Radisa Gallery design system
   ════════════════════════════════════════════════════════════════ */
.woocommerce-address-fields .form-row,
.radisa-address-form .form-row {
  margin-bottom: 0;
}
.woocommerce-address-fields label,
.radisa-address-form label {
  font-family: var(--r-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--r-charcoal-70);
  margin-bottom: 6px;
  display: block;
}
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select,
.woocommerce-address-fields textarea,
.radisa-address-form input.input-text,
.radisa-address-form select,
.radisa-address-form textarea,
.woocommerce .form-row input.input-text,
.woocommerce .form-row select,
.woocommerce .form-row textarea {
  width: 100%;
  border: 1px solid var(--r-charcoal-12);
  background: var(--r-ivory);
  padding: 12px 14px;
  font-family: var(--r-body);
  font-size: 14px;
  color: var(--r-charcoal);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.woocommerce-address-fields input.input-text:focus,
.woocommerce-address-fields select:focus,
.radisa-address-form input.input-text:focus,
.radisa-address-form select:focus,
.woocommerce .form-row input.input-text:focus,
.woocommerce .form-row select:focus {
  border-color: var(--r-charcoal);
}

/* WooCommerce select2 dropdown override */
.select2-container .select2-selection--single {
  border: 1px solid var(--r-charcoal-12) !important;
  border-radius: 0 !important;
  height: 44px !important;
  padding: 10px 14px !important;
  background: var(--r-ivory) !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  font-family: var(--r-body) !important;
  font-size: 14px !important;
  color: var(--r-charcoal) !important;
  line-height: normal !important;
  padding: 0 !important;
}
.select2-container--open .select2-selection--single {
  border-color: var(--r-charcoal) !important;
}
.select2-dropdown {
  border: 1px solid var(--r-charcoal-12) !important;
  border-radius: 0 !important;
}
.select2-results__option {
  font-family: var(--r-body) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
}
.select2-results__option--highlighted {
  background: var(--r-charcoal) !important;
  color: var(--r-ivory) !important;
}

/* Address form: full-width rows for certain fields */
.woocommerce-address-fields .form-row-wide,
.radisa-address-form .form-row-wide {
  grid-column: 1 / -1;
}

/* WooCommerce notices/messages */
.woocommerce-message,
.woocommerce-info {
  border: 1px solid var(--r-charcoal-12);
  border-left: 3px solid var(--r-charcoal);
  background: var(--r-ivory);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-family: var(--r-body);
  font-size: 14px;
}
.woocommerce-error {
  border: 1px solid rgba(180,68,68,0.2);
  border-left: 3px solid #b44;
  background: rgba(180,68,68,0.04);
  padding: 14px 18px;
  margin-bottom: 24px;
  font-family: var(--r-body);
  font-size: 14px;
  color: #b44;
  list-style: none;
}

/* My Account nav — theme style */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 10px 16px;
  font-family: var(--r-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--r-charcoal-70);
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.woocommerce-MyAccount-navigation li a:hover {
  color: var(--r-charcoal);
  border-color: var(--r-charcoal-12);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account.is-active a {
  color: var(--r-charcoal);
  background: var(--r-charcoal);
  color: var(--r-ivory);
  border-color: var(--r-charcoal);
}

/* ════════════════════════════════════════════════════════════════
   TOUCH DEVICES: always show interactive elements
   ════════════════════════════════════════════════════════════════ */
@media (hover: none) {
  .r-card__wish { opacity: 1; }
  .r-card__overlay { opacity: 0; }
}