/* ============================================================
   Leonarda's Antiques & Collectibles
   Light editorial theme — white background, gold accents
   v2.0 — magazine / crisp aesthetic
   ============================================================ */

/* ---------- 1. FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap');

/* ---------- 2. DESIGN TOKENS ---------- */
:root {
  /* Backgrounds */
  --leo-bg:           #ffffff;
  --leo-bg-alt:       #fafaf7;   /* very subtle warm off-white for cards/sections */
  --leo-bg-hover:     #f5f0e8;   /* light cream for hover states */
  --leo-bg-input:     #ffffff;

  /* Text */
  --leo-text:         #1a1a1a;   /* near-black, more friendly than pure black */
  --leo-text-muted:   #5a5a5a;
  --leo-text-dim:     #8a8a8a;
  --leo-text-faint:   #b0b0b0;

  /* Accents — gold matching the logo */
  --leo-gold:         #9a7a4a;   /* primary gold for accents/links */
  --leo-gold-light:   #c9a97a;   /* lighter gold for hover */
  --leo-gold-dark:    #6a5a3a;   /* deeper gold for emphasis */

  /* Borders */
  --leo-border:       #1a1a1a;   /* strong dividers */
  --leo-border-soft:  #e0ddd5;   /* subtle dividers */
  --leo-border-faint: #f0ede5;   /* very subtle */

  /* Type scale */
  --leo-font-serif:   'Cormorant Garamond', Garamond, Georgia, serif;
  --leo-font-sans:    'Jost', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- 3. GLOBAL RESET / BASE ---------- */
body {
  background: var(--leo-bg) !important;
  color: var(--leo-text) !important;
  font-family: var(--leo-font-sans) !important;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* Headings: elegant serif italic for the magazine feel */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--leo-font-serif) !important;
  font-weight: 400 !important;
  color: var(--leo-text) !important;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

h1, .h1 { font-size: 38px; font-style: italic; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 22px; }
h4, .h4 { font-size: 18px; }

h1 em, h2 em, h3 em { color: var(--leo-gold); font-style: italic; }

/* Links */
a {
  color: var(--leo-gold);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--leo-gold-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}

::selection { background: var(--leo-gold-light); color: var(--leo-bg); }

hr {
  border: none;
  border-top: 0.5px solid var(--leo-border-soft);
  margin: 24px 0;
}

/* ---------- 4. HEADER ---------- */
header,
#header,
.header {
  background: var(--leo-bg) !important;
  border-bottom: 1px solid var(--leo-border) !important;
  padding: 18px 0 !important;
}

/* Override Bootstrap header column widths.
   Default: logo col-sm-3, search col-sm-5, cart col-sm-4 — search dominates.
   We rebalance so the logo gets ~30%, search ~30%, cart ~40%.
   Targets the row inside #header > .container > .row */
#header > .container > .row > div,
header > .container > .row > div {
  display: flex !important;
  align-items: center !important;
}

/* Logo column — give it more room and centre vertically */
#header #logo,
header #logo,
#logo {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  /* Ensure the column itself doesn't constrain logo width */
  flex: 0 0 auto !important;
  max-width: none !important;
  overflow: visible !important;
}

#logo img,
.header-logo img {
  /* Generous size — antiques shop logos should breathe.
     CRITICAL: explicitly remove Bootstrap's max-width:100% so the logo
     can extend beyond its column width up to its max-height. */
  max-height: 110px;
  max-width: none !important;
  width: auto !important;
  height: auto;
  display: block;
}

/* Search column — cap the input width so it stops sprawling.
   The search field itself is inside #search; we constrain it directly. */
#search {
  max-width: 360px !important;
  margin: 0 auto;
}

/* Cart column — keep tight on the right */
#cart {
  display: flex !important;
  justify-content: flex-end;
}

/* Top-level navigation */
#menu,
.menu,
nav.navbar {
  background: transparent !important;
  border: none !important;
  border-top: 0.5px solid var(--leo-border-soft) !important;
  border-bottom: 0.5px solid var(--leo-border-soft) !important;
  min-height: auto !important;
  margin-top: 8px;
}

