/* AN Style design system
   Page: cream. Raised surfaces (panels, cards, photo frames, bars): lift, a
   hair warmer than the page. Alternating blocks: sand. Accent: black.
   Everything else is a hairline. Loaded after the theme and child theme. */
:root {
  --anstyle-cream: #FDF8F4;
  --anstyle-lift: #FDF7F2;
  --anstyle-sand: #F1E5DA;
  --anstyle-beige: #ECDACB;
  --anstyle-line: rgba(0, 0, 0, 0.08);
}

/* The theme paints its "boxes" (shop sidebar panel, modals, quantity fields,
   grey info boxes) through these variables from the theme options. Map every
   white and grey box onto the site tones. `html body` outranks the theme's
   own definitions wherever they are printed. */
html body {
  --minimog-color-box-white-background: var(--anstyle-lift);
  --minimog-color-box-white-border: var(--anstyle-line);
  --minimog-color-box-light-grey-background: var(--anstyle-lift);
  --minimog-color-box-grey-background: var(--anstyle-sand);
  --minimog-color-box-border: var(--anstyle-line);
  --minimog-color-box-border-lighten: var(--anstyle-line);
  --minimog-color-box-fill-separator: var(--anstyle-line);
}

/* Cards: boxes that set their own colour in Elementor (the dark contact strip)
   keep it; the rest get the lift and a hairline instead of a shadow. */
.elementor-widget-tm-icon-box .tm-icon-box.minimog-box {
  border: 1px solid var(--anstyle-line);
  box-shadow: none;
}

/* Category discs on the home page: the icons are PNGs on white, so blend the
   white into the disc and draw the disc as a lifted circle with a hairline. */
.minimog-product-categories.style-09 .cat-image {
  background-color: var(--anstyle-lift);
  border: 1px solid var(--anstyle-line);
  border-radius: 50%;
  overflow: hidden;
}
.minimog-product-categories.style-09 .cat-image img {
  mix-blend-mode: multiply;
}

/* Shop sidebar: a lifted panel, square corners; size chips lifted too. */
.page-sidebar.style-02 .page-sidebar-content,
.page-sidebar.style-02 .archive-sidebar-filter {
  border-radius: 0;
}
.page-sidebar .wc-layered-nav-term .term-link {
  background: var(--anstyle-lift);
  border-color: rgba(0, 0, 0, 0.14);
  border-radius: 0;
}

/* Photos: product shots carry the lift as their own background, so frame
   them in the same tone with a hairline; any letterboxing matches. */
.product-thumbnail {
  background: var(--anstyle-lift);
  border: 1px solid var(--anstyle-line);
}
.woo-single-images img {
  background: var(--anstyle-lift);
  border: 1px solid var(--anstyle-line);
}

/* Fixed bars follow the page instead of floating as white strips. */
.cookie-notice-popup,
#sticky-product-bar.sticky-product {
  background: var(--anstyle-lift);
  border-top: 1px solid var(--anstyle-line);
  box-shadow: none;
}

/* Payment logos are a bitmap on white; blend the whole wrapper into the box
   (the lazy-image element isolates its own stacking context). */
.product-trust-badge {
  background: var(--anstyle-sand);
  border: 1px solid var(--anstyle-line);
  border-radius: 0;
}
.product-trust-badge .trust-badge-image,
.product-trust-badge .trust-badge-image img {
  background: transparent;
}
.product-trust-badge .trust-badge-image {
  mix-blend-mode: multiply;
}

/* Products without a photo show WooCommerce's placeholder, a bitmap on white;
   blend it into the lifted frame like everything else. */
.product-thumbnail img[src*="woocommerce-placeholder"],
.woo-single-images img[src*="woocommerce-placeholder"] {
  mix-blend-mode: multiply;
}

/* Header icons: no counter when there is nothing to count. */
.icon-badge[data-count="0"] {
  display: none;
}

/* Shop toolbar: the sort field and layout switcher sit on the lift, not grey. */
.js-product-ordering .nice-select,
.archive-layout-switcher .switcher-item {
  background: var(--anstyle-lift);
  border: 1px solid var(--anstyle-line);
  border-radius: 0;
}

/* Product page size chips match the sidebar chips. */
.isw-swatch--isw_text .isw-term.term-link {
  background: var(--anstyle-lift);
  border-color: rgba(0, 0, 0, 0.14);
  border-radius: 0;
}

/* Product page: a row of empty stars says nothing; the block returns once any star is filled. */
.woocommerce-product-rating:not(:has(.tm-star-rating svg:not(.tm-star-empty))) {
  display: none;
}

/* Navigation bar: no more full-width beige stripe. Cream between hairlines,
   with small uppercase tracked items; beige stays for buttons and badges. */
.page-header.header-08 .header-below {
  background: var(--anstyle-cream);
  border-top: 1px solid var(--anstyle-line);
  border-bottom: 1px solid var(--anstyle-line);
}
.page-header .header-below .menu--primary > ul > li > a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Badges: square, like the buttons and chips. */
.product-badges.product-badges-label > div,
.minimog-product .product-badges > div,
.product-badges > div > span {
  border-radius: 0;
}

/* Product card hover button follows the lift like every other raised surface. */
.product-thumbnail .woocommerce_loop_add_to_cart_wrap a {
  background-color: var(--anstyle-lift);
  border: 1px solid var(--anstyle-line);
}

