:root{
  --bg:#f5f8fc;
  --surface:#fff;
  --surface2:#edf3fa;
  --text:#0d1b2f;
  --muted:#60728d;
  --line:#d8e2ef;

  --primary:#2e5fb3;
  --primary2:#214985;
  --accent:#d3a546;

  --soft:#e8f1ff;
  --danger:#c23b3b;

  --shadow:0 12px 35px rgba(22,49,85,.08);

  --radius:18px;
  --wrap:1280px;
}

html[data-theme="dark"]{
  --bg:#0b1627;
  --surface:#13233a;
  --surface2:#1a2e49;
  --text:#f4f7fb;
  --muted:#afbdd0;
  --line:#2d4563;

  --primary:#8ab6ff;
  --primary2:#2d5d9e;
  --accent:#efc66c;

  --soft:#213b60;

  --shadow:0 12px 35px rgba(0,0,0,.16);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height:1.5;
}

.wrap{
  width:min(
    var(--wrap),
    calc(100% - 60px)
  );

  margin-inline:auto;
}

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

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

button{
  cursor:pointer;
}

.hidden{
  display:none!important;
}

.muted{
  color:var(--muted);
}


/* ========================================
   TOP BAR
======================================== */

.topbar{
  height:44px;

  background:var(--surface);

  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);

  font-size:13px;
  color:var(--muted);
}

.topbar .wrap{
  height:100%;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.topbar-left,
.topbar-mid,
.topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
}

.topbar-right{
  gap:28px;
}

.topbar a:hover{
  color:var(--primary);
}


/* ========================================
   HEADER
======================================== */

.site-header{
  padding:22px 0 14px;
}

.header-row{
  display:grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:center;

  gap:30px;
}

.brand{
  display:flex;
  align-items:center;

  gap:13px;

  min-width:max-content;
}

.shop-logo{
  width:64px;
  height:64px;

  border-radius:15px;

  background:#fff;

  border:1px solid var(--line);

  object-fit:contain;

  padding:6px;
}

.brand-wordmark{
  display:flex;
  flex-direction:column;

  font-size:24px;

  font-weight:800;

  line-height:1;
}

.brand-wordmark small{
  font-size:12px;

  letter-spacing:5px;

  color:#b68224;

  margin-top:10px;

  font-weight:800;
}


/* ========================================
   SEARCH
======================================== */

.search-box{
  display:grid;

  grid-template-columns:
    1fr 48px;

  max-width:730px;

  width:100%;

  justify-self:center;

  border:1px solid var(--line);

  border-radius:13px;

  overflow:hidden;

  background:var(--surface);
}

.search-box input{
  height:48px;

  border:0;

  outline:0;

  background:transparent;

  color:var(--text);

  padding:0 18px;

  font-size:14px;
}

.search-box button{
  border:0;

  border-left:1px solid var(--line);

  background:var(--soft);

  color:var(--primary);

  font-size:24px;
}


/* ========================================
   HEADER ACTIONS
======================================== */

.header-actions{
  display:flex;

  align-items:center;

  gap:18px;
}

.theme-toggle{
  display:flex;

  align-items:center;

  gap:7px;

  color:var(--muted);
}

.switch{
  position:relative;

  width:46px;
  height:26px;

  border-radius:999px;

  background:var(--line);

  border:0;

  padding:3px;

  transition:.2s;
}

.switch::after{
  content:"";

  display:block;

  width:20px;
  height:20px;

  border-radius:50%;

  background:#fff;

  transition:.2s;

  box-shadow:
    0 1px 4px
    rgba(0,0,0,.18);
}

html[data-theme="dark"] .switch{
  background:#8ab6ff;
}

.switch.on::after{
  transform:
    translateX(20px);
}

.header-contact{
  display:flex;

  align-items:center;

  gap:11px;
}

.header-contact .icon{
  color:var(--accent);

  font-size:25px;
}

.header-contact span{
  display:flex;

  flex-direction:column;
}

.header-contact small{
  font-size:11px;

  color:var(--muted);
}

.header-contact b{
  font-size:14px;
}


