/* MORE FISH glass refresh — visual layer only. No layout/data logic. */
:root{
  --mf-glass-bg:rgba(255,250,243,.62);
  --mf-glass-bg-strong:rgba(255,247,236,.82);
  --mf-glass-border:rgba(255,255,255,.82);
  --mf-glass-line:rgba(231,181,128,.48);
  --mf-glass-shadow:0 16px 38px rgba(111,65,24,.14),inset 0 1px 0 rgba(255,255,255,.92);
  --mf-glass-shadow-soft:0 9px 24px rgba(111,65,24,.10),inset 0 1px 0 rgba(255,255,255,.92);
  --mf-orange:#f47b20;
  --mf-orange2:#ffae42;
  --mf-ink:#171717;
}
html{background:#f8bf79}
body{
  min-height:100vh;
  background-color:#f8bf79 !important;
  background-image:
    linear-gradient(rgba(255,247,235,.16),rgba(255,239,215,.16)),
    url('assets/morefish-background.webp?v=20260925-2') !important;
  background-repeat:repeat !important;
  background-size:760px 760px !important;
  background-position:0 0 !important;
  background-attachment:fixed !important;
}
@media(max-width:700px){
  body{
    background-size:560px 560px !important;
    background-attachment:scroll !important;
  }
}

/* Reusable glass surfaces */
.box,.panel,.content,.gallery,.reviewCard,.recentCard,.order,.item,.ttnBox,.chatContacts,.chatMessages,
.searchResults,.drawer .panel{
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,244,230,.60)) !important;
  border:1px solid var(--mf-glass-border) !important;
  box-shadow:var(--mf-glass-shadow-soft) !important;
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}

/* Header / top bars */
header{
  background:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
header>.wrap .nav,.top{
  position:relative;
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,237,214,.62)) !important;
  border:1px solid rgba(255,255,255,.92) !important;
  box-shadow:0 13px 34px rgba(111,65,24,.14),inset 0 1px 0 rgba(255,255,255,.96) !important;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  overflow:hidden;
}
header>.wrap .nav::before,.top::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,0));
  border-radius:inherit;
}
header>.wrap .nav>* ,.top>*{position:relative;z-index:1}
header>.wrap .nav{border-radius:22px;margin:10px 0;padding:7px 12px;height:70px}
.logoImg,.logo{
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:0 7px 18px rgba(100,55,15,.11),inset 0 1px 0 #fff !important;
  border-radius:15px !important;
}
nav a,.mobilePageLinks a{transition:.2s ease}
nav a:hover,.mobilePageLinks a:hover{color:var(--mf-orange) !important;text-shadow:0 1px 12px rgba(244,123,32,.18)}
.headerRight{align-items:center}
.headerShopStatus{
  padding:9px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:inset 0 1px 0 #fff,0 7px 18px rgba(91,50,17,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  white-space:nowrap;
}
.mobileBar{background:transparent !important}
.mobilePageLinks{
  background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(255,244,229,.58));
  border:1px solid rgba(255,255,255,.86);
  box-shadow:var(--mf-glass-shadow-soft);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-radius:17px;
  padding:7px 9px;
}

