:root {
  color-scheme: dark;
  --bg: #070707;
  --panel: #0f0f0f;
  --card: #161616;
  --card-soft: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --muted: #a6a6a6;
  --gold: #daa520;
  --gold-strong: #d4af37;
  --danger: #ff4d4d;
  --success: #3bd17f;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --radius: 18px;
}

/*
 * Final isolated mobile home canvas.
 *
 * The server may contain legacy template settings and the app is also used on
 * tablets between 720px and 899px.  These rules deliberately own the complete
 * mobile home coordinate system so desktop/product rules cannot shrink or move
 * its artwork and hotspots.
 */
@media (max-width: 899px) {
  .app-frame {
    display: block !important;
    width: 100% !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    background: #000 !important;
  }

  .phone.exact-phone.desktop-home-phone {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: none !important;
  }

  .desktop-home-phone .desktop-home-exact-screen {
    display: none !important;
  }

  .desktop-home-phone .mobile-home-v2.home-exact-screen {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 941 / 1672 !important;
    overflow: hidden !important;
    line-height: 0 !important;
    background: #000 !important;
  }

  .mobile-home-v2 > .home-exact-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: fill !important;
  }

  .mobile-home-v2 > .home-exact-hotspots {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .mobile-home-v2 .exact-category {
    position: absolute !important;
    display: block !important;
    width: 35.5% !important;
    height: 22.8% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: clamp(14px, 3.2vw, 25px) !important;
    transform: none !important;
  }

  .mobile-home-v2 .exact-category-1 { left: 13.3% !important; top: 22% !important; }
  .mobile-home-v2 .exact-category-2 { left: 51.2% !important; top: 22% !important; }
  .mobile-home-v2 .exact-category-3 { left: 13.3% !important; top: 46.8% !important; }
  .mobile-home-v2 .exact-category-4 { left: 51.2% !important; top: 46.8% !important; }

  .mobile-home-v2 .exact-category > img {
    position: absolute !important;
    inset: 3% !important;
    display: block !important;
    width: 94% !important;
    height: 94% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: clamp(12px, 2.8vw, 22px) !important;
    object-fit: cover !important;
  }

  .mobile-home-v2 .exact-category > span {
    display: none !important;
  }

  .mobile-home-v2 .exact-provider-logo-dock {
    position: absolute !important;
    left: 15.5% !important;
    top: 70.3% !important;
    width: 69% !important;
    height: 8.8% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3.2% !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 2.5% 3% !important;
    overflow: visible !important;
    border: 1px solid transparent !important;
    border-radius: clamp(15px, 3vw, 24px) !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate !important;
  }

  .mobile-home-v2 .exact-provider-logo-dock::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    top: 12% !important;
    right: 0 !important;
    bottom: -9% !important;
    left: 0 !important;
    border: 1px solid rgba(244, 189, 67, .5) !important;
    border-radius: clamp(15px, 3vw, 24px) !important;
    background: rgba(4, 4, 3, .84) !important;
    box-shadow: 0 0 13px rgba(244, 189, 67, .28), inset 0 0 13px rgba(244, 189, 67, .08) !important;
    pointer-events: none !important;
  }

  .mobile-home-v2 .exact-provider-logo-dock > .exact-provider {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(2px, .7vw, 5px) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .mobile-home-v2 .exact-provider .provider-button-logo,
  .mobile-home-v2 .exact-provider .provider-button-fallback {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    max-width: none !important;
    border: 1px solid rgba(255, 232, 178, .78) !important;
    border-radius: 22% !important;
    background: transparent !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .34), 0 0 10px rgba(218, 164, 54, .16) !important;
    object-fit: cover !important;
  }

  .mobile-home-v2 .exact-provider .provider-button-label {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    clip: auto !important;
    color: #e8c27b !important;
    font-size: clamp(8px, 2.25vw, 14px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .mobile-home-v2 .exact-provider .provider-button-arrow {
    display: none !important;
  }
}

/* Unified loading screen used during first load and SPA route changes. */
@keyframes site-loader-pulse {
  0%, 100% {
    transform: scale(.96);
    filter: brightness(.88);
    box-shadow: 0 0 0 1px rgba(236, 184, 55, .32), 0 0 18px rgba(220, 158, 28, .18);
  }
  50% {
    transform: scale(1.025);
    filter: brightness(1.12);
    box-shadow: 0 0 0 1px rgba(255, 220, 122, .82), 0 0 42px rgba(229, 170, 39, .48);
  }
}

.site-loading {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(192, 132, 20, .15), transparent 27%),
    #030504;
  color: #dfb75c;
  text-align: center;
}

.site-loading-halo {
  width: clamp(120px, 24vw, 190px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(225, 174, 45, .5);
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  animation: site-loader-pulse 1.65s ease-in-out infinite;
}

.site-loading-halo img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .72));
}

.site-loading > span {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
  .site-loading-halo { animation: none; }
}

