/* -------------------------------------------------------
   Shwapno-like homepage (original layout inspired)
   Note: This is a clean-room UI (no proprietary assets).
-------------------------------------------------------- */

:root{
  --brand-red:#e31c24;
  --brand-red-dark:#c9141b;
  --brand-yellow:#ffcc00;
  --brand-purple:#8b5cf6;
  --brand-purple-dark:#7c3aed;
  --text:#1b1b1b;
  --muted:#6b7280;
  --bg:#f3f4f6;
  --card:#ffffff;
  --border:#e5e7eb;
  --shadow: 0 6px 20px rgba(0,0,0,.05);
}

*{ box-sizing:border-box; }

html,body{ height:100%; overflow-x:hidden; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
}

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

img,svg{ max-width:100%; }
img{ height:auto; }

.container{
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header{
  position: sticky;
  top:0;
  z-index: 50;
}

/* Mobile info strip (hidden on desktop) */
.infobar{
  display:none;
  background: var(--brand-red);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.infobar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 6px 0;
  font-weight: 900;
  font-size: 12px;
}

.infobar-pill{
  background:#fff;
  color: var(--brand-red);

  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
}

/* Hamburger (only shown on small screens) */
.hamburger{
  display:none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  cursor:pointer;
  position: relative;
}

.hamburger-lines,
.hamburger-lines::before,
.hamburger-lines::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background:#fff;
  border-radius: 999px;
}

.hamburger-lines{ top: 19px; }
.hamburger-lines::before{ top: -6px; }
.hamburger-lines::after{ top: 6px; }

/* Mobile drawer */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 60;
  display:none;
}

.mobile-drawer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(320px, 86vw);
  background: #fff;
  z-index: 61;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  transform: translateX(-102%);
  transition: transform .18s ease;
  display:flex;
  flex-direction:column;
}

body.drawer-open .mobile-drawer{ transform: translateX(0); }
body.drawer-open .drawer-backdrop{ display:block; }
body.drawer-open{ overflow:hidden; }

.drawer-head{
  background: var(--brand-red);
  color:#fff;
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.drawer-title{ font-weight: 1000; letter-spacing:.3px; }

.drawer-close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  font-weight: 1000;
}

.drawer-body{
  padding: 12px;
  overflow:auto;
}

.drawer-section{ margin-bottom: 16px; }
.drawer-label{ font-weight: 1000; font-size: 12px; color:#111; margin: 0 0 8px; }

.drawer-cat-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.drawer-cat-list a{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:#fff;
  font-weight: 900;
  font-size: 13px;
}

.drawer-cat-list a:hover{ background:#f3f4f6; }

.drawer-cat-icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--border);
  object-fit: cover;
  background:#fff;
}

.drawer-links{ display:flex; flex-wrap:wrap; gap: 8px; }
.drawer-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  font-weight: 1000;
  font-size: 13px;
}
.drawer-links a:hover{ background:#f3f4f6; }

/* Floating cart (mobile) */
.floating-cart{
  position: fixed;
  right: 12px;
  bottom: 16px;
  z-index: 55;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #111;
  color:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  border: 2px solid var(--brand-red);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.floating-cart-count{
  position:absolute;
  top: -8px;
  right: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--brand-red);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight: 1000;
  font-size: 12px;
}

.topbar{
  background: var(--brand-red);
  color:#fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
}

.topbar-inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 10px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing: .3px;
}

.brand-mark{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius: 8px;
  background:#fff;
  color: var(--brand-red);
  font-weight:900;
}

.brand-text{
  font-size: 18px;
}

.searchbar{
  flex:1;
  display:flex;
  align-items:center;
  gap:0;
  background:#fff;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.35);
}

.searchbar input{
  flex:1;
  min-width: 0;
  border:0;
  outline:0;
  padding: 10px 14px;
  font-size: 14px;
}

