/* ==========================================================================
   SkyCorPeps — desktop scale-up layer
   --------------------------------------------------------------------------
   Why this file exists
   site.css was written mobile-first: content shells cap at 1100px, product
   cards sit four-across inside that 1100px, and the type scale stays at phone
   sizes. on a 1440-1920px monitor that reads as a phone layout stretched
   across the screen (measured: 1100px of content on a 1920px canvas, body
   14px, product-card titles 14.7px, product images 258px wide, desktop logo
   48px tall, 330px of header chrome).

   What this file does
   Widens the shells, grows the grids with the viewport, lifts the type scale,
   re-flows the dark wholesale block into two columns on wide screens and
   restores desktop-sized header branding.

   Golden rule
   EVERY rule here lives inside a min-width media query. The phone and tablet
   layout (<=991px) that already works is untouched by construction. Nothing
   in this file applies below 992px.

   Loaded last: enqueued at wp_enqueue_scripts priority 2100, after site.css,
   hubs.css, tools.css and the Porto theme styles, so equal-specificity
   declarations below win on source order. !important is used only where we
   fight Porto's own compiled/inline CSS (theme container, header rows,
   single-product gallery).
   ========================================================================== */

/* ==========================================================================
   1. TABLET LANDSCAPE AND UP (>=992px)
   ========================================================================== */
