/* Oshea Jordan theme v3.5: tablet + desktop layer.
   The phone layout (approved) lives in oshea.css; this file loads only from 600px wide. */

/* ---------- tablet and up (600px+) ---------- */
@media (min-width:600px){
  html{scrollbar-gutter:stable}
  .wrap,.col-head,.pd,.ftr .in{max-width:760px;margin-inline:auto}
  .pd > .wrap{max-width:none}
  .tabs{padding-inline:max(16px,calc((100% - 728px) / 2))}
  .cats .tiles{max-width:600px;margin-inline:auto}
  /* four cards across from tablet up; the collection's first row fills with its desktop-only cards */
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .d-only{display:flex}
  .m-only,.m-only-sec{display:none}
  .proof .ph{max-width:560px}
  .rte,.acc{max-width:640px}
  .pd .pairs{max-width:560px}

  /* sheets become centred panels */
  dialog.sheet{inset:0;margin:auto;width:min(520px,calc(100% - 32px));height:fit-content;max-height:88vh;max-height:88dvh;border-radius:20px}
  dialog.sheet[open]{animation:pop .2s ease-out}
  @keyframes pop{from{transform:translateY(12px);opacity:.6}}
  .sheet .grab{display:none}
  .sheet .sh-h{padding-top:12px}
  .sheet .foot{border-radius:0 0 20px 20px;padding-bottom:16px}
  dialog.find{inset:0;margin:auto;width:min(640px,calc(100% - 32px));height:min(720px,84vh);border-radius:20px;box-shadow:var(--sh-2)}
  dialog.find::backdrop{background:rgba(0,0,0,.42)}
  .find .bar{border-radius:20px 20px 0 0}
  .toast{bottom:28px}
  /* no on-screen keyboard here: keep the delivery line and the sub-title while she types */
  .cod:has(.body :focus) .sh-h .small{display:block}
  .cod:has(.body :focus) .cod-tot .r:not(.g){display:flex}
}
@media (min-width:600px) and (prefers-reduced-motion:reduce){dialog.sheet[open]{animation:none}}

/* ---------- tablet only (600–899px): product gallery centred and tall enough for the photos ---------- */
@media (min-width:600px) and (max-width:899.98px){
  .pd-top > .pd-gal{max-width:560px;margin-inline:auto}
  .pd-slide{height:min(520px,60vh)}
  .pd-cut img{height:min(300px,36vh);bottom:44px}
  .pd-cut::after{bottom:38px}
}