/* Main navigation dropdown: a lifted panel with a hairline edge, links in the
   nav's near-black; beige is kept for the hovered row only. */
.page-header .menu--primary .sub-menu {
  background-color: var(--anstyle-lift);
  border: 1px solid var(--anstyle-line);
  box-shadow: none;
  border-radius: 0;
}
.page-header .menu--primary .sub-menu li > a {
  color: #151413;
}
.page-header .menu--primary .sub-menu li > a:hover,
.page-header .menu--primary .sub-menu li.current-menu-item > a {
  background-color: var(--anstyle-beige);
  color: #000;
}

/* Nav row, right side: the contact link and social icons that used to sit in the black top
   bar. Same 12px tracked uppercase as the menu items, icons a touch smaller than the header
   icons so they read as secondary. The child theme's header-08 template prints them. */
.page-header .header-below .anstyle-nav-aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  white-space: nowrap;
}
.page-header .header-below .anstyle-nav-aside .header-text a,
.page-mobile-main-menu .mobile-menu-components .header-text a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #151413;
  text-decoration: none;
}
.page-header .header-below .anstyle-nav-aside .header-text a:hover,
.page-mobile-main-menu .mobile-menu-components .header-text a:hover {
  color: rgba(21, 20, 19, .6);
}
.page-header .header-below .anstyle-nav-aside .header-social-networks .inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-header .header-below .anstyle-nav-aside .social-link {
  display: inline-flex;
  font-size: 15px;
  line-height: 1;
  color: #151413;
}
.page-header .header-below .anstyle-nav-aside .social-link:hover {
  color: rgba(21, 20, 19, .6);
}
/* Phone menu drawer: the theme prints the contact link first; move it down next to the social
   icons, after the account buttons, so the two read as one contact block. */
.page-mobile-main-menu .mobile-menu-components {
  display: flex;
  flex-direction: column;
}
.page-mobile-main-menu .mobile-menu-components .header-text {
  order: 8;
  margin: 28px 0 0;
}
.page-mobile-main-menu .mobile-menu-components .mobile-menu-social-networks {
  order: 9;
}
.page-header .header-below .anstyle-nav-aside .header-text a::after,
.page-mobile-main-menu .mobile-menu-components .header-text a::after {
  display: none; /* the theme's permanent underline bar under header-text links; the tracked caps carry it alone */
}

/* Nav row alignment: the logo sits left and the icons right, so the menu starts under the logo
   instead of floating mid-row, where it read as part of the right-hand contact cluster. The empty
   left column (category dropdown, switched off) is dropped so the row is menu | contact. */
.page-header.header-08 .header-below-left:not(:has(.header-content-inner > *)) {
  display: none;
}
.page-header.header-08 .header-below-center {
  flex: 1 1 auto;
}
.page-header.header-08 .header-below-center .header-content-inner {
  justify-content: flex-start; /* the theme's -14px/+14px item margins cancel, so the first item's text lands on the logo edge */
}
.page-header.header-08 .header-below-right {
  flex: 0 0 auto;
}

/* Cart and checkout surfaces. The theme ships these as white or grey cards with drop shadows;
   here they take the lift tone with a hairline, like the product frames and the filter sidebar. */
.cart_totals {
  background: var(--anstyle-lift);
  border: 1px solid var(--anstyle-line);
  box-shadow: none;
}
.woocommerce-message,
.woocommerce-info {
  background: var(--anstyle-lift);
  border: 1px solid var(--anstyle-line);
}
/* Fly-out cart drawer: cream panel, footer lifted with a hairline above it, grey quantity field
   brought in line with the other inputs. */
#popup-fly-cart .inner {
  background: var(--anstyle-cream);
}
.fly-cart-header {
  background: transparent;
}
.fly-cart-footer {
  background: var(--anstyle-lift);
  border-top: 1px solid var(--anstyle-line);
  box-shadow: none;
}
.woocommerce-mini-cart .quantity .qty {
  background: var(--anstyle-cream);
  border-color: rgba(0, 0, 0, .14);
}
#popup-fly-cart .woocommerce-mini-cart-item .product-thumbnail {
  border-color: var(--anstyle-line);
}

/* Below 992px the filter sidebar slides in off-canvas with its own side tab, and phones add a
   bottom tab bar. All three ship white or grey. Drawers are cream here, like the menu drawer
   and the fly-out cart, with hairlines instead of shadows. */
.page-sidebar.sidebar-off {
  --popup-background: var(--anstyle-cream); /* the theme paints the off-canvas panel from this variable */
}
.btn-js-open-off-sidebar.btn-open-off-sidebar-mobile {
  background: var(--anstyle-lift);
  border: 1px solid var(--anstyle-line);
  box-shadow: none;
}
#page-mobile-tabs {
  background: var(--anstyle-cream);
  border-top: 1px solid var(--anstyle-line);
  box-shadow: none;
}
#page-mobile-tabs .mobile-tab-link {
  border-right-color: var(--anstyle-line);
}

/* Smaller phone finds from the same scan: the carousel arrows are white discs with a halo, and
   WooCommerce paints quantity fields grey. */
.tm-swiper .swiper-nav-button,
.tm-swiper[class*="nav-style-"] .swiper-nav-button {
  background-color: var(--anstyle-lift);
  border-color: var(--anstyle-line);
  box-shadow: none;
}
div.quantity input.qty {
  background-color: var(--anstyle-cream);
  border-color: rgba(0, 0, 0, .14);
}