/* Royal Regalia PK – global styles. Most layout styles live inline in the components (as in the design). */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #f2f2f2; }
a { color: #0e2a5c; }
a:hover { color: #8c1c2b; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { color: inherit; }
:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Hover states ---------- */
.btn { transition: filter .15s ease, transform .15s ease; }
.btn:hover { filter: brightness(1.08); }
a.btn:hover { color: inherit; }
.btn-outline { transition: background .15s ease, color .15s ease; }
.btn-outline:hover { background: #0e2a5c !important; color: #ffffff !important; }
.btn-outline:hover svg { stroke: #ffffff; }
.nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #f3d36b !important; }
.side-link:hover { color: #8c1c2b !important; background: #fbf8ee !important; }
.cat-tile, .product-card, .promo-box { transition: box-shadow .15s ease, transform .15s ease; }
.cat-tile:hover, .product-card:hover { box-shadow: 0 6px 18px rgba(14, 42, 92, 0.12) !important; transform: translateY(-2px); }
.promo-box:hover { box-shadow: 0 6px 18px rgba(14, 42, 92, 0.18); }
.chip:hover { background: #c9a227 !important; color: #1a1a1a !important; }
input:focus, select:focus, textarea:focus { border-color: #c9a227 !important; outline: none; box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25); }
input.is-invalid, select.is-invalid { border-color: #c62828 !important; }

/* ---------- Error alert ---------- */
.alert-error { display: flex; }

/* ---------- Home hero slider ---------- */
.hero-slide { animation: fade .4s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.slider-arrow {
  position: absolute; top: 50%; margin-top: -18px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.15); color: #ffffff; font-size: 18px; cursor: pointer; z-index: 2;
}
.slider-arrow:hover { background: rgba(255, 255, 255, 0.3); }
.slider-dot { width: 8px; height: 6px; border-radius: 3px; border: 0; padding: 0; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: width .2s ease; }
.slider-dot[aria-current="true"] { width: 26px; background: #c9a227; }

/* ---------- Tabs ---------- */
.tab-pill {
  font: 500 14px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; padding: 9px 22px;
  border-radius: 3px; border: 1px solid #0e2a5c; background: #ffffff; color: #0e2a5c; cursor: pointer;
}
.tab-pill[aria-selected="true"] { background: #0e2a5c; color: #ffffff; }
.tab-line {
  font: 500 15px Oswald, sans-serif; letter-spacing: 1px; text-transform: uppercase; padding: 16px 18px;
  border: 0; border-bottom: 3px solid transparent; background: transparent; color: #777777; cursor: pointer; margin-bottom: -1px;
}
.tab-line[aria-selected="true"] { border-bottom-color: #c9a227; color: #0e2a5c; }

/* ---------- Category listing: grid / list view ---------- */
.view-btn {
  width: 34px; height: 34px; border: 1px solid #dddddd; border-radius: 3px; background: #ffffff; color: #555555;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.view-btn[aria-pressed="true"] { background: #0e2a5c; border-color: #0e2a5c; color: #ffffff; }
.is-list .product-grid { grid-template-columns: 1fr !important; }
.is-list .product-card { flex-direction: row !important; }
.is-list .product-card-img { flex: 0 0 200px; height: auto !important; min-height: 170px; }
.is-list .product-card-body { text-align: left !important; justify-content: center; }
.is-list .product-card-price { justify-content: flex-start !important; }
@media (max-width: 560px) {
  .is-list .product-card { flex-direction: column !important; }
  .is-list .product-card-img { flex-basis: auto; min-height: 180px; }
}

/* ---------- Product image zoom ---------- */
.zoom-frame.is-zoomed {
  position: fixed !important; inset: 0; z-index: 50; height: auto !important; border-radius: 0 !important;
  background: rgba(247, 247, 247, 0.98) !important; cursor: zoom-out;
}
.zoom-frame.is-zoomed > svg { width: min(80vw, 80vh); height: min(80vw, 80vh); }
.zoom-frame.is-zoomed > img { padding: 24px; }

/* ---------- Product gallery thumbnails ---------- */
.gallery-thumb {
  height: 76px; padding: 4px; border: 1px solid #e6e6e6; border-radius: 3px; background: #ffffff;
  cursor: pointer; opacity: 0.6; transition: opacity .15s ease, border-color .15s ease;
}
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb[aria-pressed="true"] { border: 2px solid #c9a227; opacity: 1; }
input[type="number"]::-webkit-inner-spin-button { opacity: 1; }
[data-qty] input::-webkit-inner-spin-button, [data-qty] input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
[data-qty] input { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Disabled "proceed" button ---------- */
.is-disabled { opacity: 0.5; pointer-events: none; }

/* ---------- Shipping preference radio cards ---------- */
.carrier-option {
  display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 4px; border: 2px solid #dddddd;
  background: #ffffff; cursor: pointer; font: 14px 'Open Sans', sans-serif; color: #333333; position: relative;
}
.carrier-dot { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #dddddd; display: flex; align-items: center; justify-content: center; }
.carrier-dot > span { width: 10px; height: 10px; border-radius: 50%; background: transparent; }
.carrier-option:has(input:checked) { border-color: #c9a227; background: #fbf8ee; }
.carrier-option:has(input:checked) .carrier-dot { border-color: #c9a227; }
.carrier-option:has(input:checked) .carrier-dot > span { background: #c9a227; }
.carrier-option:has(input:focus-visible) { outline: 3px solid #c9a227; outline-offset: 2px; }

/* ---------- FAQ accordion ---------- */
.faq-item { background: #ffffff; border: 1px solid #e6e6e6; border-radius: 4px; overflow: hidden; }
.faq-item[open] { border-color: #c9a227; }
.faq-item summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 18px 22px; cursor: pointer; font: 600 15px 'Open Sans', sans-serif; color: #0e2a5c; background: #ffffff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] summary { background: #fbf8ee; }
.faq-sign {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #0e2a5c; color: #ffffff;
  font: 600 18px Oswald, sans-serif; display: flex; align-items: center; justify-content: center;
}
.faq-sign::before { content: "+"; }
.faq-item[open] .faq-sign { background: #c9a227; color: #1a1a1a; }
.faq-item[open] .faq-sign::before { content: "−"; }
.faq-item[open] summary + div { background: #fbf8ee; padding-top: 0; }

/* ---------- Phone input (intl-tel-input) ---------- */
.iti { width: 100%; }
.iti input[type="tel"] { width: 100%; }
.iti__country-container { border-right: 1px solid #dddddd; }
.iti__selected-country { background: #f7f7f7 !important; border-radius: 3px 0 0 3px; }

/* ---------- Toast ("added to inquiry") ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 32px); background: #0e2a5c; color: #ffffff; border-left: 4px solid #c9a227;
  padding: 14px 18px; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  font: 600 13px 'Open Sans', sans-serif; animation: toast-in .25s ease;
}
.toast a { color: #f3d36b; font-weight: 700; white-space: nowrap; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .hero-slide { padding: 34px 26px 44px !important; }
  .hero-slide span[style*="44px"] { font-size: 34px !important; }
}

/* ---------- Print (order detail "Print / Download PDF") ---------- */
@media print {
  header, footer, .no-print, .toast { display: none !important; }
  body, body > div { background: #ffffff !important; }
}