#menu .nav > li > a,
.menu a,
nav .nav-link,
.navbar-nav > li > a {
  color: var(--leo-text) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  padding: 14px 18px !important;
  background: transparent !important;
  border: none !important;
}
#menu .nav > li > a:hover,
.menu a:hover,
nav .nav-link:hover,
.navbar-nav > li > a:hover {
  color: var(--leo-gold) !important;
  background: transparent !important;
}

/* Search bar — make subtle, no clashing button */
#search,
.search {
  position: relative;
}
#search input[type="text"],
.search input[type="text"] {
  background: var(--leo-bg) !important;
  border: 0.5px solid var(--leo-border-soft) !important;
  color: var(--leo-text) !important;
  border-radius: 0 !important;
  font-family: var(--leo-font-sans);
  font-size: 13px;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
#search input[type="text"]:focus,
.search input[type="text"]:focus {
  border-color: var(--leo-gold) !important;
  outline: none;
  box-shadow: none !important;
}
/* Tame the white square search button */
#search button,
#search .btn,
.search button,
.search .btn,
.input-group-btn .btn {
  background: var(--leo-bg) !important;
  border: 0.5px solid var(--leo-border-soft) !important;
  border-left: none !important;
  border-radius: 0 !important;
  color: var(--leo-text-muted) !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
#search button:hover,
.search button:hover {
  color: var(--leo-gold) !important;
  border-color: var(--leo-gold) !important;
}

/* Cart button in header — quieter, text-style not big block */
#cart > .btn,
.header-cart .btn,
#cart-total .btn,
#cart .btn {
  background: transparent !important;
  border: none !important;
  color: var(--leo-text) !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  padding: 10px 16px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}
#cart > .btn:hover,
.header-cart .btn:hover,
#cart .btn:hover {
  color: var(--leo-gold) !important;
  background: transparent !important;
}

