/* =========================================================================
   Soundmaker shared stylesheet
   - .clickbox : neutralizes native <button> chrome so a <button> can replace
     a former click-only <div> (DC only binds onClick on real elements).
   - @media (max-width:768px)/(480px) : mobile adaptation. The DC runtime
     re-serializes inline styles via CSSOM ("prop: value", "repeat(4, 1fr)",
     "0" -> "0px"), so we target distinctive VALUE substrings and override
     with !important. Horizontal padding is reduced via the padding-left/right
     longhands so the inline vertical padding is preserved.
   ========================================================================= */

.clickbox{
  border:none; background:none; font:inherit; color:inherit;
  text-align:inherit; cursor:pointer; -webkit-appearance:none; appearance:none;
}

/* 键盘可见焦点轮廓（品牌金），仅键盘导航时显示，不影响鼠标点击视觉 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, .clickbox:focus-visible{
  outline:2px solid #C9A24B !important; outline-offset:2px !important;
}

/* 私たちについて (BrandStory) — hidden for now (all viewports): hide any link to it, and the
   whole footer BRANDSTORY column (gap:72px = footer column container) so no orphan heading remains */
a[href*="BrandStory"]{ display: none !important; }
[style*="gap: 72px"] > div:has(a[href*="BrandStory"]){ display: none !important; }

/* DeskProduct: dimension drawings (寸法図) are click-to-zoom via the #spec-cards lightbox */
#spec-cards img{ cursor: zoom-in; }

