/*--------------------------------------------------------------
  Wyld Grey — fit & refinement layer

  The base design system sizes type and spacing in fixed pixels that only
  step down at 991px and below, and widens the container to 1544px on large
  screens. That leaves the 992–1599px range — most laptops — rendering at
  near-full desktop scale, which reads as oversized.

  This layer replaces the fixed steps with fluid `clamp()` values so type and
  rhythm scale continuously with the viewport, and caps the container at a
  more composed measure.

  TABLE OF CONTENTS
  1. Container measure
  2. Fluid type scale
  3. Fluid section rhythm
  4. Component fit
  5. Small-screen corrections
  6. Mobile header
  7. WooCommerce tables on small screens
  8. Small-screen component fit
--------------------------------------------------------------*/

/*--------------------------------------------------------------
  1. Container measure
--------------------------------------------------------------*/
.container {
  padding-left: 16px;
  padding-right: 16px;
}

.row {
  margin-left: -12px;
  margin-right: -12px;
}

.row > * {
  padding-left: 12px;
  padding-right: 12px;
}

/* Hold a composed measure instead of stretching to 1544px. */
@media (min-width: 1400px) {
  .container {
    max-width: 1296px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1320px;
  }
}

/*--------------------------------------------------------------
  2. Fluid type scale

  Each value is clamp(floor, preferred, ceiling). The preferred term is in
  vw so the size tracks the viewport smoothly between the two ends.
--------------------------------------------------------------*/
body,
html {
  font-size: 16px;
  line-height: 1.6em;
}

h1 {
  font-size: clamp(30px, 3.4vw, 46px);
}

h2 {
  font-size: clamp(26px, 2.8vw, 38px);
}

h3 {
  font-size: clamp(21px, 2vw, 27px);
}

h4 {
  font-size: clamp(18px, 1.5vw, 22px);
}

h5 {
  font-size: clamp(16px, 1.2vw, 18px);
}

h6 {
  font-size: 16px;
}

/* Utility sizes — these carry most of the page, so they matter most. */
.cs_fs_100 {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.1em;
}

.cs_fs_72 {
  font-size: clamp(29px, 3.4vw, 44px);
  line-height: 1.15em;
}

.cs_fs_70 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15em;
}

.cs_fs_64 {
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.18em;
}

.cs_fs_54 {
  font-size: clamp(23px, 2.4vw, 32px);
  line-height: 1.22em;
}

.cs_fs_36 {
  font-size: clamp(19px, 1.8vw, 25px);
  line-height: 1.3em;
}

.cs_fs_30 {
  font-size: clamp(18px, 1.6vw, 22px);
}

.cs_fs_24 {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.45em;
}

.cs_fs_20 {
  font-size: clamp(16px, 1.3vw, 18px);
}

.cs_fs_18 {
  font-size: clamp(15px, 1.15vw, 17px);
}

.cs_fs_16 {
  font-size: 15px;
}

.cs_fs_14 {
  font-size: 14px;
}

/*--------------------------------------------------------------
  3. Fluid section rhythm

  The spacer utilities are fixed heights. Scale the large ones so vertical
  gaps shrink with the viewport instead of holding 150px on a phone.
--------------------------------------------------------------*/
.cs_height_150 { height: clamp(40px, 5vw, 72px); }
.cs_height_140 { height: clamp(38px, 4.7vw, 68px); }
.cs_height_130 { height: clamp(36px, 4.4vw, 64px); }
.cs_height_122,
.cs_height_120 { height: clamp(34px, 4.1vw, 60px); }
.cs_height_115 { height: clamp(32px, 3.9vw, 57px); }
.cs_height_100 { height: clamp(30px, 3.5vw, 50px); }
.cs_height_80  { height: clamp(24px, 2.8vw, 40px); }
.cs_height_70  { height: clamp(22px, 2.5vw, 36px); }
.cs_height_60  { height: clamp(20px, 2.2vw, 32px); }
.cs_height_50  { height: clamp(17px, 1.9vw, 27px); }
.cs_height_40  { height: clamp(14px, 1.6vw, 23px); }
.cs_height_30  { height: clamp(11px, 1.3vw, 18px); }

/* The lg_ variants are the small-screen overrides — keep them tighter. */
@media (max-width: 991px) {
  .cs_height_lg_80 { height: 44px; }
  .cs_height_lg_75 { height: 42px; }
  .cs_height_lg_70 { height: 40px; }
  .cs_height_lg_65 { height: 38px; }
  .cs_height_lg_60 { height: 34px; }
  .cs_height_lg_50 { height: 30px; }
  .cs_height_lg_40 { height: 24px; }
  .cs_height_lg_30 { height: 20px; }
}