/* ---------- 5. BUTTONS ---------- */
.btn,
.btn-default,
input[type="submit"],
input[type="button"],
button.btn {
  font-family: var(--leo-font-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  font-weight: 400 !important;
  padding: 12px 28px !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease;
  box-shadow: none !important;
}

.btn-primary,
.btn-success,
.btn-info {
  background: var(--leo-text) !important;
  color: var(--leo-bg) !important;
  border-color: var(--leo-text) !important;
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover {
  background: var(--leo-gold) !important;
  border-color: var(--leo-gold) !important;
  color: var(--leo-bg) !important;
}

.btn-default,
.btn-secondary,
.btn-outline {
  background: transparent !important;
  color: var(--leo-text) !important;
  border-color: var(--leo-border) !important;
}
.btn-default:hover,
.btn-secondary:hover,
.btn-outline:hover {
  background: var(--leo-text) !important;
  color: var(--leo-bg) !important;
  border-color: var(--leo-text) !important;
}

.btn-danger {
  background: transparent !important;
  border-color: #a04040 !important;
  color: #a04040 !important;
}

/* ---------- 6. FORMS / INPUTS ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background: var(--leo-bg) !important;
  border: 0.5px solid var(--leo-border-soft) !important;
  color: var(--leo-text) !important;
  border-radius: 0 !important;
  font-family: var(--leo-font-sans) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--leo-gold) !important;
  outline: none !important;
  box-shadow: none !important;
}
.form-control::placeholder { color: var(--leo-text-faint); }

label, .control-label {
  color: var(--leo-text-muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400 !important;
}

/* ---------- 7. PRODUCT CARDS ---------- */
.product-thumb,
.product-layout .product-thumb {
  background: var(--leo-bg) !important;
  border: none !important;
  border-bottom: 0.5px solid var(--leo-border-soft) !important;
  border-radius: 0 !important;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  padding-bottom: 16px;
}

.product-thumb .image {
  background: var(--leo-bg-alt);
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}
.product-thumb .image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.product-thumb:hover .image img { transform: scale(1.03); }

.product-thumb .caption {
  padding: 0 !important;
  text-align: left !important;
}
.product-thumb .caption h4,
.product-thumb .caption .name {
  font-family: var(--leo-font-serif) !important;
  font-size: 18px !important;
  font-style: italic;
  font-weight: 400 !important;
  color: var(--leo-text) !important;
  margin-bottom: 6px !important;
  line-height: 1.3;
}
.product-thumb .caption h4 a {
  color: var(--leo-text) !important;
}
.product-thumb .caption h4 a:hover {
  color: var(--leo-gold) !important;
  text-decoration: none;
}

.product-thumb .description { display: none; }

.product-thumb .price,
.product-thumb .caption .price {
  font-family: var(--leo-font-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--leo-text-muted) !important;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.price-old, .product-thumb .price-old {
  color: var(--leo-text-faint) !important;
  text-decoration: line-through;
  font-size: 12px;
  margin-right: 8px;
}
.price-new { color: var(--leo-text) !important; font-weight: 500; }

/* Hover overlay buttons on cards */
.product-thumb .button-group {
  position: absolute;
  inset: 0 0 auto 0;
  bottom: auto;
  top: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.25s ease;
  border: none !important;
  padding: 0 !important;
}
.product-thumb .image { position: relative; }
.product-thumb:hover .button-group { opacity: 1; }
.product-thumb .button-group button {
  background: var(--leo-text);
  color: var(--leo-bg);
  border: none;
  padding: 10px 24px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--leo-font-sans);
  font-weight: 400;
}
.product-thumb .button-group button:hover {
  background: var(--leo-gold);
}

.product-layout {
  padding: 0 8px !important;
}

/* ---------- 8. PRODUCT DETAIL PAGE ---------- */
#product-product .row { background: var(--leo-bg); }

.thumbnails > li > a,
.thumbnail {
  background: var(--leo-bg-alt) !important;
  border: 0.5px solid var(--leo-border-soft) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#product h1 {
  font-size: 36px;
  margin-bottom: 8px;
  font-style: italic;
}

.rating .fa-stack { color: var(--leo-gold); }

#product-product .price,
.product-info .price {
  font-family: var(--leo-font-serif) !important;
  font-size: 28px !important;
  font-style: italic;
  color: var(--leo-text) !important;
  margin: 16px 0 !important;
}

#product-product input[name="quantity"] {
  background: var(--leo-bg) !important;
  border: 0.5px solid var(--leo-border-soft) !important;
  width: 80px;
  text-align: center;
}

/* Spec / attribute table */
#tab-specification table,
.attribute-table {
  width: 100%;
  background: transparent !important;
  border-collapse: collapse;
}
#tab-specification table td,
.attribute-table td {
  border: none !important;
  border-bottom: 0.5px solid var(--leo-border-soft) !important;
  padding: 12px 0 !important;
  color: var(--leo-text);
}
#tab-specification table td:first-child {
  color: var(--leo-text-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: 40%;
}

/* Tabs */
.nav-tabs {
  border-bottom: 0.5px solid var(--leo-border-soft) !important;
}
.nav-tabs > li > a,
.nav-tabs .nav-link {
  color: var(--leo-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 14px 0 !important;
  margin-right: 32px !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li > a:hover,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: var(--leo-text) !important;
  border-bottom-color: var(--leo-text) !important;
  background: transparent !important;
}

/* ---------- 9. SIDEBAR / FILTERS ---------- */
.list-group {
  background: transparent !important;
  border: none !important;
}
.list-group-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 0.5px solid var(--leo-border-soft) !important;
  color: var(--leo-text-muted) !important;
  padding: 12px 0 !important;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 0 !important;
}
.list-group-item:hover {
  color: var(--leo-gold) !important;
  background: transparent !important;
}
.list-group-item.active {
  color: var(--leo-text) !important;
  background: transparent !important;
  font-weight: 500;
}

/* Filter module */
#filter-group input[type="checkbox"] {
  accent-color: var(--leo-text);
  margin-right: 8px;
}
#filter-group label {
  font-size: 13px;
  color: var(--leo-text);
  text-transform: none;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-weight: 300;
}
#filter-group label:hover { color: var(--leo-gold); }
#filter-group .panel,
#filter-group .card {
  background: transparent !important;
  border: none !important;
}
#filter-group .panel-heading,
#filter-group .card-header {
  font-family: var(--leo-font-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--leo-text);
  background: transparent !important;
  border-bottom: 0.5px solid var(--leo-border-soft) !important;
  padding: 14px 0 !important;
  text-transform: none;
}

