/* Approval-preview phone layout. No rules in this file apply above 767px. */
@media (max-width:767px){
  :root{ --gut:16px; }
  html{ scroll-padding-top:78px; }
  body{ font-size:14px; line-height:1.55; }
  h1{ font-size:clamp(28px,7.2vw,34px); }
  h2{ font-size:clamp(24px,6.3vw,29px); line-height:1.13; }
  h3{ font-size:18px; }
  .lede{ font-size:14px; line-height:1.55; }
  .sec{ padding:30px 0; }
  .sec-head{ margin-bottom:16px; }
  .sec-head h2{ margin-bottom:8px; }
  .wrap,.panel,.field,.f{ min-width:0; }
  .btn{ min-height:44px; padding:10px 16px; font-size:13px; line-height:1.35; }
  input:not([type="radio"]):not([type="checkbox"]),select,textarea{ min-width:0; font-size:16px; }
  .note{ font-size:13px; line-height:1.5; }
  .panel{ border-radius:16px; }
  :root .hdr.hdr{ top:0; width:100%; margin:0; border-radius:0; }
  :root .hdr-in{ min-height:64px; gap:4px !important; padding-inline:10px; }
  :root .brand{ margin-right:auto; }
  :root .brand img,html.dg-customlogo .brand img{ width:44px !important; height:44px !important; max-width:44px !important; }
  :root .brand > span{ display:none !important; }
  :root .hdr .menu-btn,:root .hdr .dots-btn,:root .hdr .theme-btn{
    width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important;
  }
  :root .hdr .dg-lang-btn{ min-height:44px !important; padding:6px !important; font-size:12px !important; }
  :root .hdr .cart-btn{ min-height:44px !important; padding:8px !important; font-size:12px !important; gap:4px !important; }
  .nav.open{ max-height:calc(100vh - 70px); max-height:calc(100dvh - 70px); overflow-y:auto; padding:8px 16px 16px; }
  .nav a{ min-height:44px; padding:11px 0; font-size:14px; }
  #nav a[href="#collection"],#nav a[href="#finder"],#nav a[href="#delivery"],#nav a[href="#order"]{ display:block !important; }
  .dg-mobile-updates{ display:flex; gap:8px; padding:10px 16px 0; }
  .dg-mobile-updates #dgAtabBar,.dg-mobile-updates #dgOffTabBar{ margin:0; min-height:44px; padding:8px 12px; font-size:12px; flex:0 1 auto; }
  .dg-mobile-updates .dg-atab-tx,.dg-mobile-updates .dg-oft-tx{ white-space:normal; }
  .search-go,.copy-inline,.line-link{ min-height:44px; }
  .copy-inline{ display:inline-flex; align-items:center; }
  .dg-atab{ min-height:44px; font-size:12px; padding:7px 12px; }
  :root .hero.hero{ min-height:0; padding:22px 0 24px; display:block; }
  :root .hero-grid{ display:block; }
  :root .hero-visual{ display:none; }
  :root .hero-copy.dg-mobile-hero{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr); gap:12px; align-items:center; }
  :root .dg-mobile-hero .dg-heromark{ position:static; grid-column:1/-1; width:57px; height:42px; object-fit:contain; }
  :root .hero-copy.dg-mobile-hero > h1{ grid-column:1/-1; margin:0; }
  :root .hero-copy .hero-brand{ font-size:clamp(28px,7.2vw,34px); line-height:1.08; }
  :root .hero-copy .hero-tag{ margin-top:8px; font-size:16px; line-height:1.3; }
  :root .hero-copy.dg-mobile-hero > p{ grid-column:1; font-size:13.5px; line-height:1.6; margin:0; }
  :root .hero-copy.dg-mobile-hero .hero-cta{ grid-column:1/-1; display:grid; grid-template-columns:1fr; gap:8px; margin-top:4px; }
  :root .hero-copy.dg-mobile-hero .hero-cta .btn{ min-height:44px; font-size:13px; padding:10px; }
  :root .hero-copy.dg-mobile-hero #heroBg{
    position:relative; grid-column:2; grid-row:3; inset:auto !important; width:100%;
    height:clamp(210px,57vw,260px); display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
    grid-template-rows:1.15fr 1fr; gap:14px 8px; align-self:center; overflow:visible;
    transform:none !important; opacity:1; mask-image:none; -webkit-mask-image:none;
  }
  :root .hero-copy.dg-mobile-hero #heroBg::before,:root .hero-copy.dg-mobile-hero #heroBg::after{ display:none; }
  :root .hero-copy.dg-mobile-hero #heroBg .bottle:nth-child(-n+5){
    position:relative; display:block !important; inset:auto !important; width:100% !important; height:100% !important;
    aspect-ratio:auto !important; grid-column:span 2; opacity:1 !important; transform:none !important;
    background-position:center bottom !important; background-size:contain !important;
    animation:none !important; filter:drop-shadow(0 5px 6px rgba(23,21,19,.16));
  }
  :root .hero-copy.dg-mobile-hero #heroBg .bottle:nth-child(2),
  :root .hero-copy.dg-mobile-hero #heroBg .bottle:nth-child(3){ grid-column:span 3; grid-row:1; }
  :root .hero-copy.dg-mobile-hero #heroBg .bottle:nth-child(1),
  :root .hero-copy.dg-mobile-hero #heroBg .bottle:nth-child(4),
  :root .hero-copy.dg-mobile-hero #heroBg .bottle:nth-child(5){ grid-row:2; }
  :root .hero-copy.dg-mobile-hero #heroBg .bottle::after{ display:none !important; }
  :root .hero-copy.dg-mobile-hero #heroBg .bottle:nth-child(n+6){ display:none !important; }
  .assure-item{ padding:12px 0; }
  .assure-item h3{ font-size:15px; }
  .assure-item p{ font-size:13px; }
  #collection [data-dg="collection_lede"]{ display:none; }
  .info{ max-width:100%; }
  .info-hd{ padding:8px 16px; min-height:60px; gap:8px; }
  .info-hd h2{ font-size:18px; }
  .info-x{ width:44px; height:44px; flex-shrink:0; }
  .info-tabs{ padding:0 12px; gap:0; }
  .info-tab{ min-height:44px; font-size:13px; padding:10px; }
  .info-bd{ padding:16px 16px calc(24px + env(safe-area-inset-bottom)); min-height:0; }
  .info .primer{ margin:0 0 16px; }
  .info .primer summary{ font-size:15px; min-height:48px; padding:12px; }
  .info .primer .p-tag{ display:none; }
  .info .primer-body{ font-size:14px; padding:12px; }
  .info .primer-body p,.info .primer-body li{ font-size:13px; }
  .info .step{ padding:12px 0; }
  .info .batch{ padding:14px; gap:14px; margin-top:16px; }
  .info .batch-label{ min-width:0; padding:12px; }
  .info .pol-item{ padding:12px; }
  .info .pol-item p,.info .pol-item ul{ font-size:13px; }
  #finder .finder-grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  #finder .finder-grid > .panel{ padding:16px; }
  #finder .opts{ gap:8px; }
  #finder .opt{ min-height:44px; padding:10px 12px; font-size:14px; }
  #finder .qtitle{ font-size:19px; }
  #finder .back{ min-height:44px; }
  #reqForm .f{ margin-bottom:12px; }
  #reqForm input{ min-height:44px; padding:10px 12px; }
  #finder .qz,#finder .finder-note{ min-width:0; padding:16px; }
  #finder .q-opt{ min-height:44px; padding:10px 12px; font-size:14px; }
  #finder .rec{ flex-wrap:wrap; gap:10px; }
  #finder .rec-from{ white-space:normal; }
  .dset{ padding:16px; margin-top:24px; }
  .dset-head{ margin-bottom:14px; }
  .dset-head h3{ font-size:21px; }
  .dset-head p{ font-size:13px; }
  .dset-grid{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .dset-opt{ display:grid; grid-template-columns:36px minmax(0,1fr) auto; min-height:64px; padding:10px; }
  .dset-nm{ font-size:13px; line-height:1.35; }
  .dset-nm i{ white-space:normal; }
  .dset-pr{ font-size:13px; white-space:nowrap; }
  .dset-bar{ gap:8px; }
  .dset-bar .btn{ width:100%; }
  .like{ margin-top:24px; padding-top:16px; }
  .like-row,.dgsp-rv-row{ max-width:100%; }
  .dgsp-sortwrap{ max-width:100%; }
  .dgsp-sort{ min-height:44px; font-size:16px; max-width:100%; }
  .dg-atab-overlay{ padding:12px; }
  .dg-atab-card{ width:100%; max-width:100%; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow:auto; padding:16px; }
  .dg-atab-head{ gap:8px; }
  .dg-atab-title{ font-size:19px; }
  .dg-atab-x{ width:44px; height:44px; flex:0 0 44px; }
  .dg-atab-item{ padding:12px; }
  .dg-atab-item-p{ font-size:13px; }
  .dg-oft-overlay{ padding:12px; }
  .dg-oft-card{ width:100%; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow:auto; padding:16px; }
  .dg-oft-title{ font-size:19px; }
  .dg-oft-x{ width:44px; height:44px; flex:0 0 44px; }
  .dg-oft-item-p{ font-size:13px; }
  .toast{ bottom:auto; top:76px; width:max-content; max-width:calc(100% - 32px); padding:10px 14px; border-radius:12px; font-size:13px; pointer-events:none; }
  .toast:not(.on){ visibility:hidden; }
  .dgsp-star-in button{ width:44px; height:44px; }
  .dgsp-rv-form input,.dgsp-rv-form textarea{ font-size:16px; min-height:44px; }
  .dgsp-rv-item .top{ flex-wrap:wrap; }
  .dgsp-rv-item .when{ margin-left:0; }
  /* The original support launchers are moved into the mobile menu, not removed.
     Their panels stay in the body, above the page, and use the existing handlers. */
  #nav .dg-mobile-support{ display:flex; flex-wrap:wrap; gap:8px; width:100%; padding-top:12px; }
  #nav .dg-mobile-support button{ min-height:44px; font-size:13px; padding:10px 12px; margin:0; box-shadow:none; }
  #dgChatRoot,#dgBotRoot{ right:12px; bottom:12px !important; }
  #dgChatPanel,#dgBotPanel{
    position:fixed; inset:auto 12px calc(12px + env(safe-area-inset-bottom)); width:calc(100% - 24px);
    max-width:none; height:min(560px,calc(100vh - 92px)); height:min(560px,calc(100dvh - 92px));
    max-height:calc(100dvh - 92px); border-radius:16px;
  }
  .dg-chat-head,.dg-bot-head{ padding:10px 12px; gap:8px; flex-shrink:0; }
  .dg-chat-head strong,.dg-bot-head strong{ font-size:15px; }
  #dgChatClose,#dgBotClose{ width:44px; height:44px; min-width:44px; }
  .dg-chat-messages,.dg-bot-log{ min-height:0; padding:12px; }
  .dg-chat-form input,.dg-bot-form input{ font-size:16px; min-height:44px; }
  .dg-chat-form button,.dg-bot-send,.dg-bot-chip,.dg-bot-act{ min-height:44px; }
  .ftr{ padding:28px 0 calc(24px + env(safe-area-inset-bottom)); }
  .ftr h2{ font-size:24px; }
  .ftr-top{ grid-template-columns:minmax(0,1fr); gap:16px; padding-bottom:16px; }
  .ftr p,.ftr-links{ font-size:13px; }
  .ftr-links{ gap:2px; }
  .ftr-links a{ display:inline-flex; align-items:center; min-height:44px; overflow-wrap:anywhere; }
  .ftr-bot{ padding-top:16px; gap:8px; font-size:12px; }
  .ftr-bot p:last-child{ margin-left:0; }
}