/* Buttons: preserve roles, only refresh finish */
button,.btn,.cartBtn,.primary,.ghost,.order,.buy,.npOption,.rotateBtn,.chatContact{
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,border-color .18s ease !important;
}
button:hover,.btn:hover,.cartBtn:hover,.primary:hover,.ghost:hover,.order:hover,.buy:hover,.npOption:hover,.rotateBtn:hover,.chatContact:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
}
.primary,.orange,.storeGlass .order,.buy,.headerCart{
  background:linear-gradient(145deg,rgba(255,180,76,.98),rgba(244,123,32,.96) 58%,rgba(232,92,12,.96)) !important;
  color:#15110d !important;
  border:1px solid rgba(255,218,159,.95) !important;
  box-shadow:0 10px 23px rgba(225,100,14,.24),inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(151,55,0,.18) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.headerAccount,.dark,.cartBtn:not(.headerCart),.btn.dark{
  background:linear-gradient(145deg,rgba(54,54,54,.98),rgba(15,15,15,.98)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 10px 23px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.ghost,.light,.tabs button,.btn:not(.orange):not(.primary):not(.dark),.rotateBtn,.npOption{
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,243,227,.62)) !important;
  color:#211c17 !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 8px 20px rgba(106,62,23,.10),inset 0 1px 0 #fff !important;
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.tabs button{border-radius:13px !important}
.badge{
  background:linear-gradient(145deg,#ffc66d,#f47b20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 12px rgba(217,93,18,.18)
}

.close,.qty button,.cartItem .remove{
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,240,222,.68)) !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:0 6px 15px rgba(96,54,20,.10),inset 0 1px 0 #fff !important;
}

/* Inputs, search and filters */
input,textarea,select,.input,.weightInput,.catalogTools input,.catalogTools select,.form input,.form textarea,.form select,.ttnBox input,.ttnBox select,.reviewForm input,.reviewForm textarea,.reviewForm select{
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,246,234,.60)) !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 8px 20px rgba(106,62,23,.08) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  outline:none;
}
input:focus,textarea:focus,select:focus,.input:focus,.catalogTools input:focus,.catalogTools select:focus{
  border-color:rgba(244,123,32,.72) !important;
  box-shadow:0 0 0 3px rgba(244,123,32,.13),inset 0 1px 0 #fff,0 9px 22px rgba(106,62,23,.08) !important;
}
.catalogTools{gap:12px !important}
.catalogTools input,.catalogTools select{min-height:48px;border-radius:16px !important}
.searchResults{overflow:hidden}
.searchResult{background:rgba(255,255,255,.30)}
.searchResult:hover{background:rgba(255,239,219,.78) !important}

/* Category buttons: KEEP original round artwork and logos, add only glass depth */
.cat{position:relative}
.catIcon{
  border-radius:50% !important;
  padding:7px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,239,218,.48)) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 13px 28px rgba(97,55,20,.13),inset 0 1px 0 #fff,0 0 0 1px rgba(244,123,32,.05) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.cat:hover .catIcon{box-shadow:0 18px 35px rgba(97,55,20,.18),inset 0 1px 0 #fff,0 0 0 2px rgba(244,123,32,.12) !important}
.catName{text-shadow:0 1px 0 rgba(255,255,255,.82)}

/* Product cards: same sizing/placement, only material finish */
.card{
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,246,234,.66)) !important;
  border-color:rgba(255,255,255,.94) !important;
  box-shadow:0 13px 30px rgba(104,61,22,.13),inset 0 1px 0 rgba(255,255,255,.96) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.card:hover{box-shadow:0 25px 55px rgba(104,61,22,.23),inset 0 1px 0 #fff !important}
.favBtn{
  background:rgba(255,255,255,.74) !important;
  border:1px solid rgba(255,255,255,.94) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 7px 18px rgba(0,0,0,.12),inset 0 1px 0 #fff !important;
}

/* Main hero: desktop uses approved glossy artwork; mobile falls back to live text */
.hero{
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:0 20px 48px rgba(109,63,22,.16),inset 0 1px 0 #fff !important;
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}
.hero.heroGlass{
  min-height:0 !important;
  aspect-ratio:1614/717;
  background:url('assets/glass-hero.webp?v=20260925-4') center/cover no-repeat !important;
  border-radius:30px;
  position:relative;
}
.hero.heroGlass::after{display:none !important}
.hero.heroGlass .heroIn{display:none}
.hero.heroGlass .heroLogo{
  display:flex !important;
  width:27.5% !important;
  max-width:315px;
  height:auto !important;
  aspect-ratio:1;
  right:4.8% !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(255,237,212,.56)) !important;
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 18px 45px rgba(98,53,16,.17),inset 0 1px 0 #fff,inset 0 -12px 30px rgba(244,123,32,.08) !important;
  backdrop-filter:blur(14px) saturate(145%);
  -webkit-backdrop-filter:blur(14px) saturate(145%);
  z-index:4;
}
.hero.heroGlass .heroLogoImg{
  width:78% !important;height:auto !important;border-radius:0 !important;
  content:url('assets/logo-transparent.png?v=20260925');
}
.hero.heroGlass .heroLogo small{display:none}
.heroGlassCta{
  position:absolute;z-index:6;left:5.7%;bottom:8.4%;width:27%;height:14%;
  border:0;background:transparent;cursor:pointer;border-radius:999px;color:transparent;font-size:0;
}
.heroGlassCta:focus-visible{outline:3px solid rgba(244,123,32,.72);outline-offset:4px}

