/* AKAI homepage redesign — scoped entirely under #akai-home so it cannot affect
   the shared header/footer or any other page on the site. */

/* ---------- Layout integration: visually reorder existing dynamic modules
   (hero slideshow, "Наши Новинки" products, "Лента Новостей" news) alongside
   the new static sections via flex order, without touching Design > Layout
   assignments or any product/category/blog links they render. ---------- */
#akai-home{display:flex;flex-direction:column;}
#akai-home > *{width:100%;order:45;}
#akai-home > .main-slider{order:10;}
#akai-home > .featured-carousel{order:15;} /* new small product carousel, sits right below the hero */
#akai-home > .cmsbanner-block{display:none;} /* generic SEO filler text, hidden per SEO review — see .visually-hidden H1 near the top of this file for the replacement H1 */
#akai-home > .hero-strip-wrap{order:20;}
#akai-home > .trust{order:30;}
#akai-home > .testimonial-cms{display:none;} /* replaced by the new #showcase bento grid below, using the same real category links */
#akai-home > #servicecmsblock{display:none;} /* replaced by the new .buy section below, using the same real links (verified: где купить=info_id 3, contact=akai.ru, service=info_id 7) */
#akai-home .cms-inner-block1,
#akai-home .cms-inner-block2{display:none;} /* covers both block-combine1 (Наушники/Телевизоры) and block-combine2 ("Будьте на связи"/"Яркое настроение") — SEO paragraphs above stay visible */
#akai-home > #showcase{order:40;}
#akai-home > .image-banner{order:42;} /* full-bleed image-only sections (power bank, aircon, homegoods, tv), all share this order so they stack in DOM order right below the bento grid */
#akai-home .image-banner{line-height:0;padding:0;}
/* All four image-only banners (power bank, aircon, homegoods, tv) share this
   frame so they render at the same size — aspect-ratio matches the power bank
   banner (the widest/shortest of the four source images), the others crop to
   fit via object-fit:cover with a centered object-position. */
#akai-home .image-banner-frame{position:relative;aspect-ratio:1928/816;overflow:hidden;}
/* Sampled directly from the kettle's matte body in the photo (~RGB 30-68, averaging
   to this charcoal) so the label reads as "branded to the product" rather than an
   arbitrary site accent color. Sits in the empty left portion of the frame, clear
   of the product itself. */
#akai-home .homegoods-label{
  position:absolute;left:5%;top:50%;transform:translateY(-50%);
  font-family:'Unbounded',sans-serif!important;font-weight:800;line-height:1.15;
  font-size:clamp(20px,3.4vw,42px);color:#2a2a2a;letter-spacing:-.01em;
  text-transform:uppercase;pointer-events:none;max-width:44%;
}
@media(max-width:640px){#akai-home .homegoods-label{font-size:clamp(16px,5vw,24px);}}
/* Shoppable hotspots — invisible boxes roughly tracing each power bank's silhouette.
   No visible box on hover; instead the native cursor disappears and a custom
   "eye" cursor (circle + eye icon, positioned by JS in the twig template) follows
   the mouse while it's over a hotspot. */
#akai-home .banner-hotspot{position:absolute;cursor:none;}
#akai-home .cursor-eye{
  position:absolute;top:0;left:0;width:52px;height:52px;border-radius:50%;
  background:rgba(20,19,18,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,.75);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6);
  transition:opacity .18s ease,transform .18s ease;
  z-index:5;
}
#akai-home .cursor-eye.visible{opacity:1;transform:translate(-50%,-50%) scale(1);}
#akai-home .cursor-eye svg{width:22px;height:22px;flex:none;}
#akai-home > .hometab.box{order:70;} /* existing "Наши Новинки" module, restyled in place */
#akai-home > .blog-mainhead{order:80;} /* existing "Лента Новостей" module, restyled in place */
#akai-home > .buy{order:90;}

/* Standard accessible-hiding pattern (not display:none) — keeps the page's H1 in the DOM
   for search engines/screen readers without a visible text overlay on the hero photo. */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

#akai-home{
  --red:#E2081C;
  --red-dark:#B10613;
  --ink:#141312;
  --ink-soft:#57534E;
  --paper:#FCFAF5;
  --paper-alt:#F7F3EC;
  --paper-dim:#EFE7D8;
  --line:#E4DACB;
  --gold:#B8862E;
  --sakura:#F3D6DD;
  --ink-70: rgba(20,19,18,.72);
  --ink-50: rgba(20,19,18,.5);
  --max: 1240px;
  --radius: 14px;
  background:#fff;
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
#akai-home *{box-sizing:border-box;}
#akai-home img{max-width:100%;display:block;}
#akai-home a{color:inherit;text-decoration:none;}
#akai-home .wrap{max-width:var(--max);margin:0 auto;padding:0 32px;position:relative;}
@media(max-width:640px){#akai-home .wrap{padding:0 20px;}}

#akai-home h1,#akai-home h2,#akai-home h3,#akai-home .font-display{font-family:'Unbounded',sans-serif;}
#akai-home .eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:16px;
}
#akai-home .eyebrow::before{content:"";display:block;width:22px;height:3px;background:var(--red);border-radius:2px;flex:none;}
#akai-home .eyebrow.on-color{color:#fff;}
#akai-home .eyebrow.on-color::before{background:#fff;}

/* ---------- Buttons ---------- */
#akai-home .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:999px;font-weight:700;font-size:15px;
  font-family:'Inter',sans-serif;cursor:pointer;border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
#akai-home .btn:active{transform:scale(.97);}
#akai-home .btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 24px -10px rgba(226,8,28,.55);}
#akai-home .btn-primary:hover{background:#c8071a;box-shadow:0 14px 30px -10px rgba(226,8,28,.6);transform:translateY(-2px);}
#akai-home .btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
#akai-home .btn-outline:hover{border-color:var(--ink);transform:translateY(-2px);}
#akai-home .btn-outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;}
#akai-home .btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-2px);}
#akai-home .btn-light{background:#fff;color:var(--red-dark);}
#akai-home .btn-light:hover{background:#fff5f5;transform:translateY(-2px);}
#akai-home .btn-sm{padding:10px 18px;font-size:13px;border-radius:999px;}

