/*
 * LATEA Al Hamra — Golden Hour, visual edition 4.0
 * Pure presentation layer. No changes to menus, API requests, authentication,
 * inventory bindings, pricing, upload behaviour, or dashboard event handlers.
 */
:root {
  --ink: #2b2116;
  --ink2: #544431;
  --muted: #756956;
  --cream: #fffcf5;
  --cream2: #f8efd9;
  --green: #9b6a15; /* legacy component token; now antique gold */
  --green2: #322719; /* legacy component token; now espresso */
  --lime: #f7e6b9;
  --line: #ebdfc7;
  --white: #fffefa;
  --gold: #996a1b;
  --shadow: 0 16px 42px rgba(74, 47, 15, 0.09);
  --gold-bright: #efc657;
  --gold-warm: #d9a536;
  --gold-deep: #855812;
  --espresso: #2d2217;
  --champagne: #f6e8c3;
}
html {scroll-padding-top: 155px;}
body {
  background: linear-gradient(180deg, #fffdf8 0%, #fff9ec 68%, #fffdf8 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid #c68c22;
  outline-offset: 3px;
}
.topbar {
  background: rgba(255, 252, 245, 0.97);
  border-bottom: 1px solid #e6d3a6;
}
.topbar .max {min-height: 86px;}
.logo {color: #2d2113; font-size: 29px; font-weight: 860; letter-spacing: -.065em;}
.logo small {color: #976b22; font-size: 9px; letter-spacing: .25em; margin-top: 10px;}
.pill {
  background: #fbf0d2;
  color: #6d4b19;
  border: 1px solid #e5d2a4;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .11em;
  font-weight: 800;
}
.btn {
  color: #392a17;
  background: #fffefb;
  border-color: #dcc79b;
  border-radius: 10px;
  font-weight: 750;
  box-shadow: 0 1px 1px rgba(72,47,17,.02);
}
.btn:hover {border-color: #b9892e; background: #fff9e8;}
.btn.primary {
  background: linear-gradient(135deg, #f5d879, #e8b844 65%, #dca22e);
  border-color: #d9a531;
  color: #29200f;
  box-shadow: 0 8px 18px rgba(125, 84, 12, .15);
}
.btn.primary:hover {
  color: #21190d;
  background: linear-gradient(135deg,#f8e18e,#edc14d 65%,#dba02a);
  border-color: #b98121;
}
.btn.soft {background:#fcf1d2; border-color:#eed9a6;}
.eyebrow {color: #996413; font-size: 11px; letter-spacing: .21em;}
.eyebrow:before {width:29px; background:#c1923b;}
.tag {background: #fbefcf; color: #785216; border: 1px solid #eedcb2;}
.tag.amber {background:#fff0cf; color:#745018; border-color:#f0dca8;}
.tag.dark {background: #392a17; color: #ffe8a3; border-color:rgba(255,227,161,.26);}
.tag.red {background:#fff1ea; color:#994a36; border-color:#edcbbc;}

/* Gold is the leading colour of the storefront, balanced by espresso and ivory. */
body:not(.staff-background) .hero {
  padding: clamp(27px,4.5vw,60px);
  margin-top: 33px;
  margin-bottom: 29px;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(255,253,209,.73), transparent 41%),
    radial-gradient(ellipse at 93% 90%, rgba(196,123,12,.21), transparent 39%),
    linear-gradient(124deg, #f6d66a 0%, #f0c352 44%, #dda436 100%);
  border: 1px solid #ddb45b;
  border-radius: 30px;
  box-shadow: 0 22px 42px rgba(120,84,24,.11), inset 0 1px 0 rgba(255,255,255,.57);
  gap: clamp(18px,4vw,62px);
  grid-template-columns: minmax(0,1.19fr) minmax(285px,.78fr);
  position: relative;
  isolation: isolate;
}
body:not(.staff-background) .hero h1 {
  font-family: Georgia,"Times New Roman",serif;
  font-weight: 500;
  letter-spacing: -.047em;
  line-height: 1.045;
  color: #30220f;
  max-width: 610px;
  font-size: clamp(3.05rem,5.5vw,5.65rem);
}
body:not(.staff-background) .hero h1 em {
  color: #6e4511;
  font-weight: 400;
  font-style: italic;
  white-space: normal;
}
body:not(.staff-background) .hero .eyebrow {color:#604315;}
body:not(.staff-background) .hero .eyebrow:before {background:#62481b;}
body:not(.staff-background) .hero p {
  max-width: 510px;
  color: #46351c;
  font-size: 16px;
  line-height: 1.78;
}
body:not(.staff-background) .hero-actions {margin-top:26px;}
body:not(.staff-background) .hero .btn.primary {
  background:#302418;
  border-color:#302418;
  color:#ffe5a2;
  box-shadow:0 6px 16px rgba(48,36,24,.19);
}
body:not(.staff-background) .hero .btn.primary:hover {
  background:#47331e; color:#fff4cf; border-color:#47331e;
}
body:not(.staff-background) .hero .btn:not(.primary) {
  background:rgba(255,250,233,.64);
  border-color:rgba(77,52,17,.4);
  color:#322516;
}
.hero-card {
  background:
    radial-gradient(ellipse at 110% 3%,rgba(206,150,51,.21),transparent 48%),
    linear-gradient(148deg,#46321d 0%,#291d13 68%,#231910 100%);
  border:1px solid #705229;
  border-radius:23px;
  color:#fff4d8;
  padding:clamp(25px,3vw,39px);
  box-shadow:inset 0 1px 0 rgba(255,226,155,.18), 0 14px 30px rgba(74,48,18,.16);
}
.hero-card::before {
  content:"✧";
  font-family:Georgia,serif;
  font-size:92px;
  color:rgba(245,200,106,.14);
  position:absolute;
  top:-12px;
  right:26px;
  transform:rotate(8deg);
}
.hero-card::after {
  border-color: rgba(243,198,101,.27);
  box-shadow: 0 0 0 32px rgba(229,177,73,.055), 0 0 0 63px rgba(229,177,73,.03);
  width:210px;
  height:210px;
  right:-84px;
  top:63px;
}
.hero-card strong {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:clamp(29px,3.1vw,42px);
  line-height:1.12;
  letter-spacing:-.045em;
  color:#fff5db;
  max-width:285px;
}
.hero-card span {color:#f2dca9; font-size:12px; letter-spacing:.012em; line-height:1.8; max-width:300px;}
.hero-card .tag.dark {background:rgba(235,194,110,.13); border-color:rgba(250,226,163,.3); color:#f8d995;}

/* Pricing and live catalogue. */
.note {
  background: #fff9e9;
  border: 1px solid #edd8a1;
  border-left: 4px solid #d5a437;
  box-shadow:0 5px 15px rgba(115,83,22,.04);
  color:#61471f;
  padding:16px 19px;
  border-radius:12px;
  line-height:1.6;
}
.inline-info {background:#fbf0d8;color:#64481d;border:1px solid #efdaad;}
.filters {
  background:rgba(255,252,245,.97);
  border-top:1px solid rgba(228,206,158,.5);
  border-bottom:1px solid #e7d5ad;
  backdrop-filter:blur(14px);
}
.filter-line strong {color:#342616; font-family:Georgia,serif; font-weight:600;}
.search {background:#fffefa; border-color:#e4d2a7;}
.search:focus-within {border-color:#ac8029;box-shadow:0 0 0 3px rgba(235,193,88,.18);}
.chip {color:#675336;background:#fffcf5;border-color:#e4d5b4;}
.chip:hover {background:#fbefce;border-color:#d9b466;}
.chip.active {background:#352718;border-color:#352718;color:#ffe2a0;}
.section-heading h2 {font-family:Georgia,"Times New Roman",serif;letter-spacing:-.04em;font-weight:500;font-size:clamp(27px,3.3vw,39px);}
.products {gap:22px;}
.product-card {
  border-color:#e9ddc3;
  background:#fffefa;
  border-radius:17px;
  box-shadow: 0 9px 26px rgba(86,58,22,.065);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.product-visual {
  background:
    radial-gradient(circle at 73% 12%,rgba(255,255,255,.87),transparent 46%),
    linear-gradient(155deg,#fff9e9,#f9eccb);
  border-bottom:1px solid #f1e8d4;
  height:218px;
}
.product-visual img,.thumb img {background:transparent;}
.product-visual .icon {opacity:.85;filter:none;font-size:68px;}
.product-category {color:#9c6a1b;letter-spacing:.17em;}
.product-title {color:#332516;letter-spacing:-.025em;}
.product-desc {color:#746550;}
.price {color:#7f5313;font-weight:800;}
.price small {color:#8e7a58;}
.size-menu-prices {background:#fffbf1;border:1px solid #eddab0;}
.size-menu-prices>div {color:#594530;}
.size-menu-prices strong {color:#765019;}
.out-card {opacity:.65;}
.empty-state {background:#fffef9;border-color:#ddc799;color:#7e6b50;}
.empty-state strong {color:#6e4b17;}

/* Store visit is the conversion goal: high-contrast call-to-action. */
.visit {
  margin-top:80px;
  margin-bottom:56px;
  background:
    radial-gradient(ellipse at 100% 0%,rgba(202,151,54,.15),transparent 42%),
    linear-gradient(145deg,#352618 0%,#251b13 100%);
  border:1px solid #7b5d2d;
  box-shadow:0 20px 38px rgba(50,32,12,.13);
  border-radius:27px;
  color:#fff0cb;
  padding:clamp(27px,4vw,49px);
  position:relative;
  overflow:hidden;
}
.visit .eyebrow {color:#e8c37b;}
.visit .eyebrow:before {background:#d1a652;}
.visit h2 {color:#fff4dd;font-family:Georgia,serif;font-weight:500;letter-spacing:-.04em;font-size:clamp(29px,3.1vw,39px);}
.visit p {color:#eee0bf;line-height:1.8;}
.visit .social-label {color:#e2c992;}
.visit .social-link {
  background:rgba(246,217,148,.08);
  border:1px solid rgba(238,198,113,.45);
  color:#ffe7ae;
  border-radius:9px;
  font-weight:650;
}
.visit .social-link:hover {background:rgba(246,217,148,.18);border-color:#efd092;}
.visit .btn.primary {background:linear-gradient(135deg,#f6d77f,#e8b54b);color:#2c2115;border-color:#e5b850;}
.visit .btn:not(.primary) {background:transparent;color:#fff1ce;border-color:#b99a61;}
.visit .btn:not(.primary):hover {background:rgba(249,222,158,.1);}
.site-footer {border-color:#e9daba;color:#8b785b;}

/* Admin / staff use the same premium brand without compromising controls. */
.staff-background {background:linear-gradient(180deg,#fffdf7,#fcf6e8);}
.staff-background .topbar {background:#fffcf3;}
.stat,.panel,.staff-row,.admin-row,.login-box,.modal {background:#fffefb;border-color:#eadcc0;}
.stat strong {color:#8b601b;}
.thumb,.upload-placeholder,.photo-preview {background:#fcf1d9;color:#ad854a;}
.toggle {color:#624719;}
.toggle input {background:#dfd1b6;}
.toggle input:checked {background:#a77723;}
.field {color:#635039;}
.field input,.field textarea,.field select {border-color:#dfcfad;background:#fffefa;color:#302519;}
.tab {color:#8b785d;}
.tab.active {border-color:#bb892c;color:#694919;}
.modal-layer {background:rgba(39,28,17,.62);}
.image-upload,.photo-editor {background:#fffbf2;border-color:#dfc99a;}
.price-mode label {border-color:#dfca9d;background:#fffdf7;}
.size-row {background:#fcf6e8;border-color:#ecdcb8;}
.photo-settings input[type=range] {accent-color:#c08b25;}
.photo-settings output {color:#8c6119;}
.kbd {background:#f9efd8;border-color:#e5d2a6;}
.toast {background:#352719;color:#fff5e0;}
.success {background:#f4edd5;color:#5e491b;}

@media(hover:hover) and (pointer:fine) {
  .product-card:hover {transform:translateY(-3px);box-shadow:0 18px 32px rgba(89,60,20,.115);border-color:#dfc58a;}
}
@media(max-width:870px) {
  body:not(.staff-background) .hero {grid-template-columns:1fr;}
  .hero-card {min-height:205px;}
}
@media(max-width:600px) {
  .topbar .max {min-height:74px;}
  .logo {font-size:25px;}
  body:not(.staff-background) .hero {
    margin-top:18px;
    margin-bottom:18px;
    padding:25px 22px;
    border-radius:21px;
    gap:24px;
  }
  body:not(.staff-background) .hero h1 {font-size:clamp(2.8rem,12vw,4.3rem);}
  body:not(.staff-background) .hero p {font-size:14px;line-height:1.7;}
  .hero-card {padding:24px;min-height:197px;border-radius:16px;}
  .hero-card strong {font-size:31px;}
  .products {gap:16px;}
  .product-visual {height:216px;}
  .note {padding:12px 15px;}
  .visit {margin-top:56px;margin-bottom:35px;border-radius:18px;}
  .site-footer {font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {
  .product-card,.btn {transition:none;}
  .product-card:hover,.btn:hover {transform:none;}
}