/* Account/admin surfaces */
.top{border-radius:24px !important}
.accountGlass .top,.adminGlass .top{color:#171717 !important}
.box,.panel{border-radius:22px}
.chatBubble.mine{background:linear-gradient(145deg,rgba(255,204,132,.72),rgba(255,232,199,.68)) !important;border:1px solid rgba(255,255,255,.75)}
.chatBubble.theirs{background:rgba(255,255,255,.72) !important;border:1px solid rgba(255,255,255,.78)}
.chatContact{background:rgba(255,255,255,.46) !important}
.chatContact.chosen{background:linear-gradient(145deg,rgba(255,226,187,.85),rgba(255,247,235,.72)) !important}

/* Static content pages */
body.staticGlass header .nav{position:relative;padding-left:12px;padding-right:12px;background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,237,214,.62)) !important;border:1px solid rgba(255,255,255,.92) !important;box-shadow:0 13px 34px rgba(111,65,24,.14),inset 0 1px 0 rgba(255,255,255,.96) !important;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-radius:22px;margin-top:10px;margin-bottom:10px}
body.staticGlass .hero{
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,188,103,.34)) !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:var(--mf-glass-shadow) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* Admin login */
body.loginGlass .box{
  background:linear-gradient(145deg,rgba(40,40,40,.94),rgba(15,15,15,.92)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.loginGlass .box input{background:rgba(255,255,255,.10) !important;color:#fff !important;border-color:rgba(255,255,255,.16) !important}
body.loginGlass .box button{background:linear-gradient(145deg,#ffb24f,#f47b20) !important;border:1px solid rgba(255,219,165,.8) !important;box-shadow:0 10px 26px rgba(244,123,32,.28),inset 0 1px 0 rgba(255,255,255,.55)}

@media(max-width:850px){
  header>.wrap .nav{margin:7px 0;border-radius:19px;padding:5px 9px}
  .headerShopStatus{padding:7px 9px}
  .hero.heroGlass{aspect-ratio:auto;min-height:470px !important;background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(255,177,75,.42)) !important;overflow:hidden}
  .hero.heroGlass::before{content:"";position:absolute;inset:auto -20% -25% 25%;height:68%;background:radial-gradient(circle at 55% 45%,rgba(255,255,255,.78),rgba(255,164,54,.32) 42%,transparent 68%);filter:blur(1px)}
  .hero.heroGlass .heroIn{display:block !important;position:relative;z-index:5;max-width:100%;padding:38px 24px 220px !important}
  .hero.heroGlass .heroIn h1{font-size:clamp(42px,13vw,64px) !important;line-height:.94;margin:14px 0 18px}
  .hero.heroGlass .heroIn h1 span{color:var(--mf-orange);font-weight:900}
  .hero.heroGlass .heroIn p{font-size:17px}
  .hero.heroGlass .heroLogo{width:168px !important;right:18px !important;top:auto !important;bottom:22px !important;transform:none !important}
  .heroGlassCta{display:none}
}
@media(max-width:560px){
  header>.wrap .nav{height:auto;min-height:68px;overflow:visible}
  .headerShopStatus{font-size:12px !important}
  .hero.heroGlass{min-height:500px !important;border-radius:24px}
  .hero.heroGlass .heroIn{padding:32px 22px 205px !important}
  .hero.heroGlass .heroLogo{width:155px !important}
  .catIcon{padding:5px !important}
  .catalogTools input,.catalogTools select{min-height:46px}
}


/* 2026-09-25 banner/mobile corrections: keep approved artwork as the only hero logo. */
.hero.heroGlass .heroLogo,
.hero.heroGlass .heroLogoImg{
  display:none !important;
}
.hero.heroGlass .heroIn{
  display:none !important;
}
.hero.heroGlass{
  aspect-ratio:1614/717 !important;
  min-height:0 !important;
  background:url('assets/glass-hero.webp?v=20260925-4') center/100% 100% no-repeat !important;
}
.heroGlassCta{
  display:block !important;
  left:5.7% !important;
  bottom:8.4% !important;
  width:27% !important;
  height:14% !important;
}

/* Mobile header: status gets its own flexible area and never overlays account/cart. */
@media(max-width:700px){
  header>.wrap .nav{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    height:auto !important;
    min-height:0 !important;
    gap:7px !important;
    padding:7px 9px !important;
  }
  .nav .brand{
    flex:0 0 auto !important;
  }
  .headerRight{
    display:flex !important;
    flex:1 1 calc(100% - 58px) !important;
    min-width:0 !important;
    margin-left:auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
  }
  .headerShopStatus{
    position:static !important;
    flex:1 1 auto !important;
    min-width:86px !important;
    max-width:130px !important;
    margin:0 !important;
    padding:7px 8px !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.1 !important;
    font-size:10px !important;
  }
  .headerActions{
    display:flex !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    gap:5px !important;
  }
  .headerAccount,
  .headerCart{
    flex:0 0 auto !important;
    min-width:0 !important;
    padding:8px 7px !important;
    font-size:12px !important;
    min-height:40px !important;
  }
  .headerAccount{width:82px !important;max-width:82px !important;}
  .headerCart{width:88px !important;}
  .headerCart .badge{margin-left:2px !important;min-width:18px !important;height:18px !important;font-size:10px !important;}
  .hero.heroGlass{
    width:100% !important;
    aspect-ratio:1614/717 !important;
    min-height:0 !important;
    background:url('assets/glass-hero.webp?v=20260925-4') center/100% 100% no-repeat !important;
    border-radius:20px !important;
  }
  .hero.heroGlass::before{display:none !important;}
  .hero.heroGlass .heroIn,
  .hero.heroGlass .heroLogo{display:none !important;}
  .heroGlassCta{display:block !important;}
}

@media(max-width:420px){
  .nav .logoImg{width:42px !important;height:42px !important;}
  .headerRight{flex-basis:calc(100% - 49px) !important;gap:4px !important;}
  .headerShopStatus{min-width:72px !important;max-width:96px !important;font-size:9px !important;padding:6px 4px !important;}
  .headerActions{gap:4px !important;}
  .headerAccount{width:72px !important;max-width:72px !important;}
  .headerCart{width:80px !important;}
  .headerAccount,.headerCart{font-size:11px !important;padding:7px 4px !important;}
}


/* 2026-09-25 approved hero banner: exact artwork on desktop + mobile.
   The visible CTA is baked into the artwork; this transparent button makes it clickable. */
.hero.heroGlass{
  position:relative !important;
  width:100% !important;
  aspect-ratio:1592/696 !important;
  min-height:0 !important;
  background-image:url('assets/glass-hero.webp?v=20260925-4') !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  overflow:hidden !important;
}
.hero.heroGlass::before,
.hero.heroGlass::after{display:none !important;}
.hero.heroGlass .heroIn,
.hero.heroGlass .heroLogo,
.hero.heroGlass .heroLogoImg{display:none !important;}
.heroGlassCta{
  display:block !important;
  position:absolute !important;
  z-index:10 !important;
  left:6.1% !important;
  bottom:8.4% !important;
  width:26.6% !important;
  height:14.2% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:transparent !important;
  font-size:0 !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
}
.heroGlassCta:focus-visible{
  outline:3px solid rgba(244,123,32,.86) !important;
  outline-offset:3px !important;
}
@media(max-width:700px){
  .hero.heroGlass{
    aspect-ratio:1592/696 !important;
    min-height:0 !important;
    background-image:url('assets/glass-hero.webp?v=20260925-4') !important;
    background-size:100% 100% !important;
    border-radius:18px !important;
  }
  /* Slightly larger invisible tap target while staying over the pictured CTA. */
  .heroGlassCta{
    left:4.8% !important;
    bottom:5.5% !important;
    width:30% !important;
    height:20% !important;
  }
}


/* 2026-09-25: visible hover/tap feedback for the CTA baked into the hero artwork. */
.heroGlassCta{
  transition:transform .22s ease, filter .22s ease, box-shadow .22s ease !important;
  transform-origin:center center !important;
}
.heroGlassCta::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.02) 42%,rgba(244,123,32,.10));
  border:1px solid rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
  transition:opacity .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .heroGlassCta:hover{
    transform:translateY(-8px) scale(1.035) !important;
    filter:drop-shadow(0 14px 15px rgba(91,53,31,.28)) !important;
    box-shadow:0 12px 28px rgba(244,123,32,.18) !important;
  }
  .heroGlassCta:hover::before{opacity:.46;}
}
.heroGlassCta:active{
  transform:translateY(-2px) scale(.995) !important;
  filter:drop-shadow(0 7px 9px rgba(91,53,31,.22)) !important;
}
.heroGlassCta:active::before{opacity:.32;}


/* 2026-09-25: product detail text panel.
   Visual-only: keeps product data, layout and behaviour unchanged. */
.page > .info{
  position:relative;
  align-self:stretch;
  padding:24px 28px !important;
  border-radius:28px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,247,236,.78)) !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:
    0 16px 38px rgba(111,65,24,.13),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  overflow:hidden;
}
.page > .info::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:34%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.36),rgba(255,255,255,0));
}
.page > .info > *{
  position:relative;
  z-index:1;
}
.page > .info .desc{
  color:#665f58 !important;
}
@media(max-width:800px){
  .page > .info{
    padding:21px 20px !important;
    border-radius:24px !important;
  }
}