/* ========================================
   CATEGORY NAV
======================================== */

.category-nav{
  display:flex;

  align-items:center;

  gap:34px;

  padding:4px 0 16px;

  font-size:14px;

  overflow:auto;

  white-space:nowrap;
}

.category-nav .catalog-label{
  font-weight:800;

  color:var(--primary);

  padding-right:32px;

  border-right:1px solid var(--line);
}

.category-nav a:hover{
  color:var(--primary);
}


/* ========================================
   HERO
======================================== */

.hero{
  margin-top:0;

  border-radius:22px;

  background:
    linear-gradient(
      115deg,
      #173d70,
      #2d66a9
    );

  padding:
    20px
    20px
    20px
    40px;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:45px;

  align-items:center;

  color:#fff;

  overflow:hidden;
}

.hero-copy{
  padding:14px 0;
}

.eyebrow{
  font-size:12px;

  letter-spacing:2px;

  font-weight:800;

  color:var(--accent);

  margin:0 0 15px;
}

.hero h1{
  font-size:41px;

  line-height:1.07;

  letter-spacing:-1.5px;

  margin:0 0 20px;

  font-weight:500;

  white-space:pre-line;
}

.hero-copy > p:not(.eyebrow){
  max-width:500px;

  color:#e7eef8;

  font-size:15px;
}

.hero-button{
  margin-top:10px;

  display:inline-flex;

  gap:36px;

  align-items:center;

  background:#f3cf7c;

  color:#0d284c;

  padding:13px 18px;

  border-radius:10px;

  font-weight:800;

  font-size:13px;
}

.hero-art{
  height:276px;

  border-radius:18px;

  background:#ececef;

  position:relative;

  overflow:hidden;

  border-bottom:
    3px solid #d9ae51;
}

.hero-art img{
  width:100%;
  height:100%;

  object-fit:contain;
}

.hero-label{
  position:absolute;

  right:18px;

  bottom:14px;

  background:#fff;

  color:#23416a;

  font-weight:700;

  font-size:12px;

  padding:9px 14px;

  border-radius:999px;
}


/* ========================================
   SERVICE STRIP
======================================== */

.service-strip{
  display:grid;

  grid-template-columns:
    1.1fr .9fr .9fr;

  border-bottom:
    1px solid var(--line);

  padding:21px 0;
}

.service-strip > div,
.service-strip > a{
  display:flex;

  align-items:center;

  gap:13px;

  padding:0 30px;

  border-right:
    1px solid var(--line);
}

.service-strip > :first-child{
  padding-left:0;
}

.service-strip > :last-child{
  border-right:0;

  padding-right:0;
}

.service-strip .sicon{
  font-size:23px;

  color:var(--primary);
}

.service-strip a .sicon{
  color:#7fb4ff;
}

.service-strip span{
  display:flex;

  flex-direction:column;
}

.service-strip b{
  font-size:14px;
}

.service-strip small{
  font-size:11px;

  color:var(--muted);

  margin-top:3px;
}


/* ========================================
   CATALOG
======================================== */

.catalog-section{
  padding:38px 0 30px;
}

.section-heading{
  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  gap:20px;
}

.accent-text{
  color:var(--primary);

  margin-bottom:8px;
}

.section-heading h2{
  font-size:27px;

  margin:0;

  letter-spacing:-.6px;
}

.section-heading h2 span{
  font-size:12px;

  color:var(--muted);

  font-weight:500;

  margin-left:12px;
}

.catalog-controls select{
  border:
    1px solid var(--line);

  background:var(--surface);

  color:var(--text);

  padding:10px 14px;

  border-radius:10px;
}

.chips{
  display:flex;

  gap:9px;

  flex-wrap:wrap;

  margin:28px 0 18px;
}

.chips button{
  border:
    1px solid var(--line);

  background:transparent;

  color:var(--muted);

  padding:11px 17px;

  border-radius:9px;
}

.chips button.active{
  background:#8ab6ff;

  color:#102b50;

  border-color:#8ab6ff;

  font-weight:700;
}

