/* Small-screen rhythm and touch targets across the TINTIN journey. */
@media(max-width:850px){
 .header .header-commerce a{min-width:40px;min-height:44px}.header .menu-toggle{min-width:40px;min-height:44px}
 .footer-bottom>nav{flex-wrap:wrap;row-gap:8px}.footer-bottom>nav a{display:inline-flex;align-items:center;min-height:36px}
 .commerce-main input,.commerce-main select,.commerce-main textarea,.account-dialog input,.account-dialog textarea{font-size:16px!important}
 .cart-layout,.checkout-layout{grid-template-columns:minmax(0,1fr);gap:28px}.cart-summary{position:static}.checkout-fields{grid-template-columns:minmax(0,1fr)}
 .checkout-steps{flex-wrap:wrap;gap:10px 20px;font-size:12px;margin-bottom:28px}
}
@media(max-width:600px){
 .header{left:12px;right:12px;gap:5px}.header .logo{width:112px}.header .header-commerce{gap:0}.header .menu-toggle{margin-left:0}
 .commerce-main{padding:110px 20px 56px}.commerce-title{font-size:clamp(34px,9vw,48px);line-height:1.12}
 .cart-heading{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:24px}.cart-back{min-height:40px;white-space:normal}
 .cart-line{grid-template-columns:76px minmax(0,1fr);gap:16px;padding:24px 0}.cart-pack{height:116px;padding:10px}.cart-pack img{max-height:96px}.cart-line-controls{grid-column:2;align-items:flex-start;gap:10px}.cart-line-copy h3{font-size:21px;line-height:1.25}.cart-quantity{height:44px}.cart-quantity button{width:40px;height:42px}.cart-quantity input{height:42px}.cart-remove,.cart-text-action{min-height:36px}
 .cart-list-heading{align-items:flex-start;gap:10px;flex-wrap:wrap}.cart-service-note{margin-top:32px;gap:14px}.cart-summary{padding:24px}.cart-summary .commerce-button{min-height:48px;font-size:14px}
 .checkout-panel{padding:22px}.checkout-delivery{grid-template-columns:1fr}.checkout-confirmation-actions{flex-direction:column;align-items:stretch}.checkout-order-id{overflow-wrap:anywhere}
 #catalog-grid{gap:22px 12px}#catalog-grid .shop-product{padding:12px}#catalog-grid .shop-product-art{height:210px}#catalog-grid .shop-product-art .pack-cutout{width:min(100%,calc(165px * var(--pack-aspect)));max-height:165px}
 #catalog-grid .shop-product h3{font-size:20px;line-height:1.22;margin:16px 0 10px;min-height:3.66em}#catalog-grid .shop-product>p{font-size:12px;line-height:1.5}#catalog-grid .shop-product-actions{padding-top:18px;gap:4px}#catalog-grid .shop-product-link{min-height:44px;font-size:12px}.product-cart-add{width:40px;height:44px}.product-save{width:40px;height:40px}
 #pilih-rasa .brand-filters{gap:10px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}#pilih-rasa .brand-filter{min-width:86px;scroll-snap-align:start;padding:14px}
 .catalog-search input{font-size:16px;min-height:50px}.product-dialog{max-height:calc(100svh - 20px);width:calc(100% - 20px);border-radius:18px}.product-detail-art{min-height:230px;padding:30px 24px}#product-detail-art .pack-cutout{width:min(70%,calc(190px * var(--pack-aspect)));max-height:190px}.product-detail-copy{padding:26px 22px}.product-detail-copy h2{font-size:34px;line-height:1.13}.product-purchase-controls{align-items:stretch}.product-purchase-controls .commerce-button{flex:1;min-width:150px;font-size:13px}.market-options a{min-height:46px}
 .account-heading .commerce-title{font-size:clamp(33px,8.5vw,46px)}.account-layout{min-width:0}.account-content{min-width:0}.account-sidebar nav{gap:6px}.account-sidebar nav a{min-height:44px;padding:10px 14px}.account-membership{padding:24px;min-height:230px}.account-membership strong{overflow-wrap:anywhere}.account-form-grid{grid-template-columns:1fr}.account-form .field-full{grid-column:auto}.account-form{padding:20px}.account-confirm-actions{flex-wrap:wrap}.account-confirm-actions>*{min-height:46px}.account-dialog{padding:28px 22px!important}.account-dialog h2{font-size:27px;overflow-wrap:anywhere}.account-order-top{flex-wrap:wrap;gap:8px}.account-detail-item{min-width:0}.account-detail-item>div{min-width:0}.account-detail-item strong{overflow-wrap:anywhere}
 .sahabat-hub-hero .hub-hero-actions{gap:12px;flex-wrap:wrap}.hub-hero-actions>a{min-height:46px}.footer-top{gap:24px}.footer-contact{max-width:100%;width:fit-content}.footer-bottom{row-gap:18px}
}
@media(max-width:360px){#catalog-grid{gap:18px 8px}#catalog-grid .shop-product{padding:9px}#catalog-grid .shop-product h3{font-size:18px}.header .logo{width:100px}.commerce-main{padding-inline:16px}.account-stats{grid-template-columns:1fr}.cart-line{grid-template-columns:64px minmax(0,1fr);gap:12px}}
@media(max-width:600px){
 #pilih-rasa .brand-filters{display:flex;flex-wrap:nowrap;width:100%;max-width:100%;gap:10px;scrollbar-width:none}
 #pilih-rasa .brand-filters::-webkit-scrollbar{display:none}
 #pilih-rasa .brand-filter{flex:0 0 86px;width:86px;height:86px;min-width:86px}
 #pilih-rasa.catalog-section{padding-top:56px;padding-bottom:56px}
 #pilih-rasa .page-section-head{margin-bottom:28px;gap:24px}
 .account-sidebar nav{scrollbar-width:none}.account-sidebar nav::-webkit-scrollbar{display:none}
}
.commerce-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;line-height:1.5;margin-bottom:22px;color:#86645c}
@media(max-width:600px){.commerce-breadcrumb{gap:6px;margin-bottom:20px}.account-heading{margin-bottom:28px}}
@media(max-width:360px){.account-heading .commerce-title{font-size:27px;line-height:1.15}.account-membership{padding:20px}.account-membership strong{font-size:30px}.account-order-top,.account-order-header{overflow-wrap:anywhere}}
/* Mobile footer follows the full content grid; the Garena closing stays desktop-only. */
@media(max-width:850px){
 .footer .footer-top>a:first-child{display:block;width:100%;max-width:none}
 .footer .footer-top>a:first-child>img{width:100%;max-width:none;height:auto}
 .footer .footer-contact{font-size:21px;line-height:1.2;min-height:44px;padding:10px 20px;gap:10px;align-self:center;width:fit-content;max-width:100%}
 .footer .footer-contact .tintin-icon{width:18px;height:18px}
}

/* One complete story occupies the mobile content grid. */
@media(max-width:850px){
 #cerita.is-story-pinned>.stories-sticky{grid-template-rows:auto minmax(0,1fr);gap:0}
 #cerita.is-story-pinned .story-gallery{gap:0;width:100%;max-width:100%;padding:0}
 #cerita.is-story-pinned .story-gallery>.story-card{flex:0 0 100%;width:100%;max-width:100%;min-width:0;grid-template-rows:minmax(160px,1fr) auto auto;align-content:start}
 #cerita .story-card>.story-photo,#cerita .story-card>h3,#cerita .story-card>.eyebrow{width:100%;max-width:100%;margin-left:0;margin-right:0}
 #cerita.is-story-pinned .story-gallery .story-card>h3{font-size:clamp(25px,6.6vw,34px);line-height:1.16;margin:10px 0 0;overflow-wrap:normal}
}
/* Every story has one column, including the formerly featured first card. */
@media(max-width:850px){
 #cerita.is-story-pinned .story-gallery>.story-card,
 #cerita.is-story-pinned .story-gallery>.story-card-feature{display:flex!important;flex-direction:column;align-items:stretch;flex:0 0 100%;width:100%;height:100%;min-width:0;grid-template-columns:minmax(0,1fr)}
 #cerita.is-story-pinned .story-gallery>.story-card>.story-photo{flex:1 1 auto;width:100%;height:0;min-height:160px;grid-column:auto;grid-row:auto;align-self:stretch}
 #cerita.is-story-pinned .story-gallery>.story-card>.eyebrow,
 #cerita.is-story-pinned .story-gallery>.story-card>h3{flex:0 0 auto;width:100%;grid-column:auto;grid-row:auto;align-self:stretch}
 #cerita.is-story-pinned .story-gallery>.story-card>.story-photo>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:none}
}
@media(max-width:600px){
 .hero-sequence .scene-word{font-size:clamp(66px,19vw,110px);line-height:1.02;letter-spacing:.01em}
 .hero-sequence [data-hero-slide="1"] .scene-word{font-size:clamp(42px,17.3vw,88px)}
 .hero-sequence [data-hero-slide="3"] .scene-word{font-size:clamp(48px,19.5vw,104px)}
 .hero-sequence .hero-slide-celebrate .scene-word{font-size:clamp(36px,14vw,76px);line-height:1.02;letter-spacing:.01em}
}

/* Mobile chapters use one normal-flow column. Reset the editorial grid at its
   parent: child widths alone cannot escape a desktop half-width grid track. */
.journey-mobile-brand{display:none}
@media(max-width:900px){
 #perjalanan #journey-panel{display:block;width:100%;height:auto;overflow:visible}
 #perjalanan #journey-panel .journey-story-slide{--mobile-photo-height:clamp(400px,72svh,650px);position:relative;display:flex;flex-direction:column;grid-template-columns:none;grid-template-rows:none;gap:0;width:100%;min-width:0;max-width:none;height:auto;min-height:0;padding:0;transform:none;overflow:hidden}
 #perjalanan #journey-panel .journey-scene-art{position:relative;inset:auto;flex:none;width:100%;height:var(--mobile-photo-height);min-height:0;margin:0;padding:0;border-radius:0;overflow:hidden}
 #perjalanan #journey-panel .journey-scene-illustration{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;transform:none}
 #perjalanan #journey-panel .journey-scene-word{position:absolute;inset:0 12px auto;display:flex;align-items:center;justify-content:center;width:auto;height:var(--mobile-photo-height);min-height:0;margin:0;padding:0;opacity:1;color:#fff9e8;font-size:clamp(44px,18vw,150px);line-height:1;letter-spacing:-.025em;text-align:center;z-index:3}
 #perjalanan #journey-panel .journey-opening .journey-scene-word{font-size:clamp(60px,23vw,190px)}
 #perjalanan #journey-panel .journey-scene-copy{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex:none;grid-column:auto;grid-row:auto;gap:0;width:100%;min-width:0;max-width:none;height:auto;margin:0;padding:44px var(--gutter) 56px;text-align:center;transform:none;opacity:1;pointer-events:auto}
 #perjalanan .journey-mobile-brand{display:flex;justify-content:center;align-items:center;flex:none;width:100%;height:78px;margin:0 0 26px}
 #perjalanan .journey-mobile-brand .journey-brand-logo{display:block;width:126px;height:78px;max-width:100%;object-fit:contain;margin:0 auto}
 #perjalanan .journey-opening>.journey-scene-brand,#perjalanan .journey-secondary-logo,#perjalanan .journey-scene-copy>.journey-scene-brand{display:none!important}
 #perjalanan #journey-panel .journey-headline-group{position:static;inset:auto;display:block;grid-column:auto;grid-row:auto;width:100%;max-width:560px;padding:0;margin:0 0 24px;transform:none;opacity:1;text-align:center}
 #perjalanan #journey-panel .journey-scene-headline{position:static;inset:auto;display:block;grid-column:auto;grid-row:auto;font-family:var(--serif);font-size:clamp(34px,9vw,48px);font-weight:400;font-style:normal;line-height:1.08;letter-spacing:-.045em;text-align:center;width:100%;max-width:560px;height:auto;margin:0 0 24px;padding:0;color:#571b22;transform:none;opacity:1}
 #perjalanan #journey-panel .journey-headline-group>.journey-scene-headline{margin:0}
 #perjalanan #journey-panel .journey-scene-body{position:static;inset:auto;display:flex;flex-direction:column;align-items:center;grid-column:auto;grid-row:auto;width:100%;min-width:0;max-width:520px;height:auto;margin:0;padding:0;border:0;transform:none;opacity:1;text-align:center}
 #perjalanan #journey-panel .journey-scene-copy>p,#perjalanan #journey-panel .journey-scene-body>p{position:static;inset:auto;grid-column:auto;grid-row:auto;font-family:var(--sans);font-size:15px;line-height:1.75;text-align:center;width:100%;max-width:520px;margin:0 0 24px;padding:0}
 #perjalanan #journey-panel .journey-scene-discover{position:relative;inset:auto;align-self:center;grid-column:auto;grid-row:auto;min-height:46px;margin:2px auto 0}
 #perjalanan #journey-panel .journey-scene-aside,#perjalanan #journey-panel .journey-scene-closing{display:none!important}
}