/* ---------- Decorative line system ---------- */
#akai-home .corner-mark{position:absolute;width:18px;height:18px;pointer-events:none;}
#akai-home .corner-mark.tl{top:0;left:-2px;border-top:2px solid var(--red);border-left:2px solid var(--red);}
#akai-home .corner-mark.br{bottom:0;right:-2px;border-bottom:2px solid var(--red);border-right:2px solid var(--red);}

/* ---------- Japanese pattern system ---------- */
#akai-home .pat-waves{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cpath d='M0 30 C15 0 45 0 60 30 M-30 30 C-15 0 15 0 30 30 M30 30 C45 0 75 0 90 30' fill='none' stroke='%23B10613' stroke-width='1.3' opacity='0.28'/%3E%3C/svg%3E");
  background-size:60px 30px;
}
#akai-home .pat-asanoha{
  background-image:
    repeating-linear-gradient(60deg, rgba(226,8,28,.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-60deg, rgba(226,8,28,.07) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(226,8,28,.07) 0 1px, transparent 1px 34px);
}
#akai-home .pat-sakura-scatter{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23FFFFFF' opacity='0.22'%3E%3Ccircle cx='20' cy='24' r='5'/%3E%3Ccircle cx='30' cy='18' r='5'/%3E%3Ccircle cx='32' cy='30' r='5'/%3E%3Ccircle cx='22' cy='34' r='5'/%3E%3Ccircle cx='12' cy='30' r='5'/%3E%3Ccircle cx='95' cy='80' r='4'/%3E%3Ccircle cx='103' cy='75' r='4'/%3E%3Ccircle cx='105' cy='85' r='4'/%3E%3Ccircle cx='97' cy='90' r='4'/%3E%3Ccircle cx='89' cy='85' r='4'/%3E%3Ccircle cx='60' cy='115' r='4.5'/%3E%3Ccircle cx='68' cy='110' r='4.5'/%3E%3Ccircle cx='70' cy='120' r='4.5'/%3E%3Ccircle cx='61' cy='124' r='4.5'/%3E%3Ccircle cx='53' cy='120' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:140px 140px;
}
#akai-home .pat-dots{
  background-image:radial-gradient(rgba(226,8,28,.16) 1.6px, transparent 1.6px);
  background-size:22px 22px;
}
#akai-home .focal-line{position:absolute;pointer-events:none;z-index:0;}
#akai-home .wave-divider{
  height:14px;margin-bottom:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cpath d='M0 30 C15 0 45 0 60 30 M-30 30 C-15 0 15 0 30 30 M30 30 C45 0 75 0 90 30' fill='none' stroke='%23B10613' stroke-width='1.5' opacity='0.4'/%3E%3C/svg%3E");
  background-size:60px 30px;background-repeat:repeat-x;background-position:top center;
}

/* photo placeholder */
#akai-home .photo-slot{
  position:relative;width:100%;background:#0b0b0b;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#akai-home .photo-slot .label{
  display:flex;align-items:center;gap:10px;font-family:'Unbounded',sans-serif;
  color:rgba(255,255,255,.4);font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;
}
#akai-home .photo-slot .label svg{width:18px;height:18px;stroke:rgba(255,255,255,.4);}

/* ---------- Hero (full-bleed banner) ---------- */
/* Integrated directly onto the existing Swiper markup (.main-slider > .swiper-viewport),
   not the standalone mockup structure — every non-content child is pulled out of flex
   flow with position:absolute so only .hero-content participates in the flex layout. */
/* aspect-ratio (matching the source banner images, ~2.97:1) instead of a fixed
   min-height means the box scales its HEIGHT down as the window narrows, so
   object-fit:cover on the slide images never has to crop the sides away —
   shrinking the browser shrinks the banner, it doesn't just crop it. */
#akai-home .hero{position:relative;--hero-ratio:1672/941;height:auto;aspect-ratio:var(--hero-ratio);max-height:100vh;max-height:100dvh;min-height:0;display:flex;align-items:flex-end;overflow:hidden;padding:0;background:#0b0b0b;}
#akai-home .hero #spinner{position:absolute;inset:0;z-index:4;}
#akai-home .hero .swiper-viewport{position:absolute;inset:0;z-index:0;}
#akai-home .hero .swiper-container,#akai-home .hero .swiper-wrapper,#akai-home .hero .swiper-slide{height:100%;}
#akai-home .hero .swiper-slide img,
#akai-home .hero .swiper-slide video{width:100%;height:100%;object-fit:cover;display:block;}
#akai-home .hero .swiper-slide{position:relative;}
#akai-home .hero-cta-wrap{
  position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:flex-end;
  max-width:var(--max);margin:0 auto;left:0;right:0;padding:0 32px 64px;pointer-events:none;
}
#akai-home .hero-cta{
  pointer-events:auto;padding:16px 30px;
  box-shadow:0 16px 36px -12px rgba(226,8,28,.6),0 0 0 1px rgba(255,255,255,.12) inset;
}
#akai-home .hero-cta span{display:inline-block;transition:transform .25s ease;}
#akai-home .hero-cta:hover span{transform:translateX(5px);}
/* opencart.css ships a global `.swiper-pagination{bottom:-40px}` rule that this element
   also matches (it carries the base `swiper-pagination` class) — override back into view. */
#akai-home .hero .swiper-pagination{display:block;position:absolute;left:0;right:0;bottom:22px;z-index:3;text-align:center;}
#akai-home .hero .swiper-pagination-bullet{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);display:inline-block;margin:0 4px;cursor:pointer;opacity:1;transition:all .25s ease;
}
#akai-home .hero .swiper-pagination-bullet-active{background:var(--red);width:20px;border-radius:4px;}