.demo-notice{
  padding:12px 14px;

  background:var(--surface2);

  border:
    1px solid var(--line);

  border-radius:9px;

  color:var(--muted);

  font-size:12px;
}


/* ========================================
   PRODUCT GRID
======================================== */

.product-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:24px;

  margin-top:22px;
}

.product-card{
  border:
    1px solid var(--line);

  border-radius:20px;

  background:var(--surface);

  padding:8px;

  display:flex;

  flex-direction:column;

  min-height:490px;

  box-shadow:
    0 8px 24px
    rgba(5,18,38,.04);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.product-card:hover{
  transform:
    translateY(-3px);

  box-shadow:
    0 16px 38px
    rgba(15,39,75,.10);

  border-color:
    color-mix(
      in srgb,
      var(--primary) 28%,
      var(--line)
    );
}

.product-photo-link{
  display:block;
}

.product-photo{
  aspect-ratio:1/1;

  border-radius:16px;

  overflow:hidden;

  background:#eee;

  position:relative;
}

.product-photo img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:
    transform .35s ease;
}

.product-card:hover
.product-photo img{
  transform:
    scale(1.025);
}

.product-badge{
  position:absolute;

  top:11px;

  left:11px;

  background:#fff;

  color:#24405f;

  border-radius:6px;

  padding:5px 8px;

  font-size:11px;

  font-weight:700;

  box-shadow:
    0 5px 14px
    rgba(13,27,47,.08);
}

.photo-arrow{
  position:absolute;

  right:10px;

  bottom:10px;

  width:31px;

  height:31px;

  border-radius:50%;

  background:#fff;

  color:#3468aa;

  display:grid;

  place-items:center;

  font-size:18px;
}

.product-info{
  padding:
    14px 8px 8px;

  display:flex;

  flex-direction:column;

  flex:1;
}

.product-category{
  margin-bottom:8px;

  text-transform:uppercase;

  letter-spacing:.04em;

  font-weight:700;

  font-size:10px;

  color:var(--muted);
}

.product-title{
  font-size:16px;

  font-weight:650;

  margin:0 0 12px;

  min-height:48px;

  line-height:1.45;
}

.product-brand{
  margin:0 0 12px;

  font-size:12px;

  color:var(--text);

  font-weight:700;
}

.product-brand span{
  color:var(--muted);

  font-weight:500;
}

.product-price{
  font-size:21px;

  font-weight:800;

  margin-top:auto;

  letter-spacing:-.02em;
}

.product-price small{
  font-size:11px;

  font-weight:700;
}

.old-price{
  font-size:12px;

  color:var(--muted);

  text-decoration:line-through;

  margin-left:8px;
}