/* Golden showcase product template */
.product-template-6,.desktop-product-template-6{min-height:100dvh;padding:0 0 34px;background:radial-gradient(circle at 50% 0,rgba(188,126,20,.08),transparent 32%),#050706;color:#e2b150}.product6-header{min-height:88px;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;padding:8px 20px;border-bottom:1px solid rgba(226,171,56,.65);background:rgba(2,5,4,.95)}.product6-header .desktop-restaurant-logo{justify-self:center;width:min(190px,40vw);max-height:70px;object-fit:contain}.product6-header .desktop-restaurant-name{justify-self:center;color:#d9a43a;font-size:30px}.product6-header-button{width:48px;height:48px;display:grid;place-items:center;border:0;background:transparent;color:#dda83f;font-size:30px}.product6-header-button:last-child{justify-self:end}.product6-header-button svg{width:31px;height:31px}.product6-tabs{width:min(100% - 32px,900px);display:flex;gap:8px;margin:16px auto 0;padding:4px;overflow-x:auto}.product6-tabs a{flex:1 0 86px;min-height:38px;display:grid;place-items:center;padding:6px 12px;border:1px solid rgba(218,164,56,.35);border-radius:999px;background:#090c0b;color:#cfa54f;font-weight:800}.product6-tabs a.active{border-color:#e2b150;background:linear-gradient(135deg,#e6b64d,#9b6110);color:#100e09;box-shadow:0 0 18px rgba(221,168,63,.23)}.product6-toolbar{width:min(100% - 32px,900px);min-height:74px;display:grid;grid-template-columns:88px 1fr 88px;align-items:center;margin:4px auto 0}.product6-toolbar h1{margin:0;text-align:center;color:#dda83f;font-size:clamp(22px,5vw,35px);font-weight:800}.product6-toolbar h1:before,.product6-toolbar h1:after{content:"✦";display:inline-block;margin:0 12px;color:#d89f32;font-size:.55em}.product6-layout-controls{display:flex;gap:5px;direction:ltr}.product6-layout-controls button{width:38px;height:38px;border:1px solid rgba(221,168,63,.35);border-radius:9px;background:#0a0d0c;color:#b9934a;cursor:pointer}.product6-layout-controls button.active{border-color:#dda83f;background:rgba(221,168,63,.18);color:#f1c767;box-shadow:0 0 13px rgba(221,168,63,.2)}.product6-list{width:min(100% - 24px,900px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:0 auto}.product6-card{min-width:0;overflow:hidden;border:1.5px solid #c88d22;border-radius:17px;background:linear-gradient(180deg,#090b0a,#050706);box-shadow:0 10px 25px rgba(0,0,0,.35)}.product6-image{width:100%;height:190px;display:block;padding:0;overflow:hidden;border:0;border-bottom:1px solid rgba(200,141,34,.55);background:#080a09;cursor:zoom-in}.product6-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s ease,filter .3s ease}.product6-image:hover img,.product6-image:focus-visible img{filter:brightness(1.08);transform:scale(1.025)}.product6-copy{min-height:94px;display:grid;align-content:center;justify-items:center;gap:8px;padding:12px 10px;text-align:center}.product6-copy h2{margin:0;color:#e0ae4b;font-size:clamp(16px,3.8vw,24px);line-height:1.45}.product6-copy strong{color:#e0ae4b;font-size:clamp(15px,3.4vw,21px);font-weight:500}.product6-copy strong span{font-size:.8em}.product6-list.is-list{grid-template-columns:1fr}.product6-list.is-list .product6-card{display:grid;grid-template-columns:58% 42%;min-height:190px}.product6-list.is-list .product6-image{height:100%;border:0;border-left:1px solid rgba(200,141,34,.55)}.product6-list.is-list .product6-copy{min-height:190px;padding:18px}.desktop-product-template-6{padding-bottom:60px}.desktop-product-template-6 .product6-header{min-height:126px;padding-inline:5vw}.desktop-product-template-6 .product6-header .desktop-restaurant-logo{width:240px;max-height:100px}.desktop-product-template-6 .product6-tabs,.desktop-product-template-6 .product6-toolbar,.desktop-product-template-6 .product6-list{width:min(100% - 80px,1200px)}.desktop-product-template-6 .product6-list{gap:20px}.desktop-product-template-6 .product6-image{height:300px}.desktop-product-template-6 .product6-copy{min-height:125px}.desktop-product-template-6 .product6-list.is-list .product6-card{min-height:250px}.desktop-product-template-6 .product6-list.is-list .product6-image,.desktop-product-template-6 .product6-list.is-list .product6-copy{height:250px;min-height:250px}@media(max-width:480px){.product6-header{min-height:76px;grid-template-columns:48px 1fr 48px;padding:6px 12px}.product6-header-button{width:42px;height:42px}.product6-tabs{margin-top:10px}.product6-toolbar{grid-template-columns:76px 1fr 76px;min-height:64px}.product6-toolbar h1:before,.product6-toolbar h1:after{margin:0 6px}.product6-layout-controls button{width:34px;height:34px}.product6-list{gap:9px}.product6-image{height:128px}.product6-copy{min-height:78px;padding:8px 6px}.product6-list.is-list .product6-card{grid-template-columns:56% 44%;min-height:150px}.product6-list.is-list .product6-image,.product6-list.is-list .product6-copy{height:150px;min-height:150px}}

/* Unified responsive admin redesign */
.admin-template-4,
.admin-template-5 { width:100%; max-width:none; margin:0; --admin-bg:#0b0d0d; --admin-panel:#131616; --admin-panel-2:#191c1b; --admin-border:rgba(231,185,69,.2); --admin-gold:#e7b945; --admin-text:#f7f2e5; --admin-muted:#a9a394; }
.admin-template-4 .admin-screen,.admin-template-5 .admin-screen { min-height:100dvh; padding:0; border-radius:0; background:var(--admin-bg); }
.admin-template-4 .admin-main-content,.admin-template-5 .admin-main-content { display:grid; gap:16px; min-width:0; padding:0 16px 32px; }
.admin-template-4 .admin-header,.admin-template-5 .admin-header { position:sticky; z-index:20; top:0; min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 -16px; padding:10px 16px; border-bottom:1px solid var(--admin-border); background:rgba(11,13,13,.94); backdrop-filter:blur(14px); }
.admin-template-4 .admin-title-block,.admin-template-5 .admin-title-block { display:grid; justify-items:start; gap:2px; }
.admin-template-4 .admin-kicker,.admin-template-5 .admin-kicker { color:var(--admin-text); font-size:18px; font-weight:800; }
.admin-template-4 .admin-title-block small,.admin-template-5 .admin-title-block small { color:var(--admin-muted); font-size:11px; }
.admin-template-4 .admin-actions,.admin-template-5 .admin-actions { display:flex; gap:8px; order:initial; }
.admin-template-4 .admin-actions .button,.admin-template-5 .admin-actions .button { min-height:40px; padding:8px 12px; border-radius:10px; font-size:12px; }
.admin-template-4 .admin-mobile-summary,.admin-template-5 .admin-mobile-summary { display:grid; grid-template-columns:repeat(4,minmax(84px,1fr)); gap:8px; margin:4px 0 0; padding:4px 0 8px; overflow-x:auto; scrollbar-width:thin; }
.admin-template-4 .admin-mobile-summary button,.admin-template-5 .admin-mobile-summary button { min-height:82px; display:grid; place-items:center; align-content:center; gap:5px; padding:9px 7px; border:1px solid var(--admin-border); border-radius:12px; background:var(--admin-panel); color:var(--admin-text); cursor:pointer; }
.admin-template-4 .admin-mobile-summary button.active,.admin-template-5 .admin-mobile-summary button.active { border-color:var(--admin-gold); background:linear-gradient(145deg,rgba(231,185,69,.2),var(--admin-panel)); }
.admin-template-4 .admin-mobile-summary span,.admin-template-5 .admin-mobile-summary span { color:var(--admin-gold); font-size:22px; }
.admin-template-4 .admin-mobile-summary strong,.admin-template-5 .admin-mobile-summary strong { color:var(--admin-text); font-size:12px; }
.admin-template-4 .admin-mobile-summary small,.admin-template-5 .admin-mobile-summary small { display:none; }
.admin-template-4 .admin-section,.admin-template-5 .admin-section { margin:0; overflow:visible; border:1px solid var(--admin-border); border-radius:16px; background:var(--admin-panel); box-shadow:0 14px 40px rgba(0,0,0,.18); }
.admin-template-4 .admin-section h2,.admin-template-5 .admin-section h2 { padding:15px 16px; border-bottom:1px solid var(--admin-border); color:var(--admin-gold); font-size:17px; }
.admin-template-4 .admin-section h2::before,.admin-template-4 .admin-section h2::after,.admin-template-5 .admin-section h2::before,.admin-template-5 .admin-section h2::after { content:none; }
.admin-template-4 .admin-section-toggle small,.admin-template-5 .admin-section-toggle small { display:none; }
.admin-template-4 .admin-card,.admin-template-5 .admin-card { padding:16px; }
.admin-template-4 .form-grid.two,.admin-template-5 .form-grid.two,.admin-template-4 .editable-row .form-grid.two,.admin-template-5 .editable-row .form-grid.two,.admin-template-4 .item-editor .form-grid.two,.admin-template-5 .item-editor .form-grid.two,.graphical-item-details .form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.admin-template-4 .field input,.admin-template-4 .field textarea,.admin-template-4 .field select,.admin-template-5 .field input,.admin-template-5 .field textarea,.admin-template-5 .field select { min-height:46px; border-color:var(--admin-border); border-radius:10px; background:#0d1010; }
.admin-template-4 .editable-row,.admin-template-4 .item-editor,.admin-template-5 .editable-row,.admin-template-5 .item-editor { padding:14px; border:1px solid var(--admin-border); border-radius:13px; background:var(--admin-panel-2); }
.admin-template-4 .image-preview,.admin-template-5 .image-preview { min-height:110px; border-radius:12px; background:#090b0b; }
.admin-template-4 .image-preview img,.admin-template-5 .image-preview img { width:100%; height:130px; object-fit:contain; }
.admin-template-4 .admin-tabs,.admin-template-5 .admin-tabs { position:sticky; z-index:10; top:70px; padding:10px; border:1px solid var(--admin-border); border-radius:12px; background:rgba(19,22,22,.94); backdrop-filter:blur(10px); overflow-x:auto; }
.admin-template-4 .admin-tab,.admin-template-5 .admin-tab { flex:0 0 auto; min-height:42px; border-radius:9px; }
@media (max-width:700px) {
  .admin-template-4 .admin-main-content,.admin-template-5 .admin-main-content { padding:0 10px 24px; }
  .admin-template-4 .admin-header,.admin-template-5 .admin-header { margin:0 -10px; padding:9px 12px; }
  .admin-template-4 .admin-title-block small,.admin-template-5 .admin-title-block small,.admin-template-4 .admin-actions button,.admin-template-5 .admin-actions button { display:none; }
  .admin-template-4 .admin-actions .button,.admin-template-5 .admin-actions .button { min-height:38px; padding:7px 10px; }
  .admin-template-4 .admin-mobile-summary,.admin-template-5 .admin-mobile-summary { grid-template-columns:repeat(4,90px); }
  .admin-template-4 .form-grid.two,.admin-template-5 .form-grid.two,.admin-template-4 .editable-row .form-grid.two,.admin-template-5 .editable-row .form-grid.two,.admin-template-4 .item-editor .form-grid.two,.admin-template-5 .item-editor .form-grid.two,.graphical-item-editor,.graphical-item-details .form-grid.two { grid-template-columns:1fr; }
  .image-upload-row { grid-template-columns:minmax(0,1fr) auto; }
  .admin-template-4 .admin-card,.admin-template-5 .admin-card { padding:12px; }
  .admin-template-4 .editable-row,.admin-template-4 .item-editor,.admin-template-5 .editable-row,.admin-template-5 .item-editor { padding:11px; }
}
@media (min-width:980px) {
  .admin-template-4 .admin-screen,.admin-template-5 .admin-screen { display:grid; grid-template-columns:240px minmax(0,1fr); }
  .admin-template-4 .admin-graphic-sidebar,.admin-template-5 .admin-graphic-sidebar { position:sticky; top:0; height:100dvh; display:grid; grid-template-rows:auto 1fr auto; gap:24px; padding:24px 16px; border-left:1px solid var(--admin-border); background:#090b0b; }
  .admin-template-4 .admin-graphic-brand,.admin-template-5 .admin-graphic-brand { display:grid; place-items:center; min-height:110px; }
  .admin-template-4 .admin-graphic-brand .admin-logo,.admin-template-5 .admin-graphic-brand .admin-logo { width:96px; max-height:96px; object-fit:contain; }
  .admin-template-4 .admin-graphic-sidebar nav,.admin-template-5 .admin-graphic-sidebar nav { display:grid; align-content:start; gap:8px; }
  .admin-template-4 .admin-graphic-sidebar button,.admin-template-5 .admin-graphic-sidebar button { min-height:50px; display:flex; align-items:center; gap:10px; padding:10px 13px; border:1px solid transparent; border-radius:11px; background:transparent; color:var(--admin-muted); cursor:pointer; text-align:right; }
  .admin-template-4 .admin-graphic-sidebar button.active,.admin-template-5 .admin-graphic-sidebar button.active { border-color:var(--admin-border); background:rgba(231,185,69,.12); color:var(--admin-text); }
  .admin-template-4 .admin-graphic-sidebar-footer,.admin-template-5 .admin-graphic-sidebar-footer { color:var(--admin-muted); font-size:12px; }
  .admin-template-4 .admin-main-content,.admin-template-5 .admin-main-content { padding:0 28px 40px; }
  .admin-template-4 .admin-header,.admin-template-5 .admin-header { margin:0 -28px; padding:12px 28px; }
  .admin-template-4 .admin-mobile-summary,.admin-template-5 .admin-mobile-summary { display:none; }
  .admin-template-4 .admin-card>.form-grid.two,.admin-template-5 .admin-card>.form-grid.two { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(circle at 50% -20%, rgba(218, 165, 32, 0.12), transparent 32%), var(--bg);
  color: var(--text);
  font-family: Tahoma, Arial, sans-serif;
}

body {
  min-height: 100dvh;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

.app-frame {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55)),
    var(--desktop-bg, transparent);
  background-size: cover;
  background-position: center;
}

.phone {
  width: min(100%, 430px);
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: var(--shadow);
}

.phone.exact-phone {
  min-height: auto;
  background: #000000;
}

@media (min-width: 720px) {
  .phone {
    min-height: 920px;
    margin: 24px 0;
    border: 1px solid var(--line);
    border-radius: 28px;
  }

  .phone.exact-phone {
    min-height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
}

.screen {
  min-height: 100dvh;
  padding-bottom: 96px;
  background: #0a0a0a;
}

.loading,
.empty-state,
.error-state {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  color: var(--muted);
}

.error-state strong {
  color: var(--text);
  display: block;
  margin-bottom: 10px;
}

.home-hero {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 28px 22px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.home-hero::before,
.menu-button-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  filter: saturate(0.9);
  z-index: -2;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  z-index: -1;
}

.brand-logo {
  width: min(78%, 300px);
  max-height: 230px;
  object-fit: contain;
}

.brand-fallback {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.brand-fallback strong {
  color: var(--gold);
  font-size: 34px;
}

.brand-fallback span {
  color: var(--text);
  font-size: 13px;
}

.home-exact-screen {
  position: relative;
  width: 100%;
  background: #000000;
  line-height: 0;
}

.home-exact-image {
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.home-exact-hotspots {
  position: absolute;
  inset: 0;
}

.exact-hotspot {
  position: absolute;
  display: block;
  border-radius: 26px;
  outline: 0;
  cursor: pointer;
  transition:
    box-shadow 0.18s ease,
    filter 0.18s ease,
    transform 0.18s ease;
}

.exact-hotspot:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 230, 160, 0.9), 0 0 22px rgba(212, 175, 55, 0.85);
}

.exact-hotspot span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.exact-category {
  left: 13.7%;
  width: 72.7%;
  height: 10.55%;
}

.exact-category-1 {
  top: 32.05%;
}

.exact-category-2 {
  top: 44.12%;
}

.exact-category-3 {
  top: 56.18%;
}

.exact-category-4 {
  top: 68.18%;
}

.exact-provider {
  top: 82.35%;
  width: 12.4%;
  height: 7.05%;
  border-radius: 18px;
}

.exact-provider-1 {
  left: 20.3%;
}

.exact-provider-2 {
  left: 36.1%;
}

.exact-provider-3 {
  left: 51.6%;
}

.exact-provider-4 {
  left: 67.4%;
}

.home-template-2 .exact-category {
  width: 44%;
  height: 21.85%;
  border-radius: 30px;
}

.home-template-2 .exact-category-1 {
  left: 4.7%;
  top: 30.55%;
}

.home-template-2 .exact-category-2 {
  left: 51.35%;
  top: 30.55%;
}

.home-template-2 .exact-category-3 {
  left: 4.7%;
  top: 53.95%;
}

.home-template-2 .exact-category-4 {
  left: 51.35%;
  top: 53.95%;
}

.home-template-2 .exact-provider {
  top: 81.35%;
  width: 17.35%;
  height: 10.75%;
  border-radius: 22px;
}

.home-template-2 .exact-provider-1 {
  left: 8.25%;
}

.home-template-2 .exact-provider-2 {
  left: 30.15%;
}

.home-template-2 .exact-provider-3 {
  left: 52.05%;
}

.home-template-2 .exact-provider-4 {
  left: 73.75%;
}

.home-template-3 .exact-category {
  width: 36%;
  height: 25.25%;
  border-radius: 30px;
}

.home-template-3 .exact-category-1 {
  left: 13.1%;
  top: 28.9%;
}

.home-template-3 .exact-category-2 {
  left: 51.3%;
  top: 28.9%;
}

.home-template-3 .exact-category-3 {
  left: 13.1%;
  top: 55.25%;
}

.home-template-3 .exact-category-4 {
  left: 51.3%;
  top: 55.25%;
}

.home-template-3 .exact-provider {
  top: 85.6%;
  width: 12.5%;
  height: 8.5%;
  border-radius: 20px;
}

.home-template-3 .exact-provider-1 {
  left: 20.4%;
}

.home-template-3 .exact-provider-2 {
  left: 35.6%;
}

.home-template-3 .exact-provider-3 {
  left: 50.9%;
}

.home-template-3 .exact-provider-4 {
  left: 66.4%;
}

.home-template-4 .exact-category {
  overflow: hidden;
  width: 36.5%;
  height: 24.7%;
  border-radius: 28px;
  box-shadow:
    inset 0 0 0 1px rgba(244, 189, 67, 0.42),
    0 0 10px rgba(244, 189, 67, 0.12);
}

.home-template-4 .exact-category img,
.desktop-home-template-4 .desktop-category img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-template-4 .exact-category span,
.desktop-home-template-4 .desktop-category span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.home-template-4 .exact-category:hover,
.home-template-4 .exact-category:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 124, 0.72),
    0 0 16px rgba(244, 189, 67, 0.28);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.home-template-4 .exact-category-1 {
  left: 12.85%;
  top: 21.75%;
}

.home-template-4 .exact-category-2 {
  left: 50.95%;
  top: 21.75%;
}

.home-template-4 .exact-category-3 {
  left: 12.85%;
  top: 46.35%;
}

.home-template-4 .exact-category-4 {
  left: 50.95%;
  top: 46.35%;
}

.home-template-4 .exact-provider {
  left: 18.6%;
  width: 62.8%;
  height: 4.05%;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(244, 189, 67, 0.38),
    0 0 9px rgba(244, 189, 67, 0.1);
}

.home-template-4 .exact-provider:hover,
.home-template-4 .exact-provider:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 124, 0.7),
    0 0 14px rgba(244, 189, 67, 0.24);
  filter: brightness(1.06);
  transform: translateX(-1px);
}

.home-template-4 .exact-provider-1 {
  top: 70.95%;
}

.home-template-4 .exact-provider-2 {
  top: 75.75%;
}

.home-template-4 .exact-provider-3 {
  top: 80.55%;
}

.home-template-4 .exact-provider-4 {
  top: 85.35%;
}

.desktop-home-exact-screen {
  position: relative;
  display: none;
  width: 100%;
  min-height: 100dvh;
  background: #000000;
  line-height: 0;
}

.desktop-home-exact-image {
  width: 100%;
  min-height: 100dvh;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.desktop-home-hotspots {
  position: absolute;
  inset: 0;
}

.desktop-hotspot {
  position: absolute;
  display: block;
  outline: 0;
  cursor: pointer;
  transition:
    box-shadow 0.18s ease,
    filter 0.18s ease,
    transform 0.18s ease;
}

.desktop-hotspot:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 230, 160, 0.9), 0 0 26px rgba(212, 175, 55, 0.9);
}

.desktop-hotspot span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.desktop-home-template-1 .desktop-category {
  top: 52.2%;
  width: 19.25%;
  height: 23.2%;
  border-radius: 28px;
}

.desktop-home-template-1 .desktop-category-1 {
  left: 9.45%;
}

.desktop-home-template-1 .desktop-category-2 {
  left: 29.75%;
}

.desktop-home-template-1 .desktop-category-3 {
  left: 49.55%;
}

.desktop-home-template-1 .desktop-category-4 {
  left: 69.35%;
}

.desktop-home-template-1 .desktop-provider {
  top: 82.3%;
  width: 7.5%;
  height: 11%;
  border-radius: 18px;
}

.desktop-home-template-1 .desktop-provider-1 {
  left: 18.1%;
}

.desktop-home-template-1 .desktop-provider-2 {
  left: 29.4%;
}

.desktop-home-template-1 .desktop-provider-3 {
  left: 41%;
}

.desktop-home-template-1 .desktop-provider-4 {
  left: 52.6%;
}

.desktop-home-template-2 .desktop-category {
  top: 40.3%;
  width: 18.65%;
  height: 34.8%;
  border-radius: 28px;
}

.desktop-home-template-2 .desktop-category-1 {
  left: 9.65%;
}

.desktop-home-template-2 .desktop-category-2 {
  left: 28.5%;
}

.desktop-home-template-2 .desktop-category-3 {
  left: 47.45%;
}

.desktop-home-template-2 .desktop-category-4 {
  left: 66.5%;
}

.desktop-home-template-2 .desktop-provider {
  top: 84.2%;
  width: 8.15%;
  height: 11.2%;
  border-radius: 16px;
}

.desktop-home-template-2 .desktop-provider-1 {
  left: 13.7%;
}

.desktop-home-template-2 .desktop-provider-2 {
  left: 25.45%;
}

.desktop-home-template-2 .desktop-provider-3 {
  left: 37%;
}

.desktop-home-template-2 .desktop-provider-4 {
  left: 48.6%;
}

.desktop-home-template-3 .desktop-category {
  top: 43.7%;
  width: 19.4%;
  height: 30.4%;
  border-radius: 26px;
}

.desktop-home-template-3 .desktop-category-1 {
  left: 10.05%;
}

.desktop-home-template-3 .desktop-category-2 {
  left: 29.35%;
}

.desktop-home-template-3 .desktop-category-3 {
  left: 48.6%;
}

.desktop-home-template-3 .desktop-category-4 {
  left: 67.9%;
}

.desktop-home-template-3 .desktop-provider {
  top: 79.7%;
  width: 7.4%;
  height: 10.2%;
  border-radius: 18px;
}

.desktop-home-template-3 .desktop-provider-1 {
  left: 27.5%;
}

.desktop-home-template-3 .desktop-provider-2 {
  left: 39.1%;
}

.desktop-home-template-3 .desktop-provider-3 {
  left: 50.8%;
}

.desktop-home-template-3 .desktop-provider-4 {
  left: 62.55%;
}

.desktop-home-template-4 .desktop-category {
  overflow: hidden;
  top: 31.25%;
  width: 16.85%;
  height: 34%;
  border-radius: 26px;
  box-shadow:
    inset 0 0 0 1px rgba(244, 189, 67, 0.4),
    0 0 11px rgba(244, 189, 67, 0.12);
}

.desktop-home-template-4 .desktop-category:hover,
.desktop-home-template-4 .desktop-category:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 124, 0.7),
    0 0 18px rgba(244, 189, 67, 0.28);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.desktop-home-template-4 .desktop-category-1 {
  left: 15.25%;
}

.desktop-home-template-4 .desktop-category-2 {
  left: 32.25%;
}

.desktop-home-template-4 .desktop-category-3 {
  left: 49.6%;
}

.desktop-home-template-4 .desktop-category-4 {
  left: 67.05%;
}

.desktop-home-template-4 .desktop-provider {
  left: 34.7%;
  width: 30.8%;
  height: 5.2%;
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(244, 189, 67, 0.36),
    0 0 10px rgba(244, 189, 67, 0.1);
}

.desktop-home-template-4 .desktop-provider:hover,
.desktop-home-template-4 .desktop-provider:focus-visible {
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 124, 0.68),
    0 0 16px rgba(244, 189, 67, 0.24);
  filter: brightness(1.06);
  transform: translateX(-1px);
}