@media (min-width: 992px) {

  :root {
    /* one shell token for every plugin-rendered section */
    --sc-shell: clamp(1100px, 92vw, 1560px);
    --sc-shell-prose: clamp(860px, 72vw, 1180px);
    --sc-shell-tool: clamp(960px, 78vw, 1320px);
    --sc-pad-x: clamp(1rem, 2.4vw, 2.25rem);
    --sc-section-y: clamp(2.5rem, 3.2vw, 4rem);
  }

  /* ---------- shells ---------- */
  .skycorp-cats,
  .skycorp-featured,
  .skycorp-wholesale,
  .skycorp-desk-cta,
  .skycorp-trust--compact,
  .skycorp-desk-grid {
    max-width: var(--sc-shell);
  }

  .skycorp-calc__grid {
    max-width: var(--sc-shell-tool);
  }

  .skycorp-tool__panel {
    max-width: var(--sc-shell-tool);
  }

  .skycorp-tool__hero h1,
  .skycorp-tool__hero p,
  .skycorp-tool__eyebrow {
    max-width: var(--sc-shell-tool);
  }

  /* ---------- section rhythm / type ---------- */
  .skycorp-cats {
    padding: var(--sc-section-y) var(--sc-pad-x) 1.75rem;
  }

  .skycorp-featured {
    padding: 2rem var(--sc-pad-x) 2.5rem;
  }

  .skycorp-wholesale {
    padding: 1rem var(--sc-pad-x);
    margin-bottom: 2.75rem;
  }

  .skycorp-desk-cta {
    padding: 0 var(--sc-pad-x);
    margin-bottom: 3.5rem;
  }

  .skycorp-trust--compact {
    margin-top: 1.25rem;
  }

  .skycorp-cats h2,
  .skycorp-featured h2 {
    font-size: clamp(1.6rem, 1.9vw, 2.25rem);
  }

  .skycorp-cats .skycorp-lead,
  .skycorp-featured .skycorp-lead {
    max-width: 46rem;
    font-size: 1.08rem;
  }

  .skycorp-wholesale h2 {
    font-size: clamp(1.6rem, 1.9vw, 2.2rem);
  }

  .skycorp-wholesale .skycorp-lead {
    font-size: 1.05rem;
  }

  .skycorp-wholesale__eyebrow {
    font-size: 0.82rem;
  }

  .skycorp-wholesale__steps {
    font-size: 1.02rem;
  }

  .skycorp-wholesale__steps li {
    margin-bottom: 0.85rem;
  }

  .skycorp-desk-cta h2 {
    font-size: 1.65rem;
  }

  .skycorp-desk-cta p {
    max-width: 44rem;
    font-size: 1.03rem;
  }

  .skycorp-btn {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
  }

  .skycorp-ruo-line {
    font-size: 13px;
  }

  .skycorp-disclaimer-bar {
    font-size: 12.5px;
    padding: 0.55rem 1rem;
  }

  .skycorp-disclaimer-inline {
    font-size: 14px;
    padding: 0.9rem 1.1rem;
  }

  /* ---------- category mosaic ---------- */
  .skycorp-cats__grid {
    gap: 1rem;
  }

  .skycorp-cat-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 1.05rem;
    padding: 1rem 1.1rem;
  }

  .skycorp-cat-card__media {
    width: 88px;
    height: 88px;
  }

  .skycorp-cat-card__icon {
    width: 42px;
    height: 42px;
  }

  .skycorp-cat-card h3 {
    font-size: 1.14rem;
  }

  .skycorp-cat-card__meta {
    font-size: 0.9rem;
  }

  /* ---------- featured product grid ---------- */
  /* three across from 992px (four tiny cards was the old desktop behaviour) */
  .skycorp-featured__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
  }

  .skycorp-product-card h3 {
    font-size: 1.04rem;
    margin: 0.9rem 1rem 0.35rem;
  }

  /* The featured artworks are 3:2 (600x400) with a baked-in "BUY TWO, GET 1
     FREE" banner, which a square 1:1 frame clips at both sides. Match the frame
     to the artwork so the promotional strip is fully visible. */
  .skycorp-product-card img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .skycorp-product-card__price {
    font-size: 1.18rem;
    margin: 0 1rem;
  }

  .skycorp-product-card__cta {
    font-size: 0.94rem;
    padding: 0.7rem 0.9rem;
    margin: 0.9rem 1rem 1.05rem;
  }

  /* ---------- trust strip ---------- */
  .skycorp-trust--compact .skycorp-trust__item {
    padding: 1.5rem 1.6rem;
  }

  .skycorp-trust--compact h3 {
    font-size: 1.12rem;
  }

  .skycorp-trust--compact p {
    font-size: 0.97rem;
  }

  /* ---------- dark wholesale block ---------- */
  .skycorp-wholesale__inner {
    padding: 2.75rem var(--sc-pad-x);
  }

  .skycorp-wholesale__steps {
    max-width: 46rem;
  }

  /* ---------- lab desk CTA + hub cards ---------- */
  .skycorp-desk-cta__inner {
    padding: 2rem clamp(1.5rem, 2vw, 2.5rem);
  }

  .skycorp-desk-grid {
    gap: 1.15rem;
  }

  .skycorp-desk-card {
    padding: 1.6rem;
  }

  .skycorp-desk-card h2 {
    font-size: 1.3rem;
  }

  .skycorp-desk-card p {
    font-size: 1rem;
  }

  /* ---------- hero video ---------- */
  .skycorp-hero-video {
    min-height: min(74vh, 780px);
  }

  .skycorp-hero-video__content {
    /* width:100% is required: the hero is a grid, and `margin:0 auto` alone
       makes this a shrink-to-fit item, so the text block was 859px wide and
       inset from the section headings instead of aligned with them. */
    width: 100%;
    max-width: var(--sc-shell);
    padding: 4.5rem var(--sc-pad-x) 3.5rem;
  }

  .skycorp-hero-video__content h1 {
    font-size: clamp(2.4rem, 3.1vw, 3.6rem);
    max-width: 20ch;
  }

  .skycorp-hero-video__sub {
    font-size: 1.14rem;
    max-width: 42rem;
  }

  .skycorp-hero-video__badge {
    font-size: 0.85rem;
  }

  .skycorp-hero-video__actions {
    gap: 0.75rem;
  }

  /* ---------- content hubs (learn / provinces / research areas) ---------- */
  .skycorp-hub__panel {
    max-width: var(--sc-shell-prose);
  }

  .skycorp-hub__tagline {
    max-width: 46rem;
    font-size: 1.08rem;
  }

  .skycorp-hub__block h2 {
    font-size: 1.35rem;
  }

  .skycorp-hub__card p,
  .skycorp-hub__note p {
    font-size: 0.98rem;
  }

  .skycorp-hub__card {
    padding: 1.1rem 1.2rem;
  }

  .skycorp-hub__product-name {
    font-size: 0.95rem;
  }

  .skycorp-hub__product-price {
    font-size: 0.95rem;
  }

  .skycorp-hub__tile {
    padding: 1.45rem 1.5rem;
  }

  /* ---------- tools ---------- */
  .skycorp-tool__hero {
    padding: 3.25rem var(--sc-pad-x) 2.75rem;
  }

  .skycorp-tool__hero h1 {
    font-size: clamp(1.9rem, 2.3vw, 2.7rem);
  }

  .skycorp-tool__hero p {
    font-size: 1.06rem;
  }

  .skycorp-tool__panel {
    padding: 1.85rem;
  }

  .skycorp-calc__grid {
    gap: 1.35rem;
  }

  .skycorp-calc__form,
  .skycorp-calc__results {
    padding: 1.6rem;
  }

  .skycorp-calc__form label {
    font-size: 0.97rem;
  }

  .skycorp-table th,
  .skycorp-table td {
    font-size: 1rem;
    padding: 0.8rem 0.6rem;
  }

  .skycorp-finder__goals {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.8rem;
  }

  .skycorp-finder__card {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    gap: 1rem;
    padding: 0.9rem;
  }

  .skycorp-finder__card img {
    width: 88px;
    height: 88px;
  }

  /* ---------- age gate ---------- */
  .skycorp-age-gate__panel {
    width: min(100%, 620px);
    padding: 2.5rem 2.25rem;
  }

  /* ---------- header: desktop-sized branding, not phone-sized ---------- */
  #header .logo img {
    max-height: 58px !important;
    width: auto !important;
  }

  /* The logo widget carries 43px/32px of Elementor padding: on desktop that is
     75px of dead space driving a 170px header row. Trim it. */
  #header .elementor-element-2b54e82 {
    padding: 4px 0 !important;
  }

  #header .elementor-element-b6f76fb .e-con-inner {
    padding-top: 0.95rem !important;
    padding-bottom: 0.95rem !important;
    gap: 1rem;
  }

  #header .elementor-element-d5f0939 .e-con-inner,
  #header .header-main .e-con-inner {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }

  #header .searchform-popup {
    max-width: clamp(440px, 34vw, 760px);
  }

  #header .searchform input,
  #header .searchform .text input {
    font-size: 15px !important;
  }

  /* Nav must be ONE line on desktop. Porto gives each item 39px/26px of side
     padding, so eight emoji items need 1279px inside a 1100px box and wrap to
     a second row (the "Returns & Refunds" orphan). Trim the padding and let
     the menu box use the whole row. */
  #header .elementor-element-0217d39 {
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
  }

  #header .main-menu {
    width: auto !important;
    max-width: none !important;
  }

  #header .main-menu > li > a,
  #header .sidebar-menu > li > a,
  #header .secondary-menu > li > a {
    font-size: 14px !important;
    padding: 0.8rem 0.55rem !important;
    white-space: nowrap;
  }

  /* Reclaim the last few pixels the nav needs to stay on one line at 1280px:
     trim the departments button and the trailing widget. */
  #header .elementor-element-fa7d0c3 .menu-title,
  #header .elementor-element-fa7d0c3 .show-hover > .menu-title {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #header .elementor-element-b52ea89 {
    padding-right: 0 !important;
    margin-left: auto !important;
  }

  /* If the menu does wrap (below ~1240px, where eight items cannot fit on one
     line), centre the wrapped rows instead of leaving an orphan at the left. */
  #header .main-menu {
    justify-content: center;
  }

  #header .menu-title,
  #header .show-hover > .menu-title {
    font-size: 14px !important;
    padding: 0.8rem 1.25rem !important;
  }

  #header .porto-sicon-box .porto-sicon-title {
    font-size: 14px !important;
  }

  #header .porto-sicon-box p {
    font-size: 12.5px !important;
  }

  #header .porto-sicon-box .porto-icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  #header .mini-cart .cart-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  #header .mini-cart .cart-subtotal {
    font-size: 13px;
  }

  /* ---------- WooCommerce surfaces ---------- */
  .woocommerce-breadcrumb,
  .breadcrumbs {
    font-size: 12.5px;
  }

  /* Porto wraps the gallery in .product-layout-image (40%) plus
     .product-summary-wrap (57%). Those wrappers already scale with the wider
     container, and setting a % width on them (or on the gallery) SHRINKS the
     photo, so only claim the full width of the gallery's own parent. */
  .single-product div.product .woocommerce-product-gallery {
    width: 100% !important;
  }

  .single-product div.product .product_title {
    font-size: clamp(1.75rem, 1.9vw, 2.35rem);
  }

  .single-product div.product p.price,
  .single-product div.product span.price {
    font-size: 2.05rem;
  }

  .single-product div.product .single_add_to_cart_button {
    min-height: 3.4rem;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    font-size: 1.05rem;
  }

  .single-product div.product .woocommerce-tabs .panel p,
  .single-product div.product .woocommerce-product-details__short-description p {
    font-size: 1rem;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  .woocommerce ul.products li.product h3,
  .woocommerce ul.products li.product h2 {
    font-size: 1.05rem;
  }

  .woocommerce ul.products li.product .price {
    font-size: 1.15rem;
  }

  /* ---------- footer ---------- */
  #footer .widget,
  #footer p {
    font-size: 14px;
  }
}