.details-btn{
  margin-top:16px;

  background:var(--soft);

  color:var(--primary);

  border-radius:9px;

  padding:12px 14px;

  font-weight:700;

  font-size:12px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  border:
    1px solid var(--line);

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.details-btn:hover{
  border-color:
    color-mix(
      in srgb,
      var(--primary) 45%,
      var(--line)
    );

  transform:
    translateY(-1px);
}


/* ========================================
   ABOUT / CONTACT
======================================== */

.about-contact{
  margin-top:22px;

  border-top:
    1px solid var(--line);

  padding:44px 0 55px;

  display:grid;

  grid-template-columns:
    1.1fr .9fr;

  gap:72px;
}

.about-contact h2{
  font-size:27px;

  margin:8px 0 18px;
}

.about-contact p{
  color:var(--muted);

  line-height:1.8;

  max-width:620px;
}

.contact-card{
  border:
    1px solid var(--line);

  background:var(--surface);

  border-radius:20px;

  padding:30px 32px;

  box-shadow:
    0 10px 30px
    rgba(20,45,80,.05);
}

.contact-card h3{
  font-size:23px;

  margin:0 0 22px;
}

.contact-list{
  display:grid;

  gap:18px;
}

.contact-list a,
.contact-list p{
  display:flex;

  gap:12px;

  align-items:center;

  margin:0;

  color:var(--text);
}

.contact-list .gold{
  color:var(--accent);
}


/* ========================================
   FOOTER
======================================== */

footer{
  border-top:
    1px solid var(--line);

  background:var(--surface);

  padding:24px 0;
}

.footer-row{
  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  min-height:64px;

  color:var(--muted);

  font-size:12px;
}

.footer-row .brand{
  justify-self:start;
}

.footer-row .brand .shop-logo{
  width:48px;
  height:48px;

  border-radius:10px;
}

.footer-row .brand-wordmark{
  font-size:18px;
}

.footer-row .brand-wordmark small{
  font-size:9px;

  margin-top:7px;
}

.footer-row > a:last-child{
  justify-self:end;
}

.mobile-nav{
  display:none;
}


/* ========================================
   PRODUCT DETAIL
======================================== */

.breadcrumb{
  font-size:13px;

  color:var(--muted);

  padding:18px 0;
}

.product-detail{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:48px;

  padding:10px 0 40px;
}

.detail-image{
  background:#f5f5f5;

  border-radius:19px;

  padding:10px;

  border:
    1px solid var(--line);

  min-height:580px;

  display:grid;

  place-items:center;

  overflow:hidden;
}

.detail-image img{
  width:100%;
  height:100%;

  object-fit:contain;

  border-radius:13px;
}

.detail-copy{
  padding-top:0;
}

.detail-copy .category{
  font-size:13px;

  color:var(--muted);
}

.detail-copy h1{
  font-size:37px;

  line-height:1.15;

  margin:10px 0 18px;
}

.tag{
  display:inline-block;

  background:var(--soft);

  color:var(--primary);

  font-size:11px;

  font-weight:700;

  padding:5px 8px;

  border-radius:6px;
}

.brand-line{
  color:var(--primary);

  font-size:13px;

  margin-top:12px;

  font-weight:600;
}


/* ========================================
   BUY CARD
======================================== */

.buy-card{
  margin-top:20px;

  border:
    1px solid var(--line);

  background:var(--surface);

  border-radius:17px;

  padding:25px;
}

.buy-price{
  font-size:38px;

  font-weight:800;
}

.buy-price small{
  font-size:13px;
}

.buy-card p{
  color:var(--muted);

  font-size:13px;
}

.action-btn{
  border:0;

  width:100%;

  padding:14px;

  border-radius:9px;

  margin-top:10px;

  font-weight:800;
}

.action-btn.telegram{
  background:#8ab6ff;

  color:#0b274a;
}

.action-btn.phone{
  background:var(--soft);

  color:var(--primary);
}

.delivery-card{
  margin-top:18px;

  border:
    1px solid var(--line);

  background:var(--surface);

  border-radius:15px;

  padding:22px;
}

.delivery-card b{
  display:block;

  margin-bottom:8px;
}

.delivery-card p{
  margin:0;

  color:var(--muted);

  font-size:13px;
}

.detail-description{
  margin-top:26px;
}

.detail-description h2{
  font-size:21px;
}

.detail-description p{
  color:var(--muted);

  line-height:1.7;
}


/* ========================================
   ADMIN
======================================== */

.admin-shell{
  min-height:100vh;
}

.admin-shell .wrap{
  width:min(
    1320px,
    calc(100% - 50px)
  );
}

.admin-header{
  border-top:0;

  padding:18px 0;

  border-bottom:
    1px solid var(--line);

  background:
    color-mix(
      in srgb,
      var(--surface) 92%,
      transparent
    );

  backdrop-filter:
    blur(12px);

  position:sticky;

  top:0;

  z-index:70;
}

.admin-header .wrap{
  display:flex;

  align-items:center;

  justify-content:space-between;
}

.admin-left{
  display:flex;

  align-items:center;

  gap:24px;
}

.admin-header .shop-logo{
  width:64px;
  height:64px;
}

.admin-title{
  font-size:16px;
}

.admin-actions{
  display:flex;

  align-items:center;

  gap:18px;
}

.link-back{
  display:inline-flex;

  gap:8px;

  color:var(--primary);

  font-size:13px;

  margin:27px 0;
}

.admin-tabs{
  display:inline-flex;

  background:var(--surface2);

  padding:5px;

  border-radius:12px;

  gap:3px;
}

.admin-tabs button{
  border:0;

  background:transparent;

  color:var(--muted);

  padding:12px 22px;

  border-radius:9px;
}

.admin-tabs button.active{
  background:var(--surface);

  color:var(--text);

  box-shadow:
    0 1px 4px
    rgba(0,0,0,.08);
}

.admin-main{
  padding:25px 0 70px;
}

.admin-heading{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:20px;

  margin:32px 0 25px;
}

.admin-heading h1{
  font-size:30px;

  margin:0;
}

.admin-heading p{
  font-size:13px;

  color:var(--muted);

  margin:4px 0 0;
}

.primary-btn{
  border:0;

  background:#2e5fb3;

  color:#fff;

  padding:14px 20px;

  border-radius:10px;

  font-weight:800;
}

.empty-state{
  border:
    1px solid var(--line);

  background:var(--surface);

  border-radius:18px;

  min-height:400px;

  display:grid;

  place-items:center;

  text-align:center;

  padding:30px;
}

.empty-state .boxicon{
  font-size:38px;

  color:var(--muted);
}

.empty-state h2{
  font-size:21px;

  color:var(--muted);
}

.empty-state p{
  color:var(--muted);

  max-width:500px;
}

.admin-list{
  display:grid;

  gap:12px;
}

.admin-product-row{
  display:grid;

  grid-template-columns:
    72px 1fr auto;

  gap:14px;

  align-items:center;

  border:
    1px solid var(--line);

  background:var(--surface);

  border-radius:14px;

  padding:10px;
}

.admin-product-row img{
  width:72px;
  height:72px;

  border-radius:10px;

  object-fit:cover;
}

.row-actions{
  display:flex;

  gap:8px;
}

.ghost-btn,
.danger-btn{
  border:
    1px solid var(--line);

  background:var(--surface2);

  color:var(--text);

  border-radius:8px;

  padding:8px 11px;
}

.danger-btn{
  color:var(--danger);
}


/* ========================================
   FORMS
======================================== */

.form-card{
  border:
    1px solid var(--line);

  background:var(--surface);

  border-radius:22px;

  padding:30px;

  box-shadow:
    0 12px 30px
    rgba(14,35,65,.05);
}

.form-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:40px;
}