/* 2026-09-25: reviews follow the PHOTO column, not the taller text column.
   The review block keeps the same width as the gallery and starts immediately
   below it, so a long description on the right no longer pushes reviews down. */
.page{
  align-items:start !important;
}
.productLeft{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-self:start;
}
.productLeft > .gallery{
  width:100%;
  align-self:start !important;
}
.productLeft > .reviews{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:20px !important;
  border-radius:26px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,247,236,.78)) !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:0 16px 38px rgba(111,65,24,.13),inset 0 1px 0 rgba(255,255,255,.98) !important;
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.productLeft > .reviews h2{
  margin-top:0;
}
.productLeft > .reviews .reviewForm{
  max-width:none !important;
  width:100%;
}
.page > .info{
  align-self:start !important;
}

@media(max-width:800px){
  .productLeft{
    gap:14px;
  }
  .productLeft > .reviews{
    padding:17px !important;
    border-radius:22px !important;
  }
}


/* ============================================================
   MORE FISH — final visual polish 2026-09-25
   Visual layer only: no product/order/account business logic.
   ============================================================ */
:root{
  --mf-r-sm:14px;
  --mf-r-btn:18px;
  --mf-r-card:24px;
  --mf-r-panel:30px;
  --mf-shadow-card:0 8px 22px rgba(104,61,22,.10), inset 0 1px 0 rgba(255,255,255,.92);
  --mf-shadow-card-hover:0 16px 34px rgba(104,61,22,.15), inset 0 1px 0 rgba(255,255,255,.98);
}