/* ============================ TABLET / MOBILE ============================ */
@media (max-width: 768px){

  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* ---- collapse multi-column layout grids to a single column ---- */
  [style*="700px 700px"],
  [style*="566px minmax"],
  [style*="380px minmax"],
  [style*="1fr 1fr"],
  [style*="1.1fr 1fr"],
  [style*="1.05fr 1fr"],
  [style*="1.15fr 0.85fr"],
  [style*="0.85fr 1.15fr"],
  [style*="repeat(3, 1fr)"]{
    grid-template-columns: 1fr !important;
  }
  /* homepage「暮らしの中の、Soundmaker。」gallery masonry -> mobile 2-column equal squares.
     Target by CLASS + direct-child img, NOT [style*=...]: browsers serialize the inline grid
     shorthands differently (desktop Chrome keeps "repeat(12, 1fr)" and merges grid-column/row into
     "grid-area: span …"; iOS Safari / WeChat expand repeat() to "1fr 1fr …" and don't merge), so the
     old attribute-substring selectors matched in Chrome emulation but NOT on real phones. */
  .life-gallery{ display: grid !important; grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto !important; }
  .life-gallery > img{ grid-column: auto !important; grid-row: auto !important; grid-area: auto !important; aspect-ratio: 1 / 1 !important; height: auto !important; width: 100% !important; }
  /* thumbnail / small tiles: several per row rather than one full-width column */
  [style*="repeat(4, 1fr)"]{ grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(5, 1fr)"],
  [style*="repeat(6, 1fr)"],
  [style*="repeat(7, 1fr)"]{ grid-template-columns: repeat(4, 1fr) !important; }
  /* VC-2「製品詳細」column-major grid: reset to single-column row flow so the
     first column's panels don't collapse to 0-width on mobile (DC serializes
     the inline style as "grid-auto-flow: column" with a space). */
  [style*="grid-auto-flow: column"]{ grid-auto-flow: row !important; grid-template-rows: auto !important; }

  /* ---- fixed-size gallery box -> fluid square ---- */
  [style*="width: 566px"]{ width: 100% !important; max-width: 100% !important; }
  [style*="height: 566px"]{ height: auto !important; aspect-ratio: 1/1 !important; }

  /* ---- homepage 100vw full-bleed breakout -> normal flow ---- */
  [style*="100vw"]{ width: 100% !important; }
  [style*="50vw"]{ margin-left: 0 !important; margin-right: 0 !important; }

  /* ---- editorial flex rows (homepage Craft / About) -> stack ---- */
  [style*="0 0 38%"], [style*="0 0 42%"], [style*="0 0 45%"], [style*="0 0 56%"], [style*="0 0 58%"]{
    flex: 0 0 100% !important; width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  [style*="height: 400px"], [style*="height: 440px"], [style*="height: 480px"]{
    height: auto !important; min-height: 0 !important;
  }
  /* force any two-item flex row to wrap */
  [style*="display: flex"][style*="gap"]{ flex-wrap: wrap !important; }

  /* ---- reduce the universal 48px side padding (keep vertical padding) ---- */
  [style*="128px 48px"], [style*="120px 48px"], [style*="110px 48px"],
  [style*="100px 48px"], [style*="96px 48px"],  [style*="90px 48px"],
  [style*="80px 48px"],  [style*="72px 48px"],  [style*="64px 48px"],
  [style*="60px 48px"],  [style*="56px 48px"],  [style*="50px 48px"],
  [style*="48px 48px"],  [style*="44px 48px"],  [style*="40px 48px"],
  [style*="36px 48px"],  [style*="30px 48px"],  [style*="24px 48px"],
  [style*="20px 48px"],  [style*="0px 48px"],   [style*=", 48px 0"],
  [style*="0px 64px"],   [style*="0px 56px"],   [style*="72px 148px"]{
    padding-left: 20px !important; padding-right: 20px !important;
  }
  /* absolutely-positioned hero / overlay copy pinned to the 48px edge */
  [style*="left: 48px"]{ left: 20px !important; }
  [style*="right: 48px"]{ right: 20px !important; }
  [style*="left: 44px"]{ left: 20px !important; }
  [style*="right: 44px"]{ right: 20px !important; }

  /* ---- media never exceeds the viewport ---- */
  img, video, iframe, image-slot, svg { max-width: 100% !important; }
  iframe { width: 100% !important; }

  /* ---- scale down large display type ---- */
  [style*="font-size: 80px"]{ font-size: 40px !important; letter-spacing: 1px !important; }
  [style*="font-size: 72px"]{ font-size: 38px !important; }
  [style*="font-size: 64px"]{ font-size: 36px !important; }
  [style*="font-size: 60px"]{ font-size: 34px !important; }
  [style*="font-size: 56px"]{ font-size: 32px !important; }
  [style*="font-size: 52px"]{ font-size: 31px !important; }
  [style*="font-size: 48px"]{ font-size: 30px !important; }
  [style*="font-size: 46px"]{ font-size: 29px !important; }
  [style*="font-size: 44px"]{ font-size: 28px !important; }
  [style*="font-size: 42px"]{ font-size: 27px !important; }
  [style*="font-size: 40px"]{ font-size: 26px !important; }
  [style*="font-size: 38px"]{ font-size: 25px !important; }
  [style*="font-size: 36px"]{ font-size: 25px !important; }
  [style*="font-size: 34px"]{ font-size: 24px !important; }
  [style*="font-size: 32px"]{ font-size: 23px !important; }
  [style*="font-size: 30px"]{ font-size: 22px !important; }

  /* hero (mobile): show the FULL image (no left/right crop) at its natural aspect;
     the image flows in-flow so the hero box shrinks to the image's proportional height */
  [style*="-73px + 100vh"]{ height: auto !important; min-height: 0 !important; }
  .hero-media{ position: relative !important; height: auto !important; }

  /* ---- editorial About/Craft flex rows (no gap): wrap so columns stack; give the
     absolute-positioned photo column an explicit height so the image is visible ---- */
  [style*="align-items: stretch"][style*="height: 400px"]{ flex-wrap: wrap !important; }
  [style*="0 0 56%"]{ min-height: 240px !important; }
  /* Craft block image column (flex:1 with absolute image-slot): flex-grow gives it 0 width
     when it only holds an absolute child, so force full width + height on mobile */
  [style*="flex: 1 1 0%"][style*="position: relative"][style*="overflow: hidden"]{ flex: 0 0 100% !important; min-height: 240px !important; }

  /* ---- BrandStory 3-section flex:1 + gap:64px rows: stack full-width vertically ---- */
  [style*="gap: 64px"][style*="align-items: center"]{ flex-direction: column !important; align-items: stretch !important; }

  /* ---- policy/company label+value two-column (fixed-px basis): label -> full width so value drops below ---- */
  [style*="0 0 200px"], [style*="0 0 180px"], [style*="0 0 220px"]{ flex: 0 0 100% !important; }

  /* ---- footer: trim the oversized top gap + inner spacing on mobile ---- */
  [style*="110px 48px 44px"]{ padding-top: 44px !important; padding-bottom: 32px !important; }
  [style*="padding-bottom: 72px"]{ padding-bottom: 40px !important; }
  [style*="margin-top: 110px"]{ margin-top: 56px !important; }

  /* ---- homepage「製品」module (#products): trim oversized top/bottom whitespace on mobile
     (inline padding is 128px top/bottom; cut ~2/3 -> ~43px; horizontal stays 20px via the rule above) ---- */
  #products{ padding-top: 43px !important; padding-bottom: 43px !important; }

  /* homepage 製品 category cards: images are wide panoramas (スタジオ用品 ≈2.3:1). On mobile,
     stack the caption BELOW the full image instead of overlaying it, so the whole image shows. */
  #products a[href*="Products.dc.html"]{ height: auto !important; overflow: visible !important; align-self: start !important; }
  #products a[href*="Products.dc.html"] img{ height: auto !important; }   /* show full image at its natural aspect (no cover-crop) */
  #products a[href*="Products.dc.html"] > div:nth-child(2){ display: none !important; }   /* gradient overlay */
  #products a[href*="Products.dc.html"] > div:last-child{ position: static !important; left: auto !important; right: auto !important; bottom: auto !important; padding: 16px 2px 22px !important; }

  /* ---- homepage「プロの方から」(reviews #reviews) module: same trim as #products (~120px -> ~40px) ---- */
  #reviews{ padding-top: 40px !important; padding-bottom: 40px !important; }

  /* ---- homepage gallery category tabs (#area-tabs): two buttons -> ~half size, side-by-side (2 cols) ---- */
  #area-tabs{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  #area-tabs button{ padding: 10px 8px !important; gap: 5px !important; border-radius: 8px !important; flex-wrap: wrap !important; justify-content: center !important; }
  #area-tabs [style*="font-size: 24px"]{ font-size: 15px !important; }
  #area-tabs [style*="font-size: 13.5px"]{ font-size: 9px !important; }

  /* ---- policy/info pages (.policy-body: Shipping/Payment/Returns/LegalNotice/Company/Campaigns/Contact):
     halve the airy line spacing of body content. Cover the loose leading range 1.85–2.1;
     headings (1.2–1.3) / labels (1.6) / buttons (~1) are left alone. ---- */
  .policy-body [style*="line-height: 2.1"]{ line-height: 1.5 !important; }
  .policy-body [style*="line-height: 1.9"]{ line-height: 1.45 !important; }   /* also matches 1.95 (substring) */
  .policy-body [style*="line-height: 1.85"]{ line-height: 1.4 !important; }
  .policy-body [style*="line-height: 2;"]{ line-height: 1.45 !important; }     /* Contact uses line-height:2 */

  /* ---- DeskProduct (DTM desk): 4 feature icons -> keep all 4 in one row, ~1/3 size ---- */
  #feature-icons{ grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  #feature-icons > div > div:first-child{ max-width: 50px !important; margin: 0 auto 6px !important; }
  #feature-icons [style*="font-size: 12px"]{ font-size: 9px !important; line-height: 1.3 !important; }

  /* ---- DeskProduct GALLERY -> horizontal swipe carousel instead of vertical stack ---- */
  #gallery-grid{ display: flex !important; grid-template-columns: none !important; overflow-x: auto !important; gap: 10px !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #gallery-grid::-webkit-scrollbar{ display: none; }
  #gallery-grid > .galcell{ flex: 0 0 82% !important; scroll-snap-align: center; }

  /* ---- DeskProduct SPECS/size cards -> one full-width bar per row (not 2 columns) ---- */
  #spec-cards{ grid-template-columns: 1fr !important; }

  /* ---- VC-2「製品詳細」 p6/p12 desktop column-align negative margin -> reset on mobile single column ---- */
  [style*="-48.876%"]{ margin-top: 0 !important; }
}

/* ============================== PHONE ================================== */
@media (max-width: 480px){
  input, textarea, select, .fld{ font-size: 16px !important; }
  .addbtn{ padding: 16px !important; }
}