/* ---------- desktop (900px+) ---------- */
@media (min-width:900px){
  .wrap,.col-head,.pd,.ftr .in{max-width:1200px;padding-inline:32px}
  .tabs{padding-inline:max(32px,calc((100% - 1136px) / 2));top:64px}
  .proof .ph{max-width:none}
  .rte,.acc,.col-desc .rte{max-width:820px}
  .pd .pairs{max-width:640px}

  /* header: logo centred, sections as text links (shown from 1180px) */
  .hdr{height:64px;padding-inline:max(16px,calc((100% - 1168px) / 2))}
  .hdr .logo{height:34px}
  .dnav{display:none;align-items:center;gap:2px;margin-inline-start:10px}
  .dnav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:12px;font-size:15px;font-weight:700;border-radius:999px;white-space:nowrap}
  #packages,#faq{scroll-margin-top:72px}
  #pk{scroll-margin-top:140px}

  /* type */
  .h1{font-size:34px;line-height:48px}
  .h2{font-size:28px;line-height:40px}
  .sec{padding-top:64px}
  .sep{margin-top:64px}

  /* hero slider: copy on the start side, the products on the other half.
     --cx is the centre of the product group; .slide is the size container, so cqw works for its children */
  .slide{height:460px;--cx:31%}
  .slide .copy{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:max(32px,calc((100% - 1136px) / 2));width:min(460px,42%);padding:0}
  .slide .kick{font-size:28px;line-height:40px}
  .slide .big{font-size:68px;line-height:88px}
  .slide .h{font-size:46px;line-height:62px}
  .slide .p{font-size:19px;line-height:32px;margin-top:4px}
  .slide .go{margin-top:22px;height:56px;padding-inline:34px;font-size:18px}
  .s2 .pr b{font-size:34px;line-height:42px}
  .slide .stage{inset:0;height:auto;--u:min(1.4px,calc(100cqw / 980))}
  .s1 .stage{--u:min(1.32px,calc(100cqw / 1040))}
  @supports not (width:1cqw){.slide .stage,.s1 .stage{--u:1.2px}}
  .s1 .rays,.s1 .podium,.s2 .sun,.s2 .jar,.s3 .disc{left:var(--cx)}
  .s1 .podium{width:calc(420 * var(--u));border-radius:16px 16px 0 0}
  .s1 .back,.s1 .front,.s3 .stage .lineup{inset-inline:auto;left:calc(var(--cx) - 30%);width:60%}
  .s1 .medal{top:40px;right:auto;left:calc(var(--cx) + 262 * min(1.32px, 100cqw / 1040));width:104px;height:104px}
  @supports not (width:1cqw){.s1 .medal{left:calc(var(--cx) + 316px)}}
  .s1 .medal b{font-size:34px;line-height:38px}
  .slide .spk{right:auto !important;left:calc(var(--cx) + 200 * var(--u)) !important}
  .slide .spk + .spk{left:calc(var(--cx) - 220 * var(--u)) !important}
  .dots{height:52px}

  /* three categories */
  .cats{padding-top:32px}
  .cats .tiles{max-width:860px;gap:20px 28px}
  .tiles a{font-size:18px;line-height:26px;gap:12px}
  .tiles img{border-radius:20px}

  /* packages: the hair package beside a 2 x 2 grid */
  .pk-sec{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px 20px;align-items:stretch}
  .pk-sec .pk-head{grid-column:1 / -1;margin-bottom:0}
  .pk-sec .pkf{display:flex;flex-direction:column}
  .pk-sec .pkf-img{flex:1;min-height:300px}
  .pk-sec .pkf-img .lineup{zoom:1.45}
  .pk-sec .pkf-b h3{font-size:22px;line-height:32px}
  .pk-sec .pkf-b p{font-size:15px}
  .pk-sec .pk-grid{margin-top:0;gap:16px;align-content:stretch}
  .pk-sec .pkc{padding-bottom:16px}
  .pk-sec .pkc-img{height:168px}
  .pk-sec .pkc-img .lineup{zoom:1.25}
  .pk-sec .pkc-img .lineup:has(>img:nth-child(4)){zoom:1}
  .pk-sec .pkc-img .lineup:has(>img:nth-child(5)){zoom:.82}
  .pk-sec .pkf-img .lineup:has(>img:nth-child(5)){zoom:1.05}
  .pk-sec .pkc b{font-size:17px;line-height:26px;padding:12px 16px 0}
  .pk-sec .pkc .price{padding-inline:16px}
  /* category pages: one package spans the row, two sit side by side */
  .pk-cat .pkf + .pkf{margin-top:0}
  .pk-cat.pk-n1 .pkf{grid-column:1 / -1}
  .pk-cat.pk-n1 .pkf-img{min-height:260px}

  /* product grid: four across */
  .grid{column-gap:24px;row-gap:44px}
  .card .t{font-size:16px;line-height:24px}
  .card .tile{transition:box-shadow .2s}

  /* customer results: text beside the before/after pair */
  .proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:8px 56px;align-items:center}
  .proof .sec-t{grid-column:1;grid-row:1;align-self:end;margin-bottom:0}
  .proof .ph{grid-column:2;grid-row:1 / 4}
  .proof > p{grid-column:1;grid-row:2;align-self:start;margin-top:0;font-size:19px;line-height:32px}
  .proof > .go{grid-column:1;grid-row:3;align-self:start;justify-self:start;margin-top:4px}

  /* collection */
  .col-head{padding-top:28px}
  .tabs a{height:42px}

  /* product page: gallery beside the details. Both live in .pd-top, so the sticky gallery
     is held by that row only and lets go before the text sections below */
  .pd{padding-top:28px}
  .pd-top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:56px;align-items:start}
  .pd-top > .pd-gal{position:sticky;top:88px}
  .pd-top > .pd-b{padding:0}
  /* auto margins would shrink the text sections to their content: they keep the full width */
  .pd > .wrap{padding-inline:0;margin-inline:0;max-width:none}
  .pd-track{border-radius:20px}
  .pd-slide{height:min(560px,72vh)}
  .pd-cut img{height:min(360px,46vh);bottom:44px}
  .pd-cut::after{bottom:38px}
  .pd .crumb{margin-top:4px}
  .pd .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd .cta{grid-template-columns:1.4fr 1fr}
  .pd .trust{border-radius:16px;border:1px solid var(--line)}
  .pd .sticky{display:none}
  body.has-sticky{padding-bottom:0}

  /* footer */
  .ftr{margin-top:80px}
  .ftr .collage{height:120px}
  .ftr .in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px 64px;align-items:start;padding-block:44px 28px}
  .ftr .logo{height:40px}
  .ftr .links{margin-top:0;grid-template-columns:repeat(3,max-content);gap:0 48px}
  .ftr .contact{margin-top:0;min-width:280px}
  .ftr .soc{grid-column:3;justify-content:flex-start;margin-top:0}
  .ftr .copy{grid-column:1 / -1;margin-top:8px;padding-top:18px;border-top:1px solid #2b2b2b;text-align:start}
}

/* the text links in the header need the room of a wide screen; below that the menu icon carries them */
@media (min-width:1180px){
  .dnav{display:flex}
}

/* hover only where there is a real pointer (no stuck states after a tap on a large tablet) */
@media (min-width:900px) and (hover:hover){
  .btn-primary:hover{background:var(--orange-press)}
  .btn-dark:hover{background:#262626}
  .btn-outline:hover{background:var(--sand-soft)}
  .dnav a:hover{background:var(--sand-soft)}
  .card .cl:hover .tile{box-shadow:inset 0 0 0 1.5px #000}
  .card .cl:hover .t{text-decoration:underline;text-underline-offset:4px}
}

/* packages page + strip on wide screens */
@media (min-width:600px){
  .pk-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .pk-list .pkf{display:flex;flex-direction:column}
  .pk-list .pkf-img{flex:1;min-height:220px}
  .pk-banner{padding-inline:18px 14px;min-height:80px}
  .pk-banner-t b{font-size:18px}
}
@media (min-width:900px){
  .pk-list .pkf-img{min-height:280px}
  .pk-list .pkf-img .lineup{zoom:1.3}
  .pk-list .pkf-img .lineup:has(>img:nth-child(5)){zoom:1}
  .pk-list .pkf-b h3{font-size:22px;line-height:32px}
  .pk-banner-img{width:130px;height:70px}
  .pk-banner-img .lineup{zoom:1.2}
}
/* add-more popup on wide screens: the sheet is tall, so centre the content instead of leaving an empty middle */
.cod-more{justify-content:center;justify-content:safe center}
.cod-more .mo-foot{margin-top:18px}
.rel-row{grid-auto-columns:calc((100% - 20px) / 3)}