/* Lubna / Trade & Colour — generated with Themely, adapted for the shop page. */
:root {
  --navy:#0d1b27;
  --ink:#172b38;
  --paper:#f4f0e6;
  --white:#fff;
  --gold:#f4b84a;
  --blue:#4aa9be;
  --teal:#45c9b6;
  --coral:#ea705d;
  --line:#c9d4d0;
  --muted:#526672;
  --theme-surface:#162e3e;
  --theme-surface-2:#214354;
  --theme-cream:#f6f2e9;
  --theme-muted:#b6c8d2;
}

body { background:var(--paper); }
.section { padding-block:50px; }
h1,h2,h3 { letter-spacing:-.055em; }
:focus-visible { outline-color:var(--teal); }
::selection { background:#f4b84a; color:#0d1b27; }

.top-strip { background:#07131d; color:#d2dfe4; }
.site-header { background:rgba(13,27,39,.95); border-bottom:1px solid #ffffff2b; box-shadow:0 12px 32px #06121d40; }
.site-nav .nav-contact { border-color:#5d7987; }
.site-nav .nav-contact:hover { background:var(--gold); border-color:var(--gold); color:var(--navy); }
.site-nav .nav-contact { width:46px; height:46px; display:grid; flex:none; place-items:center; padding:0; border-radius:8px; }
.site-nav .nav-contact .bi { margin:0; font-size:1.2rem; }

.hero { min-height:0; padding-block:38px 44px; background:radial-gradient(circle at 73% 16%,#32728368,transparent 38%),linear-gradient(114deg,#0c1a27 4%,#113348 69%,#17475a); }
.hero-copy { padding-block:0; }
.hero::before { right:-70px; top:-200px; background:radial-gradient(circle,#45c9b650 0%,#4aa9be28 42%,transparent 71%); filter:blur(30px); }
.hero::after { height:7px; background:linear-gradient(90deg,#ea705d 0 25%,#f4b84a 25% 50%,#45c9b6 50% 75%,#4aa9be 75%); }
.hero-overline { display:inline-block; margin-bottom:24px; padding:8px 12px; border:1px solid #f4b84a75; border-radius:4px; background:#f4b84a14; color:#f8d98f; text-transform:uppercase; font-size:.73rem; letter-spacing:.12em; }
h1 { max-width:700px; margin-bottom:24px; color:var(--theme-cream); font-size:clamp(3.6rem,5.5vw,6.1rem); line-height:.99; letter-spacing:-.07em; text-shadow:none; }
.hero-lead { max-width:610px; margin-bottom:19px; color:#f7d891; font:700 clamp(1.2rem,1.65vw,1.55rem)/1.3 "Archivo",Arial,sans-serif; letter-spacing:-.025em; }
.hero-intro { max-width:550px; color:#c9dce3; font-size:1.08rem; }
.button { border-radius:6px; }
.button-dark { background:var(--gold); color:#182633; box-shadow:0 10px 26px #f4b84a40; }
.button-dark:hover { background:#ffd174; box-shadow:0 13px 30px #f4b84a70; }
.button-whatsapp { background:var(--teal); color:#0c2a2d; box-shadow:0 10px 26px #45c9b63d; }
.button-whatsapp:hover { background:#70dece; box-shadow:0 13px 30px #45c9b66b; }
.button-outline { border-color:#98b9c5; background:#ffffff0d; }
.button-outline:hover { background:#ffffff1e; }
.hero-actions { gap:12px; }
.hero-actions .hero-icon-action { width:64px; height:64px; min-height:64px; flex:0 0 64px; padding:0; border-radius:12px; }
.hero-actions .hero-icon-action .bi { font-size:1.6rem; }
.photo-frame { border:8px solid #f3e8d0; border-radius:8px; box-shadow:0 35px 80px #020c1599,0 0 40px #45c9b638; }
.photo-frame::after { width:38%; height:7px; background:var(--gold); }
.hero-photo figcaption { color:#b7d0d9; }

.departments { padding-block:48px 54px; }
.department-heading { margin-bottom:28px; }
.department-heading h2 { max-width:750px; color:var(--ink); }
.department-heading p { max-width:370px; color:#4c626c; }
.department-tabs { padding:12px; border:1px solid #365568; border-radius:18px; background:var(--theme-surface); box-shadow:0 30px 80px #0c2a3540; }
.tab-list { display:flex; justify-content:center; gap:12px; }
.department-tab { width:clamp(112px,20vw,142px); min-height:92px; flex:none; flex-direction:column; gap:8px; padding:12px 8px; }
.department-tab .bi { font-size:1.7rem; }
.department-tab span { color:#edf4f3; font-size:.88rem; line-height:1.2; }
.department-tab { border-color:#3c5d6b; background:#214354; color:#ecf4f3; }
.department-tab:hover { border-color:var(--tone); background:#2b4f5f; }
.department-tab.is-active { border-color:var(--tone); background:#2b4f5f; box-shadow:0 10px 25px #06172580; }
.department-panel { min-height:0; gap:28px; padding:36px 40px; border-top-color:var(--tone); background:radial-gradient(circle at 6% 7%,var(--tone-wash),transparent 37%),linear-gradient(125deg,#1b3a4a,#132d3c 76%); }
.panel-intro h3 { margin-bottom:14px; }
.panel-intro > p:not(.panel-kicker) { margin-bottom:20px; }
.panel-intro h3 { color:var(--theme-cream); }
.panel-intro > p:not(.panel-kicker) { color:var(--theme-muted); }
.panel-intro a { color:var(--theme-cream); }
.panel-intro a:hover { color:var(--teal); }
.product-grid li { min-height:0; padding:16px; border-color:#3a5967; background:#234353; box-shadow:0 10px 25px #07192340; }
.product-grid li:hover { border-color:var(--tone); box-shadow:0 16px 30px #07192380; }
.product-grid .bi { background:#ffffff13; }
.product-grid strong { color:#f7f5ed; }
.product-grid span { color:#bbced4; }
.stock-note { color:#b6c8d2; }
.stock-note a { color:#64d7c4; }
[data-tone="paints"] { --tone:#ff8c74; --tone-wash:#ea705d38; --tone-shadow:#ea705d30; }
[data-tone="electricals"] { --tone:#77c8e5; --tone-wash:#4aa9be3d; --tone-shadow:#4aa9be30; }
[data-tone="hardware"] { --tone:#f4c667; --tone-wash:#f4b84a38; --tone-shadow:#f4b84a30; }
[data-tone="pipes"] { --tone:#6ce1c9; --tone-wash:#45c9b63d; --tone-shadow:#45c9b630; }

.dealer-band { background:linear-gradient(108deg,#efd4a1,#f8e7c6 55%,#d8ece5); border-block:1px solid #ddc8a8; }
.dealer-inner { min-height:0; padding-block:28px; }
.dealer-band::before { background:radial-gradient(circle,#45c9b663,transparent 68%); }
.dealer-copy h2 { color:#163544; }
.dealer-copy > p:last-child { color:#375460; }
.dealer-link { border-color:#163544; color:#163544; }
.eyebrow { color:#2e7280; }

.about { background:radial-gradient(circle at 88% 20%,#2d797155,transparent 31%),linear-gradient(112deg,#0d2634,#174455 71%,#176568); box-shadow:0 25px 55px #0e30364a; }
.about::before { background:radial-gradient(circle,#45c9b677,transparent 68%); }
.about-side { border-color:var(--gold); color:#c3dbdc; }
.about-main p { color:#c7dcde; }
.underline-link { text-decoration-color:var(--gold); }

.shop-guide { padding-block:52px 60px; }
.guide-intro h2 { color:#173746; }
.guide-intro > p:last-child { color:#526672; }
.guide-steps { border-color:#bdccc7; }
.guide-step { padding-block:20px; border-color:#bdccc7; }
.step-number { background:#d5ebe2; color:#176d6b; }
.guide-step h3 { color:#173746; }
.guide-step p { color:#526672; }

.visit.shell { width:100%; max-width:none; padding-inline:max(40px,calc((100vw - 1280px)/2)); }
.visit { padding-block:52px 60px; background:radial-gradient(circle at 92% 7%,#337b8250,transparent 32%),#102a39; }
.visit-heading { margin-bottom:32px; }
.visit-heading h2 { color:var(--theme-cream); }
.visit-heading p { color:#c1d3d7; }
.visit-details { padding:26px; border-color:var(--teal); border-radius:12px; background:#1d3c4c; box-shadow:0 25px 60px #020f1873; }
.detail-label { margin-bottom:14px; }
.detail-label { color:#9ec3cb; }
.visit-details address { color:#f1f4ef; }
.phone-link { color:#ffcb6b; }
.visit-details p { color:#c0d1d5; }
.visit-map { margin-top:18px; border-color:#f2e6cd; box-shadow:0 25px 60px #020f1873; }
.visit-map iframe { height:clamp(300px,30vw,420px); }
.visit-cta { flex-direction:row; align-items:center; }
.visit-cta .visit-icon-action { width:60px; height:60px; min-height:60px; flex:0 0 60px; padding:0; border-radius:12px; }
.visit-cta .visit-icon-action .bi { font-size:1.45rem; }
.map-link-bar { background:#f2e6cd; color:#173746; }
.map-link-bar a { color:#173746; }
.site-footer { background:#081923; }
.footer-inner { min-height:88px; }

@media (max-width:1050px) {
  .hero { min-height:0; }
  .department-panel { background:linear-gradient(125deg,#1b3a4a,#132d3c); }
}
@media (max-width:760px) {
  .visit.shell { padding-inline:18px; }
  .hero { min-height:0; padding-block:34px 40px; }
  .section { padding-block:46px; }
  h1 { font-size:clamp(3.15rem,8.8vw,4.8rem); }
  .hero-lead { font-size:1.25rem; }
  .departments,.shop-guide { padding-block:48px 52px; }
  .site-nav { background:#143446; }
  .site-nav .nav-contact { align-self:flex-start; }
}
@media (max-width:560px) {
  .tab-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .department-tab { width:100%; min-height:68px; flex-direction:row; gap:10px; }
}
@media (max-width:520px) {
  .visit.shell { padding-inline:18px; }
  .hero { padding-block:30px 36px; }
  .section { padding-block:42px; }
  h1 { font-size:clamp(2.75rem,11vw,3.7rem); }
  .hero-lead { font-size:1.12rem; }
  .hero-overline { font-size:.68rem; }
  .hero-actions .hero-icon-action { width:60px; height:60px; min-height:60px; flex:0 0 60px; }
  .departments,.shop-guide { padding-block:42px 48px; }
  .department-tabs { padding:8px; }
  .tab-list { gap:8px; }
  .department-tab { width:100%; min-height:68px; flex-direction:row; }
  .department-tab .bi { font-size:1.5rem; }
  .department-tab span { font-size:.82rem; }
  .department-tab { background:#244756; }
  .department-panel { gap:22px; padding:24px 18px; }
  .product-grid li { background:#244555; }
  .visit { padding-block:44px 50px; }
  .visit-details { padding:22px; }
  .visit-map iframe { height:300px; }
  .footer-inner { min-height:0; padding-block:22px; }
}
@media (max-width:350px) {
  .visit.shell { padding-inline:14px; }
  .hero-actions .hero-icon-action { width:58px; height:58px; min-height:58px; flex:0 0 58px; }
}