/*--------------------------------------------------------------
  4. Component fit
--------------------------------------------------------------*/

/* --- Single product: the gallery was the main cause of the scrolling ---

   A square gallery at a 1296px container renders ~624px tall, and with the
   thumbnail strip and share row the column ran to roughly 820px — a full
   viewport before any product detail. Portrait ratio plus a hard cap keeps
   the buy area visible without scrolling. */
.cs_single_product_thumb_item {
  aspect-ratio: 4 / 5;
  max-height: 380px;
  padding: 3%;
}

/* Photographs fill the frame; only alpha cut-outs get inset on the tile. */
.cs_single_product_thumb_item.is-photo,
.cs_single_product_nav_item.is-photo {
  padding: 0;
}

.cs_single_product_thumb_item.is-photo img,
.cs_single_product_nav_item.is-photo img {
  height: 100%;
  max-height: none;
  max-width: none;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.cs_single_product_nav_wrap {
  margin-top: 12px;
}

.cs_single_product_nav_item {
  max-height: 84px;
  padding: 6%;
}

.cs_share_wrap {
  align-items: center;
  display: flex;
  gap: 14px;
  margin-top: 18px;
}

.cs_share_label {
  margin-bottom: 0;
}

.cs_share_links a {
  height: 34px;
  width: 34px;
}

/* Summary column — tighten the stacked blocks. */
.wg-product-summary .product_title {
  margin-bottom: 10px;
}

.wg-product-summary .cs_product_meta_row {
  margin-bottom: 12px;
}

.wg-product-summary .price {
  margin-bottom: 14px;
}

.wg-product-summary .woocommerce-product-details__short-description {
  margin-bottom: 18px;
  padding-bottom: 18px;
}

.cs_spec_rows,
.cs_voucher_wrap {
  margin-top: 18px;
  padding-top: 18px;
}

.cs_spec_row {
  padding: 6px 0;
}

.cs_voucher_heading_1 {
  margin-bottom: 12px;
}

.cs_voucher_text {
  padding: 12px 16px 10px;
}

.cs_cupon_code_wrap {
  padding: 9px 16px;
}

.wg-product-summary form.cart {
  margin-bottom: 18px;
}

.wg-product-summary form.cart .single_add_to_cart_button,
.wg-product-summary form.cart .wg-buy-now {
  height: 48px;
  padding: 0 28px;
}

.wg-single-wishlist {
  height: 48px;
  width: 48px;
}

.wg-product-summary form.cart .quantity input[type="number"] {
  height: 46px;
  width: 70px;
}

/* Tabs and related products sit closer to the fold. */
.cs_tab_links.cs_style_1 li a {
  padding: 11px 22px;
}

.woocommerce-tabs {
  margin-top: 8px;
}

/* Hero — cap the height so it never eats a whole tall screen. */
.cs_hero.cs_style_1 {
  min-height: clamp(280px, 34vw, 430px);
}

.cs_hero_title {
  margin-bottom: 14px;
}

.cs_hero_subtitle {
  margin-bottom: 26px;
}

/* --- Header ---------------------------------------------------------

   Three stacked bars measured 196px at a 1440x836 viewport — 23% of the
   screen, held permanently because the header is sticky. Trimmed here, and
   collapsed further once scrolling starts. */
/* The base sets these with `.cs_site_header.cs_style_1 .cs_*_in` (0,3,0), so
   the selectors here have to match that weight to win — a bare class does
   nothing. `body` prefix keeps them ahead of the media-query variants too. */
body .cs_site_header.cs_style_1 .cs_top_header_in {
  align-items: center;
  display: flex;
  height: 36px;
  min-height: 0;
}

.cs_top_header {
  font-size: 13px;
  line-height: 1.2;
}

.cs_top_header_list > li {
  line-height: 1.2;
}

body .cs_site_header.cs_style_1 .cs_main_header_in {
  align-items: center;
  display: flex;
  height: 68px;
  min-height: 0;
  padding-right: 0;
}

body .cs_site_header.cs_style_1 .cs_bottom_header_in {
  align-items: center;
  display: flex;
  height: 48px;
  min-height: 0;
}

/* Children that were setting the real height. */
.cs_header_search_form,
.cs_header_search_form_wrap {
  margin-bottom: 0;
}

.cs_site_header .cs_nav_list > li > a {
  line-height: 1.2;
}

.cs_header_credential_btns,
.cs_cart_btn {
  line-height: 1.2;
}

.cs_site_header .cs_site_branding img {
  max-height: 38px;
  width: auto;
}

.cs_header_number_wrap {
  line-height: 1.15;
}

.cs_site_header .cs_header_number {
  font-size: 17px;
  line-height: 1.2;
}

.cs_site_header .cs_header_number_text {
  font-size: 11px;
}

.cs_header_search_field {
  height: 42px;
}

.cs_site_header .cs_nav_list > li > a {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Scrolled state. The rules above now out-specify the base's own collapse,
   so the announcement bar has to be re-collapsed here explicitly. */
body .cs_sticky_header.cs_sticky_active .cs_top_header_in {
  height: 0;
  overflow: hidden;
}

body .cs_sticky_header.cs_sticky_active .cs_main_header_in {
  height: 56px;
}

body .cs_sticky_header.cs_sticky_active .cs_bottom_header_in {
  height: 44px;
}

body .cs_sticky_header.cs_sticky_active .cs_header_search_field {
  height: 38px;
}

/* The spacer that reserves room for the fixed header is measured and set in
   JS (see wyldgrey.js). These are only the pre-script fallbacks — a hardcoded
   value drifts the moment the header's contents change. */
.cs_site_header_height_1 {
  height: 158px;
}

@media (max-width: 991px) {
  .cs_site_header_height_1 {
    height: 110px;
  }
}

/* Section headings sit closer to their content. */
.cs_section_heading.cs_style_1 {
  align-items: center;
}

/* Promo banners were tall enough to push content below the fold. */
.cs_banner.cs_style_1 {
  min-height: clamp(180px, 20vw, 260px);
}

.cs_banner.cs_style_1 .cs_banner_img {
  max-height: 100%;
  object-fit: contain;
}

/* Category cards. */
.cs_category.cs_style_1 {
  min-height: clamp(250px, 26vw, 340px);
}

/* Newsletter panel. */
.cs_newsletter.cs_style_1,
.cs_newsletter.cs_style_2 {
  min-height: clamp(210px, 21vw, 290px);
}

/* Page header block — measured 190px, a further 23% of the viewport on top
   of the sticky header. */
.cs_breadcamp_wrap.cs_style_1 {
  min-height: clamp(96px, 9vw, 130px);
  padding: clamp(18px, 2.2vw, 28px);
}

.cs_breadcamp_title {
  margin-bottom: 6px;
}

.breadcrumb {
  font-size: 14px;
}

/* Footer rhythm. */
.cs_footer_row {
  gap: clamp(24px, 3vw, 48px);
}

/*--------------------------------------------------------------
  5. Small-screen corrections
--------------------------------------------------------------*/
@media (max-width: 1199px) {
  /* Five-across feature row is too tight below this width. */
  .cs_grid_5_column {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .cs_hero.cs_style_1 {
    min-height: 340px;
    padding: 32px;
  }

  .cs_hero_mini_img {
    display: none;
  }

  .cs_footer_row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs_bottom_footer {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .cs_grid_5_column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs_section_heading.cs_style_1 {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .cs_breadcamp_wrap.cs_style_1 {
    min-height: 150px;
    text-align: center;
  }

  .breadcrumb {
    justify-content: center;
  }

  /* Single product: gallery above summary, full width. */
  .wg-single-product-top > [class*="col-"] {
    width: 100%;
  }

  .cs_voucher_cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs_spec_rows,
  .cs_voucher_wrap {
    margin-top: 20px;
    padding-top: 20px;
  }
}

@media (max-width: 575px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cs_footer_row {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs_grid_5_column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Add-to-cart row stacks rather than squeezing three controls in. */
  .wg-product-summary form.cart {
    gap: 10px;
  }

  .wg-product-summary form.cart .single_add_to_cart_button,
  .wg-product-summary form.cart .wg-buy-now {
    flex: 1 1 100%;
    padding: 0 20px;
  }
}

/* Nothing should ever push the page sideways. */
html,
body {
  overflow-x: hidden;
}

img,
svg,
video,
table {
  max-width: 100%;
}


/*--------------------------------------------------------------
  6. Mobile header

  The base design reserves room for the absolutely positioned menu toggle
  with a padding-right on the header row; the shop header overrides that
  padding away, so the toggle lands on top of the cart button. Give the
  toggle its own lane back and keep the cart count inside the viewport.
--------------------------------------------------------------*/
@media (max-width: 991px) {
  /* Matches the `body`-prefixed rule in section 4 that zeroes this padding
     on desktop, so the reservation actually wins here. */
  body .cs_site_header.cs_style_1 .cs_main_header_in {
    padding-right: 50px;
  }

  body .cs_site_header.cs_style_1 .cs_menu_toggle {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* The badge sits on the button's top-right corner, so the button needs a
     little clearance of its own to keep the count off the screen edge. */
  .cs_cart_label {
    right: -4px;
  }

  /* Header icons are the primary navigation on a phone — give them a
     finger-sized target without changing how they look. */
  .cs_mobile_search_toggle,
  .cs_header_credential_btns > a,
  .cs_cart_btn {
    min-height: 40px;
    min-width: 40px;
    align-items: center;
    justify-content: center;
  }
}

/*--------------------------------------------------------------
  7. WooCommerce tables on small screens

  WooCommerce ships this behaviour in woocommerce-smallscreen.css, which the
  theme dequeues in favour of its own design system. Without a replacement
  the cart table keeps five desktop columns and runs ~360px past the
  viewport, where `overflow-x: hidden` silently clips it.
--------------------------------------------------------------*/
@media (max-width: 767px) {
  table.shop_table_responsive thead {
    display: none;
  }

  table.shop_table_responsive,
  table.shop_table_responsive tbody,
  table.shop_table_responsive tr,
  table.shop_table_responsive td {
    display: block;
    width: 100%;
  }

  /* Separate borders, or the collapsed table rules draw a stray line across
     the top of every card. */
  table.shop_table_responsive {
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  table.shop_table_responsive tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 6px 14px;
    position: relative;
  }

  table.shop_table_responsive td {
    border: 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    text-align: right;
  }

  table.shop_table_responsive tr td:last-child {
    border-bottom: 0;
  }

  /* The header cells are gone, so each row carries its own label. */
  table.shop_table_responsive td::before {
    content: attr(data-title);
    color: var(--primary);
    font-weight: 600;
    text-align: left;
  }

  table.shop_table_responsive td.product-thumbnail {
    justify-content: center;
    padding-top: 16px;
  }

  table.shop_table_responsive td.product-thumbnail::before {
    display: none;
  }

  table.shop_table_responsive td.product-thumbnail img {
    max-width: 110px;
  }

  /* Remove is a corner action on a card, not a labelled row. */
  table.shop_table_responsive td.product-remove {
    border-bottom: 0;
    justify-content: flex-end;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px;
    width: auto;
  }

  table.shop_table_responsive td.product-remove::before {
    display: none;
  }

  table.shop_table_responsive td.product-name {
    text-align: left;
  }

  table.shop_table_responsive td.product-quantity .quantity {
    margin-left: auto;
  }

  /* Coupon input and both actions each take a full row instead of sharing
     one line, where the field collapsed to about 40px. */
  .woocommerce table.shop_table td.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0 6px;
  }

  .woocommerce table.shop_table td.actions::before {
    display: none;
  }

  .woocommerce table.shop_table td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
  }

  .woocommerce table.shop_table td.actions .coupon input#coupon_code,
  .woocommerce table.shop_table td.actions .coupon .button,
  .woocommerce table.shop_table td.actions > .button {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Cart totals and the checkout review read as label/value pairs. */
  .cart_totals table.shop_table th,
  .cart_totals table.shop_table td,
  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td {
    padding: 12px 8px;
  }

  .woocommerce-checkout-review-order-table {
    table-layout: fixed;
  }

  .woocommerce-checkout-review-order-table th,
  .woocommerce-checkout-review-order-table td {
    word-break: break-word;
  }

  /* An even split left product names wrapping a word per line; the label
     column only ever holds one short word. */
  .woocommerce-checkout-review-order-table th:first-child,
  .woocommerce-checkout-review-order-table td:first-child,
  .cart_totals table.shop_table th {
    width: 40%;
  }

  .woocommerce-checkout-review-order-table tbody td:first-child {
    width: 60%;
  }

  .cart_totals table.shop_table td,
  .woocommerce-checkout-review-order-table td {
    line-height: 1.45;
  }
}

/*--------------------------------------------------------------
  8. Small-screen component fit
--------------------------------------------------------------*/
/* Grid cells are already equal height, but the card inside them is not, so a
   two-line title pushed that card's buttons a row lower than its neighbour's.
   Stretch the card and pin its action row to the bottom. */
@media (max-width: 991px) {
  ul.products li.product {
    display: flex;
  }

  ul.products li.product > .wg-product-card {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .wg-product-card .product-info {
    flex: 1 1 auto;
  }

  .wg-product-card .product-action-bottom {
    margin-top: auto;
  }
}

@media (max-width: 767px) {
  /* Tabs wrap to their own lines rather than scrolling out of reach. */
  .cs_product_tabs .cs_tab_links {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cs_product_tabs .cs_tab_links li a {
    display: block;
    padding: 10px 16px;
  }

  /* Review form controls stay comfortably tappable. */
  #reviews .comment-form-rating p.stars a::before {
    font-size: 22px;
  }

  #reviews .comment-form input[type="text"],
  #reviews .comment-form input[type="email"],
  #reviews .comment-form textarea {
    width: 100%;
  }
}