/* Atlas Kicks — theme glue: product variation fixes, gallery scroller, the
   art-print + story sections, generic page layout, and an Atlas skin for the
   inherited WooCommerce cart / checkout / My Account. Loaded site-wide. */

:root{ --cat:#1b8cc4; --fit:cover; }

/* ============================================================
   Chrome guards — beat any parent-theme (Avanam) rules that bleed
   into the Atlas header/footer. These must win, hence !important.
   ============================================================ */
header .brand{ display:inline-flex !important; align-items:center; }
header .brand-logo,
header .brand img,
.atlas-body header .brand-logo{
  height:34px !important; width:auto !important;
  max-height:34px !important; max-width:220px !important;
  display:block !important; margin:0 !important; padding:0 !important;
}
.atlas-body header{ background:rgba(255,255,255,.97) !important; box-shadow:none !important; border-bottom:1px solid var(--line,#e6e4e0) !important; }
.atlas-body header .nav{ min-height:66px; align-items:center; flex-wrap:nowrap; }
.atlas-body .mainnav{ flex-wrap:wrap; }
.atlas-body .mainnav a{ text-decoration:none !important; }
.atlas-body .ticker{ position:relative; z-index:1; }

footer .foot-logo{
  height:30px !important; width:auto !important; max-width:200px !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
footer .ghost-logo{ opacity:.05 !important; }
footer .foot a, footer .credit{ text-decoration:none !important; }

/* No grey box behind the product photo (or its thumbnails). */
.pdp .stage, .pdp .thumb{ background:#fff !important; }

/* Hide the parent theme's floating color-palette / dark-mode switcher. */
[class*="color-palette-fixed-switcher"],
.base-color-palette-fixed-switcher,
.kcpf-position-left, .kcpf-position-right{ display:none !important; }


/* ---------------- Generic themed page (Cart / Checkout / Account / etc.) ---------------- */
.atlas-main{ min-height:40vh; }
.atlas-page{ padding:44px 0 80px; }
.atlas-page .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.atlas-page-head{ margin-bottom:24px; }
.atlas-page-title{ font-size:clamp(2rem,5vw,3.2rem); line-height:1; }
.atlas-content{ color:#2f2f2f; line-height:1.7; font-size:1.02rem; }
.atlas-content h2{ font-family:'Anton',sans-serif; font-size:clamp(1.4rem,3vw,2rem); margin:26px 0 12px; }
.atlas-content a{ color:var(--cat); }

/* ---------------- WooCommerce forms (cart, checkout, account) skinned to Atlas ---------------- */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce .button{
  background:#141414 !important; color:#fff !important; border:0 !important;
  border-radius:40px !important; font-weight:700 !important; padding:.75em 1.6em !important;
  box-shadow:none !important; transition:.2s; text-transform:none !important; letter-spacing:0 !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button:hover{ transform:translateY(-2px); }
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.woocommerce #place_order, .woocommerce button[name="update_cart"]{
  background:var(--cat) !important; color:#fff !important;
}
.woocommerce #place_order{ font-size:16px !important; padding:1em 2em !important; width:100%; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single, .woocommerce select,
.woocommerce table.cart td.actions .coupon .input-text{
  border:1.5px solid #e6e4e0 !important; border-radius:10px !important; padding:12px 14px !important;
  min-height:48px; font:inherit !important; background:#fbfcfd !important;
}
.woocommerce form .form-row label{ font-weight:600; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error{
  border-top-color:var(--cat) !important; border-radius:8px;
}
.woocommerce-cart table.cart, .woocommerce-checkout .woocommerce-checkout-review-order-table{
  border:1px solid #eceae6; border-radius:14px; overflow:hidden;
}
.woocommerce table.shop_table thead th, .woocommerce table.shop_table tfoot th{
  background:#f7f6f2; font-weight:800;
}
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-account .woocommerce h2{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase;
}
/* My Account nav */
.woocommerce-account .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; }
.woocommerce-account .woocommerce-MyAccount-navigation li{ border-bottom:1px solid #ececec; }
.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block; padding:12px 4px; font-weight:600; color:#141414; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ color:var(--cat); }

/* ---------------- Product page: variation UI fix + gallery scroller ---------------- */
.atlas-buy{ margin:22px 0 14px; }
.atlas-buy table.variations{ width:100%; border-collapse:collapse; margin-bottom:12px; }
.atlas-buy .variations th.label{ display:none; }
.atlas-buy .variations td.value{ display:block; padding:0; }
.atlas-buy .variations tr{ display:block; margin-bottom:14px; }
.atlas-buy .variations select{  }
.atlas-buy .bt-variation-label, .atlas-buy .bt-variation-label label{
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted,#6f6f6f); margin-bottom:8px; display:block;
}
.atlas-buy .quantity input{ height:52px; width:76px; border:1.5px solid var(--line,#e6e4e0); border-radius:10px; padding:0 10px; font:inherit; margin-right:10px; }
.atlas-buy .woocommerce-variation-add-to-cart, .atlas-buy form.cart{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.atlas-buy .single_add_to_cart_button, .atlas-buy button.single_add_to_cart_button{
  background:var(--cat) !important; color:#fff !important; border:0 !important; border-radius:40px !important;
  height:52px !important; padding:0 30px !important; font-weight:700 !important; font-size:15px !important; cursor:pointer;
}
.atlas-buy .woocommerce-variation-price .price{ font-size:1.5rem; font-weight:800; display:block; margin:6px 0; }
.atlas-buy .reset_variations{ display:inline-block; margin-top:6px; color:var(--cat); font-size:13px; }

/* ---- Fun, legible size / colour swatch pills (theme "bt" radio swatches) ----
   The theme renders each option as a <label> inside .bas_radio_variations and
   marks the chosen one with class .selectedValue (which it styles white-on-
   transparent → invisible). We restyle them as Atlas pills. */
.atlas-buy .bas_radio_variations{
  display:flex !important; flex-wrap:wrap; gap:10px; border:0; padding:0; margin:2px 0 0;
}
.atlas-buy .bas_radio_variations input[type="radio"]{
  position:absolute !important; opacity:0 !important; width:1px; height:1px; margin:0; pointer-events:none;
}
.atlas-buy select.bt-no-select2,
.atlas-buy .variations select{  }
.atlas-buy .bas_radio_variations label{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 18px; margin:0; line-height:1;
  border:2px solid var(--line,#e6e4e0); border-radius:40px; background:#fff;
  color:#141414 !important; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.atlas-buy .bas_radio_variations label:hover{
  border-color:var(--cat); color:var(--cat) !important; transform:translateY(-2px);
}
/* The chosen pill: fill with the line accent so the white text is legible + fun. */
.atlas-buy .bas_radio_variations label.selectedValue{
  background:var(--cat) !important; border-color:var(--cat) !important; color:#fff !important;
  box-shadow:0 8px 20px rgba(0,0,0,.16); transform:translateY(-1px);
}

/* Thumbnail rail: cap to the main image height + scroll. */
.gallery{ align-items:start; }
.thumbs{ max-height:560px; overflow-y:auto; overflow-x:hidden; padding-right:4px; scrollbar-width:thin; }
.thumbs::-webkit-scrollbar{ width:6px; }
.thumbs::-webkit-scrollbar-thumb{ background:#cfcfcf; border-radius:6px; }
.thumbs .thumb{ flex:0 0 auto; }

/* Hide any inherited sticky add-to-cart bar. */
[class*="sticky-add-to-cart"], [class*="sticky-atc"], [class*="sticky-single"]{ display:none !important; }

/* ---------------- Product long description ("The Story") ---------------- */
.atlas-story{ max-width:var(--maxw,1360px); margin:0 auto; padding:20px 24px 60px; }
.atlas-story .in{ max-width:760px; }
.atlas-story h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:14px; }
.atlas-story .body{ color:#3a3a3a; line-height:1.7; font-size:1.06rem; }
.atlas-story .body p{ margin-bottom:14px; }

/* ---------------- Art Soles wall-print upsell ---------------- */
.aprint{ background:#0e0e12; color:#f3f1ea; }
.aprint .in{ max-width:var(--maxw,1360px); margin:0 auto; padding:74px 24px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.aprint .frame{ background:#faf7ef; padding:26px; border-radius:3px; box-shadow:0 40px 90px rgba(0,0,0,.6); max-width:420px; margin:0 auto; position:relative; }
.aprint .frame::after{ content:""; position:absolute; inset:13px; border:1px solid rgba(20,16,7,.14); }
.aprint .frame img{ width:100%; aspect-ratio:2/3; object-fit:cover; display:block; }
.aprint h2{ font-size:clamp(2rem,4vw,3rem); color:#fff; margin-bottom:14px; }
.aprint p{ color:#cbc6b9; line-height:1.7; margin-bottom:20px; max-width:440px; font-family:'Fraunces',serif; }
.aprint .row{ display:flex; justify-content:space-between; max-width:380px; padding:12px 0; border-bottom:1px solid #2a2a33; font-size:14px; }
.aprint .row span{ color:#9a958a; } .aprint .row b{ color:#f1ede3; }
.aprint .cbuy{ display:flex; align-items:center; gap:18px; margin-top:22px; }
.aprint .cprice{ font-size:1.6rem; font-weight:800; color:#fff; }
@media(max-width:860px){ .aprint .in{ grid-template-columns:1fr; gap:26px; } }

/* Breadcrumb spacing when inside theme chrome */
.crumb{ max-width:var(--maxw,1360px); margin:0 auto; }

/* ---- Size-guide link (single, no duplicate "SIZE" label) ---- */
.atlas-sg-link{ margin:10px 0 2px; }
.atlas-sg-link .sglink{ font-weight:700; }

/* ---- Vertical size guide (Men's US + Women's conversion) ---- */
.sgtable--v thead th{ text-align:center; white-space:nowrap; }
.sgtable--v thead th.corner{ text-align:center !important; }
.sgtable--v tbody th.pick{
  background:var(--cat) !important; color:#fff !important; text-align:center;
  font-weight:800; font-size:15px; white-space:nowrap;
}
.sgtable--v tbody td{ text-align:center; white-space:nowrap; }
.sgtable--v tbody td.hi{ color:#141414; font-weight:800; }
.sgtable--v tbody tr:nth-child(even) td{ background:#faf9f6; }
.sgtable--v tbody tr:hover td{ background:#f2efe8; }

/* ---- Archive / category: bigger 3-up grid + infinite scroll ---- */
.woocommerce .pgrid, .archive .pgrid{ grid-template-columns:repeat(3,1fr) !important; gap:26px !important; }
@media(max-width:900px){ .woocommerce .pgrid, .archive .pgrid{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:560px){ .woocommerce .pgrid, .archive .pgrid{ grid-template-columns:1fr !important; } }
.atlas-more{ min-height:56px; text-align:center; padding:34px 0 10px; }
.atlas-more-spin{ display:inline-block; width:26px; height:26px; border:3px solid #e6e4e0; border-top-color:var(--cat); border-radius:50%; animation:atlas-spin .7s linear infinite; opacity:0; transition:opacity .2s; }
.atlas-more.loading .atlas-more-spin{ opacity:1; }
@keyframes atlas-spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   Cart & Checkout — Atlas redesign
   ============================================================ */
.woocommerce-cart .atlas-page .wrap,
.woocommerce-checkout .atlas-page .wrap{ max-width:1140px; }

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error{
  border-radius:12px; border-top:3px solid var(--cat) !important; background:#f7f6f2 !important;
  padding:16px 20px !important; font-weight:500;
}

/* ---- Cart ---- */
.woocommerce-cart table.shop_table{
  border:1px solid #eceae6 !important; border-radius:16px !important; overflow:hidden;
  border-collapse:separate !important; border-spacing:0; background:#fff;
}
/* Avanam forces the product-name header cell to display:block (even with our
   !important overrides it wins), which breaks the whole header row and leaves a
   white gap. The body rows render fine as a table, so we simply drop the broken
   header and present clean, labelled-by-context line items. */
.woocommerce-cart table.shop_table thead{ display:none !important; }
.woocommerce-cart table.shop_table td{ padding:20px 16px !important; border-top:1px solid #f0efec !important; vertical-align:middle; background:#fff; }
.woocommerce-cart table.shop_table tbody tr.cart_item:first-child td{ border-top:0 !important; }
.woocommerce-cart table.shop_table td.product-thumbnail img{ width:84px; height:84px; object-fit:contain; border-radius:12px; background:#faf9f6; }
.woocommerce-cart table.shop_table td.product-name a{ font-weight:800; color:#141414; }
.woocommerce-cart table.shop_table td.product-name a:hover{ color:var(--cat); }
.woocommerce-cart .product-remove a.remove{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:#f2f0ec !important; color:#d1333b !important; font-size:18px; line-height:1; text-decoration:none;
}
.woocommerce-cart .product-remove a.remove:hover{ background:#d1333b !important; color:#fff !important; }
.woocommerce-cart .quantity input.qty{ width:72px; height:46px; border:1.5px solid var(--line,#e6e4e0); border-radius:10px; text-align:center; font:inherit; }
.woocommerce-cart td.actions{ padding:16px !important; background:#faf9f6; }
.woocommerce-cart td.actions .coupon{ display:flex; gap:8px; flex-wrap:wrap; }

.cart-collaterals{ margin-top:22px; overflow:hidden; }
.cart-collaterals .cart_totals{
  float:right; width:100%; max-width:400px; background:#faf9f6; border:1px solid #eceae6; border-radius:16px; padding:22px 24px;
}
.cart-collaterals .cart_totals h2{ font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:1.4rem; margin-bottom:14px; }
.cart-collaterals .cart_totals table,
.cart-collaterals .cart_totals table th,
.cart-collaterals .cart_totals table td{ border:0 !important; }
.cart-collaterals .cart_totals table th,
.cart-collaterals .cart_totals table td{ border-top:1px solid #ececec !important; padding:12px 0 !important; }
.cart-collaterals .cart_totals .order-total .amount{ font-size:1.4rem; font-weight:800; color:#141414; }
.wc-proceed-to-checkout a.checkout-button{
  background:var(--cat) !important; color:#fff !important; border-radius:40px !important;
  font-size:16px !important; font-weight:800 !important; padding:1em !important; text-align:center; width:100%; display:block;
}
.cart-empty.woocommerce-info{ text-align:center; font-size:1.4rem; border:0 !important; background:transparent !important; }
/* Hide the auto cross-sell product grid on the cart (unflattering stock imagery,
   no heading). Reversible — remove this rule (and the PHP remove_action) to restore. */
.woocommerce-cart .cross-sells,
.woocommerce-cart .products.product-archive,
.woocommerce-cart .base-woo-cart-form-wrap .woocommerce.columns-3{ display:none !important; }

/* ---- Checkout (robust stacked cards) ---- */
.woocommerce-checkout #customer_details{ margin-bottom:26px; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
  background:#fff; border:1px solid #eceae6; border-radius:16px; padding:22px 24px; margin-bottom:20px;
}
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading{
  font-family:'Anton',sans-serif; font-weight:400; text-transform:uppercase; font-size:1.4rem; margin-bottom:14px;
}
.woocommerce-checkout #order_review{ background:#faf9f6; border:1px solid #eceae6; border-radius:16px; padding:24px; }
.woocommerce-checkout #order_review table.shop_table,
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{ border:0 !important; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{ border-top:1px solid #ececec !important; padding:12px 0 !important; }
.woocommerce-checkout #order_review .order-total .amount{ font-size:1.4rem; font-weight:800; }
.woocommerce-checkout #payment ul.payment_methods{ background:#fff; border:1px solid #eceae6; border-radius:12px; padding:14px; }
.woocommerce-checkout #payment div.form-row.place-order{ padding-top:16px !important; }
/* Two-column checkout: all customer details (billing + shipping stacked) on the
   left, order summary sticky on the right. Uses a grid on the form so the track
   widths win over Avanam's fixed %-widths, and targets Avanam's real wrapper
   (.checkout-order-review) rather than the inner #order_review. */
@media(min-width:900px){
  form.checkout.woocommerce-checkout{ display:grid !important; grid-template-columns:minmax(0,1fr) 410px !important; gap:36px !important; align-items:start; }
  form.checkout > #customer_details{ grid-column:1 !important; width:auto !important; max-width:none !important; float:none !important; margin:0 !important; display:block !important; }
  form.checkout > .checkout-order-review{ grid-column:2 !important; width:auto !important; max-width:none !important; float:none !important; margin:0 !important; position:sticky; top:96px; }
  form.checkout > #order_review_heading{ grid-column:2 !important; width:auto !important; float:none !important; margin:0 0 6px 0 !important; }
  form.checkout > .woocommerce-NoticeGroup{ grid-column:1 / -1 !important; }
  form.checkout .checkout-order-review .woocommerce-checkout-review-order{ width:100% !important; float:none !important; }
  form.checkout #customer_details .col2-set{ display:block !important; grid-template-columns:none !important; width:auto !important; }
  form.checkout #customer_details .col-1,
  form.checkout #customer_details .col-2{ float:none !important; width:100% !important; max-width:none !important; margin:0 0 20px 0 !important; }
}
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last{ width:calc(50% - 8px) !important; }
.woocommerce-checkout #customer_details label{ white-space:nowrap; }

/* ---- Branded inserts ---- */
.atlas-give-note{ margin:16px 0 0; padding:16px 20px; background:#f6f1e6; border-radius:14px; color:#3a3a3a; font-size:14px; line-height:1.5; text-align:center; }
.atlas-give-note .heart{ color:#d1333b; }
.atlas-checkout-trust{ display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin:0 0 26px; padding:14px 18px; background:#f7f6f2; border-radius:14px; }
.atlas-checkout-trust span{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#3a3a3a; }
.atlas-checkout-trust svg{ color:var(--cat); }
.atlas-order-reassure{ margin-top:14px; text-align:center; font-size:13px; color:#6f6f6f; line-height:1.6; }

/* ---- Checkout: remove inherited Elementor "Buy with Confidence" + testimonial
   sections that sit below the checkout form, and repair Avanam's "Your order"
   product row (absolutely-positioned image was overlapping the product name and
   the inline price rendered oversized/duplicated). ---- */
.woocommerce-checkout .elementor-element-3fbfad8,
.woocommerce-checkout .elementor-element-1efdbdf,
.woocommerce-checkout .elementor-top-section:has(.tmcore-carousel),
.woocommerce-checkout .elementor-top-section:has(.elementor-testimonial-item){ display:none !important; }

.woocommerce-checkout-review-order-table td.product-name{ display:flex !important; align-items:center; gap:13px; padding:14px 0 !important; }
.checkout-review-product-image{ position:relative !important; left:auto !important; top:auto !important; transform:none !important; flex:0 0 auto; width:58px !important; height:58px !important; display:block; margin:0 !important; line-height:0 !important; overflow:visible !important; align-self:center; }
.checkout-review-product-image img{ width:58px !important; height:58px !important; object-fit:contain; border-radius:9px; background:#f4f2ee; display:block; }
.checkout-review-product-image .product-quantity{ position:absolute !important; top:-7px !important; right:-7px !important; left:auto !important; min-width:21px; height:21px; padding:0 5px; background:#1b8cc4 !important; color:#fff !important; border-radius:20px; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.checkout-review-product-name{ flex:1 1 auto; display:block; font-weight:700; font-size:14px; color:#141414; line-height:1.35; }
.checkout-review-product-price{ display:none !important; }
.woocommerce-checkout-review-order-table td.product-name > strong.product-quantity{ display:none !important; }
.woocommerce-checkout-review-order-table td.product-total{ font-weight:800; vertical-align:middle; text-align:right; white-space:nowrap; }


/* Fix: variation dropdowns were hidden by a pill/button UI that never shipped, leaving Size and Sole Color unselectable. Show styled native selects instead. Added by Claude 2026-07-09. */
.atlas-buy .variations select{display:block !important;width:100%;max-width:340px;height:52px;padding:0 14px;border:1.5px solid var(--line,#e6e4e0);border-radius:10px;font:inherit;font-weight:600;background:#fff;color:#111;-webkit-appearance:menulist;appearance:auto;cursor:pointer}
.atlas-buy .variations select:focus{outline:2px solid #111;outline-offset:1px}