#akai-home .hero .swiper-button-next,#akai-home .hero .swiper-button-prev{
  width:32px;height:32px;margin-top:-16px;background-image:none;border-radius:50%;
  background-color:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);z-index:3;transition:background-color .2s ease,border-color .2s ease;
}
#akai-home .hero .swiper-button-prev{left:20px;}
#akai-home .hero .swiper-button-next{right:20px;}
#akai-home .hero .swiper-button-next:hover,#akai-home .hero .swiper-button-prev:hover{background-color:var(--red);border-color:var(--red);}
#akai-home .hero .swiper-button-next::before,#akai-home .hero .swiper-button-prev::before{
  content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
  border-top:2px solid var(--red);border-right:2px solid var(--red);transition:border-color .2s ease;
}
#akai-home .hero .swiper-button-prev::before{transform:translate(-25%,-50%) rotate(-135deg);}
#akai-home .hero .swiper-button-next::before{transform:translate(-75%,-50%) rotate(45deg);}
#akai-home .hero .swiper-button-next:hover::before,#akai-home .hero .swiper-button-prev:hover::before{border-color:#fff;}
@media(max-width:640px){
  #akai-home .hero .swiper-button-next,#akai-home .hero .swiper-button-prev{display:none;}
}
@media(max-width:640px){
  #akai-home .hero-cta-wrap{padding:0 20px 32px;}
  #akai-home .hero-cta{padding:12px 22px;font-size:14px;}
}
/* Dark gradient scrim over the hero photo — removed per request (banner shows unshaded).
   Element left in slideshow.twig and only hidden, per the project's "hide, never delete" rule.
   Original: linear-gradient(180deg, rgba(8,7,6,.32) 0%, rgba(8,7,6,.08) 32%, rgba(8,7,6,.55) 68%, rgba(8,7,6,.92) 100%) */
#akai-home .hero .overlay{display:none!important;}

#akai-home .sakura-branch{position:absolute;top:64px;right:-10px;width:220px;opacity:.5;z-index:2;pointer-events:none;}
#akai-home .barcode{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:flex-end;gap:6px;opacity:.22;z-index:1;pointer-events:none;}
#akai-home .barcode i{display:block;width:5px;background:linear-gradient(180deg,var(--red),transparent);border-radius:2px 2px 0 0;}
@media(max-width:900px){#akai-home .sakura-branch,#akai-home .barcode{display:none;}}

#akai-home .hero-content{position:relative;z-index:3;width:100%;padding:150px 0 64px;pointer-events:none;}
#akai-home .hero-content a,#akai-home .hero-content button,#akai-home .hero-content form{pointer-events:auto;}
#akai-home .hero-copy{
  max-width:620px;background:rgba(8,7,6,.32);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px 36px;
}
@media(max-width:640px){#akai-home .hero-copy{padding:24px 22px;border-radius:16px;}}
#akai-home .hero-focus{position:relative;height:20px;margin-bottom:18px;}
#akai-home .hero-focus .tag{
  position:absolute;left:0;top:0;opacity:0;transition:opacity .6s ease;
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.08);
  white-space:nowrap;
}
#akai-home .hero-focus .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;}
#akai-home .hero-focus .tag.active{opacity:1;}
#akai-home .hero h1{
  font-size:clamp(34px,4.8vw,56px);line-height:1.06;font-weight:800;margin:0 0 20px;
  letter-spacing:-.01em;color:#fff;
}
#akai-home .hero h1 .hero-title-line1{display:block;}
#akai-home .hero h1 em{font-style:normal;color:var(--red);display:block;}
#akai-home .hero p.lead{
  font-size:17px;line-height:1.6;color:rgba(255,255,255,.75);max-width:520px;margin:0 0 32px;
}
#akai-home .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px;}
#akai-home .hero-stats{display:flex;gap:28px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.22);padding-top:22px;}
#akai-home .hero-stats div{display:flex;flex-direction:column;gap:4px;}
#akai-home .hero-stats b{font-family:'Unbounded',sans-serif;font-size:19px;font-weight:700;color:#fff;}
#akai-home .hero-stats span{font-size:12px;color:rgba(255,255,255,.55);letter-spacing:.03em;}

#akai-home .slide-dots{position:absolute;right:28px;bottom:26px;display:flex;gap:6px;z-index:3;}
#akai-home .slide-dots button{width:7px;height:7px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:all .25s ease;}
#akai-home .slide-dots button.active{background:var(--red);width:20px;border-radius:4px;}