/* ---------- 10. BREADCRUMBS ---------- */
.breadcrumb {
  background: transparent !important;
  border-bottom: 0.5px solid var(--leo-border-soft);
  padding: 14px 0 !important;
  margin-bottom: 28px !important;
  font-size: 11px;
  color: var(--leo-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
}
.breadcrumb > li > a { color: var(--leo-text-muted); }
.breadcrumb > li > a:hover { color: var(--leo-gold); }
.breadcrumb > li + li::before {
  content: '/';
  color: var(--leo-text-faint);
  padding: 0 8px;
}

/* ---------- 11. CART / CHECKOUT TABLES ---------- */
.table {
  background: transparent !important;
  color: var(--leo-text) !important;
}
.table > thead > tr > th {
  background: var(--leo-bg-alt) !important;
  border: none !important;
  border-bottom: 1px solid var(--leo-border) !important;
  color: var(--leo-text) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500 !important;
  padding: 14px !important;
}
.table > tbody > tr > td {
  border-color: var(--leo-border-soft) !important;
  padding: 16px 14px !important;
  vertical-align: middle;
}
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
  border-color: var(--leo-border-soft) !important;
}

/* ---------- 12. ALERTS ---------- */
.alert {
  border-radius: 0 !important;
  border: none !important;
  border-left: 2px solid var(--leo-gold) !important;
  background: var(--leo-bg-alt) !important;
  color: var(--leo-text) !important;
  padding: 16px 20px !important;
  font-size: 13px;
}
.alert-success { border-left-color: #5a8a5a !important; }
.alert-warning { border-left-color: var(--leo-gold) !important; }
.alert-danger  { border-left-color: #a04040 !important; }
.alert-info    { border-left-color: #4a7a9a !important; }

/* ---------- 13. PAGINATION ---------- */
.pagination > li > a,
.pagination > li > span {
  background: transparent !important;
  border: 0.5px solid var(--leo-border-soft) !important;
  color: var(--leo-text) !important;
  margin: 0 2px;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  font-size: 13px;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > li > a:hover {
  background: var(--leo-text) !important;
  border-color: var(--leo-text) !important;
  color: var(--leo-bg) !important;
}

/* ---------- 14. ACCOUNT AREA ---------- */
#column-right .list-group {
  background: var(--leo-bg-alt) !important;
  padding: 8px;
}
#column-right .list-group-item {
  padding: 12px 16px !important;
}

/* ---------- 15. FOOTER ---------- */
footer {
  background: var(--leo-bg) !important;
  border-top: 1px solid var(--leo-border) !important;
  padding: 56px 0 32px !important;
  margin-top: 80px;
  color: var(--leo-text) !important;
}
footer h5 {
  font-family: var(--leo-font-serif) !important;
  font-size: 16px !important;
  font-style: italic;
  color: var(--leo-text) !important;
  margin-bottom: 18px !important;
}
footer ul { padding: 0; list-style: none; }
footer ul li { padding: 5px 0; }
footer a {
  color: var(--leo-text-muted) !important;
  font-size: 13px;
  letter-spacing: 0.04em;
}
footer a:hover {
  color: var(--leo-gold) !important;
  text-decoration: none;
}

#powered {
  text-align: center;
  padding: 24px 0;
  border-top: 0.5px solid var(--leo-border-soft);
  margin-top: 40px;
  color: var(--leo-text-faint);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ---------- 16. UTILITIES ---------- */
.panel, .well, .input-group-addon, .modal-content, .dropdown-menu {
  border-radius: 0 !important;
  background: var(--leo-bg) !important;
  color: var(--leo-text) !important;
  border-color: var(--leo-border-soft) !important;
}

.modal-header { border-color: var(--leo-border-soft) !important; }
.modal-footer { border-color: var(--leo-border-soft) !important; }

.dropdown-menu > li > a {
  color: var(--leo-text) !important;
  padding: 10px 16px !important;
  font-size: 13px;
}
.dropdown-menu > li > a:hover {
  background: var(--leo-bg-hover) !important;
  color: var(--leo-gold) !important;
}

.badge {
  background: var(--leo-text) !important;
  color: var(--leo-bg) !important;
  border-radius: 0 !important;
  font-size: 10px !important;
  padding: 3px 7px !important;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--leo-bg-alt); }
::-webkit-scrollbar-thumb { background: var(--leo-border-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--leo-gold); }

/* ---------- 17. KILL DEFAULT WHITE BOXES ----------
   The OpenCart default modules (slideshow, brand carousel, etc.) often render
   with their own white backgrounds, borders, and box shadows that fight an
   editorial layout. These rules tame them. */
.swiper-viewport,
#carousel0,
.brand-carousel,
.module .panel,
.module .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---------- 18. RESPONSIVE LAYOUT & TYPOGRAPHY ----------
   OpenCart's default theme uses Bootstrap's .container which caps at 1140px.
   That looks cramped on modern monitors. We progressively widen it as the
   viewport grows, and scale typography to feel right at each size.

   Breakpoint strategy:
     =  768px : mobile        (base 14px)
     =  992px : tablet        (base 16px)
     = 1280px : laptop        — container expands to 1200px (base 16px)
     = 1440px : desktop       — container expands to 1400px (base 17px)
     = 1680px : large desktop — container expands to 1600px (base 17px)
     = 2000px : ultra-wide    — container expands to 1920px (base 18px)
*/

/* ---- Mobile (=768px) ---- */
@media (max-width: 768px) {
  body { font-size: 14px; }
  h1, .h1 { font-size: 28px; }
  h2, .h2 { font-size: 22px; }
  h3, .h3 { font-size: 18px; }

  #header { padding: 14px 0 !important; }
  #logo img { max-height: 64px; }

  /* On touch devices, hover overlays don't work — show buttons inline */
  .product-thumb .button-group {
    position: static;
    background: transparent;
    opacity: 1;
    flex-direction: row;
    height: auto;
    padding: 12px 0 !important;
    justify-content: flex-start;
    gap: 8px;
  }
  .product-thumb .button-group button {
    flex: 1;
    padding: 10px 12px;
    font-size: 10px;
  }

  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Mobile nav: stack menu items */
  #menu .nav { flex-direction: column; }
  #menu .nav > li > a { padding: 10px 16px !important; }
}

/* ---- Tablet & up (=992px) ---- */
@media (min-width: 992px) {
  body { font-size: 16px; line-height: 1.7; }
  .container { padding-left: 24px !important; padding-right: 24px !important; }
  #logo img { max-height: 130px; }
}

/* ---- Laptop (=1280px) ---- */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px !important;
    width: 100% !important;
  }
  body { font-size: 16px; }
  h1, .h1 { font-size: 44px; }
  h2, .h2 { font-size: 34px; }
  h3, .h3 { font-size: 26px; }
  #logo img { max-height: 150px; }
  .product-thumb .caption h4,
  .product-thumb .caption .name { font-size: 20px !important; }
  .product-thumb .price { font-size: 15px !important; }
  #menu .nav > li > a { padding: 16px 22px !important; font-size: 12px !important; }
}