/* 1) Keep the approved seamless background, but calm it down so content wins. */
html{background:#f8bf79 !important;min-height:100%;}
body{
  min-height:100vh;
  background-color:#f8bf79 !important;
  background-image:
    linear-gradient(rgba(255,250,242,.38),rgba(255,244,231,.38)),
    url('assets/morefish-background.webp?v=20260925-2') !important;
  background-repeat:repeat !important;
  background-size:760px 760px !important;
  background-position:0 0 !important;
  background-attachment:scroll !important;
}

/* 2) Long reading text uses a clean system typeface; brand/UI stays MORE FISH. */
body{
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
}
h1,h2,h3,h4,.brand,.catName,.price,.oldPrice,.eyebrow,
button,.btn,.cartBtn,.primary,.ghost,.buy,.card .order,.tabs button,
nav a,.mobilePageLinks a,.badge,.badgeP,.productBadge,.status,
.headerShopStatus,.meta strong,.mfFooterBrand strong{
  font-family:MoreFish,Inter,"Segoe UI",Arial,sans-serif !important;
}
.desc,.content p,.content li,.content .contact,.reviewCard,.reviews p,
.order p,.order .muted,.benefit,.muted,.checkout,.chatMessages,.chatBubble,
.mfFooterBlock,.mfFooterLegal,.mfFooterQr span{
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  line-height:1.58;
}
.desc{font-size:16px;line-height:1.65 !important;}

/* 3) Product cards: same geometry, quieter premium glass and a 4px hover lift. */
.card{
  border-radius:var(--mf-r-card) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(255,248,239,.70)) !important;
  border:1px solid rgba(255,255,255,.90) !important;
  box-shadow:var(--mf-shadow-card) !important;
  backdrop-filter:blur(10px) saturate(115%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(115%) !important;
  transition:transform .20s ease,box-shadow .20s ease,border-color .20s ease !important;
}
@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-4px) !important;
    box-shadow:var(--mf-shadow-card-hover) !important;
    border-color:rgba(255,255,255,.98) !important;
  }
}
.card img,.card .img,.recentCard,.recentCard img{border-radius:var(--mf-r-sm) !important;}
.card .order{border-radius:var(--mf-r-btn) !important;}