@media(max-width:640px){#akai-home .hero-content{padding:130px 0 48px;}}

/* Mobile only: the aspect-ratio box above keeps the full banner visible on a
   narrow desktop window, but on a phone that makes the hero read as a thin
   strip. Here the priority flips — a tall, near-fullscreen hero reads as the
   main visual, so height wins over aspect-ratio and the sides crop instead. */
@media(max-width:767px){
  #akai-home .hero{height:100vh;height:100dvh;aspect-ratio:auto;min-height:480px;max-height:none;}
}

/* hero category strip — floating card under the banner */
#akai-home .hero-strip-wrap{position:relative;z-index:4;margin-top:-44px;margin-bottom:60px;}
#akai-home .hero-strip{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.25);
}
#akai-home .hero-strip a{background:var(--paper);display:flex;align-items:center;gap:12px;padding:18px 18px;transition:background .2s ease;}
#akai-home .hero-strip a:hover{background:#fff;}
#akai-home .hero-strip svg{width:22px;height:22px;stroke:var(--red);flex:none;}
#akai-home .hero-strip a span{display:flex;flex-direction:column;gap:2px;}
#akai-home .hero-strip b{display:block;font-size:13px;font-weight:700;color:var(--ink);}
#akai-home .hero-strip i{font-style:normal;font-size:11px;color:var(--ink-50);}
@media(max-width:900px){#akai-home .hero-strip{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){#akai-home .hero-strip{grid-template-columns:1fr;} #akai-home .hero-strip-wrap{margin-top:-24px;}}

/* ---------- Trust strip ---------- */
#akai-home .trust{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cpath d='M0 30 C15 0 45 0 60 30 M-30 30 C-15 0 15 0 30 30 M30 30 C45 0 75 0 90 30' fill='none' stroke='%23FFFFFF' stroke-width='1.3' opacity='0.18'/%3E%3C/svg%3E"), linear-gradient(120deg,var(--red-dark),var(--red) 60%,#c8071a);
  background-size:60px 30px, auto;
  border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);
}
#akai-home .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.2);}
#akai-home .trust-cell{background:transparent;padding:34px 28px;}
#akai-home .trust-cell b{display:block;font-family:'Unbounded',sans-serif;font-size:clamp(24px,3vw,32px);color:#fff;margin-bottom:6px;}
#akai-home .trust-cell p{margin:0;font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.5;}
@media(max-width:900px){#akai-home .trust-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){#akai-home .trust-grid{grid-template-columns:1fr;}}

/* ---------- Section generic ---------- */
#akai-home section{padding:104px 0;}
@media(max-width:640px){#akai-home section{padding:64px 0;}}
#akai-home h2{font-size:clamp(28px,3.6vw,42px);line-height:1.12;font-weight:700;margin:0 0 18px;letter-spacing:-.01em;color:var(--ink);}
#akai-home .section-head{max-width:640px;margin-bottom:56px;}
#akai-home .section-head p{font-size:16.5px;line-height:1.65;color:var(--ink-70);margin:0;}

/* ---------- Featured product carousel (small section right below the hero) ----------
   Reuses the same .product-card / .photo-slot styling and Swiper library as the
   "Наши Новинки" carousel further down, but with its own pagination/nav classes
   (.featured-pagination/.featured-prev/.featured-next) so the two Swiper instances
   never collide — both pages used identical class names before, which would make
   one carousel's arrows drive both. */
#akai-home .featured-carousel{padding:22px 0;background:#fff;}
#akai-home .featured-carousel .section-head{margin-bottom:10px;max-width:none;}
#akai-home .featured-carousel h2{font-size:20px;margin:0;}
#akai-home .featured-carousel-wrap{position:relative;}
#akai-home .featured-carousel-wrap .swiper-container{overflow:hidden;}
#akai-home .featured-carousel-wrap .swiper-slide{height:auto;}
#akai-home .featured-carousel-wrap .swiper-slide .product-card{height:100%;}
/* Bigger, near-square product photography instead of the standard 4:3 crop, plus a
   plain (borderless) card now that there are fewer, larger tiles per row. Shorter,
   wider crop (4:3 instead of 1:1) keeps the whole strip more compact. */
#akai-home .featured-carousel .product-card{background:none;border:none;box-shadow:none;padding:0;}
#akai-home .featured-carousel .product-card .photo-slot{aspect-ratio:1/1;margin-bottom:10px;background:#fff;}
#akai-home .featured-carousel .product-card h3{font-size:14px;text-align:center;}
#akai-home .featured-carousel .product-card h3 a{color:var(--ink,#141312);text-decoration:none;}
/* Ring-style dots — a deliberately different pagination look from the pill-bullet
   pattern used on the hero/other carousels: outlined circles, active one filled solid. */
#akai-home .featured-pagination{position:static;text-align:center;margin-top:14px;}
#akai-home .featured-pagination .swiper-pagination-bullet{
  width:9px;height:9px;border-radius:50%;background:transparent;border:1.5px solid var(--line,#E4DACB);
  display:inline-block;margin:0 5px;cursor:pointer;opacity:1;transition:all .25s ease;box-sizing:border-box;
}
#akai-home .featured-pagination .swiper-pagination-bullet-active{background:var(--red);border-color:var(--red);}
@media(max-width:640px){
  #akai-home .featured-carousel{padding:18px 0;}
  #akai-home .featured-carousel .section-head{margin-bottom:10px;}
  #akai-home .featured-carousel h2{font-size:17px;}
  #akai-home .featured-carousel .product-card .photo-slot{aspect-ratio:4/3;margin-bottom:6px;}
  #akai-home .featured-carousel .product-card h3{font-size:12.5px;}
  #akai-home .featured-carousel-wrap{padding-top:0;}
  #akai-home .featured-pagination{margin-top:8px;}
}

/* ---------- Bento showcase grid ----------
   Now carries the "Популярные категории" heading directly above the tiles
   (moved out of the old standalone #categories section). Background is the
   user-supplied 3D render photo, with a dark scrim so the white heading text
   stays legible over its brighter areas. */
#akai-home .bento-section{
  background-image:
    linear-gradient(180deg, rgba(20,4,4,.45), rgba(20,4,4,.55)),
    url("/image/catalog/akai-redesign/showcase-bg.png?v=2");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding:56px 0 80px;
}
#akai-home .bento-section .section-head{margin-bottom:32px;}
#akai-home .bento-section .eyebrow{color:#fff;}
#akai-home .bento-section .eyebrow::before{background:#fff;}
#akai-home .bento-section h2{color:#fff;}
#akai-home .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:20px;
  /* rows 1-2 = TV block, row 3 = the wide Power Bank tile (its photo is a thin 1935x395 strip whose products touch the top/bottom edges, so a taller tile only zooms/crops it - keep this modest unless a taller photo is supplied), row 4 = climate/cables */
  grid-template-rows:240px 240px clamp(240px,23.5vw,300px) 240px;}
