/* ════════════════════════════════════════════════════════════════════════
   E-Tenga — phone & small-tablet layout
   Loaded last. Desktop is untouched: every rule here sits inside a
   max-width media query. Goal: denser, app-like store where shoppers see
   more products per screen without anything feeling cramped.
   ════════════════════════════════════════════════════════════════════════ */

/* Grids never let one long word/label push a column off-screen (all sizes) */
.et-pdp>*,.et-shop>*,.et-cart>*,.et-promo>*{min-width:0;}
.et-grid--200{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
.et-grid--150{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.et-grid--220{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}

/* ── Tablets & large phones ─────────────────────────────────────────── */
@media (max-width:991px){
  .et-pdp,.et-shop,.et-cart{grid-template-columns:minmax(0,1fr);}
  .et-promo{grid-template-columns:minmax(0,1fr);}
  #chatWidget{right:12px !important;}
  #chatWidget #chatToggleBtn{width:46px !important;height:46px !important;font-size:18px !important;bottom:76px !important;}
  body:has(.et-buybar) #chatWidget #chatToggleBtn{bottom:136px !important;}
}

/* ── Phones (≤767px) ─────────────────────────────────────────────────── */
@media (max-width:767px){
  body{font-size:14px;}
  .container{padding-left:12px;padding-right:12px;}

  /* header: one slim bar + search, both stay on top */
  .mobile-header{padding:6px 10px;padding-top:calc(6px + env(safe-area-inset-top));min-height:50px;}
  .mh-icon-btn{width:36px;height:36px;font-size:15px;}
  .mobile-header .mh-logo{font-size:22px;}
  .mobile-search-row{top:calc(50px + env(safe-area-inset-top));padding:0 12px 8px;}
  .mobile-search-box{height:40px;}
  .mobile-search-box input{font-size:16px;} /* 16px stops iPhone zooming in on tap */

  /* sections: tighter rhythm, smaller headings */
  .et-section{padding:14px 0;}
  .et-section--tight{padding:8px 0;}
  .et-sec-head{margin-bottom:10px;gap:10px;align-items:center;}
  .et-sec-head h2{font-size:16.5px;line-height:1.2;}
  .et-sec-head p{font-size:11.5px;margin:2px 0 0;}
  .et-sec-head__all{font-size:12.5px;white-space:nowrap;}
  .et-crumbs{font-size:11.5px;margin-bottom:6px;}
  .et-pagehead h1,.et-pagehead h2{font-size:20px;}

  /* hero: a banner, not a full screen */
  .et-hero{margin-top:6px;}
  .et-hero__viewport{border-radius:14px;}
  /* every slide is one short banner: text on the left, picture on the right */
  .et-hero__slide{min-height:0 !important;max-height:none;aspect-ratio:var(--hero-ar,2/1) !important;}
  .et-hero__slide--split:has(.et-hero__img){display:grid !important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch;}
  .et-hero__slide--split:has(.et-hero__img) .et-hero__img{position:relative !important;inset:auto !important;grid-column:2;grid-row:1;width:100%;height:100% !important;aspect-ratio:auto !important;}
  .et-hero__slide--split:has(.et-hero__img) .et-hero__content{grid-column:1;grid-row:1;align-self:center;}
  .et-hero__slide--image .et-hero__img,.et-hero__slide--overlay .et-hero__img{height:100% !important;}
  .et-hero__content{padding:12px 10px 26px 14px;max-width:none;}
  .et-hero__badge{font-size:9.5px;padding:2px 7px;margin-bottom:4px;}
  .et-hero__title{font-size:16px !important;line-height:1.2;margin:0 0 4px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .et-hero__sub{font-size:11.5px;line-height:1.35;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .et-hero__dots{bottom:8px !important;}
  .et-hero__content .et-btn{padding:6px 12px;font-size:12px;}
  .et-hero__arrow{display:none !important;}
  .et-hero__ctl{transform:scale(.8);transform-origin:right bottom;}

  /* quick links: four app-style shortcuts in one row */
  .et-tiles{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px;}
  .et-tile{flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 4px;border-radius:14px;}
  .et-tile__ico{flex-basis:auto;width:38px;height:38px;font-size:15px;}
  .et-tile__t{font-size:11.5px;line-height:1.2;}
  .et-tile__s{display:none;}

  /* categories: smaller bubbles, more visible */
  .et-cats,.et-cats--start{grid-auto-columns:70px;gap:8px;}
  .et-cat{gap:6px;}
  .et-cat__img{width:62px;height:62px;}
  .et-cat__img .fa{font-size:22px;}
  .et-cat__name{font-size:11px;line-height:1.25;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

  /* banners/ads: swipe sideways instead of stacking full screens */
  .et-banners{display:grid;grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:88%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px;}
  .et-banners::-webkit-scrollbar{display:none;}
  .et-banners>*{scroll-snap-align:start;}
  .et-banners:has(>:only-child){grid-auto-columns:100%;}
  .et-banner{min-height:0;border-radius:14px;}
  .et-banner__img{max-height:170px;}
  .et-banner__text{padding:14px 16px;gap:4px;}
  .et-banner__title{font-size:16px !important;margin:2px 0;}
  .et-banner__sub{font-size:12px;}
  .et-banner--tall{min-height:200px;}

  /* promotions: compact header band + swipeable products */
  .et-promo{border-radius:14px;}
  .et-promo+.et-promo{margin-top:12px;}
  .et-promo__panel{padding:14px 16px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;}
  .et-promo__panel h3{font-size:16px;margin:0;flex:1 1 60%;}
  .et-promo__panel p{font-size:12px;flex:1 1 100%;order:3;}
  .et-promo__pct{font-size:24px;}
  .et-promo__pct small{font-size:11px;}
  .et-promo__panel .et-ends{font-size:12px;order:4;}
  .et-promo__panel .et-btn{order:5;margin-top:0 !important;padding:6px 12px;font-size:12px;}
  .et-promo__items{padding:10px;display:grid;grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px)/3.15);gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
  .et-promo__items::-webkit-scrollbar{display:none;}
  .et-promo__items>*{scroll-snap-align:start;}
  .et-promo__empty{min-height:90px;grid-column:auto;}

  /* ad tiles that sit inside product rows */
  .et-rail .et-promotile{min-height:0;padding:10px;}
  .et-rail .et-promotile__t{font-size:13px;}
  .et-rail .et-promotile__cta{font-size:11px;}

  /* value strip, sell band */
  .et-sellband{padding:18px 16px;gap:10px;border-radius:14px;}
  .et-sellband h3{font-size:17px;}
  .et-value{padding:10px;}

  /* footer: tap a heading to open its links */
  .et-foot{font-size:13px;}
  .et-foot__cols{grid-template-columns:1fr !important;gap:0 !important;}
  .et-foot__cols>div{border-bottom:1px solid rgba(127,127,127,.18);}
  .et-foot__cols h6{display:flex;justify-content:space-between;align-items:center;margin:0;padding:13px 0;cursor:pointer;font-size:13.5px;-webkit-tap-highlight-color:transparent;}
  .et-foot__cols h6::after{content:"\f107";font-family:FontAwesome;font-weight:400;font-size:16px;transition:transform .2s;}
  .et-foot__cols>div.is-open h6::after{transform:rotate(180deg);}
  .et-foot__cols>div>*:not(h6){display:none;}
  .et-foot__cols>div.is-open>*:not(h6){display:block;padding-bottom:12px;}
  .et-foot__cols>div.is-open>.et-social,.et-foot__cols>div.is-open>.et-appbadges{display:flex;}
  .et-foot__news{padding:18px 0;}
  .et-foot__news h3,.et-foot__news h4{font-size:17px;}

  /* product page */
  .et-pdp{gap:14px;}
  .et-stage{border-radius:14px;max-height:42vh;aspect-ratio:auto;height:min(92vw,42vh);}
  .et-thumb{width:54px;height:54px;}
  .et-pdp h1{font-size:19px !important;line-height:1.25;}
  .et-buy__price .et-price,.et-buy .et-price{font-size:22px;}
  .et-kv,.et-specs{font-size:13px;}
  .et-specs dt,.et-specs dd{word-break:break-word;}
  .et-specs .et-tag,.et-pdp .et-tag{white-space:normal;}
  .et-buybar{bottom:var(--mbn-height,60px);padding:8px 12px;}
  .et-buybar .et-price{font-size:16px;}
  .et-buybar .et-btn{padding:10px 12px;font-size:14px;}
  .et-panel{border-radius:14px;}

  /* cart & checkout */
  .et-cartrow{gap:10px;}
  .et-cartrow__name{font-size:13.5px;}
  .et-sumrow{font-size:13.5px;}
  .et-empty{padding:28px 12px;}
  .et-empty h2,.et-empty h3{font-size:18px;}
  .et-empty__ico{width:64px;height:64px;font-size:24px;}

  /* chips, pills, filters */
  .et-chipset,.et-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .et-chipset::-webkit-scrollbar,.et-pills::-webkit-scrollbar{display:none;}
  .et-chip,.et-pill{flex-shrink:0;}
  .et-catbanner{min-height:110px;}
  .et-catbanner h1{font-size:20px;}
}

/* ── Phones: compact product cards, three to a row (≤575px) ─────────── */
@media (max-width:575px){
  .et-grid,.et-grid--150,.et-grid--200,.et-grid--220{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px 8px;}
  .et-rail__track{grid-auto-columns:calc((100% - 16px)/3.15);gap:8px;}

  .et-card{container-type:inline-size;}
  .et-card__media{border-radius:10px;}
  .et-card__media img{padding:7%;}
  .et-card__wish{top:4px;right:4px;width:26px;height:26px;font-size:12px;}
  .et-card__badge{top:4px;left:4px;right:32px;}
  .et-card__badge .et-tag{font-size:8.5px;padding:2px 5px;letter-spacing:.02em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;}
  .et-card__quick{display:none !important;}
  .et-card__body{padding:6px 1px 0;gap:1px;}
  .et-card__title{font-size:12px;line-height:1.3;min-height:2.6em;font-weight:500;}
  .et-card__meta{font-size:10.5px;}
  .et-card .et-stars{font-size:9px !important;}
  .et-card__row{margin-top:2px;gap:4px;}
  .et-card .et-price{font-size:13.5px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;}
  .et-card .et-was{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .et-card .et-off{font-size:10px;}
  .et-card .et-stock{font-size:10.5px;}
  .et-card__cart{width:28px;height:28px;font-size:12px;border-width:1px;}
  /* cart button floats on the photo's corner so the price gets the full width */
  @supports (container-type:inline-size){
    .et-card__cart{position:absolute;top:calc(100cqw - 32px);right:4px;z-index:3;box-shadow:0 1px 4px rgba(18,24,38,.18);border-color:transparent;}
  }
  .et-card__extra{font-size:10.5px;}
  .et-card__extra .et-btn{padding:5px 8px;font-size:11px;}

  /* list view on the shop page: compact rows */
  .et-listitem{gap:10px !important;padding:10px 0 !important;grid-template-columns:96px minmax(0,1fr) !important;}
  .et-listitem .et-card__media,.et-listitem img{max-width:96px;}
  .et-listitem__title{font-size:13.5px;}
  .et-listitem__desc{display:none;}
  .et-listitem__aside{grid-column:2;}

  /* shop toolbar */
  .et-resbar{gap:8px;flex-wrap:wrap;}
  .et-resbar__count{font-size:12.5px;}

  .et-btn--lg{padding:12px 18px;font-size:15px;}
}

/* very narrow phones (≤339px): two to a row */
@media (max-width:339px){
  .et-grid,.et-grid--150,.et-grid--200,.et-grid--220{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .et-rail__track{grid-auto-columns:calc((100% - 8px)/2.2);}
  .et-tiles .et-tile__t{font-size:10.5px;}
}

/* ── Page banners, list view, auctions, checkout, repairs, chat (phones) ─ */
@media (max-width:767px){
  .et-sellband{padding:18px 16px !important;}
  .et-sellband h3{font-size:22px !important;line-height:1.15;margin-bottom:6px;}
  .et-sellband p{font-size:12.5px;margin-bottom:8px;}
  .et-sellband .et-tag{margin-bottom:8px !important;}
  .et-sellband strong{font-size:18px;}

  /* shop list view: photo + details + price in one compact row */
  .et-listitem{display:grid !important;grid-template-columns:92px minmax(0,1fr) !important;gap:4px 12px !important;align-items:start;}
  .et-listitem>.et-card{grid-row:1 / span 2;}
  .et-listitem .et-card__wish{width:24px;height:24px;font-size:11px;top:4px;right:4px;}
  .et-listitem__title{font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .et-listitem__desc,.et-listitem .et-pills{display:none !important;}
  .et-listitem__aside{grid-column:2;text-align:left !important;align-items:flex-start !important;}
  .et-listitem__aside .et-price{font-size:16px;}
  .et-listitem__aside .et-btn{padding:6px 12px;font-size:12px;}
  .et-listitem__aside .et-btn--ghost{display:none;}

  /* auction cards: countdown fits the card */
  .et-card .et-timer,.et-card .et-countdown,.et-card [data-end]{font-size:12px !important;letter-spacing:0;}
  .et-card .et-btn{padding:6px 8px;font-size:12px;width:100%;}

  /* checkout & account boxes: less padding */
  .card.p-4{padding:16px !important;}
  .card.mb-4{margin-bottom:14px !important;}
  .form-control,.form-select{padding:9px 12px;}
  .form-label{margin-bottom:4px;font-size:13px;}

  /* repair centre header */
  .rp-hero{padding:18px 16px !important;gap:14px !important;}
  .rp-hero h1{font-size:21px !important;margin:8px 0 6px !important;}
  .rp-hero p{font-size:13px;}
  .rp-hero__ticks{font-size:12.5px;margin-bottom:12px !important;}
  .rp-hero .et-btn{padding:9px 14px;font-size:13.5px;}

  /* chat bubble: never over an open menu; tucks to the edge while scrolling down */
  body:has(.offcanvas.show) #chatWidget,body:has(.modal.show) #chatWidget{display:none !important;}
  #chatWidget{transition:transform .25s ease, opacity .25s ease;}
  #chatWidget.et-chat--tucked:not(:has(#chatPanel.open)){transform:translateX(30px);opacity:.55;}
}

/* ── Tablets (768–991px): four to a row, shorter banner ─────────────── */
@media (min-width:768px) and (max-width:991px){
  .et-grid,.et-grid--150,.et-grid--200,.et-grid--220{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:18px 12px;}
  .et-rail__track{grid-auto-columns:calc((100% - 3*12px)/4.25);gap:12px;}
  .et-hero__slide{min-height:0 !important;aspect-ratio:var(--hero-ar,2.6/1) !important;}
  .et-hero__slide--split:has(.et-hero__img){display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .et-hero__slide--split:has(.et-hero__img) .et-hero__img{position:relative !important;inset:auto !important;grid-column:2;grid-row:1;height:100% !important;aspect-ratio:auto !important;}
  .et-hero__slide--split:has(.et-hero__img) .et-hero__content{grid-column:1;grid-row:1;align-self:center;}
  .et-hero__slide--image .et-hero__img,.et-hero__slide--overlay .et-hero__img{height:100% !important;}
  .et-tiles{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:10px;}
  .et-tile{padding:12px;}
  .et-tile__s{display:none;}
  .et-cats,.et-cats--start{grid-auto-columns:92px;}
  .et-cat__img{width:84px;height:84px;}
  .et-section{padding:20px 0;}
  .et-card__title{font-size:13px;}
  .et-card__body{padding-top:8px;}
}