/* ==========================================================================
   2. TABLET (700-991px) — landscape/hybrid tier, phones stay untouched
   site.css collapses the category mosaic to a single column at <=900px, which
   at 768-991px turns nine tiles into a very long stacked list.
   ========================================================================== */
@media (min-width: 700px) and (max-width: 991px) {
  .skycorp-cats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }

  .skycorp-cat-card {
    grid-template-columns: 80px minmax(0, 1fr);
  }

  .skycorp-cat-card__media {
    width: 80px;
    height: 80px;
  }

  .skycorp-cat-card__icon {
    width: 38px;
    height: 38px;
  }
}

/* ==========================================================================
   3. LAPTOP AND UP (>=1200px)
   ========================================================================== */
@media (min-width: 1200px) {

  /* ---------- featured grid back to four across, but on a wider shell ---------- */
  .skycorp-featured__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* ---------- dark wholesale block: two real columns ---------- */
  .skycorp-wholesale__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
    padding: 3.25rem clamp(2rem, 3vw, 3.25rem);
  }

  .skycorp-wholesale__eyebrow {
    grid-column: 1;
    grid-row: 1;
  }

  .skycorp-wholesale__inner > h2 {
    grid-column: 1;
    grid-row: 2;
  }

  .skycorp-wholesale .skycorp-lead {
    grid-column: 1;
    grid-row: 3;
    margin-bottom: 0;
  }

  .skycorp-wholesale__steps {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0.15rem;
    max-width: none;
  }

  .skycorp-wholesale__actions {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 1.9rem;
  }

  /* ---------- trust strip breathing room ---------- */
  .skycorp-trust--compact .skycorp-trust__item {
    padding: 1.7rem 1.9rem;
  }

  /* ---------- hub panels ---------- */
  .skycorp-hub__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .skycorp-hub__products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* ---------- slightly larger base type on wide screens ---------- */
  body {
    font-size: 15px;
  }
}