.searchbar button{
  border:0;
  background: var(--brand-yellow);
  color:#111;
  font-weight: 800;
  padding: 10px 14px;
  cursor:pointer;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.header-actions a{
  color:#fff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.25);
}

.header-actions a:hover{
  background: rgba(255,255,255,.12);
}

/* Icons are used mainly on mobile (we hide on desktop for a cleaner header) */
.action-ico{ display:none; }

.cart-badge{
  display:inline-grid;
  place-items:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background:#fff;
  color: var(--brand-red);
  font-size: 12px;
  font-weight: 900;
  margin-left: 6px;
}

.navrow{
  /* Network/Nav bar (requested: red) */
  background: var(--brand-red);
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.navrow-inner{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 10px 0;
  overflow:auto;
  scrollbar-width: none;
}

.navrow-inner::-webkit-scrollbar{ display:none; }

.nav-item{
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-red);
  padding: 6px 10px;
  border-radius: 999px;
  background:#ffffff;
  white-space:nowrap;
}

.nav-item:hover{
  background: rgba(255,255,255,.86);
}

/* Layout */
.page{
  padding: 14px 0 40px;
}

/*
 * Main layout: place the sidebar and content side by side on desktop.
 * On small screens (see media query below) this switches to columnar
 * stacking so the content appears below the sidebar/drawer.
 */
.layout{
  display:flex;
  flex-direction:row;
  gap: 14px;
  /* Prevent sidebar from stretching to match the height of the content.
     By default flex containers stretch items along the cross axis. Setting
     align-items:flex-start ensures each child’s height is determined by
     its content, so the category sidebar occupies only the height it needs
     and the product grid can start right below the hero. */
  align-items:flex-start;
}

/*
 * Sidebar styles
 *
 * The sidebar appears on the left of the homepage on larger screens and
 * contains a vertical list of all categories. Previously this list was
 * horizontally scrollable, which works well on mobile but looks odd on
 * desktop. To better match the reference design the sidebar now has a
 * fixed width and the category list is displayed vertically. On small
 * screens the sidebar is hidden and categories can be accessed via the
 * hamburger menu (see media queries below).
 */
.sidebar{
  /* On desktop give the sidebar a fixed width so the page layout
     resembles the PC version with a left column. */
  /* Keep the sidebar within the recommended 240–300px range for optimal
     readability on desktop screens. See: https://uxplanet.org/best-ux-practices-for-designing-a-sidebar-9174ee0ecaa2 (Optimal Sidebar Width). */
  width: 240px;
  flex-shrink: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 12px 12px 8px;
  position: static;
  max-height: none;
  overflow: hidden;
}

.sidebar-title{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .3px;
  margin-bottom: 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.sidebar-title span{
  color: var(--brand-red);
}

/* Category list defaults to a vertical stack on desktop */
.cat-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  max-height: 600px;
}

/* Individual items don’t need flex-basis when stacked */
.cat-list li{
  flex: 0 0 auto;
}

.cat-list a{
  display:flex;
  gap:10px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
  color:#111;
  background:#fff;
  border: 1px solid var(--border);
  white-space:nowrap;
  transition: background .1s ease;
}

.cat-list a:hover{
  background: #f3f4f6;
}

.cat-icon{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
  background: #fff;
}

/*
 * Category collapse/expand behaviour
 *
 * When the wrapper has the class `collapsed`, we hide items after the first 8
 * so the sidebar doesn’t become overly long. A toggle button below the list
 * allows the user to expand the full list. The button is hidden when the
 * wrapper is in the expanded state.
 */
.cat-list-wrapper{
  display:block;
}

/* Hide items beyond the 8th when collapsed */
.cat-list-wrapper.collapsed .cat-list li:nth-child(n+9){
  display:none;
}

/* Show all items when expanded */
.cat-list-wrapper.expanded .cat-list li{
  display:flex;
}

/* Show more button styles */
.show-more-btn{
  margin-top: 8px;
  padding: 6px 10px;
  border: none;
  background: none;
  color: var(--brand-red);
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  text-align:left;
}
.show-more-btn:hover{
  text-decoration: underline;
}

/* Hide the button when expanded */
.cat-list-wrapper.expanded + .show-more-btn{
  display:none;
}

.content{
  flex: 1;
  min-width: 0;
}

/*
 * Hero column
 *
 * Holds the hero banner and quick tiles. It behaves similar to .content in the
 * top row, taking up the remaining width next to the sidebar. Without this
 * flex rule, the hero area would not expand to fill available space.
 */
.hero-col{
  flex: 1;
  min-width: 0;
}

/* Hero */
.hero{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.hero img{
  display:block;
  width:100%;
  height: auto;
}

.hero-meta{
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.hero-meta .pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#fff1f2;
  color: var(--brand-red);
  border:1px solid #fecdd3;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
}

/* Quick category tiles (below hero) */
.quick-tiles{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.tile{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: var(--shadow);
  position: relative;
}

.tile img{
  width:100%;
  height: 120px;
  object-fit: cover;
  display:block;
}

.tile .tile-caption{
  padding: 10px 12px;
  font-weight: 900;
  font-size: 13px;
}

.tile .tile-badge{
  position:absolute;
  top: 10px;
  left: 10px;
  background: var(--brand-red);
  color:#fff;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(227,28,36,.25);
}

/* Section headers */
.home-section{
  margin-top: 16px;
}

.section-head{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 18px 0 10px;
}

.section-head h2{
  margin:0;
  font-size: 14px;
  letter-spacing: .9px;
  text-transform: uppercase;
  font-weight: 1000;
}

.section-head::after{
  content:"";
  position:absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand-red);
}

.section-head .see-all{
  position:absolute;
  right:0;
  font-size: 13px;
  font-weight: 900;
  color: var(--brand-red);
  border:1px solid #fecdd3;
  background:#fff1f2;
  padding: 6px 10px;
  border-radius: 999px;
}

.section-head .see-all:hover{
  background:#ffe4e6;
}

/* Product grid and card */
.product-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

/* Promo grid used in the mid-page promo strip */
.product-grid--promo{
  grid-template-columns: repeat(4, 1fr);
  margin-top: 10px;
}

.product-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
  display:flex;
  flex-direction:column;
  min-height: 275px;
  position: relative;
}

/* Product image wrapper so discount badge stays in corner without covering the image */
.prod-media{
  position:relative;
  background:#fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  padding: 12px;
}

.prod-link{ display:block; }

.prod-badge{
  position:absolute;
  top: 10px;
  left: 10px;
  background: var(--brand-red);
  color:#fff;
  font-weight: 1000;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 8px;
}

/* Discount badge (small, top-right corner; won't cover product image) */
.prod-badge--discount{
  left:auto;
  right: 4px;
  top: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 10px;
  background: var(--brand-purple);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height: 1.05;
  box-shadow: 0 10px 24px rgba(124,58,237,.18);
  z-index: 2;
}

.prod-badge--discount .disc-pct{
  font-size: 11px;
  font-weight: 1100;
}

.prod-badge--discount .disc-txt{
  font-size: 8px;
  font-weight: 1100;
}

.prod-img{
  width:100%;
  height: 116px;
  object-fit: contain;
  background:transparent;
  border-radius: 10px;
  border: 0;
}

@media (max-width: 420px){
  .prod-badge--discount{ width: 24px; height: 24px; border-radius: 10px; right: 3px; top: 3px; }
  .prod-badge--discount .disc-pct{ font-size: 10px; }
  .prod-badge--discount .disc-txt{ font-size: 8px; }
}

.prod-title{
  margin-top: 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  min-height: 32px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.prod-unit{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.prod-prices{
  margin-top: 8px;
  display:flex;
  align-items:baseline;
  gap: 8px;
}

.prod-price{
  color: var(--brand-purple);
  font-weight: 1000;
  font-size: 14px;
}

.prod-old{
  color: #9ca3af;
  font-weight: 900;
  font-size: 12px;
  text-decoration: line-through;
}

/* Card actions (Home/Related products) */
.prod-actions{
  margin-top: auto;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.btn-cart,
.btn-order{
  width: 100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-weight: 1000;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  border: 0;
}

.btn-cart{
  background:#fff;
  border: 1px solid rgba(124,58,237,.35);
  color: var(--brand-purple);
}

.btn-cart:hover{
  background: rgba(124,58,237,.06);
}

.btn-order{
  background: var(--brand-purple);
  color:#fff;
}

.btn-order:hover{ background: var(--brand-purple-dark); }

/* Generic primary button used across forms/pages */
.btn-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  cursor:pointer;
  font-weight: 1000;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  border: 0;
  background: var(--brand-purple);
  color:#fff;
}

.btn-add:hover{ background: var(--brand-purple-dark); }

.qty{
  display:none;
  margin-top:auto;
  align-items:center;
  gap: 8px;
}

.qty button{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight: 1000;
}

.qty .count{
  min-width: 28px;
  text-align:center;
  font-weight: 1000;
}

.product-card.in-cart .btn-add{ display:none; }
.product-card.in-cart .qty{ display:flex; }

/* Promo band (optional) */
.promo-band{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}

.promo-strip{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px;
}

.promo-strip .strip-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 6px;
}

.promo-strip .strip-head h3{
  margin:0;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.promo-side{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: var(--shadow);
}

.promo-side img{
  width:100%;
  height: 100%;
  object-fit: cover;
  display:block;
}


/* Mobile bottom navigation */
.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 56;
  background: #ffffff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 30px rgba(0,0,0,.10);
  display:none;
}

.bottom-nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap: 2px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}

.bottom-nav a{
  flex:1;
  min-width: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 6px 0;
  color: var(--muted);
  font-weight: 900;
  font-size: 11px;
  border-radius: 12px;
}

.bottom-nav a svg{
  width: 22px;
  height: 22px;
  display:block;
}

.bottom-nav a.active{
  color: var(--brand-red);
}

.bottom-nav a:hover{
  background:#f3f4f6;
}

.bottom-nav-icon-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.bottom-order-badge{
  position:absolute;
  top:-8px;
  right:-12px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  background:#f32222;
  color:#fff;
  border:2px solid #fff;
  font-size:10px;
  line-height:14px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(243,34,34,.35);
}
.bottom-nav a.bottom-nav-probashi{
  position:relative;
  flex:1.24;
  transform:translateY(-10px);
  color:#fff;
  padding:0;
}
.probashi-pill{
  width:100%;
  min-height:42px;
  padding:0 8px;
  border-radius:18px;
  background:linear-gradient(135deg,#ff4b00 0%,#ff7a00 52%,#7c4dff 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.1px;
  box-shadow:0 9px 22px rgba(248,86,6,.32);
  border:3px solid #fff;
  white-space:nowrap;
}
.bottom-nav a.bottom-nav-probashi:hover{
  background:transparent;
}

@media (max-width: 768px){
  .bottom-nav{ display:block; }
  body{ padding-bottom: 76px; }
  .floating-cart{ bottom: 88px; }
}

/* Footer */
.site-footer{
  margin-top: 40px;
  padding: 22px 0;
  background:#ffffff;
  border-top: 1px solid var(--border);
}

.footer-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}

.footer-title{
  font-weight: 1000;
  margin-bottom: 8px;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 1200px){
  .product-grid{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 980px){
  .layout{ flex-direction:column; }
  /* On mobile/tablet we keep the page clean like the reference UI.
     Categories are available from the hamburger drawer. */
  .sidebar{ display:none; }

  .hamburger{ display:inline-block; }

  /* Default mobile grids (category/section/search pages) */
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .product-grid--promo{ grid-template-columns: repeat(3, 1fr); }

  /* Home page sections become horizontal sliders on mobile/tablet:
     - shows ~2.5 products in the viewport
     - remaining items slide horizontally
  */
  .product-grid.is-slider{
    display:flex;
    overflow-x:auto;
    gap: 10px;
    padding: 2px 2px 10px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 6px;
    scrollbar-width: none;
  }

  .product-grid.is-slider::-webkit-scrollbar{ display:none; }

  .product-grid.is-slider > .product-card{
    flex: 0 0 calc((100% - 20px) / 2.5);
    scroll-snap-align: start;
  }

  /* Under the hero banner we keep 4 tiles in a row */
  .quick-tiles{ grid-template-columns: repeat(4, 1fr); }

  .promo-band{ grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------
   Happy Hour Promotion
   This block appears at the top of the homepage when an active sale
   exists. It consists of a left advertisement image and a right panel
   with a countdown timer and product slider. The design roughly follows
   the layout shown in the user’s reference screenshot.
-------------------------------------------------------------------- */
.happy-hour-block{
  display:flex;
  align-items:stretch;
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.happy-hour-block .hh-left{
  flex: 0 0 300px;
  max-width: 300px;
}

.happy-hour-block .hh-left img{
  width:100%;
  height:auto;
  border-radius: 12px;
  object-fit:cover;
}

.happy-hour-block .hh-right{
  flex: 1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.hh-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}

.hh-title{
  margin:0;
  font-size: 20px;
  font-weight: 1000;
}

.hh-timer{
  display:flex;
  align-items:center;
  gap:4px;
  font-weight: 1000;
  font-size: 12px;
  color:#fff;
}

.hh-timer .hh-time{
  background: var(--brand-red);
  color:#fff;
  padding: 4px 6px;
  border-radius: 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width: 42px;
}

.hh-timer .hh-time .num{
  font-size: 16px;
  line-height:1;
}

.hh-timer .hh-time .lbl{
  font-size: 9px;
  line-height:1;
  text-transform: uppercase;
}

.hh-timer .hh-left-text{
  background: var(--brand-yellow);
  color: var(--brand-red-dark);
  padding: 4px 6px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 12px;
  margin-left: 4px;
}

/* Grid for happy hour items: 4 columns on large screens */
.hh-items{
  margin-top: 8px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 1024px){
  .happy-hour-block{
    flex-direction: column;
  }
  .happy-hour-block .hh-left{
    max-width: 100%;
  }
  .hh-items{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px){
  .hh-items{
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding-bottom:10px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 6px;
    scrollbar-width: none;
  }
  .hh-items > .product-card{
    flex: 0 0 calc((100% - 20px) / 2.5);
    scroll-snap-align: start;
  }
  .hh-items::-webkit-scrollbar{ display:none; }
}

@media (max-width: 640px){
  /* Keep the entire header on ONE line (hamburger + logo + search + icons)
     so the searchbar doesn't jump to the next line. */
  .topbar-inner{
    flex-wrap:nowrap;
    gap: 8px;
    padding: 8px 0;
  }

  .hamburger{ width: 38px; height: 38px; }
  .brand-mark{ width: 30px; height: 30px; border-radius: 8px; }

  .searchbar{
    order:0;
    min-width: 0;
  }
  .searchbar input{
    padding: 8px 10px;
    font-size: 13px;
  }
  .searchbar button{
    width: 42px;
    padding: 0;
    font-size: 0;
    display:grid;
    place-items:center;
  }
  .searchbar button::before{
    content:"🔍";
    font-size: 16px;
    line-height: 1;
  }

  /* Header bits like the mobile screenshot */
  .infobar{ display:block; }
  .hamburger{ display:inline-block; }
  .floating-cart{ display:flex; }

  .brand-text{ display:none; }
  .action-ico{ display:inline; }
  .header-actions .action-text{ display:none; }
  .header-actions a{ padding: 6px 8px; }
  .header-actions .action-lang{ display:none; }
  /* Keep header compact on mobile */
  .header-actions .action-register{ display:none; }
  .header-actions .action-logout{ display:none; }

  .navrow-inner{ padding: 6px 0; }
  .nav-item{ font-size: 12px; padding: 5px 8px; }

  .hero-meta{ display:none; }

  .quick-tiles{ gap: 8px; }
  .tile img{ height: 78px; }
  .tile .tile-caption{ padding: 8px 8px; font-size: 11px; text-align:center; }
  .tile .tile-badge{ display:none; }

  /* Keep 3 columns; fall back to 2 columns only on very small screens */
  .product-grid{ grid-template-columns: repeat(3, 1fr); }

  /* Product cards become compact (3-across) like the mobile reference */
  .product-card{ min-height: 220px; padding: 8px; border-radius: 12px; }
  .prod-img{ height: 96px; border-radius: 10px; }
  .prod-title{ font-size: 11px; min-height: 28px; }
  .prod-unit{ font-size: 11px; }
  .prod-price{ font-size: 13px; }
  .prod-old{ font-size: 11px; }

  .prod-badge{ top: 8px; left: 8px; font-size: 10px; padding: 4px 6px; border-radius: 8px; }

  /* Replace the big 'Add' button (inside product cards) with a floating + icon */
  .product-card .btn-add{
    margin-top: 0;
    position:absolute;
    right: 8px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
    line-height: 0;
  }

  .product-card .btn-add::before{
    content:"+";
    font-size: 18px;
    font-weight: 1000;
    line-height: 34px;
  }

  .qty{
    margin-top: 0;
    position:absolute;
    right: 8px;
    bottom: 8px;
    background:#fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 6px;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    gap: 6px;
  }
  .qty button{ width: 28px; height: 28px; border-radius: 999px; }
  .qty .count{ min-width: 18px; font-size: 12px; }

  /* Reduce side padding so cards feel closer to the reference */
  .container{ width: calc(100% - 16px); }

  /* Footer stacks */
  .footer-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 420px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-grid--promo{ grid-template-columns: repeat(2, 1fr); }
  .quick-tiles{ grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------
   Product / Category / Cart pages (same visual system)
-------------------------------------------------------- */

.breadcrumbs{
  margin: 12px 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
}

.breadcrumbs a{ color: var(--muted); }
.breadcrumbs .sep{ margin: 0 8px; color:#cbd5e1; }
.breadcrumbs .current{ color:#111; }

.notice-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.product-top{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px;
  display:grid;
  grid-template-columns: 380px 1fr 320px;
  gap: 14px;
  align-items:start;
}

.product-gallery{
  position: relative;
  background:#fff;
  border: 1px solid #f3f4f6;
  border-radius: 14px;
  padding: 12px;
}

.product-gallery .main-image{
  width:100%;
  height: 320px;
  object-fit: contain;
  display:block;
}

.zoom-btn{
  position:absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  cursor:pointer;
  box-shadow: var(--shadow);
  display:grid;
  place-items:center;
}

.gallery-thumbs{
  margin-top: 12px;
  display:flex;
  gap: 10px;
}

.gallery-thumbs button{
  width: 62px;
  height: 62px;
  border: 1px solid var(--border);
  background:#fff;
  border-radius: 14px;
  padding: 6px;
  cursor:pointer;
}

.gallery-thumbs img{
  width:100%;
  height:100%;
  object-fit: contain;
}

.product-detail{ padding: 4px 2px; }

.pd-title{
  margin: 4px 0 6px;
  font-size: 20px;
  font-weight: 1000;
}

.pd-meta{
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.countdown{
  margin: 10px 0 12px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background: var(--brand-yellow);
  color:#111;
  font-weight: 1000;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 10px;
}

.pd-prices2{
  display:flex;
  align-items:baseline;
  gap: 10px;
  margin: 10px 0 14px;
}

.pd-old2{
  font-size: 14px;
  font-weight: 900;
  color:#9ca3af;
  text-decoration: line-through;
}

.pd-price2{
  font-size: 22px;
  font-weight: 1000;
  color: var(--brand-red);
}

.pd-unit{
  font-size: 13px;
  color: var(--muted);
  font-weight: 900;
}

.pd-buy{ margin-top: 6px; }

/* Reuse cart button styles but don't draw card look in detail area */
.pd-buybox.product-card{
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: auto;
  background: transparent;
}

.pd-add.btn-add{
  padding: 12px 18px;
  font-size: 14px;
}

.pd-tags{ margin-top: 16px; }
.tag-title{ font-weight: 1000; font-size: 13px; margin-bottom: 8px; }

.tag-chip{
  display:inline-block;
  margin: 0 8px 8px 0;
  background:#eff6ff;
  border: 1px solid #bfdbfe;
  color:#1d4ed8;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
}

.info-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px;
}

.info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
}

.info-row .muted{ color: var(--muted); font-weight: 800; }
.info-row .ok{ color:#16a34a; font-weight: 1000; }

.info-desc{
  margin: 10px 0 8px;
  font-size: 13px;
  color:#374151;
  font-weight: 700;
  line-height: 1.5;
}

.share-row{
  display:flex;
  gap: 8px;
  margin: 10px 0;
}

.share-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  font-weight: 1000;
}

.pay-group{ margin-top: 12px; }
.pay-title{ font-size: 12px; font-weight: 1000; margin-bottom: 8px; }

.pay-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.pay-tile{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  background:#fff;
  font-weight: 1000;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.pay-badge{ font-size: 11px; color: var(--muted); font-weight: 900; }

.detail-block{
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.detail-tab{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.tab-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background:#fff1f2;
  border: 1px solid #fecdd3;
  color: var(--brand-red);
  font-weight: 1000;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
}

.detail-body{
  padding: 16px;
  text-align:center;
  color: var(--muted);
  font-weight: 900;
}

/* Cart */
.cart-layout{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

.cart-card,
.summary-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px;
}

.cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.cart-table{ display:flex; flex-direction:column; gap: 8px; }

.cart-row{
  display:grid;
  grid-template-columns: 2.2fr .7fr .7fr .8fr 34px;
  gap: 10px;
  align-items:center;
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
}

.cart-row--head{
  background:#f3f4f6;
  border-style:dashed;
  font-weight: 1000;
  font-size: 12px;
  color:#111;
}

.cart-prod{ display:flex; align-items:center; gap: 10px; }

.cart-img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  background:#fff;
}

.cart-name{ font-weight: 1000; font-size: 13px; display:inline-block; margin-bottom:2px; }
.cart-unit{ font-size: 12px; color: var(--muted); font-weight: 800; }

.cart-price,
.cart-line{
  font-weight: 1000;
  font-size: 13px;
  text-align:right;
}

.cart-price{ text-align:center; }
.cart-line{ color: var(--brand-red); }

.cart-qty{ display:flex; justify-content:center; }

.qty-input{
  width: 72px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-weight: 1000;
  text-align:center;
}

.link-danger{
  color: var(--brand-red);
  font-weight: 1000;
}

.cart-remove{ display:flex; justify-content:center; }

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  cursor:pointer;
  border: 1px solid var(--border);
  background:#fff;
  color:#111;
  font-weight: 1000;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
}

.btn-outline:hover{ background:#f3f4f6; }

.cart-footer{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}

/* Cart page uses a normal checkout button (no fixed/floating button) */

.summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  font-weight: 900;
  font-size: 13px;
  color:#111;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
}

.summary-total{
  border-bottom: 0;
  font-size: 14px;
  color: var(--brand-red);
}

@media (max-width: 1100px){
  .product-top{ grid-template-columns: 340px 1fr; }
  .product-top .info-card{ grid-column: 1 / -1; }
}

@media (max-width: 760px){
  .product-top{ grid-template-columns: 1fr; }
  .product-gallery .main-image{ height: 260px; }
  .cart-layout{ grid-template-columns: 1fr; }
}

/* -------------------------------------------------------
   Checkout / Order pages
-------------------------------------------------------- */

.checkout-layout{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}

.checkout-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px;
}

.form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-group{ margin-bottom: 12px; }

.form-group label{
  display:block;
  font-weight: 1000;
  font-size: 12px;
  margin-bottom: 6px;
  color:#111;
}

.form-group input,
.form-group textarea,
.form-group select{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-weight: 900;
  font-size: 13px;
  outline: none;
  background:#fff;
}

.form-group textarea{ min-height: 92px; resize: vertical; }

.radio-list{ display:flex; flex-direction:column; gap: 8px; }

.radio-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:#fff;
  font-weight: 1000;
}

.radio-item input{ margin: 0; }

.error-box{
  background:#fff1f2;
  border: 1px solid #fecdd3;
  color:#9f1239;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  margin-bottom: 12px;
}

@media (max-width: 760px){
  .checkout-layout{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}

/* =======================================================
   Marketplace home redesign
======================================================= */
:root{
  --dz-orange:#f85606;
  --dz-orange-dark:#e14b00;
  --dz-bg:#f5f5f5;
  --dz-card:#ffffff;
  --dz-text:#212121;
  --dz-muted:#757575;
  --dz-border:#eeeeee;
  --dz-blue:#1a9cb7;
}

body.daraz-home,
body{
  background:var(--dz-bg);
}

.container{
  width:min(1188px, calc(100% - 24px));
}

.dz-header.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--dz-orange);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}

.dz-mini-top{
  background:var(--dz-orange);
  color:#fff;
  height:24px;
}

.dz-mini-inner{
  height:24px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:18px;
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
}

.dz-mini-inner a{
  color:rgba(255,255,255,.9);
  font-weight:700;
}

.dz-mini-inner a:hover{
  color:#fff;
  text-decoration:underline;
}

.dz-mainbar{
  background:var(--dz-orange);
  padding:8px 0 12px;
}

.dz-mainbar-inner{
  display:grid;
  grid-template-columns:170px 1fr 72px;
  align-items:center;
  gap:18px;
}

.dz-brand{
  min-width:0;
  color:#fff;
  gap:8px;
}

.dz-brand img{
  max-width:160px;
  height:40px;
  object-fit:contain;
  display:block;
}

.dz-brand .brand-mark{
  width:42px;
  height:34px;
  border-radius:0;
  font-size:20px;
  color:var(--dz-orange);
}

.dz-brand .brand-text{
  color:#fff;
  font-weight:900;
  font-size:24px;
}

.dz-search{
  height:45px;
  border-radius:2px;
  border:0;
  background:#fff;
  overflow:hidden;
}

.dz-search input{
  height:45px;
  padding:0 14px;
  color:#333;
  font-size:14px;
}

.dz-search button{
  width:56px;
  height:45px;
  padding:0;
  background:#ffe1d2;
  color:var(--dz-orange);
  font-size:25px;
  line-height:1;
  font-weight:800;
}

.dz-cart-link{
  height:45px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  font-size:24px;
}

.dz-cart-link .cart-badge{
  position:absolute;
  top:2px;
  right:8px;
  margin:0;
  min-width:20px;
  height:20px;
  font-size:11px;
  color:var(--dz-orange);
}

.dz-page{
  padding:12px 0 36px;
}

.dz-hero-shell{
  display:grid;
  grid-template-columns:200px 1fr 188px;
  gap:12px;
  align-items:stretch;
  min-height:344px;
}

.dz-cat-panel,
.dz-app-card,
.dz-hero-slider,
.dz-block{
  background:var(--dz-card);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

.dz-cat-panel{
  border-radius:2px;
  overflow:hidden;
}

.dz-cat-panel ul{
  list-style:none;
  padding:8px 0;
  margin:0;
}

.dz-cat-panel a{
  display:flex;
  align-items:center;
  min-height:23px;
  padding:0 12px;
  color:#555;
  font-size:13px;
  line-height:1.25;
}

.dz-cat-panel a:hover{
  color:var(--dz-orange);
  background:#f7f7f7;
}

.dz-hero-slider{
  position:relative;
  min-height:344px;
  overflow:hidden;
  border-radius:2px;
}

.dz-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease;
}

.dz-slide.active{
  opacity:1;
  visibility:visible;
}

.dz-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dz-slider-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:12px;
  display:flex;
  justify-content:center;
  gap:8px;
  z-index:3;
}

.dz-slider-dots button{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  cursor:pointer;
}

.dz-slider-dots button.active{
  background:#fff;
}

.dz-app-card{
  border-radius:2px;
  padding:14px 12px;
  text-align:center;
  color:#333;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}

.dz-app-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  background:linear-gradient(135deg, #ff7a1a, #f85606);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:22px;
  font-weight:900;
}

.dz-app-card h3{
  margin:0;
  color:var(--dz-orange);
  font-size:16px;
  font-weight:900;
}

.dz-app-card p{
  margin:0;
  color:#666;
  font-size:12px;
  line-height:1.45;
}

.dz-qr,
.dz-qr-placeholder{
  width:104px;
  height:104px;
  border:1px solid #e5e7eb;
  background:#fff;
  object-fit:cover;
  display:grid;
  place-items:center;
  color:#999;
  font-weight:900;
  margin-top:4px;
}

.dz-store-buttons{
  display:grid;
  gap:6px;
  width:100%;
}

.dz-store-buttons a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:30px;
  border-radius:4px;
  background:#222;
  color:#fff;
  font-size:12px;
  font-weight:800;
}

.dz-wide-banner{
  display:block;
  margin:12px 0;
  height:120px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

.dz-wide-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dz-wide-banner-bottom{
  height:100px;
}

.dz-block{
  margin-top:12px;
  border-radius:2px;
  overflow:hidden;
}

.dz-section-title-row{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 14px;
  border-bottom:1px solid var(--dz-border);
  background:#fff;
}

.dz-section-title-row h2{
  margin:0;
  color:#424242;
  font-weight:500;
  font-size:22px;
  line-height:1;
}

.dz-shop-more{
  margin-left:auto;
  height:32px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--dz-orange);
  color:var(--dz-orange);
  font-weight:700;
  font-size:12px;
  background:#fff;
}

.dz-countdown{
  display:flex;
  align-items:center;
  gap:6px;
  color:#333;
  font-size:13px;
}

.dz-countdown span{
  min-width:28px;
  height:28px;
  background:#ff6801;
  color:#fff;
  border-radius:2px;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:800;
}

.dz-product-row{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1px;
  background:#fff;
}

.dz-product-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1px;
  background:#f0f0f0;
  padding:1px;
}

.dz-product-grid-wide{
  gap:12px;
  padding:0;
  background:transparent;
  grid-template-columns:repeat(6, 1fr);
}

.daraz-home .product-card{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#fff;
  min-height:270px;
  padding:10px 10px 12px;
  transition:box-shadow .16s ease, transform .16s ease;
}

.daraz-home .dz-product-grid-wide .product-card{
  border-radius:2px;
}

.daraz-home .product-card:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 10px rgba(0,0,0,.14);
  z-index:2;
}

.daraz-home .prod-media{
  border:0;
  border-radius:0;
  padding:0;
  background:#fff;
}

.daraz-home .prod-img{
  height:188px;
  border-radius:0;
  object-fit:contain;
  width:100%;
}

.daraz-home .prod-title{
  color:#212121;
  font-size:14px;
  font-weight:400;
  line-height:18px;
  min-height:36px;
  margin-top:8px;
}

.daraz-home .prod-unit{
  color:#9e9e9e;
  font-size:12px;
  margin-top:2px;
}

.daraz-home .prod-prices{
  margin-top:5px;
  gap:6px;
  flex-wrap:wrap;
}

.daraz-home .prod-price{
  color:var(--dz-orange);
  font-size:18px;
  font-weight:500;
}

.daraz-home .prod-old{
  color:#9e9e9e;
  font-size:12px;
  font-weight:400;
}

.daraz-home .prod-actions{
  display:none;
}

.daraz-home .prod-badge{
  background:var(--dz-orange);
  border-radius:0;
}

.daraz-home .prod-badge--discount{
  width:38px;
  height:38px;
  border-radius:0 0 0 10px;
  right:0;
  top:0;
  background:#ffe97a;
  color:#f85606;
  box-shadow:none;
}

.daraz-home .prod-badge--discount .disc-pct{
  font-size:13px;
}

.daraz-home .prod-badge--discount .disc-txt{
  font-size:9px;
}

.dz-category-grid{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  background:#f0f0f0;
  gap:1px;
  padding:1px;
}

.dz-category-tile{
  min-height:145px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 8px;
  text-align:center;
  color:#212121;
  font-size:13px;
  line-height:16px;
}

.dz-category-tile:hover{
  color:var(--dz-orange);
  box-shadow:0 2px 10px rgba(0,0,0,.14);
  z-index:2;
}

.dz-category-tile img{
  width:80px;
  height:80px;
  object-fit:contain;
}

.dz-centered-title{
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#424242;
  font-size:20px;
  font-weight:500;
  background:var(--dz-bg);
}

.dz-centered-title span{
  position:relative;
  padding:0 36px;
}

.dz-centered-title span:before,
.dz-centered-title span:after{
  content:"";
  position:absolute;
  top:50%;
  width:120px;
  height:1px;
  background:#d5d5d5;
}

.dz-centered-title span:before{
  right:100%;
}

.dz-centered-title span:after{
  left:100%;
}

.dz-footer.site-footer{
  margin-top:36px;
  padding:0;
  background:#f4f4f6;
  border-top:0;
}

.dz-footer-top{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:32px;
  padding:28px 0;
}

.dz-footer-col h3,
.dz-footer-mid h3{
  margin:0 0 10px;
  color:#0f136d;
  font-size:16px;
  font-weight:500;
}

.dz-footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}

.dz-footer-col li,
.dz-footer-col a{
  color:#0f136d;
  font-size:12px;
  line-height:18px;
}

.dz-footer-col a:hover{
  text-decoration:underline;
}

.dz-footer-mid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  padding:22px 0;
  border-top:1px solid #e1e1e1;
}

.dz-chip-list,
.dz-social-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.dz-chip-list span,
.dz-social-list a{
  min-height:28px;
  display:inline-flex;
  align-items:center;
  border:1px solid #e1e1e1;
  background:#fff;
  color:#333;
  border-radius:4px;
  padding:5px 10px;
  font-size:12px;
  font-weight:700;
}

.dz-footer-copy{
  border-top:1px solid #e1e1e1;
  color:#606060;
  font-size:12px;
  padding:14px 0 22px;
}

@media (max-width: 1180px){
  .dz-product-row,
  .dz-product-grid,
  .dz-product-grid-wide{ grid-template-columns:repeat(5, 1fr); }
  .dz-category-grid{ grid-template-columns:repeat(6, 1fr); }
}

@media (max-width: 980px){
  .dz-mini-top{ display:none; }
  .dz-mainbar-inner{ grid-template-columns:42px 110px 1fr 44px; gap:8px; }
  .dz-mainbar{ padding:8px 0; }
  .dz-brand img{ height:32px; max-width:110px; }
  .dz-brand .brand-text{ font-size:18px; }
  .dz-search{ height:38px; }
  .dz-search input{ height:38px; font-size:13px; }
  .dz-search button{ height:38px; width:42px; font-size:20px; }
  .dz-cart-link{ height:38px; font-size:20px; }
  .hamburger{ display:inline-block; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); }
  .dz-hero-shell{ grid-template-columns:1fr; min-height:0; }
  .dz-cat-panel{ display:none; }
  .dz-app-card{ display:none; }
  .dz-hero-slider{ min-height:260px; }
  .dz-wide-banner{ height:84px; }
  .dz-product-row,
  .dz-product-grid,
  .dz-product-grid-wide{ grid-template-columns:repeat(3, 1fr); }
  .dz-category-grid{ grid-template-columns:repeat(4, 1fr); }
  .dz-footer-top{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 640px){
  .container{ width:calc(100% - 16px); }
  .dz-mainbar-inner{ grid-template-columns:38px 70px 1fr 38px; }
  .dz-brand .brand-mark{ width:32px; height:30px; }
  .dz-brand .brand-text{ display:none; }
  .dz-hero-slider{ min-height:180px; }
  .dz-section-title-row{ min-height:44px; padding:0 10px; }
  .dz-section-title-row h2{ font-size:18px; }
  .dz-shop-more{ height:28px; font-size:11px; }
  .dz-product-row,
  .dz-product-grid,
  .dz-product-grid-wide{ grid-template-columns:repeat(2, 1fr); gap:8px; background:transparent; padding:0; }
  .daraz-home .product-card{ min-height:245px; border-radius:2px; }
  .daraz-home .prod-img{ height:150px; }
  .dz-category-grid{ grid-template-columns:repeat(2, 1fr); gap:1px; }
  .dz-category-tile{ min-height:122px; }
  .dz-category-tile img{ width:64px; height:64px; }
  .dz-centered-title span:before,
  .dz-centered-title span:after{ width:60px; }
  .dz-footer-top,
  .dz-footer-mid{ grid-template-columns:1fr; gap:18px; }
}

.dz-sale-item{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  background:#fff;
  padding:10px 10px 12px;
  color:#212121;
  position:relative;
}
.dz-sale-item:hover{
  box-shadow:0 2px 10px rgba(0,0,0,.14);
  z-index:2;
}
.dz-sale-img-wrap{
  position:relative;
  display:block;
  background:#fff;
}
.dz-sale-img{
  width:100%;
  height:188px;
  object-fit:contain;
  display:block;
}
.dz-sale-save{
  position:absolute;
  top:0;
  left:0;
  z-index:2;
  background:#ff4d5f;
  color:#fff;
  font-size:10px;
  line-height:11px;
  font-weight:800;
  padding:4px 5px;
  border-radius:0 0 5px 0;
  text-transform:uppercase;
}
.dz-sale-price{
  color:var(--dz-orange);
  font-size:18px;
  font-weight:500;
  line-height:1.1;
}
.dz-sale-old{
  color:#9e9e9e;
  font-size:12px;
  text-decoration:line-through;
  line-height:1;
}
.dz-sale-stock{
  margin-top:auto;
  min-height:20px;
  border-radius:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg,#ff7a76,#ff3e61);
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;
  padding:4px 5px;
  white-space:nowrap;
}
.dz-mobile-shortcuts{
  display:none;
}

@media (max-width:640px){
  body.daraz-home{
    background:#eff0f5;
    padding-bottom:64px;
  }
  .daraz-home .container{
    width:100%;
  }
  .daraz-home .dz-header.site-header{
    background:#fff;
    border-top:2px solid #ff4d62;
    border-bottom:1px solid #e9e9e9;
    box-shadow:none;
  }
  .daraz-home .dz-mainbar{
    background:#fff;
    padding:7px 12px;
  }
  .daraz-home .dz-mainbar-inner{
    width:100%;
    display:flex;
    align-items:center;
    gap:0;
  }
  .daraz-home .dz-mainbar-inner .hamburger,
  .daraz-home .dz-brand,
  .daraz-home .dz-cart-link,
  .daraz-home .dz-mini-top,
  .daraz-home .floating-cart{
    display:none!important;
  }
  .daraz-home .dz-search{
    flex:1;
    height:36px;
    min-width:0;
    border:1px solid #ff6b80;
    border-radius:999px;
    background:#fff;
    overflow:hidden;
  }
  .daraz-home .dz-search input{
    height:34px;
    padding:0 12px;
    font-size:13px;
    color:#777;
  }
  .daraz-home .dz-search button{
    width:74px;
    height:34px;
    border-radius:999px;
    background:#f85606;
    color:#fff;
    font-size:13px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .daraz-home .dz-search button::before{
    content:none;
  }
  .daraz-home .dz-page{
    padding:8px 0 0;
  }
  .daraz-home .dz-hero-shell,
  .daraz-home .dz-wide-banner,
  .daraz-home .dz-home-dynamic-section{
    display:none!important;
  }
  .daraz-home .dz-block{
    margin-top:8px;
    border-radius:0;
    box-shadow:none;
    overflow:hidden;
  }
  .daraz-home .dz-flash-block,
  .daraz-home .dz-category-block{
    background:#fff;
    padding:10px 13px 12px;
  }
  .daraz-home .dz-section-title-row{
    min-height:0;
    padding:0;
    border-bottom:0;
    background:#fff;
    gap:8px;
    margin-bottom:10px;
  }
  .daraz-home .dz-section-title-row h2{
    font-size:16px;
    font-weight:800;
    color:#202124;
    letter-spacing:.1px;
  }
  .daraz-home .dz-flash-title{
    font-weight:900!important;
  }
  .daraz-home .dz-flash-title span{
    color:#ff304f;
    font-size:14px;
    margin:0 1px;
  }
  .daraz-home .dz-shop-more{
    height:auto;
    padding:0;
    border:0;
    background:transparent;
    color:#1f174c;
    font-size:13px;
    font-weight:500;
    line-height:1;
  }
  .daraz-home .dz-countdown{
    display:none;
  }
  .daraz-home .dz-sale-row{
    display:flex;
    grid-template-columns:none;
    gap:9px;
    overflow-x:auto;
    background:#fff;
    padding:0 1px 2px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .daraz-home .dz-sale-row::-webkit-scrollbar{
    display:none;
  }
  .daraz-home .dz-sale-item{
    flex:0 0 calc((100% - 18px) / 3);
    padding:0;
    gap:4px;
    scroll-snap-align:start;
    box-shadow:none;
  }
  .daraz-home .dz-sale-item:hover{
    box-shadow:none;
    transform:none;
  }
  .daraz-home .dz-sale-img{
    height:88px;
    background:#f7f7f7;
  }
  .daraz-home .dz-sale-save{
    top:0;
    left:0;
    font-size:8px;
    line-height:9px;
    padding:3px 4px;
    border-radius:0;
  }
  .daraz-home .dz-sale-price{
    font-size:13px;
    font-weight:800;
    color:#ff4d5f;
  }
  .daraz-home .dz-sale-old{
    font-size:10px;
    color:#a8a8a8;
  }
  .daraz-home .dz-sale-stock{
    min-height:15px;
    border-radius:2px;
    font-size:10px;
    padding:2px 3px;
  }
  .daraz-home .dz-category-block{
    padding-top:8px;
  }
  .daraz-home .dz-category-title-row h2{
    font-size:16px;
    line-height:1.15;
  }
  .daraz-home .dz-category-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px 8px;
    padding:0;
    background:#fff;
  }
  .daraz-home .dz-category-tile{
    min-height:0;
    padding:0;
    background:#fff;
    gap:5px;
    color:#333;
    font-size:12px;
    line-height:13px;
    font-weight:400;
  }
  .daraz-home .dz-category-tile:hover{
    box-shadow:none;
    color:#333;
  }
  .daraz-home .dz-category-tile img{
    width:100%;
    height:76px;
    object-fit:cover;
    background:#f5f5f5;
    border-radius:3px;
    display:block;
  }
  .daraz-home .dz-category-tile span{
    min-height:27px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .daraz-home .dz-mobile-shortcuts{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:0;
    background:#fff;
    margin-top:8px;
    padding:8px 4px 7px;
    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec;
  }
  .daraz-home .dz-mobile-shortcuts a{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#8b8b8b;
    font-size:10px;
    font-weight:800;
    line-height:1.1;
    text-align:center;
    padding:5px 2px;
    border-radius:7px;
  }
  .daraz-home .dz-mobile-shortcuts a.active{
    color:#f85606;
    border:1px solid #ff7481;
  }
  .daraz-home .dz-shortcut-icon{
    width:24px;
    height:24px;
    border-radius:6px;
    display:grid;
    place-items:center;
    background:#f85606;
    color:#fff;
    font-size:13px;
    font-weight:900;
  }
  .daraz-home .dz-mobile-shortcuts a:nth-child(2) .dz-shortcut-icon{
    background:#e12b12;
  }
  .daraz-home .dz-mobile-shortcuts a:nth-child(3) .dz-shortcut-icon{
    background:#b6a2cd;
  }
  .daraz-home .dz-mobile-shortcuts a:nth-child(4) .dz-shortcut-icon{
    background:#159a84;
  }
  .daraz-home .dz-mobile-shortcuts a:nth-child(5) .dz-shortcut-icon{
    background:#f3c51c;
  }
  .daraz-home .dz-just-for-you{
    margin-top:8px;
    background:#eff0f5;
    box-shadow:none;
  }
  .daraz-home .dz-centered-title{
    display:none;
  }
  .daraz-home .dz-product-grid-wide{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    padding:0 8px 10px;
    background:#eff0f5;
  }
  .daraz-home .product-card{
    min-height:0;
    padding:0 0 7px;
    border-radius:0;
    overflow:hidden;
    background:#fff;
  }
  .daraz-home .product-card:hover{
    box-shadow:none;
    transform:none;
  }
  .daraz-home .prod-media{
    background:#fff;
  }
  .daraz-home .prod-img{
    width:100%;
    height:157px;
    object-fit:cover;
    background:#f6f6f6;
  }
  .daraz-home .prod-title{
    font-size:11px;
    line-height:14px;
    min-height:28px;
    margin:5px 6px 0;
    color:#222;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .daraz-home .prod-unit{
    display:none;
  }
  .daraz-home .prod-prices{
    margin:4px 6px 0;
    gap:4px;
  }
  .daraz-home .prod-price{
    font-size:13px;
    color:#f85606;
    font-weight:700;
  }
  .daraz-home .prod-old{
    font-size:10px;
  }
  .daraz-home .prod-badge--discount{
    width:34px;
    height:30px;
    border-radius:0;
    background:#ff6b35;
    color:#fff;
  }
  .daraz-home .prod-badge--discount .disc-pct{
    font-size:10px;
  }
  .daraz-home .prod-badge--discount .disc-txt{
    font-size:8px;
  }
  .daraz-home .dz-footer{
    margin-top:0;
    padding:0;
    background:#eff0f5;
    border-top:0;
  }
  .daraz-home .dz-footer > .container{
    display:none;
  }
  .bottom-nav{
    display:block;
    border-top:1px solid #e0e0e0;
    box-shadow:0 -2px 10px rgba(0,0,0,.08);
  }
  .bottom-nav-inner{
    padding:5px 8px calc(5px + env(safe-area-inset-bottom));
  }
  .bottom-nav a{
    gap:2px;
    color:#444;
    font-size:10px;
    font-weight:500;
    border-radius:0;
    padding:4px 0;
  }
  .bottom-nav a svg{
    width:22px;
    height:22px;
  }
  .bottom-nav a.active{
    color:#f85606;
  }

  .bottom-nav a.bottom-nav-probashi{
    flex:1.28;
    transform:translateY(-12px);
  }
  .probashi-pill{
    min-height:40px;
    border-radius:18px;
    font-size:11px;
  }
  .bottom-nav-icon-wrap svg{
    width:22px;
    height:22px;
  }
  .bottom-order-badge{
    top:-8px;
    right:-12px;
  }
}

@media (max-width:380px){

  .probashi-pill{
    min-height:37px;
    font-size:10px;
    padding:0 5px;
  }

  .daraz-home .dz-sale-img{
    height:82px;
  }
  .daraz-home .dz-category-tile img{
    height:70px;
  }
  .daraz-home .prod-img{
    height:148px;
  }
}

.category-list-page{
  background:#f5f5f5;
}

.category-page-shell{
  padding-top:10px;
}

.category-page-breadcrumbs{
  margin-bottom:8px;
}

.category-list-section{
  border-radius:12px;
  background:transparent;
}

.category-list-head{
  justify-content:center;
  margin:4px 0 12px;
}

.category-list-head h2{
  position:relative;
  margin:0;
  color:#222;
  font-size:20px;
  font-weight:1000;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.category-list-head h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:60px;
  height:3px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#ef4444;
}

.front-category-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:12px;
  margin-top:20px;
}

.front-category-card{
  min-height:156px;
  padding:16px 10px;
  border:1px solid #eeeeee;
  border-radius:14px;
  background:#ffffff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  color:#242424;
  box-shadow:0 8px 22px rgba(15,23,42,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}

.front-category-card:hover{
  color:#f85606;
  border-color:#f85606;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(248,86,6,.16);
}

.front-category-img-wrap{
  width:88px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#fafafa;
  overflow:hidden;
}

.front-category-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.front-category-name{
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:18px;
  font-weight:900;
}

@media (max-width: 1180px){
  .front-category-grid{ grid-template-columns:repeat(5, 1fr); }
}

@media (max-width: 980px){
  .front-category-grid{ grid-template-columns:repeat(4, 1fr); gap:10px; }
}

@media (max-width: 640px){
  .category-page-shell{ padding-top:8px; }
  .category-page-breadcrumbs{ margin-bottom:6px; }
  .category-list-head{ margin:6px 0 14px; }
  .category-list-head h2{ font-size:16px; }
  .front-category-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; margin-top:18px; }
  .front-category-card{ min-height:128px; padding:12px 8px; border-radius:12px; box-shadow:none; }
  .front-category-img-wrap{ width:72px; height:72px; border-radius:14px; }
  .front-category-name{ min-height:32px; font-size:13px; line-height:16px; }
}

/* Category page clean mobile layout */
.category-clean-page{
  background:#f2f3f7;
  padding-bottom:78px;
}
.category-clean-page .site-header,
.category-clean-page .breadcrumbs,
.category-clean-page .site-footer{
  display:none !important;
}
.category-clean-page .page.category-page-shell{
  padding:10px 0 86px !important;
}
.category-clean-page .container{
  width:100% !important;
  max-width:1180px;
  padding:0 10px;
}
.category-clean-page .category-list-section{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
.category-clean-page .category-list-head{
  margin:4px 0 14px !important;
  padding:2px 0 8px;
  display:flex !important;
  justify-content:center !important;
}
.category-clean-page .category-list-head h2{
  font-size:16px !important;
  line-height:20px;
  letter-spacing:1.4px;
  font-weight:1000;
  color:#202124;
}
.category-clean-page .category-list-head h2::after{
  width:54px !important;
  height:3px !important;
  bottom:-7px !important;
  background:#f85606 !important;
}
.category-clean-page .front-category-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:8px !important;
  margin:0 !important;
}
.category-clean-page .front-category-card{
  min-height:0 !important;
  padding:6px 5px 8px !important;
  border:1px solid #ececf1 !important;
  border-radius:14px !important;
  background:#fff !important;
  gap:6px !important;
  box-shadow:0 6px 18px rgba(15,23,42,.07) !important;
  overflow:hidden;
}
.category-clean-page .front-category-img-wrap{
  width:100% !important;
  height:auto !important;
  aspect-ratio:1 / 1 !important;
  border-radius:12px !important;
  background:#f7f7f8 !important;
  overflow:hidden !important;
}
.category-clean-page .front-category-img-wrap img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.category-clean-page .front-category-name{
  width:100% !important;
  min-height:30px !important;
  font-size:11px !important;
  line-height:15px !important;
  font-weight:800 !important;
  color:#202124 !important;
  text-align:center !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden !important;
}
.category-clean-page .front-category-card:hover{
  color:#f85606 !important;
  border-color:#f85606 !important;
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(248,86,6,.14) !important;
}

@media (min-width:641px){
  .category-clean-page .container{ padding:0 16px; }
  .category-clean-page .front-category-grid{
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    gap:12px !important;
  }
  .category-clean-page .front-category-card{ padding:10px 8px 12px !important; }
  .category-clean-page .front-category-name{ font-size:13px !important; line-height:18px !important; min-height:36px !important; }
}

@media (max-width:360px){
  .category-clean-page .container{ padding:0 7px; }
  .category-clean-page .front-category-grid{ gap:6px !important; }
  .category-clean-page .front-category-card{ border-radius:12px !important; padding:5px 4px 7px !important; }
  .category-clean-page .front-category-img-wrap{ border-radius:10px !important; }
  .category-clean-page .front-category-name{ font-size:10px !important; line-height:14px !important; }
}

/* Category product listing clean mobile layout */
.category-product-clean-page{
  background:#f2f3f7;
  padding-bottom:78px;
}
.category-product-clean-page .site-footer{
  display:none !important;
}
.category-product-clean-page .page{
  padding:8px 0 92px !important;
}
.category-product-clean-page .container{
  width:calc(100% - 14px) !important;
  max-width:1180px;
}
.category-product-clean-page .layout{
  display:block !important;
}
.category-product-clean-page .sidebar,
.category-product-clean-page .breadcrumbs{
  display:none !important;
}
.category-product-clean-page .content{
  width:100% !important;
}
.category-product-clean-page .home-section{
  margin:0 !important;
}
.category-product-clean-page .section-head{
  margin:6px 0 16px !important;
}
.category-product-clean-page .section-head h2{
  font-size:16px !important;
  line-height:20px;
  letter-spacing:.6px;
}
.category-product-clean-page .section-head::after{
  width:52px !important;
  height:3px !important;
  bottom:-8px !important;
  background:#f85606 !important;
}
.category-product-clean-page .product-grid{
  margin-top:18px !important;
}

@media (max-width:640px){
  .category-product-clean-page .container{
    width:100% !important;
    padding:0 6px !important;
  }
  .category-product-clean-page .page{
    padding-top:6px !important;
  }
  .category-product-clean-page .product-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
  .category-product-clean-page .product-card{
    border-radius:12px !important;
    min-height:0 !important;
    padding:8px !important;
  }
}