/* 4) One radius system across the visual language. */
input,textarea,select,.input,.weightInput,.catalogTools input,.catalogTools select,
.form input,.form textarea,.form select,.ttnBox input,.ttnBox select,
.reviewForm input,.reviewForm textarea,.reviewForm select{
  border-radius:var(--mf-r-sm) !important;
}
button,.btn,.cartBtn,.primary,.ghost,.buy,.npOption,.rotateBtn,.chatContact{
  border-radius:var(--mf-r-btn) !important;
}
.box,.content,.gallery,.reviews,.reviewCard,.recentCard,.order,.item,.ttnBox,
.chatContacts,.chatMessages,.drawer .panel,.page>.info{
  border-radius:var(--mf-r-card) !important;
}
.top,.admin,.benefits,.mfFooterGlass{border-radius:var(--mf-r-panel) !important;}
.catIcon,.favBtn,.close,.badge{border-radius:999px !important;}

/* 5) Consistent button materials and motion throughout the site. */
button,.btn,.cartBtn,.primary,.ghost,.buy,.npOption,.rotateBtn,.chatContact,.card .order{
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}
.primary,.orange,.buy,.card .order,.headerCart{
  background:linear-gradient(145deg,#ffb55d,#f47b20 58%,#e8640f) !important;
  color:#17120d !important;
  border:1px solid rgba(255,222,169,.92) !important;
  box-shadow:0 9px 20px rgba(225,100,14,.20),inset 0 1px 0 rgba(255,255,255,.74) !important;
}
.headerAccount,.dark,.btn.dark,.cartBtn:not(.headerCart){
  background:linear-gradient(145deg,#3a3a3a,#121212) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:0 9px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.ghost,.light,.tabs button,.btn:not(.orange):not(.primary):not(.dark),.rotateBtn,.npOption{
  background:linear-gradient(145deg,rgba(255,255,255,.84),rgba(255,246,235,.68)) !important;
  color:#211c17 !important;
  border:1px solid rgba(255,255,255,.94) !important;
  box-shadow:0 7px 17px rgba(106,62,23,.09),inset 0 1px 0 #fff !important;
}
@media (hover:hover) and (pointer:fine){
  button:hover,.btn:hover,.cartBtn:hover,.primary:hover,.ghost:hover,.buy:hover,
  .npOption:hover,.rotateBtn:hover,.chatContact:hover,.card .order:hover{
    transform:translateY(-2px) !important;
    filter:saturate(1.04) !important;
  }
}
button:active,.btn:active,.cartBtn:active,.primary:active,.ghost:active,.buy:active,
.npOption:active,.rotateBtn:active,.chatContact:active,.card .order:active{
  transform:translateY(0) scale(.985) !important;
}

/* 6) Product page mobile rhythm: photo -> product info/price/order -> reviews. */
@media(max-width:800px){
  .page{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }
  .productLeft{display:contents !important;}
  .productLeft>.gallery{order:1 !important;width:100% !important;margin:0 !important;}
  .page>.info{order:2 !important;width:100% !important;margin:0 !important;}
  .productLeft>.reviews{order:3 !important;width:100% !important;margin:0 !important;}
  .page>.info,.productLeft>.gallery,.productLeft>.reviews{
    border-radius:var(--mf-r-card) !important;
  }
}

/* 7) Customer-facing footer: one glass finish with contacts and static QR. */
.mfSiteFooter{
  width:100%;
  max-width:1180px;
  margin:38px auto 28px;
  padding:0 22px;
  color:#2a211a;
}
.mfFooterGlass{
  display:grid;
  grid-template-columns:minmax(190px,.85fr) minmax(300px,1.5fr) auto;
  gap:24px;
  align-items:center;
  padding:24px 26px;
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,244,229,.64));
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 14px 34px rgba(104,61,22,.12),inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.mfFooterBrand{display:flex;align-items:center;gap:12px;min-width:0;}
.mfFooterBrand img{
  width:58px;height:58px;object-fit:contain;border-radius:15px;
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.94);
  box-shadow:0 7px 18px rgba(100,55,15,.09),inset 0 1px 0 #fff;
}
.mfFooterBrand strong{display:block;font-size:20px;letter-spacing:.4px;}
.mfFooterBrand a,.mfFooterBlock a,.mfFooterLegal a{color:inherit;text-decoration:none;}
.mfFooterBrand a:hover,.mfFooterBlock a:hover,.mfFooterLegal a:hover{color:var(--mf-orange);}
.mfFooterGrid{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;}
.mfFooterBlock{font-size:14px;color:#5f554c;}
.mfFooterBlock b{display:block;color:#201a15;margin-bottom:6px;font-family:MoreFish,Inter,"Segoe UI",Arial,sans-serif;}
.mfFooterBlock span,.mfFooterBlock a{display:block;margin:2px 0;}
.mfFooterQr{display:flex;align-items:center;gap:10px;color:#2b2119;text-decoration:none;min-width:150px;}
.mfFooterQr img{
  width:82px;height:82px;object-fit:contain;background:#fff;padding:5px;border-radius:14px;
  border:1px solid rgba(255,255,255,.98);box-shadow:0 8px 20px rgba(92,50,18,.11);
}
.mfFooterQr span{max-width:110px;font-size:12px;font-weight:700;line-height:1.3;}
.mfFooterLegal{text-align:center;color:#6e655d;font-size:12px;padding:11px 8px 0;}
@media(max-width:760px){
  .mfSiteFooter{padding:0 14px;margin-top:28px;}
  .mfFooterGlass{grid-template-columns:1fr;gap:16px;padding:20px;border-radius:24px !important;}
  .mfFooterGrid{grid-template-columns:1fr;gap:12px;}
  .mfFooterQr{justify-content:flex-start;}
  .mfFooterQr img{width:72px;height:72px;}
}

/* Scroll performance: the background is already WebP. Avoid blurring every
   catalog card as it enters the viewport, while keeping the glass color. */
body .card{
  background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(255,248,239,.88)) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
@media(max-width:800px){
  .box,.panel,.content,.gallery,.reviewCard,.recentCard,.ttnBox,
  .chatContacts,.chatMessages,.searchResults,.drawer .panel,.mfFooterGlass{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}