.desktop-home-template-4 .desktop-provider-1 {
  top: 66.1%;
}

.desktop-home-template-4 .desktop-provider-2 {
  top: 71.9%;
}

.desktop-home-template-4 .desktop-provider-3 {
  top: 77.7%;
}

.desktop-home-template-4 .desktop-provider-4 {
  top: 83.5%;
}

@media (min-width: 900px) {
  .desktop-home-phone {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .desktop-home-phone .home-exact-screen {
    display: none;
  }

  .desktop-home-phone .desktop-home-exact-screen {
    display: block;
  }
}

.menu-button-area {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 24px 20px;
  overflow: hidden;
  isolation: isolate;
}

.menu-button-area::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  z-index: -1;
}

.category-button {
  width: min(220px, 70vw);
  min-height: 70px;
  display: grid;
  place-items: center;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(9px);
  color: var(--text);
  font-size: clamp(22px, 7vw, 32px);
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.nav-pins {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 20px;
  background: #0a0a0a;
}

.pin {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #ffffff;
}

.pin-inner {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  direction: ltr;
}

.icon-google {
  background:
    linear-gradient(90deg, #ff3d00 0 33%, #f7b500 33% 66%, #03a9f4 66%),
    linear-gradient(#8bc34a 0 50%, #ffffff 50%);
  color: #111111;
}

.icon-waze {
  background: #00b0ff;
}

.icon-snapp {
  background: #2ecc71;
}

.icon-neshan {
  background: #ffffff;
  color: #008c8c;
}

.icon-balad {
  background: linear-gradient(135deg, #4a148c, #2196f3);
}

.address-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px 12px;
  border-top: 1px solid var(--line);
  background: #111111;
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.bottom-nav {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  min-height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 20px 22px;
  border: 1px solid var(--line);
  background: #161616;
}

.bottom-nav-item {
  width: 80px;
  display: grid;
  gap: 5px;
  justify-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.bottom-nav-item.active {
  color: var(--gold);
}

.line-icon {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 12px;
  line-height: 1;
}

.svg-icon {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
}

.svg-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  color: var(--text);
  direction: ltr;
  font-size: 14px;
  font-weight: 700;
}

.device-icons {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--text);
}

.header {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 12px;
  align-items: center;
  padding: 20px 24px;
}

.header-title {
  margin: 0;
  text-align: center;
  font-size: clamp(20px, 5.6vw, 24px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #161616;
  color: var(--text);
}

.menu-list {
  display: grid;
  gap: 24px;
  padding: 0 20px 24px;
}

.food-card {
  overflow: hidden;
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

.food-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #202020;
}

.food-card-body {
  display: grid;
  gap: 10px;
  justify-items: end;
  padding: 18px 20px 20px;
}

.food-title {
  margin: 0;
  width: 100%;
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

.food-description {
  margin: 0;
  width: 100%;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  text-align: right;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--gold);
  direction: rtl;
}

.price strong {
  font-size: 20px;
}

.price span {
  font-size: 13px;
  font-weight: 700;
}

.product-screen {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.74)),
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.12), transparent 30%),
    var(--product-bg, var(--desktop-bg, none)),
    #090909;
  background-size: cover;
  background-position: center top;
  background-attachment: scroll;
}

.product-brand-header,
.product-top-logo {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.product-brand-header h1,
.product-top-logo h1 {
  margin: 0;
  color: var(--gold-strong);
  text-align: center;
  font-size: 24px;
  font-weight: 900;
}

.product-brand-header strong {
  color: var(--gold);
  font-size: 15px;
}

.product-top-logo {
  grid-template-columns: 44px 1fr 44px;
}

.product-top-logo.compact {
  border-bottom: 0;
}

.product-top-logo.bordered {
  border: 1px solid var(--line);
  border-radius: 28px 28px 0 0;
}

.product-category-nav {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  overflow-x: auto;
}

.product-category-link {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.product-category-link.active {
  border-color: rgba(212, 175, 55, 0.9);
  background: linear-gradient(135deg, #d4af37, #e4bd48);
  color: #080808;
}

.category-glyph {
  display: grid;
  place-items: center;
  min-width: 24px;
  color: currentColor;
  font-weight: 900;
}

.product-list {
  display: grid;
  gap: 10px;
  padding: 0 20px 22px;
}

.product-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}

.product-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  cursor: zoom-in;
}

.product-card-content {
  display: grid;
  gap: 8px;
  justify-items: end;
  padding: 14px 16px;
  text-align: right;
}

.product-card-content h2 {
  margin: 0;
  font-size: var(--product-title-size, 21px);
  line-height: 1.45;
}

.product-card-content p {
  margin: 0;
  color: #c9c9c9;
  font-size: 14px;
  line-height: 1.9;
}

.product-divider {
  width: 100%;
  height: 1px;
  background: rgba(212, 175, 55, 0.24);
}

.product-price {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  color: var(--gold-strong);
  font-weight: 900;
}

.product-price strong {
  font-size: 20px;
}

.product-price span {
  font-size: 13px;
}

.split-list {
  gap: 12px;
}

.split-card {
  display: grid;
  grid-template-columns: 48% 52%;
  min-height: 144px;
  border-radius: 16px;
}

.split-card img {
  height: 100%;
  min-height: 144px;
}

.split-card .product-card-content {
  align-content: center;
  padding: 14px;
}

.split-card .product-card-content h2 {
  font-size: var(--product-title-size, clamp(18px, 4.8vw, 24px));
}

.ornament-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 20px 18px;
  color: var(--gold-strong);
  font-size: 20px;
  font-weight: 900;
}

.ornament-title span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), transparent);
}

.side-product-layout {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 12px;
  padding: 0 14px 22px;
}

.product-category-nav.side {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 0;
  overflow: visible;
  border-left: 1px solid rgba(212, 175, 55, 0.18);
}

.product-category-nav.side .product-category-link {
  min-width: 0;
  min-height: 78px;
  display: grid;
  gap: 5px;
  border-radius: 14px;
  padding: 8px;
  font-size: 12px;
}

.product-category-nav.side .category-glyph {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid currentColor;
}

.side-list {
  gap: 10px;
  padding: 0;
}

.side-card {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 150px;
  border-radius: 12px;
}

.side-card img {
  height: 100%;
  min-height: 150px;
}

.side-card .product-card-content {
  align-content: center;
  padding: 12px;
}

.side-card .product-card-content h2 {
  font-size: var(--product-title-size, 18px);
}

.side-card .product-card-content p {
  font-size: 12px;
  line-height: 1.75;
}

.product-search-row {
  display: grid;
  grid-template-columns: 1fr 58px;
  gap: 12px;
  padding: 10px 20px 18px;
}

.product-search,
.filter-button,
.filter-row button {
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
}

.product-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 18px;
  font-size: 15px;
}

.filter-button {
  color: var(--gold);
  font-size: 26px;
}

.category-hero-band {
  min-height: 118px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 0 20px 14px;
  padding: 20px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.24), rgba(212, 175, 55, 0.05));
}

.category-hero-band span {
  color: var(--gold);
  font-size: 58px;
  opacity: 0.5;
}

.category-hero-band h2,
.drink-hero h2 {
  margin: 0;
  font-size: 31px;
  line-height: 1.4;
}

.category-hero-band p,
.drink-hero p {
  margin: 6px 0 0;
  color: var(--gold);
  font-size: 16px;
}

.slim-list {
  gap: 10px;
}

.slim-card,
.compact-card {
  display: grid;
  grid-template-columns: 48% 52%;
  min-height: 136px;
  border-color: rgba(212, 175, 55, 0.18);
  border-radius: 16px;
}

.slim-card img,
.compact-card img {
  height: 100%;
  min-height: 136px;
}

.slim-card .product-card-content,
.compact-card .product-card-content {
  align-content: center;
  padding: 12px 14px;
}

.slim-card .product-card-content h2,
.compact-card .product-card-content h2 {
  font-size: var(--product-title-size, 20px);
}

.slim-card .product-card-content p,
.compact-card .product-card-content p {
  font-size: 13px;
}

.drink-hero {
  min-height: 245px;
  display: flex;
  align-items: center;
  padding: 24px;
  border-top: 1px solid rgba(212, 175, 55, 0.6);
  border-bottom: 1px solid rgba(212, 175, 55, 0.6);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.35)),
    var(--drink-image);
  background-size: cover;
  background-position: center;
}

.drink-hero > div {
  width: 52%;
  text-align: right;
}

.drink-hero span {
  display: block;
  color: var(--gold);
  font-size: 28px;
  margin-bottom: 6px;
}

.product-category-nav.chips {
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.24);
}

.product-category-nav.chips .product-category-link {
  min-width: 76px;
  min-height: 42px;
  border-radius: 13px;
}

.filter-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 20px;
}

.filter-row button {
  color: var(--text);
}

.compact-list {
  gap: 9px;
}

.compact-card {
  grid-template-columns: 34% 66%;
  min-height: 116px;
}

.compact-card img {
  min-height: 116px;
}

.compact-card .product-card-content h2 {
  font-size: var(--product-title-size, 19px);
}

.desktop-product-screen {
  display: none;
  min-height: 100dvh;
  padding: 0 0 48px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(4, 4, 4, 0.98));
}

.desktop-product-nav {
  width: min(100% - 96px, 1680px);
  min-height: 88px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  gap: 26px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.24);
  color: #f8eed2;
}

.desktop-product-nav nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 52px);
  font-size: 16px;
}

.desktop-product-nav a {
  color: #f8eed2;
}

.desktop-product-nav a.active {
  color: var(--gold-strong);
  font-weight: 900;
}

.desktop-product-nav strong {
  color: var(--gold-strong);
  font-size: 34px;
  white-space: nowrap;
}

.desktop-menu-button {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 175, 55, 0.52);
  border-radius: 14px;
  color: var(--gold-strong);
  font-size: 26px;
}

.desktop-restaurant-logo {
  width: min(360px, 24vw);
  max-height: 190px;
  object-fit: contain;
  margin: 0 auto;
}

.desktop-restaurant-name {
  color: var(--gold-strong);
  font-size: clamp(52px, 6vw, 96px);
}

.desktop-category-tabs {
  width: min(100% - 160px, 1500px);
  margin: 22px auto 16px;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
}

.desktop-category-tabs a {
  min-width: 140px;
  padding: 12px 24px;
  border-radius: 14px;
  color: #dedede;
  text-align: center;
}

.desktop-category-tabs a.active {
  background: rgba(212, 175, 55, 0.22);
  color: var(--gold-strong);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.55);
}

.desktop-food-card {
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
}

.desktop-food-card img {
  width: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.desktop-food-body {
  display: grid;
  gap: 10px;
  text-align: right;
}

.desktop-food-body h2 {
  margin: 0;
  color: #ffffff;
  font-size: var(--desktop-product-title-size, clamp(24px, 2vw, 34px));
  line-height: 1.35;
}

.desktop-food-body p {
  margin: 0;
  color: #c9c9c9;
  font-size: 15px;
  line-height: 1.9;
}

.desktop-food-price {
  color: var(--gold-strong);
  font-weight: 900;
  white-space: nowrap;
}

.desktop-food-price strong {
  display: block;
  font-size: clamp(24px, 2.2vw, 38px);
}

.desktop-empty-state {
  grid-column: 1 / -1;
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(212, 175, 55, 0.26);
  border-radius: 24px;
}

.desktop-location-panel {
  width: min(100% - 260px, 1240px);
  min-height: 92px;
  margin: 28px auto 0;
  display: grid;
  place-items: center;
  padding: 18px 34px;
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 28px;
  background: rgba(9, 9, 9, 0.82);
  color: #f5ead1;
  font-size: 22px;
  text-align: center;
}

.desktop-location-panel.compact {
  width: min(100% - 380px, 1020px);
}

.desktop-product-center-hero {
  width: min(100% - 120px, 1500px);
  margin: 26px auto 10px;
  display: grid;
  justify-items: center;
  text-align: center;
}

.desktop-product-center-hero h1 {
  margin: 8px 0 0;
  color: var(--gold-strong);
  font-size: clamp(44px, 4.4vw, 76px);
}

.desktop-product-center-hero p {
  margin: 8px 0 0;
  color: #f0d594;
  font-size: 22px;
}

.desktop-showcase-grid {
  width: min(100% - 180px, 1500px);
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.showcase-card {
  min-height: 390px;
  display: grid;
  grid-template-rows: 220px 1fr auto;
  border-radius: 26px;
}

.showcase-card img {
  height: 220px;
}

.showcase-card .desktop-food-body {
  padding: 18px 20px 8px;
}

.showcase-card .desktop-food-price {
  padding: 0 20px 20px;
}

.desktop-theater-hero {
  width: min(100% - 120px, 1420px);
  min-height: 270px;
  margin: 18px auto 0;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  border-radius: 38px;
  background:
    radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.22), transparent 34%),
    rgba(0, 0, 0, 0.26);
}