/* ---- Desktop (=1440px) ---- */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px !important;
  }
  body { font-size: 17px; line-height: 1.75; }
  h1, .h1 { font-size: 50px; }
  h2, .h2 { font-size: 38px; }
  #logo img { max-height: 170px; }
}

/* ---- Large desktop (=1680px) ---- */
@media (min-width: 1680px) {
  .container {
    max-width: 1600px !important;
  }
  body { font-size: 17px; }
  h1, .h1 { font-size: 58px; }
  h2, .h2 { font-size: 42px; }
  h3, .h3 { font-size: 28px; }
  #logo img { max-height: 190px; }
  .product-thumb .button-group button {
    padding: 12px 32px;
    font-size: 12px;
  }
}

/* ---- Ultra-wide (=2000px, e.g. 2560px QHD monitors) ---- */
@media (min-width: 2000px) {
  .container {
    max-width: 1920px !important;
  }
  body { font-size: 18px; line-height: 1.8; }
  h1, .h1 { font-size: 64px; }
  h2, .h2 { font-size: 48px; }
  h3, .h3 { font-size: 32px; }
  #logo img { max-height: 220px; }
  .product-thumb .caption h4,
  .product-thumb .caption .name { font-size: 22px !important; }
  .product-thumb .price { font-size: 16px !important; }
  #menu .nav > li > a {
    padding: 18px 26px !important;
    font-size: 13px !important;
    letter-spacing: 0.22em !important;
  }
  /* Search field stays compact even on huge screens */
  #search { max-width: 400px !important; }
}

/* ---------- 19. ACCESSIBILITY ---------- */
*:focus-visible {
  outline: 1px solid var(--leo-gold) !important;
  outline-offset: 2px;
}