.form-section h2{
  font-size:21px;

  margin:0 0 14px;
}

.form-section > p{
  font-size:12px;

  color:var(--muted);

  margin:0 0 28px;
}

.field{
  display:grid;

  gap:7px;

  margin-bottom:17px;
}

.field label{
  font-size:13px;
}

.field input,
.field textarea,
.field select{
  width:100%;

  border:
    1px solid var(--line);

  background:var(--bg);

  color:var(--text);

  padding:13px;

  border-radius:10px;

  outline:0;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color:var(--primary);
}

.field textarea{
  min-height:96px;

  resize:vertical;
}

.two-cols{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:16px;
}


/* ========================================
   IMAGE UPLOAD
======================================== */

.upload-zone{
  border:
    2px dashed #4d7ed0;

  background:var(--soft);

  border-radius:14px;

  min-height:152px;

  display:grid;

  place-items:center;

  text-align:center;

  color:var(--primary);

  margin-bottom:18px;
}

.upload-zone input{
  display:none;
}

.upload-zone label{
  cursor:pointer;

  width:100%;
  height:100%;

  min-height:148px;

  display:grid;

  place-items:center;
}

.upload-zone b{
  display:block;
}

.upload-preview{
  display:flex;

  gap:8px;

  flex-wrap:wrap;

  margin-bottom:15px;
}

.upload-preview .thumb{
  position:relative;
}

.upload-preview img{
  width:72px;
  height:72px;

  border-radius:9px;

  object-fit:cover;

  border:
    1px solid var(--line);
}

.upload-preview button{
  position:absolute;

  right:-4px;
  top:-4px;

  width:20px;
  height:20px;

  border-radius:50%;

  border:0;

  background:#b93d3d;

  color:#fff;

  font-size:12px;
}