@media(max-width:900px){#akai-home .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;grid-template-rows:220px 220px 220px 220px clamp(220px,28vw,260px) 220px;}}
@media(max-width:520px){
  #akai-home .bento{grid-template-columns:1fr;grid-auto-rows:auto;grid-template-rows:none;}
  #akai-home .bento .tile{grid-column:auto!important;grid-row:auto!important;min-height:220px;}
}
#akai-home .tile{
  position:relative;border-radius:var(--radius);overflow:hidden;
  padding:24px;display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:#fff;transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
#akai-home .tile:hover{transform:translateY(-3px);}
#akai-home .tile .tile-inner{position:relative;z-index:2;}
#akai-home .tile-bg{position:absolute;inset:0;z-index:0;}
#akai-home .tile-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(10,9,8,0) 30%, rgba(10,9,8,.78) 100%);}
#akai-home .tile-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:6px;display:block;}
#akai-home .tile h3{font-family:'Unbounded',sans-serif;font-size:17px;font-weight:700;margin:0 0 6px;line-height:1.25;color:#fff;}
#akai-home .tile p{font-size:13px;line-height:1.5;margin:0;opacity:.88;max-width:34ch;}
#akai-home .tile-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
#akai-home .tile-badges span{font-size:10.5px;font-weight:700;letter-spacing:.03em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 10px;}
#akai-home .tile-arrow{position:absolute;top:20px;right:20px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
#akai-home .tile:hover .tile-arrow{background:rgba(255,255,255,.28);}
#akai-home .tile-arrow svg{width:13px;height:13px;}

#akai-home .art-tv{background:radial-gradient(120% 100% at 20% 0%, rgba(226,8,28,.35), transparent 60%),linear-gradient(135deg,#141312 0%,#221b1a 55%,#0c0a09 100%);}
#akai-home .art-tv-glow{position:absolute;inset:0;z-index:0;background:conic-gradient(from 200deg at 65% 35%, #E2081C, #B8862E, #6E1B8F, #0C4FA8, #E2081C);opacity:.35;filter:blur(40px);}
#akai-home .art-salut{background:linear-gradient(150deg,#2b2320,#141312 70%);}
#akai-home .art-connect{background:linear-gradient(155deg,#1c1a19,#0c0a09);}
#akai-home .art-ecosystem{background:linear-gradient(115deg,var(--red-dark),var(--red) 55%,#c8071a);}
#akai-home .art-climate{background:linear-gradient(150deg,#8f6a22,#5c451a);}
#akai-home .art-power{background:linear-gradient(150deg,#2c2620,#171310);}

#akai-home .t-hero{grid-column:1 / span 2;grid-row:1 / span 2;}
#akai-home .t-salut{grid-column:3 / span 2;grid-row:1;}
#akai-home .t-connect{grid-column:3;grid-row:2;}
#akai-home .t-hdr{grid-column:4;grid-row:2;}
#akai-home .t-eco{grid-column:1 / span 4;grid-row:3;}
#akai-home .t-climate{grid-column:1 / span 2;grid-row:4;}
#akai-home .t-power{grid-column:3 / span 2;grid-row:4;}
@media(max-width:900px){
  #akai-home .t-hero{grid-column:1 / span 2;grid-row:1 / span 2;}
  #akai-home .t-salut{grid-column:1 / span 2;grid-row:3;}
  #akai-home .t-connect{grid-column:1;grid-row:4;}
  #akai-home .t-hdr{grid-column:2;grid-row:4;}
  #akai-home .t-eco{grid-column:1 / span 2;grid-row:5;}
  #akai-home .t-climate{grid-column:1;grid-row:6;}
  #akai-home .t-power{grid-column:2;grid-row:6;}
}
#akai-home .t-eco .tile-inner{max-width:640px;}
#akai-home .t-eco h3{font-size:19px;}
#akai-home .app-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
#akai-home .app-row span{font-size:12px;font-weight:700;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 13px;}

/* ---------- Spotlight split ---------- */
#akai-home .spotlight{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:1;}
@media(max-width:900px){#akai-home .spotlight{grid-template-columns:1fr;gap:36px;}}
#akai-home .spotlight.reverse .copy{order:2;}
#akai-home .spotlight.reverse .visual{order:1;}
@media(max-width:900px){#akai-home .spotlight.reverse .copy,#akai-home .spotlight.reverse .visual{order:initial;}}
#akai-home .spotlight .copy h2{margin-bottom:28px;}
#akai-home .spotlight .copy p.desc{font-size:16.5px;line-height:1.7;color:var(--ink-70);margin:0 0 28px;max-width:480px;}
#akai-home .feat-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;list-style:none;padding:0;margin:0 0 28px;}
#akai-home .spotlight .copy .btn{margin-top:0!important;}
#akai-home .feat-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink);}
#akai-home .feat-list li svg{width:18px;height:18px;stroke:var(--red);flex:none;margin-top:2px;}
#akai-home .visual .photo-slot{aspect-ratio:16/10;}

/* ---------- Sponsorship ---------- */
#akai-home .sponsor{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23FFFFFF' opacity='0.22'%3E%3Ccircle cx='20' cy='24' r='5'/%3E%3Ccircle cx='30' cy='18' r='5'/%3E%3Ccircle cx='32' cy='30' r='5'/%3E%3Ccircle cx='22' cy='34' r='5'/%3E%3Ccircle cx='12' cy='30' r='5'/%3E%3Ccircle cx='95' cy='80' r='4'/%3E%3Ccircle cx='103' cy='75' r='4'/%3E%3Ccircle cx='105' cy='85' r='4'/%3E%3Ccircle cx='97' cy='90' r='4'/%3E%3Ccircle cx='89' cy='85' r='4'/%3E%3Ccircle cx='60' cy='115' r='4.5'/%3E%3Ccircle cx='68' cy='110' r='4.5'/%3E%3Ccircle cx='70' cy='120' r='4.5'/%3E%3Ccircle cx='61' cy='124' r='4.5'/%3E%3Ccircle cx='53' cy='120' r='4.5'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(120deg,var(--red-dark),var(--red) 60%,#c8071a);
  background-size:140px 140px, auto;
  position:relative;overflow:hidden;
}
#akai-home .sponsor .eyebrow{color:#fff;}
#akai-home .sponsor .eyebrow::before{background:#fff;}
#akai-home .sponsor h2{color:#fff;}
#akai-home .sponsor .copy p.desc{color:rgba(255,255,255,.85);font-size:16.5px;line-height:1.7;max-width:460px;}
#akai-home .sponsor-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;position:relative;z-index:1;}
@media(max-width:900px){#akai-home .sponsor-grid{grid-template-columns:1fr;}}
#akai-home .sponsor-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;}
#akai-home .sponsor-tags span{
  border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 16px;
  font-size:13px;font-weight:600;color:#fff;background:rgba(255,255,255,.08);
}
#akai-home .sponsor-img .photo-slot{aspect-ratio:21/9;}

/* ---------- Product grid (Наши Новинки) ---------- */
#akai-home .products{background-color:#ffffff;}
#akai-home .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:960px){#akai-home .product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#akai-home .product-grid{grid-template-columns:1fr;}}
#akai-home .product-card{position:relative;background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius);padding:16px;}
#akai-home .product-card .photo-slot{aspect-ratio:4/3;margin-bottom:16px;}
#akai-home .product-badge{
  position:absolute;top:28px;left:28px;z-index:2;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
}
#akai-home .product-card h3{font-family:'Unbounded',sans-serif;font-size:14.5px;font-weight:600;margin:0 0 4px;line-height:1.3;}
#akai-home .product-card .cat{font-size:12.5px;color:var(--ink-50);margin:0 0 16px;}
#akai-home .product-actions{display:flex;gap:8px;flex-wrap:wrap;}
#akai-home .product-actions button,#akai-home .product-actions a{
  flex:1;min-width:110px;padding:10px 12px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);font-size:12.5px;font-weight:700;cursor:pointer;transition:all .18s ease;
  font-family:'Inter',sans-serif;text-align:center;
}
#akai-home .product-actions button:hover,#akai-home .product-actions a:hover{border-color:var(--ink);}
#akai-home .product-actions button[data-compare].added{background:var(--red);border-color:var(--red);color:#fff;}

