/* Graphite & Signal: corrections found while rendering the real templates. */

/* The brand widget renders as .wc-brand-list-layered-nav-product_brand,
   not the class the base sheet guessed. */
.wc-brand-list-layered-nav-product_brand{list-style:none;margin:0;padding:0;}
.wc-brand-list-layered-nav-product_brand li{margin:0;padding:3px 0;}
.wc-brand-list-layered-nav-product_brand a{
  font-family:Manrope,sans-serif; font-size:14px;
  color:var(--tya-muted); text-decoration:none;
}
.wc-brand-list-layered-nav-product_brand a:hover{color:var(--tya-ink);}
.wc-brand-list-layered-nav-product_brand .count{color:#8E9DB0;font-size:12px;}
.wc-brand-list-layered-nav-product_brand li.chosen a{color:var(--tya-ink);font-weight:700;}

/* Product tile links inherited the theme's pink. */
ul.products li.product a,
ul.products li.product a:hover,
ul.products li.product .woocommerce-loop-product__title{color:var(--tya-ink);text-decoration:none;}

/* Keep the wordmark from colliding with the menu. */
.elementor-widget-heading .elementor-heading-title a{color:inherit;text-decoration:none;}

/* Woo default link colour elsewhere in the storefront. */
.woocommerce a:not(.button):not(.elementor-button){color:var(--tya-ink);}
.woocommerce a:not(.button):not(.elementor-button):hover{color:var(--tya-ink);}

/* Long facet lists (flavour runs to 327 terms) get their own scroll area
   rather than pushing the product grid down the page. */
.woocommerce-widget-layered-nav-list,
.wc-brand-list-layered-nav-product_brand,
.widget_product_categories .product-categories{
  max-height:260px; overflow-y:auto; padding-right:6px;
}
.woocommerce-widget-layered-nav-list::-webkit-scrollbar,
.wc-brand-list-layered-nav-product_brand::-webkit-scrollbar,
.widget_product_categories .product-categories::-webkit-scrollbar{width:6px;}
.woocommerce-widget-layered-nav-list::-webkit-scrollbar-thumb,
.wc-brand-list-layered-nav-product_brand::-webkit-scrollbar-thumb,
.widget_product_categories .product-categories::-webkit-scrollbar-thumb{
  background:var(--tya-line); border-radius:999px;
}
.woocommerce-widget-layered-nav-list::-webkit-scrollbar-track,
.wc-brand-list-layered-nav-product_brand::-webkit-scrollbar-track{background:transparent;}

/* Variation dropdowns hold long flavour names; keep them readable. */
.woocommerce div.product form.cart .variations td{display:block;width:100%;}
.woocommerce div.product form.cart .variations select{max-width:100%;}
.woocommerce div.product form.cart .reset_variations{
  font-family:Manrope,sans-serif;font-size:13px;color:var(--tya-muted);
}

/* ---------- Single product: add-to-cart and meta ---------- */
/* The variation form's button kept Woo's default purple, including its
   disabled state before a variation is chosen. */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button{
  background:var(--tya-accent)!important; color:var(--tya-ink)!important;
  border:0; border-radius:6px; font-family:Manrope,sans-serif; font-weight:700;
  font-size:16px; padding:16px 30px; text-transform:none; letter-spacing:0;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover{background:#0EA5C2!important;}
.woocommerce div.product form.cart .button.disabled,
.woocommerce div.product .single_add_to_cart_button.disabled{
  background:var(--tya-line)!important; color:#8E9DB0!important; cursor:not-allowed;
}
.woocommerce div.product form.cart{background:transparent;padding:0;}

/* Meta ran together as one string. */
.product_meta{
  font-family:Manrope,sans-serif; font-size:13px; color:var(--tya-muted);
  border-top:1px solid var(--tya-line); padding-top:16px; margin-top:8px;
}
.product_meta > span{display:block;margin-bottom:6px;}
.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as{color:var(--tya-muted);}
.product_meta strong,
.product_meta .sku{color:var(--tya-ink);font-weight:700;}

/* Variation price block */
.woocommerce div.product .woocommerce-variation-price .price{
  font-family:Manrope,sans-serif;font-weight:700;color:var(--tya-ink);
}

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

/* The dropdown was a plain white rectangle with no separation from the bone
   page. The design calls for one 6px radius and hairline separation. */
.elementor-nav-menu--dropdown,
.elementor-nav-menu--main .sub-menu{
  border:1px solid var(--tya-line)!important;
  border-radius:6px!important;
  box-shadow:0 6px 20px rgba(14,43,79,.06)!important;
  overflow:hidden;
  padding:4px 0!important;
}
.elementor-nav-menu--main .sub-menu a{border-radius:0;}
.elementor-nav-menu--main .sub-menu a:hover{background:var(--tya-bg);}

/* Burger measured 33x33, under the 44x44 minimum touch target, and sat 15px
   above the wordmark and cart. */
/* No display rule here: Elementor hides the toggle on desktop itself, and
   forcing display:flex made the burger appear beside the desktop menu. */
.elementor-menu-toggle{
  min-width:44px; min-height:44px;
  align-items:center; justify-content:center;
  border-radius:6px; background:transparent!important; color:var(--tya-ink)!important;
}
.elementor-menu-toggle:hover{background:var(--tya-bg)!important;}
.elementor-menu-toggle svg{width:26px;height:26px;}

/* Cart toggle: match the burger's height so the row centres cleanly. */
.elementor-menu-cart__toggle .elementor-button{
  min-height:44px; display:flex; align-items:center; gap:8px;
  border:1px solid var(--tya-line); border-radius:6px;
  font-family:Manrope,sans-serif; font-weight:700; color:var(--tya-ink);
}
.elementor-menu-cart__toggle .elementor-button:hover{border-color:var(--tya-ink);}

/* Mobile: group burger and cart on the right, keep one row. */
@media (max-width:767px){
  .elementor-location-header .elementor-widget-heading .elementor-heading-title{
    white-space:nowrap;
  }
  .elementor-menu-cart__toggle .elementor-button{padding:8px 10px;font-size:14px;}
  .elementor-location-header .e-con-inner{align-items:center;}
}

/* Mobile menu panel picks up the same treatment. */
.elementor-nav-menu--dropdown.elementor-nav-menu__container{
  margin-top:8px; background:var(--tya-surface)!important;
}
.elementor-nav-menu--dropdown a.elementor-item,
.elementor-nav-menu--dropdown a.elementor-sub-item{
  font-family:Manrope,sans-serif; color:var(--tya-ink)!important; font-size:15px;
}

/* Elementor pinned all three header columns to an explicit equal-thirds width
   on mobile, which stranded the burger in the middle of the bar. Structural
   selectors are used rather than element ids so this survives a re-save. */
@media (max-width:767px){
  .elementor-location-header > .e-con:nth-of-type(2) > .e-con-inner{
    display:flex; flex-wrap:nowrap; align-items:center; gap:4px;
  }
  /* Wordmark takes the slack. */
  .elementor-location-header > .e-con:nth-of-type(2) > .e-con-inner > .e-con:nth-of-type(1){
    flex:1 1 auto!important; width:auto!important; min-width:0;
    justify-content:flex-start!important;
  }
  /* Burger and cart sit together on the right. */
  .elementor-location-header > .e-con:nth-of-type(2) > .e-con-inner > .e-con:nth-of-type(2),
  .elementor-location-header > .e-con:nth-of-type(2) > .e-con-inner > .e-con:nth-of-type(3){
    flex:0 0 auto!important; width:auto!important;
    justify-content:flex-end!important;
  }
  .elementor-location-header > .e-con:nth-of-type(2) > .e-con-inner > .e-con > .elementor-widget{
    width:auto!important;
  }
  /* Utility bar: one line, no wasted height. */
  .elementor-location-header > .e-con:nth-of-type(1) .elementor-widget-text-editor p{
    margin:0; font-size:12px;
  }
}

/* The collapsed mobile menu panel sits in normal flow at position:static, so
   even while closed it was 167px wide and set the nav column's width, which is
   what stranded the burger mid-bar. Take it out of flow and anchor it to the
   header bar so the column collapses to the 44px toggle. */
@media (max-width:767px){
  .elementor-location-header > .e-con:nth-of-type(2){position:relative;}
  .elementor-location-header > .e-con:nth-of-type(2) > .e-con-inner > .e-con:nth-of-type(2),
  .elementor-location-header .elementor-widget-nav-menu{position:static!important;}
  .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    position:absolute!important; top:100%; left:0; right:0; width:auto!important;
    z-index:60; margin-top:0;
    border:1px solid var(--tya-line); border-top:0;
    border-radius:0 0 6px 6px; box-shadow:0 10px 24px rgba(14,43,79,.08);
  }
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-item,
  .elementor-location-header .elementor-nav-menu--dropdown .elementor-sub-item{
    padding:14px 20px!important; min-height:44px; display:flex; align-items:center;
  }
}

/* The brand column is flex-direction:column, so align-items governs the
   horizontal axis. Centring it there pushed the wordmark 50px off the left
   margin. Pin it to the start and drop the leftover fixed widget width. */
@media (max-width:767px){
  .elementor-location-header > .e-con:nth-of-type(2) > .e-con-inner > .e-con:nth-of-type(1){
    align-items:flex-start!important;
  }
  .elementor-location-header > .e-con:nth-of-type(2) > .e-con-inner > .e-con:nth-of-type(1) > .elementor-widget{
    width:auto!important; max-width:100%;
  }
}

/* ---------- Editorial content pages ----------
   About, Contact, Delivery, Returns, Terms and Privacy render through Hello
   Elementor's default template, which gave them the full 1140px column: about
   143 characters per line against the design's 60-70, and no vertical padding
   at all. Scoped to the default template so Elementor pages are untouched. */
.page-template-default .site-main{
  padding:56px 0 88px;
}
.page-template-default .site-main > *{
  max-width:720px;
}
.page-template-default .site-main .entry-title{
  max-width:720px;
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:44px; line-height:1.08; letter-spacing:-1px;
  color:var(--tya-ink); margin:0 0 28px;
}
.page-template-default .site-main .entry-content > *{max-width:720px;}
.page-template-default .entry-content h2{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:24px;
  line-height:1.15; color:var(--tya-ink); margin:44px 0 12px;
}
.page-template-default .entry-content h2:first-child{margin-top:0;}
.page-template-default .entry-content h3{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px;
  color:var(--tya-ink); margin:28px 0 10px;
}
.page-template-default .entry-content p,
.page-template-default .entry-content li{
  font-family:Manrope,sans-serif; font-size:16px; line-height:1.7;
  color:var(--tya-muted);
}
.page-template-default .entry-content p{margin:0 0 16px;}
.page-template-default .entry-content strong{color:var(--tya-ink);}
.page-template-default .entry-content a{color:var(--tya-ink);text-decoration:underline;}
.page-template-default .entry-content ul,
.page-template-default .entry-content ol{margin:0 0 20px;padding-left:22px;}
.page-template-default .entry-content li{margin-bottom:8px;}
.page-template-default .entry-content em{color:var(--tya-muted);}

/* Delivery page price table */
.page-template-default .entry-content table{
  width:100%; max-width:720px; border-collapse:collapse; margin:0 0 24px;
  background:var(--tya-surface); border:1px solid var(--tya-line); border-radius:6px;
  overflow:hidden;
}
.page-template-default .entry-content td{
  font-family:Manrope,sans-serif; font-size:15px; color:var(--tya-muted);
  padding:14px 16px; border-bottom:1px solid var(--tya-line);
}
.page-template-default .entry-content tr:last-child td{border-bottom:0;}
.page-template-default .entry-content td strong{color:var(--tya-ink);}

/* Unfilled business details should be obvious, not blend into the copy. */
.page-template-default .entry-content{--tya-todo:#C4372F;}

@media (max-width:767px){
  .page-template-default .site-main{padding:32px 0 56px;}
  .page-template-default .site-main .entry-title{font-size:32px;}
  .page-template-default .entry-content h2{font-size:21px;margin:32px 0 10px;}
}

/* ---------- 404 ---------- */
.tya-404{background:var(--tya-bg);}
.tya-404__inner{max-width:1280px;margin:0 auto;padding:80px 24px 96px;}
.tya-404 h1{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:44px;
  line-height:1.08; letter-spacing:-1px; color:var(--tya-ink); margin:0 0 14px;
}
.tya-404__lead{
  font-family:Manrope,sans-serif; font-size:17px; line-height:1.6;
  color:var(--tya-muted); max-width:560px; margin:0 0 28px;
}
.tya-404__search{display:flex;gap:8px;max-width:460px;margin:0 0 40px;}
.tya-404__search input[type=search]{
  flex:1 1 auto; min-width:0; height:52px; padding:0 16px;
  border:1px solid var(--tya-line); border-radius:6px; background:var(--tya-surface);
  font-family:Manrope,sans-serif; font-size:15px; color:var(--tya-ink);
}
.tya-404__search input[type=search]:focus{outline:2px solid var(--tya-ink);outline-offset:1px;}
.tya-404__search button{
  height:52px; padding:0 24px; border:0; border-radius:6px; cursor:pointer;
  background:var(--tya-accent); color:var(--tya-ink);
  font-family:Manrope,sans-serif; font-weight:700; font-size:15px;
}
.tya-404__search button:hover{background:#0EA5C2;}
.tya-404__label{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px;
  color:var(--tya-ink); margin:0 0 12px;
}
.tya-404__cats{list-style:none;padding:0;margin:0 0 44px;display:flex;flex-wrap:wrap;gap:10px;}
.tya-404__cats a{
  display:inline-block; border:1px solid var(--tya-line); border-radius:999px;
  padding:9px 16px; background:var(--tya-surface); color:var(--tya-ink);
  text-decoration:none; font-family:Manrope,sans-serif; font-weight:600; font-size:14px;
}
.tya-404__cats a:hover{border-color:var(--tya-ink);}
.tya-404__products{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.tya-404__products li.product{margin:0;width:auto;float:none;}
.tya-404__products a{text-decoration:none;display:block;}
.tya-404__products .woocommerce-loop-product__title{display:block;margin:0 0 4px;}
@media (max-width:900px){ .tya-404__products{grid-template-columns:repeat(2,1fr);} }
@media (max-width:767px){
  .tya-404__inner{padding:40px 20px 64px;}
  .tya-404 h1{font-size:30px;}
}

/* Multibuy offer badge on qualifying product pages. Uses the hairline
   treatment rather than the accent, which is reserved for actions. */
.tya-multibuy{
  display:inline-block; margin:0 0 4px;
  font-family:Manrope,sans-serif; font-weight:700; font-size:13px;
  color:var(--tya-ink); background:var(--tya-surface);
  border:1px solid var(--tya-line); border-left:3px solid var(--tya-accent);
  border-radius:6px; padding:9px 14px;
}
/* Cart and checkout: the multibuy line reads as a saving, not a charge. */
.cart-subtotal + tr.fee th,
tr.fee th{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--tya-ink);}
tr.fee td{color:var(--tya-ink);font-weight:700;}

/* Adding a sixth menu item (Guides) pushed the nav list under the search box.
   The nav <ul> overflows its wrapper, so measuring the wrapper alone hides the
   collision. Tighten the items and give the search a smaller fixed width. */
@media (min-width:1025px){
  .elementor-location-header .elementor-nav-menu--main .elementor-item{
    padding-left:7px!important; padding-right:7px!important;
  }
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu{
    justify-content:flex-start;
  }
  .elementor-location-header .elementor-widget-search-form{
    max-width:190px;
  }
  .elementor-location-header .elementor-widget-search-form input[type=search]{
    font-size:13px;
  }
}
@media (min-width:768px) and (max-width:1140px){
  /* Even with the columns sized to content there is no room for the lockup,
     a six-item menu, the search and the cart below about 1140px. Measured at
     1025px the menu ran 45px into the search, so the search gives way here and
     returns above it. */
  .elementor-location-header .elementor-widget-search-form{display:none;}
}

/* ---------- Logo lockup ----------
   The header brand is now the coil symbol plus the wordmark. The mark takes
   currentColor so it reverses cleanly anywhere the lockup is placed. */
.tya-lockup{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--tya-ink);
}
.tya-lockup__mark{
  height:23px; width:auto; flex:0 0 auto; display:block; color:inherit;
}
.tya-lockup__name{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:24px;
  letter-spacing:-.035em; line-height:1; color:inherit; white-space:nowrap;
}
.tya-lockup:hover{color:var(--tya-ink);}
.tya-lockup:focus-visible{
  outline:2px solid var(--tya-ink); outline-offset:4px; border-radius:4px;
}
@media (max-width:767px){
  .tya-lockup{gap:8px;}
  .tya-lockup__mark{height:18px;width:auto;}
  .tya-lockup__name{font-size:19px;}
}
/* The footer wordmark keeps pace with the header. */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title{
  letter-spacing:-.03em;
}

/* ---------- Header columns ----------
   The three columns were sizing to equal thirds (411px each), but the six-item
   menu is 450px wide, so it overflowed its own column and ran under the search.
   Earlier attempts shrank the search and the menu padding to compensate, which
   only moved the problem. Sizing the columns to their content is the real fix:
   brand and tools take what they need, the nav takes the rest (~730px at
   1440px), and nothing overlaps at any desktop width.
   IDs come from elementor/templates.json, which is version controlled. */
@media (min-width:1025px){
  .elementor-location-header .elementor-element-39cdad9,
  .elementor-location-header .elementor-element-c25554b{
    flex:0 0 auto!important; width:auto!important;
  }
  .elementor-location-header .elementor-element-5988909{
    flex:1 1 auto!important; width:auto!important; min-width:0;
  }
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu{
    flex-wrap:nowrap;
  }
  .elementor-location-header .elementor-widget-search-form{max-width:220px;}
  .tya-lockup__name{font-size:22px;}
  .tya-lockup__mark{height:21px;width:auto;}
}

/* Between the desktop breakpoint and about 1200px the menu still just outgrows
   the space left for it, so trim the item padding and the search across that
   band only. Above it, both stay at full size. */
@media (min-width:1025px) and (max-width:1200px){
  .elementor-location-header .elementor-nav-menu--main .elementor-item{
    padding-left:6px!important; padding-right:6px!important;
  }
  .elementor-location-header .elementor-widget-search-form{max-width:170px;}
}


/* ---------- Product grid ----------
   Cards carried no padding at all, so the image and the text ran right up to
   the hairline border. The brand guide specifies 14px. The column gap was also
   half the row gap (16 against 32), which made the rows read as stripes. */
.woocommerce ul.products li.product,
ul.products li.product{
  padding:14px!important;
}
ul.products{
  column-gap:24px!important;
  row-gap:28px!important;
}
/* Images were object-fit:fill, which stretched every photo to fill a square
   box. contain keeps the product's real proportions; the square box stays so
   the grid still lines up. */
ul.products li.product img{
  object-fit:contain!important;
  aspect-ratio:1/1;
  height:auto;
  background:#FFFFFF;
}

/* ---------- Cart and checkout (WooCommerce Blocks) ----------
   Cart and checkout are Blocks, which ship their own button styling that none
   of the theme CSS reached. Proceed to Checkout rendered as near-black text on
   a dark grey fill: 1.49 contrast, effectively invisible. Bring both primary
   buttons onto the brand's own primary button. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained{
  background-color:#12BFDA!important;
  color:#0E2B4F!important;
  border:0!important;
  border-radius:6px!important;
  font-family:'Manrope',sans-serif!important;
  font-weight:700!important;
  box-shadow:none!important;
  text-decoration:none!important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.contained:hover{
  background-color:#0EA5C2!important;
  color:#0E2B4F!important;
}
.wc-block-cart__submit-button:focus-visible,
.wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-components-button.contained:focus-visible{
  outline:2px solid #0E2B4F!important;
  outline-offset:3px;
}

/* ---------- Guides index ----------
   The index is a listing, not prose, so it opts out of the 720px reading column
   the editorial pages use and takes the full content width for its cards. The
   intro keeps a readable measure. */
.page-id-3104 .site-main > *{max-width:none;}
.page-id-3104 .site-main .entry-title{max-width:none;margin-bottom:14px;}
.page-id-3104 .tya-guides-intro{
  max-width:58ch; font-size:18px; line-height:1.6;
  color:var(--tya-muted); margin:0 0 44px;
}

.tya-guides{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.tya-guide{margin:0;}

/* The whole card is one link, so the title carries the accessible name and
   there is a single tab stop per guide. */
.tya-guide__link{
  display:flex; flex-direction:column; height:100%;
  background:#FFFFFF; border:1px solid var(--tya-line); border-radius:6px;
  padding:26px 28px 22px; text-decoration:none!important; color:var(--tya-ink);
  transition:border-color .15s ease;
}
.tya-guide__link:hover{border-color:var(--tya-ink);}
.tya-guide__link:focus-visible{
  outline:2px solid var(--tya-ink); outline-offset:3px; border-color:var(--tya-ink);
}

.tya-guide__title{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px;
  line-height:1.2; letter-spacing:-.02em; color:var(--tya-ink);
  margin:0 0 10px; text-wrap:balance;
}
.tya-guide__desc{
  font-family:'Manrope',sans-serif; font-size:15px; line-height:1.55;
  color:var(--tya-muted); margin:0 0 22px;
}

/* Meta row is pushed to the bottom so the cards line up regardless of how long
   the title runs. */
.tya-guide__meta{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--tya-line-soft, #E6EDF4);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.tya-guide__time{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--tya-muted, #586A80);
}
.tya-guide__go{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:14px;
  color:var(--tya-ink);
}
.tya-guide__go svg{width:15px;height:15px;display:block;flex:0 0 auto;}
.tya-guide__link:hover .tya-guide__go svg{transform:translateX(3px);}
.tya-guide__go svg{transition:transform .15s ease;}

/* ---------- Back to the index, on a guide ---------- */
.tya-guide-back{margin:0 0 26px;}
.tya-guide-back a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--tya-muted); text-decoration:none!important;
}
.tya-guide-back a:hover{color:var(--tya-ink);}
.tya-guide-back svg{width:14px;height:14px;display:block;}

@media (max-width:900px){
  .tya-guides{grid-template-columns:1fr; gap:14px;}
  .page-id-3104 .tya-guides-intro{font-size:17px; margin-bottom:32px;}
  .tya-guide__link{padding:22px 22px 18px;}
  .tya-guide__title{font-size:19px;}
}

@media (max-width:767px){
  /* Hello Elementor gives the content column a 10px gutter while the header
     uses 16px. It went unnoticed while the content was plain text; with the
     guide cards carrying visible borders the edges no longer lined up. */
  .page-template-default .site-main{
    padding-left:16px!important; padding-right:16px!important;
  }
}

/* ---------- Mini cart ----------
   The dropdown is absolutely positioned with left:0 against the toggle wrapper,
   which is only 80px wide and sits hard against the right edge of the header.
   Its fixed 300px therefore ran off the right of the screen: at a 390px
   viewport the page gained 203px of horizontal scroll and the panel was cut
   off mid-word. Anchor it to the right of the toggle instead, and never let it
   grow wider than the screen it has to fit in. */
.elementor-menu-cart__container{
  left:auto!important;
  right:0!important;
}
.elementor-menu-cart__main{
  width:min(300px, calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  margin-left:auto!important;
  margin-right:0!important;
}
/* A long cart should scroll inside the panel rather than run off the bottom. */
.elementor-menu-cart__products{
  max-height:min(58vh, 420px);
  overflow-y:auto;
}

/* The two footer buttons came through as Elementor's default grey (#69727D),
   which is not in the palette, with square corners. Put them on the brand's
   own pair: checkout is the primary action, view cart the secondary. */
.elementor-menu-cart__footer-buttons .elementor-button{
  border-radius:6px!important;
  font-family:'Manrope',sans-serif!important;
  font-weight:700!important;
  text-decoration:none!important;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout{
  background-color:#12BFDA!important;
  color:#0E2B4F!important;
  border:0!important;
}
.elementor-menu-cart__footer-buttons .elementor-button--checkout:hover{
  background-color:#0EA5C2!important;
  color:#0E2B4F!important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart{
  background-color:transparent!important;
  color:#0E2B4F!important;
  border:1px solid #0E2B4F!important;
}
.elementor-menu-cart__footer-buttons .elementor-button--view-cart:hover{
  background-color:#0E2B4F!important;
  color:#F2F6FA!important;
}
.elementor-menu-cart__footer-buttons .elementor-button:focus-visible{
  outline:2px solid #0E2B4F!important;
  outline-offset:3px;
}

/* ---------- Category icons ----------
   Drawn rather than photographed. The catalogue's own photography carries a
   competitor watermark on 94% of images, and stock vape photography is either
   another manufacturer's branded hardware or lifestyle imagery that UK
   advertising rules make risky for nicotine products. Line art in the palette
   avoids both and suits the system. Swap for real photography when it exists. */
.tya-cat-icon{
  display:flex; align-items:center; justify-content:flex-start;
  color:var(--tya-ink); margin:0 0 10px;
}
.tya-cat-icon svg{
  height:72px; width:auto; display:block;
  opacity:.92;
}
/* The Vape Kits card is twice the height of the others, so its icon carries
   more of the space. */
.elementor-element-78d82f4 .tya-cat-icon svg{height:96px;}
@media (max-width:1024px){
  .tya-cat-icon svg{height:60px;}
  .elementor-element-78d82f4 .tya-cat-icon svg{height:76px;}
}
@media (max-width:767px){
  .tya-cat-icon svg{height:54px;}
  .elementor-element-78d82f4 .tya-cat-icon svg{height:64px;}
}

/* ---------- Product tile button on narrow screens ----------
   At two cards per row the card is about 160px wide, which left roughly 129px
   inside the padding. "Select options" at 14px needed more than that and broke
   onto a second line, making the tiles uneven. Full width and a slightly
   smaller label keeps it on one line and squares the tiles up. */
@media (max-width:767px){
  ul.products li.product .button{
    display:block;
    width:100%;
    box-sizing:border-box;
    text-align:center;
    white-space:nowrap;
    font-size:13px;
    padding:10px 8px;
  }
}

/* ---------- Mobile audit fixes ---------- */
@media (max-width:767px){
  /* The tile buttons came out 35px tall, under the 44px minimum for a touch
     target. Set on height rather than padding so the label stays on one line. */
  ul.products li.product .button{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
  }
}

/* ---------- Product gallery thumbnails ----------
   These were object-fit:fill, so every thumbnail was stretched to a square. The
   same bug the product grid had; that fix was scoped to ul.products and never
   reached the gallery. FlexSlider also sets a fixed height on the list, which
   clipped the last row. */
.woocommerce div.product .flex-control-thumbs{
  height:auto!important;
  overflow:visible!important;
  list-style:none!important;
  margin:10px 0 0!important;
  padding:0!important;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.woocommerce div.product .flex-control-thumbs li{
  width:auto!important;
  float:none!important;
  margin:0!important;
  list-style:none!important;
}
.woocommerce div.product .flex-control-thumbs img{
  object-fit:contain!important;
  width:100%!important;
  height:auto;
  aspect-ratio:1/1;
  background:#FFFFFF;
  border:1px solid var(--tya-line);
  border-radius:6px;
  opacity:1;
}
.woocommerce div.product .flex-control-thumbs img.flex-active{
  border-color:var(--tya-ink);
}