/* ==========================================================================
   4. WIDE DESKTOP (>=1440px)
   ========================================================================== */
@media (min-width: 1440px) {

  /* Header rows are hard-capped at 1420px by Elementor; let them line up with
     the 1560px content shell so the nav fits on one line at 14.5px. */
  #header .e-con-inner {
    max-width: min(1560px, 94vw) !important;
  }

  .skycorp-cats__grid {
    gap: 1.15rem;
  }

  .skycorp-cat-card {
    grid-template-columns: 96px minmax(0, 1fr);
    padding: 1.15rem 1.25rem;
  }

  .skycorp-cat-card__media {
    width: 96px;
    height: 96px;
  }

  .skycorp-featured__grid {
    gap: 1.35rem;
  }

  .skycorp-product-card h3 {
    font-size: 1.08rem;
  }

  .skycorp-product-card__price {
    font-size: 1.25rem;
  }

  .skycorp-hero-video__content h1 {
    font-size: clamp(2.8rem, 3vw, 3.8rem);
  }

  .skycorp-hub__panel {
    max-width: 1240px;
  }

  /* NOTE: do not force more columns on .skycorp-hub__grid here. Archive pages
     put it in a column beside a 390px sidebar (about 1100px of room), so four
     columns would make the tiles SMALLER than the three-column default. */
}

/* ==========================================================================
   5. FULL-HD AND UP (>=1600px) — theme container finally uses the screen
   ========================================================================== */
@media (min-width: 1600px) {

  .container {
    max-width: 1560px !important;
  }

  /* At full HD there is room for the more generous nav item spacing again. */
  #header .main-menu > li > a,
  #header .sidebar-menu > li > a,
  #header .secondary-menu > li > a {
    font-size: 14.5px !important;
    padding: 0.85rem 1.15rem !important;
  }

  #header .main-menu {
    justify-content: flex-start;
  }

  /* The single-product page is an Elementor template, so it is not covered by
     the .container rule above: its rows are capped at 1420px. Match the rest of
     the site (1560px) and grow the two product columns with it. */
  .single-product .e-con-boxed > .e-con-inner {
    max-width: 1560px !important;
  }

  .single-product .elementor-element-2c55845 {
    width: 46% !important;
  }

  .single-product .elementor-element-0a45f4a {
    width: 52% !important;
  }

  .container-fluid {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }

  /* Footer is an Elementor template too (1420px rows) — match the 1560 shell. */
  #footer .e-con-boxed > .e-con-inner {
    max-width: 1560px !important;
  }

  body {
    font-size: 16px;
  }

  /* On the biggest screens the category tiles get a larger icon so they read as
     a deliberate mosaic instead of three wide, half-empty rows. */
  .skycorp-cat-card {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 1.4rem;
    padding: 1.35rem 1.5rem;
    min-height: 150px;
    align-items: center;
  }

  .skycorp-cat-card__media {
    width: 120px;
    height: 120px;
  }

  .skycorp-cat-card__icon {
    width: 56px;
    height: 56px;
  }

  .skycorp-cat-card h3 {
    font-size: 1.25rem;
  }

  .skycorp-cat-card__meta {
    font-size: 0.95rem;
  }

  #header .logo img {
    max-height: 62px !important;
  }

  .skycorp-hero-video {
    min-height: min(78vh, 840px);
  }

  .skycorp-featured__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}