.desktop-theater-hero h1 {
  margin: 4px 0 0;
  color: #f2d18a;
  font-size: clamp(40px, 4vw, 68px);
}

.desktop-theater-hero p {
  margin: 8px 0 0;
  color: #fff0ca;
  font-size: 20px;
}

.desktop-theater-grid {
  width: min(100% - 210px, 1360px);
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.theater-card {
  min-height: 320px;
  display: grid;
  grid-template-rows: 180px 1fr auto;
  border-radius: 24px;
}

.theater-card img {
  height: 180px;
}

.theater-card .desktop-food-body {
  padding: 16px 18px 4px;
}

.theater-card .desktop-food-price {
  padding: 0 18px 18px;
}

.desktop-search-toolbar {
  width: min(100% - 160px, 1620px);
  margin: 26px auto 14px;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 46px;
}

.desktop-search-box,
.desktop-search-toolbar button,
.desktop-filter-row button {
  min-height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
  color: #bdbdbd;
  padding: 18px 28px;
  text-align: right;
}

.desktop-search-toolbar button,
.desktop-filter-row button {
  color: var(--gold-strong);
  text-align: center;
  font-weight: 900;
}

.desktop-list-hero {
  width: min(100% - 160px, 1620px);
  min-height: 134px;
  margin: 0 auto 8px;
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: center;
  padding: 20px 44px;
  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), rgba(255, 255, 255, 0.045));
}

.desktop-list-hero > span {
  color: rgba(212, 175, 55, 0.6);
  font-size: 72px;
}

.desktop-list-hero h1 {
  margin: 0;
  color: #ffffff;
  font-size: 44px;
}

.desktop-list-hero p {
  margin: 8px 0 0;
  color: var(--gold-strong);
  font-size: 20px;
}

.desktop-wide-list,
.desktop-compact-list {
  width: min(100% - 160px, 1620px);
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.wide-row,
.compact-row {
  min-height: 124px;
  display: grid;
  grid-template-columns: 36% 1fr 210px;
  align-items: stretch;
  border-radius: 18px;
}

.wide-row img,
.compact-row img {
  height: 124px;
}

.wide-row .desktop-food-body,
.compact-row .desktop-food-body {
  align-content: center;
  padding: 18px 36px;
}

.wide-row .desktop-food-price,
.compact-row .desktop-food-price {
  display: grid;
  place-content: center;
  padding: 18px;
  border-right: 1px dashed rgba(212, 175, 55, 0.34);
  text-align: center;
}

.desktop-drink-hero {
  width: min(100% - 100px, 1680px);
  min-height: 310px;
  margin: 0 auto 16px;
  display: grid;
  align-items: center;
  padding: 48px 12%;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.18)),
    var(--hero-image);
  background-size: cover;
  background-position: center;
}

.desktop-drink-hero span {
  color: var(--gold-strong);
  font-size: 34px;
}

.desktop-drink-hero h1 {
  margin: 8px 0;
  color: var(--gold-strong);
  font-size: clamp(48px, 5vw, 88px);
}

.desktop-drink-hero p {
  margin: 0;
  max-width: 480px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.8;
}

.desktop-filter-row {
  width: min(100% - 210px, 1500px);
  margin: 0 auto 16px;
  display: flex;
  gap: 16px;
}

.compact-row {
  grid-template-columns: 24% 1fr 220px;
  min-height: 96px;
}

.compact-row img {
  height: 96px;
}

.compact-row .desktop-food-body {
  padding: 14px 34px;
}

.product-template-5,
.desktop-product-template-5 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.72)),
    var(--product-bg, var(--product-template-art)),
    #050302;
  background-size: cover;
  background-position: top center;
}

.product-art-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 12%, rgba(212, 175, 55, 0.08), transparent 24%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.28));
  pointer-events: none;
}

.product5-image-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.product5-image-button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.28s ease, filter 0.28s ease;
}

.product5-image-button:hover img,
.product5-image-button:focus-visible img {
  filter: brightness(1.08);
  transform: scale(1.025);
}

.product-template-5 {
  min-height: 100dvh;
  padding: 8px 10px 24px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.74)),
    var(--product-bg, var(--desktop-bg, #050302));
  background-size: cover;
  background-position: center top;
}

.product5-mobile-hero {
  min-height: 84px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  grid-template-rows: 42px 1fr;
  gap: 5px;
  align-items: start;
  padding: 0 0 4px;
}

.product5-mobile-hero .desktop-restaurant-logo {
  grid-column: 2;
  justify-self: center;
  width: min(102px, 30vw);
  max-height: 46px;
  object-fit: contain;
  margin-top: 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.62));
}

.product5-mobile-hero .desktop-restaurant-name {
  grid-column: 2;
  justify-self: center;
  align-self: start;
  margin-top: 2px;
  font-size: clamp(22px, 6.6vw, 32px);
  text-align: center;
}

.product5-mobile-hero p {
  grid-column: 1 / -1;
  align-self: end;
  margin: 0;
  color: var(--gold-strong);
  text-align: center;
  font-size: clamp(10px, 2.8vw, 13px);
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.product5-round-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 189, 67, 0.62);
  border-radius: 12px;
  background: rgba(7, 7, 7, 0.66);
  color: var(--gold-strong);
  font-size: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 137, 0.08), 0 0 18px rgba(212, 175, 55, 0.12);
}

.product5-round-button .svg-icon {
  width: 23px;
  height: 23px;
}

.product5-mobile-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 9px;
}

.product5-mobile-tabs a {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 3px;
  border: 1px solid rgba(244, 189, 67, 0.62);
  border-radius: 999px;
  background: rgba(7, 7, 7, 0.78);
  color: #e5bf6a;
  font-size: clamp(9px, 2.75vw, 12px);
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 137, 0.04);
}

.product5-mobile-tabs a span {
  display: none;
}

.product5-mobile-tabs a.active {
  border-color: rgba(255, 224, 137, 0.95);
  background: linear-gradient(135deg, #f0c65b, #b77a17);
  color: #12100a;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.product5-mobile-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.product5-mobile-card {
  height: 154px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 94px 1fr;
  direction: rtl;
  overflow: hidden;
  border: 1px solid rgba(244, 189, 67, 0.58);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(8, 8, 8, 0.98) 62%),
    rgba(6, 6, 6, 0.76);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}

.product5-mobile-copy {
  direction: rtl;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-content: stretch;
  justify-items: stretch;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px 7px;
  text-align: right;
  overflow: hidden;
}

.product5-mobile-copy h2 {
  margin: 0;
  color: #d8a84b;
  font-size: var(--product-title-size, clamp(12px, 3.45vw, 15px));
  line-height: 1.35;
  font-weight: 950;
  max-width: 100%;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product5-ornament {
  width: min(58px, 58%);
  height: 4px;
  justify-self: end;
  position: relative;
}

.product5-ornament::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.8), transparent);
}

.product5-ornament::after {
  content: "❖";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold-strong);
  font-size: 10px;
}

.product-template-5 .product5-ornament::after {
  content: none;
}

.product5-mobile-copy p {
  display: none;
}

.product5-mobile-copy strong {
  color: #d8a84b;
  justify-self: end;
  font-size: clamp(12px, 3.45vw, 15px);
  line-height: 1.1;
  white-space: nowrap;
}

.product5-mobile-copy strong span {
  font-size: 0.74em;
}

.desktop-product-template-5 {
  min-height: 100dvh;
  padding: 28px 0 42px;
}

.product5-desktop-hero {
  width: min(100% - 180px, 1180px);
  min-height: 235px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  align-content: end;
  text-align: center;
  padding-bottom: 20px;
}

.product5-desktop-hero .desktop-restaurant-logo {
  width: min(330px, 22vw);
  max-height: 170px;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.72));
}

.product5-desktop-hero .desktop-restaurant-name {
  font-size: clamp(64px, 6vw, 104px);
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.72);
}

.product5-desktop-hero p {
  margin: 8px 0 0;
  color: var(--gold-strong);
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 900;
}

.product5-desktop-tabs {
  width: min(100% - 520px, 990px);
  min-height: 58px;
  margin: 0 auto 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(244, 189, 67, 0.62);
  border-radius: 14px;
  background: rgba(5, 5, 5, 0.76);
}

.product5-desktop-tabs a {
  display: grid;
  place-items: center;
  border-left: 1px solid rgba(244, 189, 67, 0.34);
  color: #f0d394;
  font-size: 17px;
  font-weight: 900;
}

.product5-desktop-tabs a:first-child {
  border-left: 0;
}

.product5-desktop-tabs a.active {
  background: linear-gradient(135deg, #f2c65a, #b67a18);
  color: #11100c;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.18);
}

.product5-desktop-list {
  width: min(100% - 760px, 1120px);
  margin: 0 auto;
  display: grid;
  gap: 8px;
}

.product5-desktop-row {
  min-height: 154px;
  display: grid;
  grid-template-columns: 51.5% 48.5%;
  overflow: hidden;
  border: 1px solid rgba(244, 189, 67, 0.52);
  border-radius: 4px 20px 20px 4px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(5, 5, 5, 0.92) 52%),
    rgba(5, 5, 5, 0.78);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
}

.product5-desktop-copy {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 6px;
  padding: 18px 44px 18px 28px;
  text-align: right;
}

.product5-desktop-copy h2 {
  margin: 0;
  color: #d6a247;
  font-size: var(--desktop-product-title-size, clamp(26px, 2vw, 36px));
  line-height: 1.3;
  font-weight: 950;
}

.product5-desktop-copy p {
  margin: 0;
  max-width: 520px;
  color: #d7b46a;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.85;
}

.product5-desktop-copy strong {
  color: #d6a247;
  font-size: clamp(20px, 1.5vw, 28px);
}

.product5-desktop-copy strong span {
  font-size: 0.68em;
}

@media (min-width: 900px) {
  .desktop-product-phone {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .desktop-product-phone > .product-screen:not(.desktop-product-screen) {
    display: none;
  }

  .desktop-product-phone .desktop-product-screen {
    display: block;
  }
}

@media (min-width: 900px) and (max-width: 1280px) {
  .desktop-showcase-grid,
  .desktop-theater-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .desktop-product-nav,
  .desktop-category-tabs,
  .desktop-search-toolbar,
  .desktop-list-hero,
  .desktop-wide-list,
  .desktop-compact-list,
  .desktop-drink-hero {
    width: min(100% - 48px, 1180px);
  }
}

.admin-screen {
  min-height: 100dvh;
  padding: 18px 14px 120px;
  background: #030303;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 20px;
}

.admin-header h1 {
  margin: 0;
  font-size: 22px;
}

.admin-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-section {
  margin: 0 0 28px;
}

.admin-section h2 {
  margin: 0 4px 12px;
  color: var(--gold-strong);
  font-size: 18px;
}

.admin-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: inherit;
}

.admin-section-toggle span {
  font-weight: 900;
}

.admin-section-toggle small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.admin-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
}

.form-grid {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label,
.check-field {
  color: var(--muted);
  font-size: 12px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #1a1a1a;
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

.field textarea {
  min-height: 78px;
  resize: vertical;
  line-height: 1.7;
}

.image-upload-field {
  min-width: 0;
}

.image-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.upload-trigger {
  position: relative;
  min-width: 96px;
  white-space: nowrap;
}

.upload-trigger input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.upload-trigger.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.image-preview {
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px dashed rgba(212, 175, 55, 0.26);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

.image-preview.has-image {
  border-style: solid;
  background: rgba(0, 0, 0, 0.28);
}

.image-preview img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  border-radius: 10px;
}

.image-upload-field small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}

.check-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.check-field input {
  accent-color: var(--gold);
}

.button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--gold-strong);
  color: #030303;
  font-weight: 800;
}

.button.secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--line);
}

.button.danger {
  background: rgba(255, 77, 77, 0.12);
  color: #ff7777;
  border: 1px solid rgba(255, 77, 77, 0.22);
}

.button.full {
  width: 100%;
}

.row-list {
  display: grid;
  gap: 14px;
}

.editable-row {
  display: grid;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.editable-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.row-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.item-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.16);
}

.admin-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.admin-tab {
  flex: 0 0 auto;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 13px;
}

.admin-tab.active {
  background: var(--gold);
  color: #030303;
  border-color: var(--gold);
  font-weight: 800;
}

.admin-phone {
  width: min(100%, 960px);
  background: transparent;
}

.admin-phone .admin-screen {
  min-height: 100dvh;
}

.admin-title-block {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
}

.admin-title-block small,
.admin-kicker {
  color: var(--muted);
  font-size: 12px;
}

.admin-kicker {
  color: var(--text);
  font-weight: 900;
  font-size: 18px;
}

.admin-logo {
  width: 108px;
  max-height: 70px;
  object-fit: contain;
}

.admin-logo-text {
  color: var(--gold-strong);
  font-size: 28px;
}

.admin-phone .admin-section h2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-bottom: 1px solid transparent;
}

.admin-phone .admin-section h2::after {
  content: "⌂";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 10px;
  font-size: 15px;
}

.admin-phone .admin-section:nth-of-type(2) h2::after {
  content: "▦";
}

.admin-phone .admin-section:nth-of-type(3) h2::after {
  content: "⌖";
}

.admin-phone .admin-section:nth-of-type(4) h2::after {
  content: "☰";
}

.admin-template-1 {
  --line: rgba(212, 175, 55, 0.28);
  --muted: #c7b783;
  --text: #fff8df;
}

.admin-template-1 .admin-screen {
  padding: 18px 14px 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.18), transparent 30%),
    linear-gradient(180deg, #070707 0%, #020202 100%);
}

.admin-template-1 .admin-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 10px 8px 18px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}

.admin-template-1 .admin-title-block {
  grid-column: 2;
}