/* ========================================
   TOGGLES
======================================== */

.toggle-line{
  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:18px 0;

  border-bottom:
    1px solid var(--line);

  font-size:13px;
}

.toggle-box{
  width:34px;
  height:20px;

  border-radius:999px;

  background:#c8d2df;

  position:relative;
}

.toggle-box::after{
  content:"";

  position:absolute;

  width:16px;
  height:16px;

  border-radius:50%;

  background:#fff;

  top:2px;
  left:2px;

  transition:.2s;
}

.toggle-box.on{
  background:#2e5fb3;
}

.toggle-box.on::after{
  left:16px;
}


/* ========================================
   LANGUAGE FORMS
======================================== */

.form-lang{
  border-top:
    1px solid var(--line);

  padding-top:20px;

  margin-top:20px;
}

.form-lang:first-of-type{
  border-top:0;

  padding-top:0;

  margin-top:0;
}

.form-lang h3{
  font-size:14px;

  color:#1d54a5;

  margin:0 0 20px;
}

.form-footer{
  border-top:
    1px solid var(--line);

  margin-top:25px;

  padding-top:24px;

  display:flex;

  justify-content:flex-end;

  gap:12px;
}

.secondary-btn{
  background:var(--surface2);

  border:
    1px solid var(--line);

  padding:12px 18px;

  border-radius:10px;

  color:var(--text);

  font-weight:700;
}

.save-btn{
  background:#86a3cf;

  color:#fff;

  border:0;

  padding:12px 22px;

  border-radius:10px;

  font-weight:800;
}

.settings-card{
  max-width:850px;
}


/* ========================================
   ADMIN LOGIN
======================================== */

.login-wrap{
  min-height:100vh;

  display:grid;

  place-items:center;

  padding:20px;
}

.login-card{
  width:min(
    430px,
    100%
  );

  border:
    1px solid var(--line);

  background:var(--surface);

  border-radius:20px;

  padding:30px;

  box-shadow:var(--shadow);

  text-align:center;
}

.login-card .shop-logo{
  width:80px;
  height:80px;
}

.login-card h1{
  margin:14px 0 4px;
}

.login-card p{
  color:var(--muted);

  font-size:13px;
}

.login-error{
  color:#c23b3b;

  font-size:12px;

  min-height:18px;
}

.admin-security-note{
  margin:14px 0 2px;

  padding:10px 12px;

  border:
    1px solid var(--line);

  border-radius:10px;

  background:var(--surface2);

  font-size:11px;

  line-height:1.5;

  color:var(--muted);

  text-align:left;
}


/* ========================================
   TOAST
======================================== */

.toast{
  position:fixed;

  right:20px;

  bottom:20px;

  background:var(--surface);

  border:
    1px solid var(--line);

  border-radius:10px;

  padding:12px 16px;

  box-shadow:var(--shadow);

  z-index:1000;

  font-size:13px;
}


/* ========================================
   TABLET
======================================== */

@media(max-width:980px){

  .wrap{
    width:min(
      calc(100% - 32px),
      var(--wrap)
    );
  }

  .topbar{
    display:none;
  }

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

  .header-actions{
    grid-column:1/-1;

    justify-content:flex-end;
  }

  .search-box{
    grid-row:2;

    grid-column:1/-1;

    max-width:none;
  }

  .category-nav{
    gap:20px;
  }

  .hero{
    grid-template-columns:1fr;

    padding:28px;
  }

  .hero-art{
    height:320px;
  }

  .service-strip{
    grid-template-columns:1fr;
  }

  .service-strip > div,
  .service-strip > a{
    border-right:0;

    border-bottom:
      1px solid var(--line);

    padding:14px 0;
  }

  .service-strip > :last-child{
    border-bottom:0;
  }

  .product-grid{
    grid-template-columns:
      repeat(2,1fr);
  }

  .about-contact{
    grid-template-columns:1fr;

    gap:30px;
  }

  .product-detail{
    grid-template-columns:1fr;
  }

  .detail-image{
    min-height:420px;
  }

  .form-grid{
    grid-template-columns:1fr;

    gap:10px;
  }
}