/* ---------- News feed (Лента Новостей) ---------- */
#akai-home .news{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cpath d='M0 30 C15 0 45 0 60 30 M-30 30 C-15 0 15 0 30 30 M30 30 C45 0 75 0 90 30' fill='none' stroke='%23FFFFFF' stroke-width='1.3' opacity='0.16'/%3E%3C/svg%3E"), linear-gradient(120deg,var(--red-dark),var(--red) 60%,#c8071a);
  background-size:60px 30px, auto;
}
#akai-home .news .eyebrow{color:#fff;}
#akai-home .news .eyebrow::before{background:#fff;}
#akai-home .news h2{color:#fff;}
#akai-home .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){#akai-home .news-grid{grid-template-columns:1fr;}}
#akai-home .news-card{background:#fff;border-radius:var(--radius);padding:18px;}
#akai-home .news-card .photo-slot{margin-bottom:16px;}
#akai-home .news-date{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:8px;}
#akai-home .news-card h3{font-family:'Unbounded',sans-serif;font-size:16px;font-weight:600;margin:0 0 10px;line-height:1.3;}
#akai-home .news-card h3 a:hover{color:var(--red);}
#akai-home .news-card p{font-size:13.5px;line-height:1.55;color:var(--ink-70);margin:0 0 16px;}
#akai-home .news-more{font-size:13px;font-weight:700;color:var(--ink);}
#akai-home .news-more:hover{color:var(--red);}

/* ---------- Где купить ---------- */
#akai-home .buy{
  background-color:#ffffff;padding:32px 0;
  background-image:url("/image/catalog/akai-redesign/buy-section-bg.jpg?v=1");
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
#akai-home .buy .section-head{margin-bottom:18px;}
#akai-home .buy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){#akai-home .buy-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){#akai-home .buy-grid{grid-template-columns:1fr;}}
#akai-home .buy-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 12px 32px -12px rgba(20,19,18,.15);}
#akai-home .buy-card svg{width:20px;height:20px;stroke:var(--red);margin-bottom:10px;}
#akai-home .buy-card h3{font-family:'Unbounded',sans-serif;font-size:16px;margin:0 0 6px;}
#akai-home .buy-card p{font-size:13.5px;color:var(--ink-70);line-height:1.5;margin:0 0 14px;max-width:380px;}
#akai-home .buy-form{display:flex;gap:10px;flex-wrap:wrap;}
#akai-home .buy-form input{
  flex:1;min-width:180px;padding:13px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:14px;
  font-family:'Inter',sans-serif;
}
#akai-home .buy-form input:focus{outline:2px solid var(--red);outline-offset:1px;}
#akai-home .buy-note{margin-top:14px;font-size:12px;color:var(--ink-50);}

/* ---------- Quick view modal ---------- */
#akai-home .qv-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px;}
#akai-home .qv-modal.open{display:flex;}
#akai-home .qv-backdrop{position:absolute;inset:0;background:rgba(10,9,8,.6);}
#akai-home .qv-card{position:relative;background:#fff;border-radius:var(--radius);padding:24px;max-width:420px;width:100%;z-index:1;}
#akai-home .qv-card .photo-slot{aspect-ratio:4/3;margin-bottom:18px;}
#akai-home .qv-card h3{font-family:'Unbounded',sans-serif;font-size:19px;margin:0 0 6px;}
#akai-home .qv-card p{font-size:13.5px;color:var(--ink-70);margin:0;}
#akai-home .qv-close{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:none;
  background:var(--paper-alt);color:var(--ink);font-size:14px;cursor:pointer;z-index:2;
}
#akai-home .qv-close:hover{background:var(--line);}

/* ---------- Integration: existing "Наши Новинки"/bestseller/special tabs (megnortabs.twig)
   restyled in grid mode. Carousel mode (many products) intentionally keeps its original
   look since it depends on the site's existing carousel JS. ---------- */
/* stylesheet.css ships a global `.hometab{margin-top:20px}` rule — same white-seam issue
   as .blog-mainhead below, showing a gap before this section's own red background starts. */