.admin-template-1 .admin-actions {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.admin-template-1 .admin-card,
.admin-template-1 .item-editor {
  border-color: rgba(212, 175, 55, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(8, 8, 8, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-template-1 .field input,
.admin-template-1 .field textarea,
.admin-template-1 .field select {
  background: rgba(0, 0, 0, 0.32);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff8df;
}

.admin-template-1 .button {
  background: linear-gradient(90deg, #f3d35d, #c28a16);
}

.admin-template-2 {
  --line: rgba(154, 104, 43, 0.2);
  --text: #2f2113;
  --muted: #8c7358;
  --gold: #c9922a;
  --gold-strong: #b98225;
  color-scheme: light;
  background: #fffaf2;
}

.admin-template-2 .admin-screen {
  padding: 18px 18px 22px;
  background:
    radial-gradient(circle at 20% 8%, rgba(206, 159, 76, 0.12), transparent 24%),
    linear-gradient(180deg, #fffdf8 0%, #fff8ed 100%);
  color: #2f2113;
}

.admin-template-2 .admin-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding: 10px 8px 20px;
  border-bottom: 1px solid rgba(154, 104, 43, 0.18);
}

.admin-template-2 .admin-title-block {
  grid-column: 2;
}

.admin-template-2 .admin-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.admin-template-2 .admin-section h2 {
  color: #3b2410;
}

.admin-template-2 .admin-card,
.admin-template-2 .item-editor,
.admin-template-2 .login-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(154, 104, 43, 0.16);
  box-shadow: 0 10px 36px rgba(95, 62, 20, 0.07);
}

.admin-template-2 .field input,
.admin-template-2 .field textarea,
.admin-template-2 .field select {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(154, 104, 43, 0.18);
  color: #2f2113;
}

.admin-template-2 .button {
  background: linear-gradient(90deg, #c9932f, #d7aa4e);
  color: #ffffff;
}

.admin-template-2 .button.secondary {
  background: rgba(255, 255, 255, 0.72);
  color: #7d5728;
  border-color: rgba(154, 104, 43, 0.2);
}

.admin-template-2 .button.danger {
  background: rgba(255, 77, 77, 0.08);
  color: #e43636;
}

.admin-template-2 .admin-tab {
  background: rgba(255, 255, 255, 0.72);
  color: #7d5728;
}

.admin-template-2 .admin-tab.active {
  background: #c9932f;
  color: #ffffff;
}

.admin-template-3 {
  --line: rgba(0, 238, 238, 0.32);
  --text: #e7ffff;
  --muted: #9bd2d4;
  --gold: #00d8d8;
  --gold-strong: #00f0f0;
}

.admin-template-3 .admin-screen {
  padding: 18px 18px 24px;
  background:
    radial-gradient(circle at 50% 20%, rgba(0, 238, 238, 0.18), transparent 28%),
    linear-gradient(180deg, #001216 0%, #02080b 100%);
  color: #e7ffff;
}

.admin-template-3 .admin-header {
  padding: 10px 8px 20px;
}

.admin-template-3 .admin-logo {
  filter: hue-rotate(125deg) saturate(1.35);
}

.admin-template-3 .admin-card,
.admin-template-3 .item-editor {
  background:
    linear-gradient(135deg, rgba(0, 238, 238, 0.1), rgba(0, 0, 0, 0.22)),
    rgba(0, 18, 22, 0.9);
  border-color: rgba(0, 238, 238, 0.36);
  box-shadow:
    0 0 26px rgba(0, 238, 238, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-template-3 .field input,
.admin-template-3 .field textarea,
.admin-template-3 .field select {
  background: rgba(0, 17, 22, 0.72);
  border-color: rgba(157, 247, 247, 0.22);
  color: #e7ffff;
}

.admin-template-3 .field input:focus,
.admin-template-3 .field textarea:focus,
.admin-template-3 .field select:focus {
  border-color: rgba(0, 238, 238, 0.82);
  box-shadow: 0 0 0 3px rgba(0, 238, 238, 0.16);
}

.admin-template-3 .button {
  background: linear-gradient(90deg, #00a6a6, #02e7e7);
  color: #001216;
  box-shadow: 0 0 22px rgba(0, 238, 238, 0.16);
}

.admin-template-3 .button.secondary {
  background: rgba(0, 238, 238, 0.06);
  color: #e7ffff;
  border-color: rgba(0, 238, 238, 0.32);
}

.admin-template-3 .button.danger {
  background: rgba(255, 77, 77, 0.1);
  color: #ff6767;
  border-color: rgba(255, 77, 77, 0.25);
}

.admin-template-3 .admin-tab {
  background: rgba(0, 238, 238, 0.06);
  color: #b8ffff;
}

.admin-template-3 .admin-tab.active {
  background: #00d8d8;
  color: #001216;
}

.admin-main-content {
  display: contents;
}

.admin-graphic-sidebar {
  display: none;
}

.admin-template-4 {
  --line: rgba(212, 175, 55, 0.25);
  --text: #fff8df;
  --muted: #a99d82;
  --gold: #d4a62f;
  --gold-strong: #f0bd35;
}

.admin-template-4 .admin-screen {
  min-height: 100dvh;
  padding: 0;
  background:
    radial-gradient(circle at 50% 7%, rgba(212, 175, 55, 0.16), transparent 24%),
    linear-gradient(180deg, #070909 0%, #050606 100%);
  color: #fff8df;
}

.admin-template-4 .admin-main-content {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.admin-template-4 .admin-header {
  min-height: 76px;
  padding: 14px 24px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  background: rgba(0, 0, 0, 0.22);
}

.admin-template-4 .admin-title-block {
  display: grid;
  justify-items: center;
}

.admin-template-4 .admin-title-block .admin-logo,
.admin-template-4 .admin-title-block .admin-logo-text {
  display: none;
}

.admin-template-4 .admin-kicker {
  color: #ffffff;
  font-size: 20px;
}

.admin-template-4 .admin-actions {
  order: -1;
}

.admin-template-4 .admin-section {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
    rgba(8, 10, 10, 0.9);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-template-4 .admin-section h2 {
  margin: 0;
  padding: 18px 22px 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
  color: var(--gold-strong);
}

.admin-template-4 .admin-section.is-collapsed > :not(h2),
.admin-template-5 .admin-section.is-collapsed > :not(h2) {
  display: none;
}

.admin-template-4 .admin-section.is-collapsed,
.admin-template-5 .admin-section.is-collapsed {
  min-height: auto;
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.06), rgba(255, 255, 255, 0.014)),
    rgba(8, 10, 10, 0.72);
}

.admin-template-4 .admin-section.is-open,
.admin-template-5 .admin-section.is-open {
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.32),
    0 0 28px rgba(212, 175, 55, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.admin-template-4 .admin-section-toggle,
.admin-template-5 .admin-section-toggle {
  cursor: pointer;
}

.admin-template-4 .admin-section-toggle small,
.admin-template-5 .admin-section-toggle small {
  color: #d3c18f;
}

.admin-template-4 .admin-section.is-open .admin-section-toggle small,
.admin-template-5 .admin-section.is-open .admin-section-toggle small {
  color: var(--gold-strong);
}

.admin-template-4 .admin-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-template-4 .item-editor,
.admin-template-4 .editable-row {
  border-color: rgba(212, 175, 55, 0.15);
  background: rgba(255, 255, 255, 0.022);
}

.admin-template-4 .field input,
.admin-template-4 .field textarea,
.admin-template-4 .field select {
  min-height: 40px;
  border-color: rgba(212, 175, 55, 0.18);
  background: rgba(0, 0, 0, 0.26);
  color: #fff8df;
}

.admin-template-4 .image-preview {
  min-height: 74px;
  border-color: rgba(212, 175, 55, 0.16);
  background: rgba(0, 0, 0, 0.2);
}

.admin-template-4 .image-preview img {
  height: 88px;
}

.admin-template-4 .button {
  background: linear-gradient(90deg, #f2c94c, #c38a17);
  color: #090909;
}

.admin-template-4 .button.secondary {
  border-color: rgba(212, 175, 55, 0.34);
  background: rgba(212, 175, 55, 0.07);
  color: var(--gold-strong);
}

.admin-template-4 .button.danger {
  background: rgba(255, 70, 70, 0.1);
  color: #ff6767;
  border-color: rgba(255, 70, 70, 0.24);
}

.admin-template-4 .admin-tab {
  background: rgba(255, 255, 255, 0.035);
  color: #d9c997;
}

.admin-template-4 .admin-tab.active {
  background: var(--gold-strong);
  color: #070707;
}

.admin-mobile-summary {
  display: none;
}

.admin-template-5 {
  --line: rgba(212, 175, 55, 0.25);
  --text: #fff8df;
  --muted: #b2a78c;
  --gold: #d4a62f;
  --gold-strong: #f0bd35;
}

.admin-template-5.admin-phone {
  width: min(100%, 760px);
  background: #070909;
}

.admin-template-5 .admin-screen {
  min-height: 100dvh;
  padding: 0 14px 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.16), transparent 28%),
    linear-gradient(180deg, #070909 0%, #050606 100%);
  color: #fff8df;
}

.admin-template-5 .admin-main-content {
  display: grid;
  gap: 12px;
}

.admin-template-5 .admin-header {
  min-height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 0 -14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22);
  background: rgba(0, 0, 0, 0.2);
}

.admin-template-5 .admin-title-block {
  grid-column: 2;
  display: grid;
  justify-items: center;
}

.admin-template-5 .admin-title-block .admin-logo,
.admin-template-5 .admin-title-block .admin-logo-text {
  display: none;
}

.admin-template-5 .admin-kicker {
  color: #ffffff;
  font-size: 22px;
}

.admin-template-5 .admin-actions {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.admin-template-5 .admin-actions .button.secondary {
  min-height: 46px;
  border-color: rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.06);
  color: var(--gold-strong);
}

.admin-template-5 .admin-actions button {
  display: none;
}

.admin-template-5 .admin-header::after {
  content: "☰";
  grid-column: 3;
  justify-self: end;
  color: #ffffff;
  font-size: 30px;
}

.admin-template-5 .admin-mobile-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 8px;
}

.admin-template-5 .admin-mobile-summary button {
  min-height: 138px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px 10px;
  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(7, 9, 9, 0.9);
  color: inherit;
  cursor: pointer;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-template-5 .admin-mobile-summary button.active {
  border-color: rgba(240, 189, 53, 0.72);
  background:
    radial-gradient(circle at 50% 0%, rgba(240, 189, 53, 0.24), transparent 42%),
    rgba(7, 9, 9, 0.95);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.admin-template-5 .admin-mobile-summary span {
  color: var(--gold-strong);
  font-size: 34px;
  line-height: 1;
}

.admin-template-5 .admin-mobile-summary strong {
  color: var(--gold-strong);
  font-size: 15px;
  line-height: 1.6;
}

.admin-template-5 .admin-mobile-summary small {
  color: var(--muted);
  font-size: 12px;
}

.admin-template-5 .admin-section {
  margin: 8px 0 0;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(8, 10, 10, 0.92);
}

.admin-template-5 .admin-section h2 {
  margin: 0;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  color: var(--gold-strong);
  font-size: 19px;
}

.admin-template-5 .admin-section h2::before {
  content: "⌃";
  margin-left: auto;
  color: var(--gold-strong);
}

.admin-template-5 .admin-section h2::after {
  content: none;
}

.graphical-item-editor {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: stretch;
  padding: 14px;
}

.graphical-item-media {
  min-width: 0;
}

.graphical-item-media .image-upload-field {
  height: 100%;
}

.graphical-item-media .image-preview {
  min-height: 190px;
}

.graphical-item-media .image-preview img {
  height: 220px;
}

.graphical-item-details {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.graphical-item-details .form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.graphical-item-details textarea {
  min-height: 86px;
}

.graphical-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-template-5 .admin-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 14px;
}

.admin-template-5 .form-grid.two {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-template-5 .field label,
.admin-template-5 .check-field {
  color: #bfb59a;
}

.admin-template-5 .field input,
.admin-template-5 .field textarea,
.admin-template-5 .field select {
  min-height: 44px;
  border-color: rgba(212, 175, 55, 0.18);
  background: rgba(0, 0, 0, 0.24);
  color: #fff8df;
}

.admin-template-5 .image-preview {
  min-height: 72px;
  border-color: rgba(212, 175, 55, 0.16);
  background: rgba(0, 0, 0, 0.2);
}

.admin-template-5 .image-preview img {
  height: 76px;
}

.admin-template-5 .button {
  min-height: 50px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f3c547, #c98e17);
  color: #090909;
}

.admin-template-5 .button.secondary {
  border-color: rgba(212, 175, 55, 0.36);
  background: rgba(212, 175, 55, 0.07);
  color: var(--gold-strong);
}

.admin-template-5 .button.danger {
  background: rgba(255, 70, 70, 0.1);
  color: #ff6d6d;
  border-color: rgba(255, 70, 70, 0.24);
}

.admin-template-5 .editable-row,
.admin-template-5 .item-editor {
  border-color: rgba(212, 175, 55, 0.14);
  background: rgba(255, 255, 255, 0.018);
}

.admin-template-5 .admin-tab {
  background: rgba(255, 255, 255, 0.035);
  color: #d9c997;
}

.admin-template-5 .admin-tab.active {
  background: var(--gold-strong);
  color: #070707;
}

@media (max-width: 680px) {
  .admin-template-5 .admin-mobile-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-template-5 .form-grid.two {
    grid-template-columns: 1fr;
  }

  .graphical-item-editor {
    grid-template-columns: 1fr;
  }

  .graphical-item-details .form-grid.two {
    grid-template-columns: 1fr;
  }

  .admin-template-5 .admin-header {
    grid-template-columns: 1fr auto auto;
  }
}

@media (min-width: 1180px) {
  .admin-template-4.admin-phone {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .admin-template-4 .admin-screen {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    border-radius: 0;
  }

  .admin-template-4 .admin-graphic-sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 28px;
    padding: 28px 0 22px;
    border-left: 1px solid rgba(212, 175, 55, 0.26);
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(3, 10, 12, 0.92)),
      url("assets/hero.png");
    background-size: cover;
    background-position: bottom center;
  }

  .admin-template-4 .admin-graphic-brand {
    display: grid;
    place-items: center;
    padding: 0 18px;
  }

  .admin-template-4 .admin-graphic-brand .admin-logo {
    width: 112px;
    max-height: 112px;
    padding: 14px;
    border: 1px solid rgba(212, 175, 55, 0.44);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
  }

  .admin-template-4 .admin-graphic-sidebar nav {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 0 0 0 10px;
  }

  .admin-template-4 .admin-graphic-sidebar button,
  .admin-template-4 .admin-graphic-sidebar-footer {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 0;
    border-radius: 0 12px 12px 0;
    background: transparent;
    color: #e9dfc2;
    cursor: pointer;
    font-size: 13px;
  }

  .admin-template-4 .admin-graphic-sidebar button.active {
    border: 1px solid rgba(212, 175, 55, 0.5);
    border-left: 0;
    background: rgba(212, 175, 55, 0.16);
    color: #fff8df;
  }

  .admin-template-4 .admin-graphic-sidebar-footer {
    margin-left: 10px;
    color: #d6c58e;
  }

  .admin-template-4 .admin-main-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    align-content: start;
    padding: 0 28px 28px;
  }

  .admin-template-4 .admin-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin: 0 -28px;
  }

  .admin-template-4 .admin-title-block {
    grid-column: 2;
  }

  .admin-template-4 .admin-actions {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    padding-right: 22px;
  }

  .admin-template-4 .admin-section:nth-of-type(1) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .admin-template-4 .admin-section:nth-of-type(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .admin-template-4 .admin-section:nth-of-type(3) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .admin-template-4 .admin-section:nth-of-type(4) {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .admin-template-4 .admin-main-content > .admin-section {
    grid-column: 1 / -1;
    width: 100%;
  }

  .admin-template-4 .admin-section:nth-of-type(1) .form-grid.two {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-template-4 .editable-row .form-grid.two,
  .admin-template-4 .item-editor .form-grid.two {
    grid-template-columns: 1.2fr 0.8fr 1fr 0.55fr 1fr;
    align-items: end;
  }

  .admin-template-4 .admin-card {
    padding: 14px;
  }
}

@media (min-width: 720px) {
  .admin-phone {
    width: min(100%, 960px);
    min-height: auto;
    margin: 0;
    border-radius: 28px;
  }

  .admin-phone .admin-screen {
    border-radius: 28px;
  }
}

@media (min-width: 780px) {
  .admin-phone .form-grid.two {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-phone .admin-card {
    padding: 18px;
  }

  .admin-phone .editable-row .form-grid.two,
  .admin-phone .item-editor .form-grid.two {
    grid-template-columns: 1.2fr 0.8fr 1fr 0.7fr 1fr;
    align-items: end;
  }

  .admin-phone .item-editor {
    padding: 12px;
  }

  .admin-phone .row-actions {
    justify-content: flex-end;
  }
}

.toast {
  position: fixed;
  inset-inline: 14px;
  bottom: 18px;
  z-index: 20;
  max-width: 402px;
  margin: auto;
  padding: 14px 16px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 14px;
  background: #171207;
  color: var(--text);
  text-align: center;
  box-shadow: var(--shadow);
}

.image-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
}

.image-zoom-panel {
  width: min(100%, 980px);
  max-height: min(92dvh, 760px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: 22px;
  background: #070707;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}

.image-zoom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}

.image-zoom-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: right;
}

.image-zoom-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-zoom-copy p {
  margin: 0;
  color: #d7b46a;
  font-size: 13px;
  line-height: 1.7;
}

.image-zoom-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.image-zoom-actions .button {
  min-height: 34px;
  padding: 7px 11px;
}

.image-zoom-stage {
  min-height: 280px;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 14px;
}

.image-zoom-stage img {
  max-width: 100%;
  max-height: 72dvh;
  object-fit: contain;
  transform-origin: center;
  transition: transform 0.16s ease;
  user-select: none;
}

.login-card {
  width: min(100%, 390px);
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
}

.login-card h1 {
  margin: 0;
  font-size: 22px;
}

.login-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.captcha-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 46px;
  gap: 8px;
  align-items: center;
}

.captcha-row strong {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-strong);
  direction: ltr;
}

.captcha-refresh {
  min-width: 46px;
  padding: 0;
  font-size: 18px;
}

@media (min-width: 560px) {
  .form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final responsive admin layer */
.admin-template-4.admin-phone,.admin-template-5.admin-phone{width:100%;max-width:none;margin:0;border:0;border-radius:0}.admin-template-4 .admin-screen,.admin-template-5 .admin-screen{min-height:100dvh;padding:0;border-radius:0;background:#0b0d0d}.admin-template-4 .admin-main-content,.admin-template-5 .admin-main-content{display:grid;gap:16px;min-width:0;padding:0 16px 32px}.admin-template-4 .admin-header,.admin-template-5 .admin-header{position:sticky;z-index:20;top:0;min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 -16px;padding:10px 16px;border-bottom:1px solid rgba(231,185,69,.2);background:rgba(11,13,13,.94);backdrop-filter:blur(14px)}.admin-template-4 .admin-title-block,.admin-template-5 .admin-title-block{display:grid;justify-items:start;gap:2px}.admin-template-4 .admin-actions,.admin-template-5 .admin-actions{display:flex;gap:8px;order:initial}.admin-template-4 .admin-mobile-summary,.admin-template-5 .admin-mobile-summary{display:grid;grid-template-columns:repeat(4,minmax(84px,1fr));gap:8px;margin:4px 0 0;padding:4px 0 8px;overflow-x:auto}.admin-template-4 .admin-mobile-summary button,.admin-template-5 .admin-mobile-summary button{min-height:82px;display:grid;place-items:center;align-content:center;gap:5px;padding:9px 7px;border:1px solid rgba(231,185,69,.2);border-radius:12px;background:#131616;color:#f7f2e5;cursor:pointer}.admin-template-4 .admin-mobile-summary button.active,.admin-template-5 .admin-mobile-summary button.active{border-color:#e7b945;background:linear-gradient(145deg,rgba(231,185,69,.2),#131616)}.admin-template-4 .admin-mobile-summary strong,.admin-template-5 .admin-mobile-summary strong{color:#f7f2e5;font-size:12px}.admin-template-4 .admin-mobile-summary small,.admin-template-5 .admin-mobile-summary small{display:none}.admin-template-4 .admin-section,.admin-template-5 .admin-section{margin:0;overflow:visible;border:1px solid rgba(231,185,69,.2);border-radius:16px;background:#131616}.admin-template-4 .admin-section h2,.admin-template-5 .admin-section h2{padding:15px 16px;border-bottom:1px solid rgba(231,185,69,.2);font-size:17px}.admin-template-4 .admin-section h2:before,.admin-template-4 .admin-section h2:after,.admin-template-5 .admin-section h2:before,.admin-template-5 .admin-section h2:after{content:none}.admin-template-4 .admin-section-toggle small,.admin-template-5 .admin-section-toggle small{display:none}.admin-template-4 .admin-card,.admin-template-5 .admin-card{padding:16px}.admin-template-4 .form-grid.two,.admin-template-5 .form-grid.two,.admin-template-4 .editable-row .form-grid.two,.admin-template-5 .editable-row .form-grid.two,.admin-template-4 .item-editor .form-grid.two,.admin-template-5 .item-editor .form-grid.two,.graphical-item-details .form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.admin-template-4 .editable-row,.admin-template-4 .item-editor,.admin-template-5 .editable-row,.admin-template-5 .item-editor{padding:14px;border:1px solid rgba(231,185,69,.2);border-radius:13px;background:#191c1b}.admin-template-4 .image-preview,.admin-template-5 .image-preview{min-height:110px;border-radius:12px}.admin-template-4 .image-preview img,.admin-template-5 .image-preview img{width:100%;height:130px;object-fit:contain}.admin-template-4 .admin-tabs,.admin-template-5 .admin-tabs{position:sticky;z-index:10;top:70px;padding:10px;border:1px solid rgba(231,185,69,.2);border-radius:12px;background:rgba(19,22,22,.94);overflow-x:auto}
@media(max-width:700px){.admin-template-4 .admin-main-content,.admin-template-5 .admin-main-content{padding:0 10px 24px}.admin-template-4 .admin-header,.admin-template-5 .admin-header{margin:0 -10px;padding:9px 12px}.admin-template-4 .admin-actions button,.admin-template-5 .admin-actions button{display:none}.admin-template-4 .admin-actions a.button,.admin-template-5 .admin-actions a.button{display:flex;min-height:38px;padding:7px 10px}.admin-template-4 .admin-mobile-summary,.admin-template-5 .admin-mobile-summary{grid-template-columns:repeat(4,90px)}.admin-template-4 .form-grid.two,.admin-template-5 .form-grid.two,.admin-template-4 .editable-row .form-grid.two,.admin-template-5 .editable-row .form-grid.two,.admin-template-4 .item-editor .form-grid.two,.admin-template-5 .item-editor .form-grid.two,.graphical-item-editor,.graphical-item-details .form-grid.two{grid-template-columns:1fr}.admin-template-4 .admin-card,.admin-template-5 .admin-card{padding:12px}}
@media(min-width:980px){.admin-template-4 .admin-screen,.admin-template-5 .admin-screen{display:grid;grid-template-columns:240px minmax(0,1fr)}.admin-template-4 .admin-graphic-sidebar,.admin-template-5 .admin-graphic-sidebar{position:sticky;top:0;height:100dvh;display:grid;grid-template-rows:auto 1fr auto;gap:24px;padding:24px 16px;border-left:1px solid rgba(231,185,69,.2);background:#090b0b}.admin-template-4 .admin-graphic-brand,.admin-template-5 .admin-graphic-brand{display:grid;place-items:center;min-height:110px}.admin-template-4 .admin-graphic-sidebar nav,.admin-template-5 .admin-graphic-sidebar nav{display:grid;align-content:start;gap:8px;padding:0}.admin-template-4 .admin-graphic-sidebar button,.admin-template-5 .admin-graphic-sidebar button{min-height:50px;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid transparent;border-radius:11px;background:transparent;color:#a9a394;cursor:pointer;text-align:right}.admin-template-4 .admin-graphic-sidebar button.active,.admin-template-5 .admin-graphic-sidebar button.active{border-color:rgba(231,185,69,.2);background:rgba(231,185,69,.12);color:#f7f2e5}.admin-template-4 .admin-main-content,.admin-template-5 .admin-main-content{padding:0 28px 40px}.admin-template-4 .admin-header,.admin-template-5 .admin-header{margin:0 -28px;padding:12px 28px}.admin-template-4 .admin-mobile-summary,.admin-template-5 .admin-mobile-summary{display:none}.admin-template-4 .admin-card>.form-grid.two,.admin-template-5 .admin-card>.form-grid.two{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Home category cards: inset sizing and soft discovery glow */
@keyframes category-card-breathe {
  0%,100% { box-shadow: 0 0 0 1px rgba(242,190,67,.38), 0 0 7px rgba(242,190,67,.16); }
  50% { box-shadow: 0 0 0 1px rgba(255,220,124,.9), 0 0 17px rgba(242,190,67,.48); }
}
.home-template-4 .exact-category,
.desktop-home-template-4 .desktop-category {
  overflow: visible;
  background: rgba(0,0,0,.3);
  animation: category-card-breathe 2.8s ease-in-out infinite;
  transition: transform .22s ease, filter .2s ease, box-shadow .2s ease;
}
.home-template-4 .exact-category:nth-of-type(2),
.desktop-home-template-4 .desktop-category:nth-of-type(2) { animation-delay: -.7s; }
.home-template-4 .exact-category:nth-of-type(3),
.desktop-home-template-4 .desktop-category:nth-of-type(3) { animation-delay: -1.4s; }
.home-template-4 .exact-category:nth-of-type(4),
.desktop-home-template-4 .desktop-category:nth-of-type(4) { animation-delay: -2.1s; }
.home-template-4 .exact-category img,
.desktop-home-template-4 .desktop-category img {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255,218,116,.5);
}
.home-template-4 .exact-category:hover,
.home-template-4 .exact-category:focus-visible,
.desktop-home-template-4 .desktop-category:hover,
.desktop-home-template-4 .desktop-category:focus-visible {
  animation-play-state: paused;
  filter: brightness(1.1) saturate(1.06);
  box-shadow: 0 0 0 2px rgba(255,224,139,.95), 0 0 24px rgba(242,190,67,.62);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .home-template-4 .exact-category,
  .desktop-home-template-4 .desktop-category { animation: none; }
}

/* Desktop admin: calm two-column workspace */
@media (min-width: 980px) {
  .admin-template-4 .admin-screen,
  .admin-template-5 .admin-screen { grid-template-columns: 260px minmax(0,1fr); }
  .admin-template-4 .admin-graphic-sidebar,
  .admin-template-5 .admin-graphic-sidebar { padding: 28px 18px; }
  .admin-template-4 .admin-main-content,
  .admin-template-5 .admin-main-content { gap: 22px; padding: 0 34px 56px; }
  .admin-template-4 .admin-header,
  .admin-template-5 .admin-header { margin: 0 -34px 2px; padding: 14px 34px; }
  .admin-template-4 .admin-section,
  .admin-template-5 .admin-section { width: min(100%,1120px); margin-inline: auto; border-radius: 18px; }
  .admin-template-4 .admin-section h2,
  .admin-template-5 .admin-section h2 { padding: 20px 24px; font-size: 20px; }
  .admin-template-4 .admin-card,
  .admin-template-5 .admin-card { padding: 24px; }
  .admin-template-4 .admin-card>.form-grid.two,
  .admin-template-5 .admin-card>.form-grid.two,
  .admin-template-4 .editable-row .form-grid.two,
  .admin-template-5 .editable-row .form-grid.two,
  .admin-template-4 .item-editor .form-grid.two,
  .admin-template-5 .item-editor .form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 20px; }
  .admin-template-4 .image-upload-field,
  .admin-template-5 .image-upload-field { padding: 14px; border: 1px solid rgba(231,185,69,.14); border-radius: 14px; background: rgba(255,255,255,.018); }
  .admin-template-4 .image-preview img,
  .admin-template-5 .image-preview img { height: 160px; }
  .admin-template-4 .editable-row,
  .admin-template-4 .item-editor,
  .admin-template-5 .editable-row,
  .admin-template-5 .item-editor { padding: 20px; }
  .admin-template-4 .row-list,
  .admin-template-5 .row-list { gap: 18px; }
  .admin-template-4 .button,
  .admin-template-5 .button { min-height: 44px; }
  .admin-template-4 .graphical-item-editor,
  .admin-template-5 .graphical-item-editor { grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); gap: 24px; }
  .admin-template-4 .admin-section .admin-card > .form-grid.two,
  .admin-template-5 .admin-section .admin-card > .form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

/* Extra spacing for the four home buttons on mobile only */
@media (max-width: 719px) {
  .home-template-4 .exact-category {
    width: 32%;
  }
  .home-template-4 .exact-category-1 { left: 15%; top: 22%; }
  .home-template-4 .exact-category-2 { left: 53%; top: 22%; }
  .home-template-4 .exact-category-3 { left: 15%; top: 48%; }
  .home-template-4 .exact-category-4 { left: 53%; top: 48%; }
}

.product6-card { direction: ltr; }
.product6-copy { direction: rtl; }
.product-template-6,
.desktop-product-template-6 {
  background:
    radial-gradient(circle at 50% 0, rgba(196, 132, 22, 0.1), transparent 30%),
    linear-gradient(180deg, #050807 0%, #020403 100%) !important;
}

/* Unified home button proportions and stronger glow */
@keyframes category-card-breathe-strong {
  0%,100% {
    box-shadow: 0 0 0 1px rgba(245,190,65,.58), 0 0 10px rgba(245,190,65,.26), inset 0 0 8px rgba(245,190,65,.08);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(255,226,143,.98), 0 0 25px rgba(245,190,65,.72), inset 0 0 13px rgba(245,190,65,.16);
  }
}
.home-template-4 .exact-category,
.desktop-home-template-4 .desktop-category {
  height: auto;
  aspect-ratio: 0.86;
  animation-name: category-card-breathe-strong;
  animation-duration: 2.45s;
}
.home-template-4 .exact-category {
  width: 34%;
}
.home-template-4 .exact-category-1 { left: 14%; top: 22.2%; }
.home-template-4 .exact-category-2 { left: 52%; top: 22.2%; }
.home-template-4 .exact-category-3 { left: 14%; top: 47%; }
.home-template-4 .exact-category-4 { left: 52%; top: 47%; }
.desktop-home-template-4 .desktop-category {
  width: 16.5%;
}
.home-template-4 .exact-category img,
.desktop-home-template-4 .desktop-category img {
  inset: 6%;
  width: 88%;
  height: 88%;
  border-radius: 20px;
}

/* Golden showcase: three columns on desktop, two on mobile */
@media (min-width: 980px) {
  .desktop-product-template-6 .product6-list:not(.is-list) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100% - 80px, 1380px);
    gap: 18px;
  }
  .desktop-product-template-6 .product6-list:not(.is-list) .product6-image {
    height: 245px;
  }
  .desktop-product-template-6 .product6-list:not(.is-list) .product6-copy {
    min-height: 112px;
  }
}

@media (max-width: 719px) {
  .home-template-4 .exact-category { width: 32%; }
  .home-template-4 .exact-category-1 { left: 15%; top: 22%; }
  .home-template-4 .exact-category-2 { left: 53%; top: 22%; }
  .home-template-4 .exact-category-3 { left: 15%; top: 48%; }
  .home-template-4 .exact-category-4 { left: 53%; top: 48%; }
}

/* Final home-category placement matched to the artwork frames */
@keyframes category-frame-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(243,188,63,.58), 0 0 5px rgba(243,188,63,.2);
  }
  50% {
    box-shadow: inset 0 0 0 2px rgba(255,224,137,.94), 0 0 11px rgba(243,188,63,.48);
  }
}
.home-template-4 .exact-category,
.desktop-home-template-4 .desktop-category {
  aspect-ratio: auto;
  overflow: hidden;
  animation: category-frame-pulse 2.6s ease-in-out infinite;
  transform: none;
}
.home-template-4 .exact-category img,
.desktop-home-template-4 .desktop-category img {
  inset: 3%;
  width: 94%;
  height: 94%;
  border-radius: 20px;
}

@media (max-width: 719px) {
  .home-template-4 .exact-category {
    width: 35.5%;
    height: 23.2%;
  }
  .home-template-4 .exact-category-1 { left: 13.3%; top: 22%; }
  .home-template-4 .exact-category-2 { left: 51.2%; top: 22%; }
  .home-template-4 .exact-category-3 { left: 13.3%; top: 46.8%; }
  .home-template-4 .exact-category-4 { left: 51.2%; top: 46.8%; }
}

@media (min-width: 720px) {
  .desktop-home-template-4 .desktop-category {
    top: 31.15%;
    width: 16%;
    height: 33.7%;
  }
  .desktop-home-template-4 .desktop-category-1 { left: 15.35%; }
  .desktop-home-template-4 .desktop-category-2 { left: 32.65%; }
  .desktop-home-template-4 .desktop-category-3 { left: 49.95%; }
  .desktop-home-template-4 .desktop-category-4 { left: 67.25%; }
}

@keyframes category-frame-pulse-safe {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(243,188,63,.58), 0 0 4px rgba(243,188,63,.2); }
  50% { box-shadow: inset 0 0 0 2px rgba(255,224,137,.94), 0 0 8px rgba(243,188,63,.46); }
}
.home-template-4 .exact-category,
.desktop-home-template-4 .desktop-category { animation-name: category-frame-pulse-safe; }
@media (max-width: 719px) {
  .home-template-4 .exact-category { height: 22.8%; }
}
@media (min-width: 720px) {
  .desktop-home-template-4 .desktop-category { height: 33%; }
}

/* Stable home layout: keep artwork and hotspots on the same coordinate canvas. */
@media (min-width: 720px) {
  .desktop-home-exact-screen.desktop-home-template-4 {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1670 / 939;
    overflow: hidden;
  }

  .desktop-home-template-4 .desktop-home-exact-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: fill;
  }

  .desktop-home-template-4 .desktop-category {
    top: 31.25%;
    width: 16.45%;
    height: 33.55%;
  }

  .desktop-home-template-4 .desktop-category-1 { left: 15.35%; }
  .desktop-home-template-4 .desktop-category-2 { left: 32.40%; }
  .desktop-home-template-4 .desktop-category-3 { left: 49.45%; }
  .desktop-home-template-4 .desktop-category-4 { left: 66.50%; }
}

@media (max-width: 719px) {
  .home-exact-screen.home-template-4 {
    aspect-ratio: 941 / 1669;
    overflow: hidden;
  }

  .home-template-4 .home-exact-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .home-template-4 .exact-category {
    width: 36%;
    height: 23.15%;
  }

  .home-template-4 .exact-category-1 { left: 12.8%; top: 21.95%; }
  .home-template-4 .exact-category-2 { left: 51.2%; top: 21.95%; }
  .home-template-4 .exact-category-3 { left: 12.8%; top: 46.55%; }
  .home-template-4 .exact-category-4 { left: 51.2%; top: 46.55%; }
}

/* Desktop-only fine tuning against the artwork guides. */
@media (min-width: 720px) {
  .desktop-home-template-4 .desktop-category {
    top: 32.45%;
    height: 32.35%;
  }

  .desktop-home-template-4 .desktop-category img {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .desktop-home-template-4 .desktop-provider {
    left: 35.33%;
    width: 29.16%;
    height: 5%;
    border-radius: 14px;
  }

  .desktop-home-template-4 .desktop-provider-1 { top: 67.10%; }
  .desktop-home-template-4 .desktop-provider-2 { top: 72.63%; }
  .desktop-home-template-4 .desktop-provider-3 { top: 78.70%; }
  .desktop-home-template-4 .desktop-provider-4 { top: 84.88%; }
}

/* Custom navigation providers: visible 2x2 buttons with editable logos. */
.home-template-4 .exact-provider,
.desktop-home-template-4 .desktop-provider {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 7px 12px;
  direction: rtl;
  color: #efbd55;
  line-height: 1;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(15,13,9,.96), rgba(2,3,3,.94));
  border: 1px solid rgba(215,157,38,.82);
  box-shadow: inset 0 0 15px rgba(204,144,24,.08), 0 0 8px rgba(218,163,46,.16);
  box-sizing: border-box;
}

.home-template-4 .exact-provider span,
.desktop-home-template-4 .desktop-provider span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.provider-button-logo,
.provider-button-fallback {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: contain;
}

.provider-button-fallback {
  display: grid;
  place-items: center;
  color: #12100b;
  font: 900 19px/1 Arial, sans-serif;
  background: linear-gradient(145deg, #ffe08b, #b97711);
  box-shadow: inset 0 0 0 2px rgba(255,240,187,.34), 0 0 10px rgba(231,172,46,.24);
}

.provider-button-label {
  min-width: 0;
  flex: 1 1 auto;
  color: #f0c266;
  font-size: clamp(13px, 1.1vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.provider-button-arrow {
  flex: 0 0 auto;
  color: #e8aa36;
  font-size: 28px;
  line-height: 1;
}

@media (max-width: 719px) {
  .home-exact-screen.home-template-4 { aspect-ratio: 941 / 1672; }

  .home-template-4 .exact-provider {
    width: 38.4%;
    height: 8.8%;
    padding: 6px 8px;
    border-radius: 15px;
    gap: 7px;
  }

  .home-template-4 .exact-provider-1 { left: 10.1%; top: 68%; }
  .home-template-4 .exact-provider-2 { left: 51.5%; top: 68%; }
  .home-template-4 .exact-provider-3 { left: 10.1%; top: 78.2%; }
  .home-template-4 .exact-provider-4 { left: 51.5%; top: 78.2%; }

  .home-template-4 .provider-button-logo,
  .home-template-4 .provider-button-fallback { width: 32px; height: 32px; border-radius: 10px; }
  .home-template-4 .provider-button-label { font-size: 13px; }
  .home-template-4 .provider-button-arrow { font-size: 22px; }
}

@media (min-width: 720px) {
  .desktop-home-exact-screen.desktop-home-template-4 { aspect-ratio: 1672 / 941; }

  .desktop-home-template-4 .desktop-provider {
    width: 18.75%;
    height: 10.5%;
    padding: 10px 16px;
    border-radius: 18px;
  }

  .desktop-home-template-4 .desktop-provider-1 { left: 30.4%; top: 66.5%; }
  .desktop-home-template-4 .desktop-provider-2 { left: 50.85%; top: 66.5%; }
  .desktop-home-template-4 .desktop-provider-3 { left: 30.4%; top: 78.2%; }
  .desktop-home-template-4 .desktop-provider-4 { left: 50.85%; top: 78.2%; }
}

/* Desktop symmetry and compact navigation controls. */
@media (min-width: 720px) {
  .desktop-home-template-4 .desktop-category {
    width: 16.45%;
  }

  .desktop-home-template-4 .desktop-category-1 { left: 16.2%; }
  .desktop-home-template-4 .desktop-category-2 { left: 33.25%; }
  .desktop-home-template-4 .desktop-category-3 { left: 50.30%; }
  .desktop-home-template-4 .desktop-category-4 { left: 67.35%; }

  .desktop-home-template-4 .desktop-provider {
    width: 16.5%;
    height: 8.3%;
    padding: 7px 12px;
    gap: 8px;
    border-radius: 15px;
  }

  .desktop-home-template-4 .desktop-provider-1 { left: 32.65%; top: 67.15%; }
  .desktop-home-template-4 .desktop-provider-2 { left: 50.85%; top: 67.15%; }
  .desktop-home-template-4 .desktop-provider-3 { left: 32.65%; top: 77.05%; }
  .desktop-home-template-4 .desktop-provider-4 { left: 50.85%; top: 77.05%; }

  .desktop-home-template-4 .provider-button-logo,
  .desktop-home-template-4 .provider-button-fallback {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .desktop-home-template-4 .provider-button-label {
    font-size: clamp(13px, .95vw, 17px);
  }

  .desktop-home-template-4 .provider-button-arrow {
    font-size: 22px;
  }
}

/* Final vertical clearance for the current home artwork. */
@media (min-width: 720px) {
  .desktop-home-template-4 .desktop-category {
    top: 34%;
    height: 30.8%;
  }
}

@media (max-width: 719px) {
  .home-template-4 .exact-provider {
    height: 6.3%;
    min-height: 0;
    padding-block: 4px;
    border-radius: 13px;
  }

  .home-template-4 .exact-provider-1 { top: 71%; }
  .home-template-4 .exact-provider-2 { top: 71%; }
  .home-template-4 .exact-provider-3 { top: 79.2%; }
  .home-template-4 .exact-provider-4 { top: 79.2%; }

  .home-template-4 .provider-button-logo,
  .home-template-4 .provider-button-fallback {
    width: 27px;
    height: 27px;
    border-radius: 8px;
  }

  .home-template-4 .provider-button-label { font-size: 12px; }
  .home-template-4 .provider-button-arrow { font-size: 19px; }
}

/* Navigation buttons use one full-bleed image on both desktop and mobile. */
.home-template-4 .exact-provider,
.desktop-home-template-4 .desktop-provider {
  padding: 0;
  gap: 0;
  aspect-ratio: 4.5 / 1;
  height: auto;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

/* Compact single-row navigation cards. */
@media (max-width: 719px) {
  .home-template-4 .exact-provider {
    top: 72.2%;
    width: 20%;
    height: auto;
    border-radius: 10px;
  }

  .home-template-4 .exact-provider-1 { left: 7%; }
  .home-template-4 .exact-provider-2 { left: 29%; }
  .home-template-4 .exact-provider-3 { left: 51%; }
  .home-template-4 .exact-provider-4 { left: 73%; }
}

@media (min-width: 720px) {
  .desktop-home-template-4 .desktop-provider {
    top: 68%;
    width: 11%;
    height: auto;
    border-radius: 12px;
  }

  .desktop-home-template-4 .desktop-provider-1 { left: 25.75%; }
  .desktop-home-template-4 .desktop-provider-2 { left: 37.25%; }
  .desktop-home-template-4 .desktop-provider-3 { left: 48.75%; }
  .desktop-home-template-4 .desktop-provider-4 { left: 60.25%; }
}

.home-template-4 .provider-button-label,
.home-template-4 .provider-button-arrow,
.desktop-home-template-4 .provider-button-label,
.desktop-home-template-4 .provider-button-arrow {
  display: none;
}

.home-template-4 .provider-button-logo,
.desktop-home-template-4 .provider-button-logo,
.home-template-4 .exact-provider .provider-button-fallback,
.desktop-home-template-4 .desktop-provider .provider-button-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.home-template-4 .provider-button-logo,
.desktop-home-template-4 .provider-button-logo {
  display: block;
  object-fit: cover;
}

.home-template-4 .provider-button-fallback,
.desktop-home-template-4 .provider-button-fallback {
  font-size: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(241,188,72,.2), transparent 24%),
    linear-gradient(135deg, rgba(20,17,11,.98), rgba(2,3,3,.98));
}

.home-template-4 .provider-button-fallback::after,
.desktop-home-template-4 .provider-button-fallback::after {
  content: "⌖";
  color: #d9a336;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1;
}

/* Reference-style map dock: four square logos with captions. */
.home-template-4 .provider-logo-dock,
.desktop-home-template-4 .provider-logo-dock {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  direction: rtl;
  background: linear-gradient(180deg, rgba(19,16,11,.94), rgba(5,5,4,.96));
  border: 1px solid rgba(210,155,47,.72);
  box-shadow: inset 0 0 24px rgba(222,166,52,.06), 0 8px 28px rgba(0,0,0,.34);
  animation: category-frame-pulse-safe 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .home-template-4 .provider-logo-dock,
  .desktop-home-template-4 .provider-logo-dock {
    animation: none;
  }
}

.home-template-4 .provider-logo-dock .exact-provider,
.desktop-home-template-4 .provider-logo-dock .desktop-provider {
  position: relative;
  inset: auto;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.home-template-4 .provider-logo-dock .provider-button-logo,
.desktop-home-template-4 .provider-logo-dock .provider-button-logo,
.home-template-4 .provider-logo-dock .provider-button-fallback,
.desktop-home-template-4 .provider-logo-dock .provider-button-fallback {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 22%;
  border: 1px solid rgba(255,232,178,.78);
  background-color: #f1eee5;
  box-shadow: 0 5px 14px rgba(0,0,0,.3), 0 0 12px rgba(218,164,54,.12);
}

.home-template-4 .provider-logo-dock .provider-button-fallback,
.desktop-home-template-4 .provider-logo-dock .provider-button-fallback {
  display: grid;
  place-items: center;
}

.home-template-4 .provider-logo-dock .provider-button-label,
.desktop-home-template-4 .provider-logo-dock .provider-button-label {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  clip: auto;
  color: #e8c27b;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-template-4 .provider-logo-dock .provider-button-arrow,
.desktop-home-template-4 .provider-logo-dock .provider-button-arrow {
  display: none;
}

.home-template-4 .provider-logo-dock .exact-provider:hover,
.home-template-4 .provider-logo-dock .exact-provider:focus-visible,
.desktop-home-template-4 .provider-logo-dock .desktop-provider:hover,
.desktop-home-template-4 .provider-logo-dock .desktop-provider:focus-visible {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: none;
}

@media (max-width: 719px) {
  .home-template-4 .exact-provider-logo-dock {
    left: 15.5%;
    top: 70.1%;
    width: 69%;
    padding: 11px 12px 9px;
    gap: 10px;
    border-radius: 22px;
    transform: translateY(20%);
  }

  .home-template-4 .provider-logo-dock .provider-button-label {
    font-size: 10px;
  }
}

@media (min-width: 720px) {
  .desktop-home-template-4 .desktop-provider-logo-dock {
    left: 35.2%;
    top: 68.3%;
    width: 29.6%;
    padding: 15px 18px 11px;
    gap: 14px;
    border-radius: 24px;
  }

  .desktop-home-template-4 .provider-logo-dock .provider-button-label {
    font-size: clamp(11px, .85vw, 15px);
  }
}

/* Admin-selectable background for the active golden product template. */
.product-template-6,
.desktop-product-template-6 {
  background:
    linear-gradient(180deg, rgba(1,4,3,.68), rgba(1,3,2,.82)),
    radial-gradient(circle at 50% 0, rgba(196,132,22,.12), transparent 32%),
    var(--product-bg, none),
    #020403 !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* Desktop golden product showcase based on the full-width photographic reference. */
@media (min-width: 980px) {
  .desktop-product-template-6 {
    min-height: 100dvh;
    padding-bottom: 70px;
    background-attachment: fixed !important;
  }

  .desktop-product-template-6 .product6-header {
    position: relative;
    min-height: 300px;
    display: grid;
    grid-template-areas: "map logo home";
    grid-template-columns: 110px minmax(0, 1fr) 110px;
    align-items: start;
    padding: 20px clamp(42px, 5vw, 88px);
    border-top: 1px solid rgba(229, 178, 54, .25);
    border-bottom: 1px solid rgba(229, 178, 54, .42);
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .62)),
      var(--product-bg, none),
      #050706;
    background-size: cover;
    background-position: center 24%;
    box-shadow: inset 0 -55px 80px rgba(0, 0, 0, .42);
  }

  .desktop-product-template-6 .product6-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgba(210, 153, 33, .12), transparent 28%);
  }

  .desktop-product-template-6 .product6-header .desktop-restaurant-logo,
  .desktop-product-template-6 .product6-header .desktop-restaurant-name {
    grid-area: logo;
    z-index: 1;
    align-self: center;
    justify-self: center;
  }

  .desktop-product-template-6 .product6-header .desktop-restaurant-logo {
    width: min(300px, 24vw);
    max-height: 205px;
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, .85));
  }

  .desktop-product-template-6 .product6-header-button {
    z-index: 2;
    width: 82px;
    height: 58px;
    margin-top: 0;
    border: 1px solid rgba(225, 173, 49, .7);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(10, 12, 11, .82), rgba(0, 0, 0, .62));
    color: #efc14f;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35), inset 0 0 13px rgba(216, 158, 31, .06);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .desktop-product-template-6 .product6-header-button:hover,
  .desktop-product-template-6 .product6-header-button:focus-visible {
    transform: translateY(-2px);
    border-color: #f0c252;
    box-shadow: 0 0 18px rgba(225, 171, 45, .32);
  }

  .desktop-product-template-6 .product6-header-button svg {
    width: 28px;
    height: 28px;
  }

  .desktop-product-template-6 .product6-map-button {
    position: absolute;
    left: clamp(42px, 5vw, 88px);
    top: 20px;
  }

  .desktop-product-template-6 .product6-home-button {
    position: absolute;
    right: clamp(42px, 5vw, 88px);
    top: 20px;
  }

  .desktop-product-template-6 .product6-tabs {
    position: relative;
    z-index: 3;
    width: min(calc(100% - 110px), 1740px);
    min-height: 76px;
    margin: -76px auto 0;
    padding: 12px clamp(26px, 5vw, 85px);
    gap: 22px;
    border: 1px solid rgba(218, 164, 56, .25);
    border-radius: 24px 24px 0 0;
    background: linear-gradient(180deg, rgba(14, 15, 13, .78), rgba(5, 7, 6, .94));
    backdrop-filter: blur(9px);
  }

  .desktop-product-template-6 .product6-tabs a {
    min-height: 48px;
    border-color: transparent;
    border-radius: 14px;
    background: transparent;
    color: #f4efe2;
    font-size: 17px;
  }

  .desktop-product-template-6 .product6-tabs a.active {
    border-color: rgba(233, 185, 60, .82);
    background: linear-gradient(135deg, rgba(194, 143, 22, .32), rgba(109, 78, 10, .42));
    color: #f3c54e;
    box-shadow: inset 0 0 16px rgba(239, 192, 64, .08);
  }

  .desktop-product-template-6 .product6-toolbar {
    width: min(calc(100% - 110px), 1740px);
    min-height: 76px;
    margin: 0 auto;
    grid-template-columns: 150px 1fr 150px;
  }

  .desktop-product-template-6 .product6-toolbar h1 {
    font-size: 26px;
  }

  .desktop-product-template-6 .product6-layout-controls {
    gap: 8px;
  }

  .desktop-product-template-6 .product6-layout-controls button {
    width: 42px;
    height: 42px;
  }

  .desktop-product-template-6 .product6-list {
    width: min(calc(100% - 110px), 1740px) !important;
    gap: 26px !important;
  }

  .desktop-product-template-6 .product6-list.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .desktop-product-template-6 .product6-list.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .desktop-product-template-6 .product6-card {
    border-color: rgba(198, 142, 27, .72);
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(15, 17, 15, .97), rgba(5, 7, 6, .99)),
      radial-gradient(circle at 50% 0, rgba(204, 148, 31, .09), transparent 55%);
    box-shadow: 0 15px 38px rgba(0, 0, 0, .42);
  }

  .desktop-product-template-6 .product6-list:not(.is-list) .product6-image {
    height: clamp(215px, 15vw, 290px);
  }

  .desktop-product-template-6 .product6-list:not(.is-list) .product6-copy {
    min-height: 165px;
    gap: 14px;
    padding: 22px 15px;
  }

  .desktop-product-template-6 .product6-copy h2 {
    color: #f7f1e4;
    font-size: clamp(18px, 1.35vw, 25px);
  }

  .desktop-product-template-6 .product6-copy strong {
    color: #e9b92d;
    font-size: clamp(22px, 1.8vw, 34px);
    font-weight: 800;
  }
}

/* Exact desktop product composition restored from the previous live version. */
@media (min-width: 980px) {
  .reference-product-page {
    min-height: 100dvh;
    padding: 28px 0 52px;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .76)),
      var(--product-desktop-bg, url("/assets/product-background-desktop.png")),
      #050302 !important;
    background-size: cover !important;
    background-position: top center !important;
    background-attachment: fixed !important;
  }

  .reference-product-nav {
    position: absolute;
    z-index: 5;
    inset: 22px 0 auto;
    width: min(calc(100% - 96px), 1720px);
    min-height: 64px;
    margin: 0 auto;
    pointer-events: none;
  }

  .reference-nav-button {
    position: absolute;
    top: 0;
    min-width: 64px;
    height: 64px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(212, 175, 55, .62);
    border-radius: 16px;
    background: rgba(4, 5, 4, .72);
    color: #f4bd43;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
    backdrop-filter: blur(8px);
    pointer-events: auto;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

  .reference-nav-button:hover,
  .reference-nav-button:focus-visible {
    transform: translateY(-2px);
    border-color: #f2c65a;
    box-shadow: 0 0 22px rgba(212, 175, 55, .32);
  }

  .reference-nav-button svg {
    width: 30px;
    height: 30px;
  }

  .reference-map-button { left: 0; }
  .reference-home-button { right: 0; }

  .reference-product-hero {
    width: min(calc(100% - 180px), 1180px);
    min-height: 235px;
    margin: 0 auto;
    display: grid;
    justify-items: center;
    align-content: end;
    padding-bottom: 20px;
    text-align: center;
  }

  .reference-product-hero .desktop-restaurant-logo {
    width: min(330px, 22vw);
    max-height: 170px;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .72));
  }

  .reference-product-hero .desktop-restaurant-name {
    color: #f2c65a;
    font-size: clamp(64px, 6vw, 104px);
    text-shadow: 0 12px 28px rgba(0, 0, 0, .72);
  }

  .reference-product-tabs {
    width: min(calc(100% - 520px), 990px);
    min-height: 58px;
    margin: 0 auto 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(244, 189, 67, .62);
    border-radius: 14px;
    background: rgba(5, 5, 5, .76);
    backdrop-filter: blur(8px);
  }

  .reference-product-tabs a {
    display: grid;
    place-items: center;
    border-left: 1px solid rgba(244, 189, 67, .34);
    color: #f0d394;
    font-size: 17px;
    font-weight: 900;
  }

  .reference-product-tabs a:last-child { border-left: 0; }

  .reference-product-tabs a.active {
    background: linear-gradient(135deg, #f2c65a, #b67a18);
    color: #11100c;
    box-shadow: 0 0 24px rgba(212, 175, 55, .18);
  }

  .reference-product-toolbar {
    width: min(calc(100% - 180px), 1500px);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 auto 10px;
  }

  .reference-product-layout-controls {
    display: flex;
    gap: 7px;
    direction: ltr;
    padding: 4px;
    border: 1px solid rgba(244, 189, 67, .26);
    border-radius: 12px;
    background: rgba(5, 5, 5, .7);
  }

  .reference-product-layout-controls button {
    width: 38px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #bd9850;
    cursor: pointer;
  }

  .reference-product-layout-controls button.active {
    border-color: rgba(242, 198, 90, .7);
    background: rgba(212, 175, 55, .18);
    color: #f2c65a;
    box-shadow: 0 0 12px rgba(212, 175, 55, .16);
  }

  .reference-product-layout {
    width: min(calc(100% - 180px), 1680px);
    margin: 0 auto;
    display: grid;
    gap: 24px;
  }

  .reference-product-layout.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .reference-product-layout.is-three {
    width: min(calc(100% - 180px), 1420px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .reference-product-layout .showcase-card {
    min-height: 390px;
    display: grid;
    grid-template-rows: 230px 1fr auto;
    overflow: hidden;
    border: 1px solid rgba(244, 189, 67, .54);
    border-radius: 26px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)),
      rgba(5, 5, 5, .86);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 224, 139, .06);
  }

  .reference-product-layout .showcase-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-bottom: 1px solid rgba(244, 189, 67, .28);
  }

  .reference-product-layout .showcase-card .desktop-food-body {
    min-height: 88px;
    display: grid;
    align-content: center;
    padding: 16px 20px 8px;
    text-align: center;
  }

  .reference-product-layout .showcase-card .desktop-food-body h2 {
    color: #fff8e8;
    font-size: var(--desktop-product-title-size, clamp(18px, 1.25vw, 24px));
    text-align: center;
  }

  .reference-product-layout .showcase-card .desktop-food-body p {
    display: none;
  }

  .reference-product-layout .showcase-card .desktop-food-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    padding: 0 20px 20px;
    color: #f2c65a;
  }

  .reference-product-layout .showcase-card .desktop-food-price strong {
    font-size: clamp(22px, 1.65vw, 32px);
  }

  .reference-product-layout.is-list {
    width: min(calc(100% - 220px), 1180px);
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .reference-product-layout.is-list .showcase-card {
    min-height: 190px;
    grid-template-columns: 48% 1fr auto;
    grid-template-rows: 1fr;
    border-radius: 22px;
  }

  .reference-product-layout.is-list .showcase-card img {
    height: 190px;
    border-bottom: 0;
    border-left: 1px solid rgba(244, 189, 67, .28);
  }

  .reference-product-layout.is-list .showcase-card .desktop-food-body {
    justify-items: end;
    padding: 22px 28px;
  }

  .reference-product-layout.is-list .showcase-card .desktop-food-body h2 {
    text-align: right;
  }

  .reference-product-layout.is-list .showcase-card .desktop-food-price {
    align-self: center;
    padding: 20px 28px;
  }
}