/* ========================================
   MOBILE
======================================== */

@media(max-width:640px){

  body{
    padding-bottom:66px;
  }

  .wrap{
    width:
      calc(100% - 24px);
  }

  .site-header{
    padding-top:12px;
  }

  .header-row{
    gap:12px;
  }

  .shop-logo{
    width:48px;
    height:48px;
  }

  .brand-wordmark{
    font-size:19px;
  }

  .brand-wordmark small{
    margin-top:6px;

    font-size:9px;
  }

  .header-actions{
    display:none;
  }

  .category-nav{
    padding-bottom:10px;
  }

  .category-nav .catalog-label{
    padding-right:15px;
  }

  .hero{
    padding:20px;

    border-radius:16px;

    gap:16px;
  }

  .hero h1{
    font-size:34px;
  }

  .hero-art{
    height:230px;
  }

  .hero-button{
    width:100%;

    justify-content:space-between;
  }

  .section-heading{
    align-items:flex-start;

    flex-direction:column;
  }

  .catalog-controls{
    width:100%;
  }

  .catalog-controls select{
    width:100%;
  }

  .product-grid{
    grid-template-columns:
      1fr 1fr;

    gap:10px;
  }

  .product-card{
    min-height:360px;

    padding:6px;

    border-radius:15px;

    box-shadow:none;
  }

  .product-card:hover{
    transform:none;

    box-shadow:none;
  }

  .product-info{
    padding:10px 6px 5px;
  }

  .product-title{
    font-size:13px;

    min-height:40px;

    line-height:1.4;

    margin-bottom:9px;
  }

  .product-brand{
    font-size:10px;

    margin-bottom:8px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
  }

  .product-price{
    font-size:17px;
  }

  .details-btn{
    margin-top:11px;

    padding:9px 10px;

    font-size:11px;
  }

  .about-contact{
    padding-bottom:30px;
  }

  .footer-row{
    grid-template-columns:1fr;

    gap:14px;

    text-align:center;
  }

  .footer-row > *{
    justify-self:center!important;
  }

  .mobile-nav{
    position:fixed;

    z-index:90;

    left:0;
    right:0;
    bottom:0;

    height:64px;

    border-top:
      1px solid var(--line);

    background:
      color-mix(
        in srgb,
        var(--surface) 94%,
        transparent
      );

    backdrop-filter:
      blur(12px);

    display:grid;

    grid-template-columns:
      repeat(3,1fr);
  }

  .mobile-nav a{
    display:grid;

    place-items:center;

    font-size:11px;

    color:var(--muted);
  }

  .mobile-nav a span:first-child{
    font-size:20px;
  }

  .product-detail{
    gap:20px;
  }

  .detail-image{
    min-height:320px;
  }

  .detail-copy h1{
    font-size:30px;
  }

  .buy-card{
    padding:18px;
  }

  .buy-price{
    font-size:32px;
  }

  .admin-shell .wrap{
    width:
      calc(100% - 24px);
  }

  .admin-header{
    padding:12px 0;
  }

  .admin-header .brand-wordmark{
    display:none;
  }

  .admin-title{
    font-size:14px;
  }

  .admin-actions .theme-toggle{
    display:none;
  }

  .admin-heading{
    align-items:flex-start;

    flex-direction:column;
  }

  .primary-btn{
    width:100%;
  }

  .form-card{
    padding:18px;

    border-radius:16px;
  }

  .two-cols{
    grid-template-columns:1fr;
  }

  .row-actions{
    grid-column:1/-1;

    display:grid;

    grid-template-columns:
      1fr 1fr;
  }

  .admin-product-row{
    grid-template-columns:
      60px 1fr;
  }

  .admin-product-row img{
    width:60px;
    height:60px;
  }

  .admin-tabs{
    width:100%;
  }

  .admin-tabs button{
    flex:1;

    padding:10px 12px;
  }

  .admin-header .wrap{
    gap:10px;
  }
}