#akai-home .hometab{margin-top:0;}
.hometab.box{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cpath d='M0 30 C15 0 45 0 60 30 M-30 30 C-15 0 15 0 30 30 M30 30 C45 0 75 0 90 30' fill='none' stroke='%23FFFFFF' stroke-width='1.3' opacity='0.18'/%3E%3C/svg%3E"),
    linear-gradient(120deg,var(--red-dark,#B10613),var(--red,#E2081C) 60%,#c8071a);
  background-size:60px 30px, auto;
}
#akai-home .hometab.box .akai-tabhead{
  font-family:'Unbounded',sans-serif;font-size:clamp(24px,3vw,34px);font-weight:700;
  color:#fff;text-align:center;padding:60px 20px 0;margin-bottom:0;
}
/* stylesheet.css ships `.hometab .row{background:#fff;border-radius:5px}` — an opaque white
   panel that was sitting on top of the red gradient, covering the title and product grid. */
#akai-home .hometab.box .row{background:transparent;border-radius:0;}
.hometab.box .container{max-width:1240px;}
.hometab.box .akai-product-grid{
  display:grid!important;grid-template-columns:repeat(4,1fr);gap:24px;padding:40px 0 60px;
}
@media(max-width:960px){.hometab.box .akai-product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.hometab.box .akai-product-grid{grid-template-columns:1fr;}}
.hometab.box .akai-card{width:100%;}
.hometab.box .product-card{
  position:relative;background:var(--paper-alt,#F7F3EC);border:1px solid var(--line,#E4DACB);
  border-radius:var(--radius,14px);padding:16px;height:100%;
}
#akai-home .hometab.box .product-card .photo-slot{aspect-ratio:1/1;margin-bottom:16px;background:#0b0b0b;border-radius:var(--radius,14px);overflow:hidden;position:relative;}
.hometab.box .product-badge{
  position:absolute;top:28px;left:28px;z-index:2;background:var(--red,#E2081C);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
}
.hometab.box .product-card h3{font-family:'Unbounded',sans-serif;font-size:14.5px;font-weight:600;margin:0 0 4px;line-height:1.3;}
.hometab.box .product-card h3 a{color:var(--ink,#141312);text-decoration:none;}
.hometab.box .product-card .cat{font-size:13px;color:var(--ink-50,rgba(20,19,18,.5));margin:0 0 16px;}
.hometab.box .product-actions{display:flex;gap:8px;flex-wrap:wrap;}
.hometab.box .product-actions a,.hometab.box .product-actions button{
  flex:1;min-width:110px;padding:10px 12px;border-radius:999px;border:1.5px solid var(--line,#E4DACB);
  background:#fff;color:var(--ink,#141312);font-size:12px;font-weight:700;cursor:pointer;text-align:center;
  font-family:'Inter',sans-serif;text-decoration:none;display:inline-block;
}
.hometab.box .product-actions a:hover,.hometab.box .product-actions button:hover{border-color:var(--ink,#141312);}
.hometab.box .cart_button{background:var(--red,#E2081C)!important;color:#fff!important;border:none;border-radius:999px;padding:10px;cursor:pointer;font-weight:700;}

/* "Наши Новинки" carousel (Swiper, same library as the hero) */
.hometab.box .akai-product-swiper-wrap{position:relative;padding:34px 0 30px;}
.hometab.box .akai-product-swiper{overflow:hidden;}
.hometab.box .akai-product-slide{height:auto;}
.hometab.box .akai-product-slide .product-card{height:100%;}
/* opencart.css ships a global `.swiper-pagination{bottom:-40px}` rule that this element
   also matches (it carries the base `swiper-pagination` class) — override back to normal
   flow so it can't render outside its container. */
.hometab.box .akai-product-pagination{position:static;text-align:center;margin-top:14px;}
.hometab.box .akai-product-pagination .swiper-pagination-bullet{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);display:inline-block;margin:0 4px;cursor:pointer;opacity:1;
}
.hometab.box .akai-product-pagination .swiper-pagination-bullet-active{background:#fff;width:20px;border-radius:4px;}
.hometab.box .akai-product-nav{position:absolute;top:0;right:0;display:flex;gap:8px;}
.hometab.box .akai-product-prev,.hometab.box .akai-product-next{
  width:32px;height:32px;border-radius:50%;background:var(--paper-alt,#F7F3EC);border:1px solid var(--line,#E4DACB);
  cursor:pointer;position:relative;transition:background .18s ease;
}
.hometab.box .akai-product-prev:hover,.hometab.box .akai-product-next:hover{background:var(--line,#E4DACB);}
.hometab.box .akai-product-prev::before,.hometab.box .akai-product-next::before{
  content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;
  border-top:2px solid var(--ink,#141312);border-right:2px solid var(--ink,#141312);
}
.hometab.box .akai-product-prev::before{transform:translate(-30%,-50%) rotate(-135deg);}
.hometab.box .akai-product-next::before{transform:translate(-70%,-50%) rotate(45deg);}
.hometab.box .akai-product-prev.swiper-button-disabled,.hometab.box .akai-product-next.swiper-button-disabled{opacity:.35;cursor:default;}


/* ---------- Integration: existing "Лента Новостей" module (blogger.twig),
   restyled in place. Owl-carousel behavior/JS is untouched. ---------- */
/* stylesheet.css ships a global `.blog-mainhead{margin-bottom:50px}` rule — that gap was
   showing as a plain white seam between this section and .buy's background image below it. */
#akai-home .blog-mainhead{margin-bottom:0;}
.blog-mainhead.akai-news{
  background-image:url("/image/catalog/akai-redesign/news-section-bg.png?v=2");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  padding:70px 0;
}
#akai-home .akai-news .akai-news-heading{
  font-family:'Unbounded',sans-serif;font-size:clamp(26px,3.4vw,38px);font-weight:800;color:#fff;
  text-align:center;margin-bottom:36px;letter-spacing:-.01em;
}
/* Old Owl Carousel (1.x) lays its items out with plain block/float, not flex, so it
   never stretches them to a common height — each card was only as tall as its own
   excerpt text, making any card with a shorter/longer blurb visibly mismatched next
   to its neighbours. Turning .owl-wrapper into a flex row (Owl's own inline per-item
   width stays intact) adds that stretch without touching the slide/drag mechanics. */
/* Owl's own JS sets an inline style="display:block" on .owl-wrapper — a stylesheet
   rule needs !important to win over that regardless of selector specificity. */
.akai-news #blog-carousel .owl-wrapper{display:flex!important;align-items:stretch!important;}
.akai-news #blog-carousel .owl-item{height:auto;}
.akai-news .akai-news-card{box-sizing:border-box;padding:0 10px;height:100%;}
.akai-news .akai-news-card .product-block{background:#fff;border:none;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;height:100%;}
.akai-news .akai-news-photo,.akai-news .blog-image,.akai-news .blog-image img{width:100%;}
.akai-news .blog-image{overflow:hidden;}
/* Cropped a bit shorter than the source 1200:700 ratio — at the old ratio a thin sliver
   of the card's white background showed at the image's bottom edge (a rounding gap
   between object-fit:cover's rendered height and the container). The tighter crop
   also makes the whole card noticeably more compact. */
.akai-news .blog-image img{aspect-ratio:1200/700;object-fit:cover;display:block;transform:scale(1.05);}
.akai-news .akai-news-body{padding:6px 14px 8px;display:flex;flex-direction:column;flex:1;}
.akai-news .akai-news-date{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red,#E2081C);margin-bottom:6px;
}
.akai-news .akai-news-body h4{font-family:'Unbounded',sans-serif;font-size:14px;font-weight:600;margin:0 0 6px;line-height:1.3;}
.akai-news .akai-news-body h4 a{color:var(--ink,#141312);text-decoration:none;}
.akai-news .akai-news-body h4 a:hover{color:var(--red,#E2081C);}
.akai-news .blog-desc{font-size:12.5px;line-height:1.5;color:var(--ink-70,rgba(20,19,18,.72));margin:0 0 8px;}
/* Pinned to the bottom of the flex-column body instead of just following the excerpt —
   on cards shorter than their carousel siblings this closes the empty gap that used to
   sit below the button (the card itself still matches its tallest sibling in height,
   but now that leftover space collapses in above the button, not below it). */
.akai-news .read-more{margin-top:auto;padding-top:4px;}
.akai-news .read-more a{font-size:12.5px;font-weight:700;color:var(--ink,#141312);text-decoration:none;}
.akai-news .read-more a:hover{color:var(--red,#E2081C);}
.akai-news .owl-pagination{text-align:center;margin-top:16px;}
.akai-news .owl-pagination .owl-page span{background:rgba(255,255,255,.5)!important;}
.akai-news .owl-pagination .owl-page.active span{background:#fff!important;}

/* News carousel prev/next — stock theme rendered these as raw grey (#ddd) circles with a
   mismatched off-brand red (#da2128, not --red) on hover, hidden until the card row is
   hovered (so unreachable on touch/mobile). Restyled to the same white-circle/chevron
   language used by every other carousel on the page (gallery, "Наши Новинки" swiper) and
   made always-visible. IDs used in the selectors to reliably out-specificity the base
   theme's `#blog-carousel .owl-controls .owl-buttons .owl-prev/.owl-next` rules. */
#akai-home .akai-news #blog-carousel .owl-controls.clickable .owl-buttons{display:block;}
#akai-home .akai-news #blog-carousel .owl-buttons .owl-prev,
#akai-home .akai-news #blog-carousel .owl-buttons .owl-next{
  background:#fff;opacity:1;box-shadow:0 10px 24px -10px rgba(0,0,0,.4);transition:background .18s ease;
  width:32px!important;height:32px!important;
}
/* Base theme parks these just 8px outside the carousel edge — right on top of the
   first/last card. Pushed further out into the section's own side margin instead. */
#akai-home .akai-news #blog-carousel .owl-buttons .owl-prev{left:-52px!important;}
#akai-home .akai-news #blog-carousel .owl-buttons .owl-next{right:-52px!important;}
#akai-home .akai-news #blog-carousel .owl-buttons .owl-prev:hover,
#akai-home .akai-news #blog-carousel .owl-buttons .owl-next:hover{background:var(--red,#E2081C);}
#akai-home .akai-news #blog-carousel .owl-buttons div i{display:none;} /* drop the default FontAwesome glyph */
#akai-home .akai-news #blog-carousel .owl-buttons .owl-prev::before,
#akai-home .akai-news #blog-carousel .owl-buttons .owl-next::before{
  content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
  border-top:2px solid var(--ink,#141312);border-right:2px solid var(--ink,#141312);
}
#akai-home .akai-news #blog-carousel .owl-buttons .owl-prev::before{transform:translate(-30%,-50%) rotate(-135deg);}
#akai-home .akai-news #blog-carousel .owl-buttons .owl-next::before{transform:translate(-70%,-50%) rotate(45deg);}
#akai-home .akai-news #blog-carousel .owl-buttons .owl-prev:hover::before,
#akai-home .akai-news #blog-carousel .owl-buttons .owl-next:hover::before{border-color:#fff;}
@media(max-width:640px){
  #akai-home .akai-news #blog-carousel .owl-controls.clickable .owl-buttons{display:none;} /* no room beside single-column cards; swipe still works */
}

/* ---------- Reveal ---------- */
#akai-home .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
#akai-home .reveal.in{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  #akai-home .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Mobile compaction pass: sections/headings/cards were sized for
   desktop and felt oversized on phones — this tightens spacing and lowers the
   heading clamp() floors (the fluid vw part was already below floor at phone
   widths, so the only way to shrink further is a smaller explicit floor). ---------- */
@media(max-width:640px){
  #akai-home section{padding:32px 0;}
  #akai-home .hero-content{padding:70px 0 24px;}
  #akai-home .hero h1{font-size:clamp(22px,7.5vw,28px);margin:0 0 10px;}
  #akai-home h2{font-size:clamp(19px,6.5vw,24px);margin:0 0 10px;}
  #akai-home .bento > *{padding:12px;}
  #akai-home .product-card{padding:10px;}
  #akai-home .product-card .photo-slot{margin-bottom:8px;}
  .hometab.box .product-card{padding:10px;}
  #akai-home .hometab.box .product-card .photo-slot{margin-bottom:8px;}
  #akai-home .akai-news .akai-news-heading{font-size:clamp(19px,6.5vw,24px);margin-bottom:18px;}
  .akai-news .akai-news-body{padding:5px 11px 6px;}
}

/* ---------- Full-screen hero under a transparent header ----------
   On load the hero fills the whole first screen and slides UNDER the header (negative
   margin-top = header height; the body's top padding is what keeps it clear on other pages).
   The header itself is transparent over it and turns solid white once scrolled (see
   header.twig). The theme's own -30px pull-up on the homepage content is neutralised here so
   the hero's top edge lands exactly at the top of the window. */
body.common-home #content{margin-top:0!important;}
/* The header is position:fixed; the script normally gives <body> a top padding equal to its height so
   content is not hidden under it. On the homepage the hero is meant to sit UNDER the transparent
   header, so that padding is dropped here (a negative margin on the hero would be clipped by
   #akai-home overflow-x:hidden). */
body.common-home{padding-top:0!important;}
/* single test banner: no slider chrome needed */
#akai-home .hero-single .hero-cta-wrap,
#akai-home .hero-single .swiper-pagination,
#akai-home .hero-single .swiper-button-prev,
#akai-home .hero-single .swiper-button-next,
#akai-home .hero-single #spinner{display:none!important;}

/* banner wrapped in <picture> (desktop/phone art direction) must still fill the slide */
#akai-home .hero .swiper-slide picture{display:block;width:100%;height:100%;}

/* (Phones now have their own portrait banner image, so no special crop position is needed; the wide banner is shown uncropped by width above 767px.) */