@charset "UTF-8";
/*
Theme Name:   Storefront Child
Theme URI:    https://woocommerce.com/products/storefront/
Description:  Child theme for Storefront. Add your customizations here so they survive parent theme updates.
Author:       Gama24
Author URI:   https://gama24.pl/
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  storefront-child
*/
/* ==========================================================================
   Theme colors.
   Primary brand color, exposed both as a SCSS variable (for authoring) and a
   CSS custom property (for use anywhere in the cascade or in inline styles).
   ========================================================================== */
:root {
  --primary-red: #e3000f;
}

/* ==========================================================================
   Primary navigation row: white on red — desktop/tablet only.
   Targets only the second #masthead row (.storefront-primary-navigation); the
   branding row above keeps Storefront's default styling. The whole block is
   gated behind min-width: 768px so mobile (the collapsed hamburger menu) keeps
   Storefront's original colors — the red bar is a wide-screen treatment only.
   Dropdown sub-menus get their own solid red fill so they stay readable.
   ========================================================================== */
@media (min-width: 768px) {
  .storefront-primary-navigation {
    background-color: #e3000f;
    color: #fff;
  }
  /* Storefront colors nav links via `.main-navigation ul li a` (0,1,2), which
     outranks a plain `.storefront-primary-navigation a`. Match that depth so
     the white actually wins. */
  .storefront-primary-navigation .main-navigation ul li a,
  .storefront-primary-navigation .main-navigation ul li a:visited,
  .storefront-primary-navigation a {
    color: #fff;
  }
  /* Cart button in the row (the .cart-contents link and its amount/count).
     Deliberately NOT the mini-cart drop-down (.widget_shopping_cart), which
     keeps its own light background — white text there would be invisible. */
  .storefront-primary-navigation .site-header-cart .cart-contents,
  .storefront-primary-navigation .site-header-cart .cart-contents .amount,
  .storefront-primary-navigation .site-header-cart .cart-contents .count {
    color: #fff;
  }
  /* Dropdown sub-menus match the bar. */
  .storefront-primary-navigation .main-navigation ul.menu ul,
  .storefront-primary-navigation .main-navigation ul.nav-menu ul {
    background-color: #e3000f;
  }
  .storefront-primary-navigation .main-navigation ul li a:hover,
  .storefront-primary-navigation .main-navigation ul li:hover > a,
  .storefront-primary-navigation .main-navigation ul li.focus > a {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.08);
  }
}
/* ==========================================================================
   Product images: fit inside their container, never crop.
   object-fit: contain scales the whole image to fit the available box while
   preserving its aspect ratio, so nothing is clipped regardless of the
   original image dimensions.
   ========================================================================== */
.woocommerce,
.woocommerce-page {
  /* Shop / archive / category loops and up-sells, related, cross-sells. */
}
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  width: 100%;
  height: 250px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.woocommerce,
.woocommerce-page {
  /* Single product main image and gallery thumbnails. */
}
.woocommerce div.product div.images img,
.woocommerce-page div.product div.images img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image a,
.woocommerce-page div.product div.images .woocommerce-product-gallery__image a {
  display: block;
}
.woocommerce div.product div.images .flex-control-thumbs li img,
.woocommerce-page div.product div.images .flex-control-thumbs li img {
  height: 80px;
  -o-object-fit: contain;
     object-fit: contain;
}
.woocommerce,
.woocommerce-page {
  /* Cart, checkout and mini-cart line-item thumbnails. */
}
.woocommerce table.cart img,
.woocommerce .cart_item img,
.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img,
.woocommerce-page table.cart img,
.woocommerce-page .cart_item img,
.woocommerce-page ul.cart_list li img,
.woocommerce-page ul.product_list_widget li img {
  -o-object-fit: contain;
     object-fit: contain;
}

/* ==========================================================================
   Single product: full-width content.
   The sidebar is detached in functions.php on product pages; here we stretch
   the content column to reclaim the freed space. The two-class selector
   outranks Storefront's own `.content-area` width rule, so it wins regardless
   of media-query source order.
   ========================================================================== */
.storefront-child-no-sidebar .content-area {
  width: 100%;
  float: none;
  margin-right: 0;
}

/* ==========================================================================
   Mobile column order: sidebar above content.
   Storefront floats #primary / #secondary only inside @media (min-width: 768px);
   below that they are plain blocks that stack in DOM order — content first,
   sidebar second. Making #content's .col-full a flex column lets us flip them
   visually without touching a single PHP template: all nine templates emit
   #primary first and then call do_action( 'storefront_sidebar' ) after it, so
   a DOM-level fix would mean overriding every one of them.

   We push #primary to order:1 rather than pulling #secondary to order:-1 on
   purpose. Everything else in this wrapper — WooCommerce notices from
   storefront_shop_messages, plus whatever a plugin hooks to
   storefront_content_top — keeps the default order:0 and stays at the top
   where it belongs. Pulling the sidebar up instead would leapfrog the notices.

   Scoped to #content so the .col-full wrappers in the masthead and footer keep
   their normal block layout.

   Note: this reorders visually only. DOM order is unchanged, so screen reader
   and keyboard tab order still run content -> sidebar.
   ========================================================================== */
@media (max-width: 767.98px) {
  #content.site-content > .col-full {
    display: flex;
    flex-direction: column;
    /* Storefront's clearfix pseudo-elements would otherwise become stray
       empty flex items, and there are no floats to clear in a flex column. */
  }
  #content.site-content > .col-full::before, #content.site-content > .col-full::after {
    display: none;
  }
  #content.site-content > .col-full > #primary {
    order: 1;
  }
}
/* ==========================================================================
   WooCommerce block lists: undo Storefront's global list indent.
   Storefront applies `ul, ol { margin: 0 0 1.41575em 3em }` to every list on
   the site. WooCommerce core resets that for the classic `.woocommerce
   ul.products` loop, but the block stylesheet only zeroes margin-top/bottom
   on .wc-block-product-template — so the 3em left indent survives and shoves
   the whole grid right. Not a mobile-only bug: the same ~48px applies at
   every width, it just eats 13% of a phone screen instead of reading as
   stray padding on desktop. Deliberately not behind a media query, so the
   grid lines up with its surrounding content at all widths.
   margin-inline keeps this correct in RTL, where Storefront's flipped sheet
   indents from the right instead.
   ========================================================================== */
ul.wc-block-product-template,
ul.wc-block-grid__products {
  margin-inline: 0;
}

/* ==========================================================================
   Product Collection: one product per row on phones.
   The blocks are saved with `shrinkColumns: true`, so WooCommerce renders the
   auto-fill variant: `repeat(auto-fill, minmax(max(150px, …), 1fr))`. That
   150px floor derives the column count from container width alone, with no
   breakpoint — so once the 3em indent above was removed the container grew
   past 150px + 1.25em gap + 150px and a second column appeared. This forces
   a single column below WooCommerce's own 600px breakpoint for the block.

   Unlike the margin reset above, this one belongs in a media query: column
   count is a genuine per-viewport design decision, not an unwanted style
   being undone.

   Descendant selector is load-bearing — the block's own rule is
   `.wc-block-product-template__responsive.columns-N` (0,2,0), so a plain
   `ul.wc-block-product-template__responsive` (0,1,1) would lose to it.
   ========================================================================== */
@media (max-width: 599.98px) {
  .wp-block-woocommerce-product-collection ul.wc-block-product-template__responsive {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Product Categories: collapsed accordion.
   Only top-level categories show; each parent has a caret to expand its
   children. Sub-lists are revealed by the .is-open class added in
   assets/js/category-accordion.js. Covers both the classic widget and the
   block (woocommerce/product-categories).
   ========================================================================== */
/* Toggle caret button injected before each parent's link (shared). */
.cat-toggle {
  display: inline-block;
  width: 1.4em;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}
.cat-toggle::before {
  content: "▸"; /* ▸ right-pointing triangle */
  display: inline-block;
  transition: transform 0.15s ease;
}

li.is-open > .cat-toggle::before {
  transform: rotate(90deg); /* points down when expanded */
}

/* Classic "Product Categories" widget. */
.widget_product_categories ul.product-categories .children {
  display: none;
}
.widget_product_categories ul.product-categories li.is-open > .children {
  display: block;
}
.widget_product_categories ul.product-categories li.cat-item:not(.has-children) {
  padding-left: 1.4em; /* align leaf labels with parents */
}

/* Block: "Product Categories" (woocommerce/product-categories). */
.wc-block-product-categories .wc-block-product-categories-list-item > ul.wc-block-product-categories-list {
  display: none;
}
.wc-block-product-categories li.is-open > ul.wc-block-product-categories-list {
  display: block;
}
.wc-block-product-categories .wc-block-product-categories-list-item:not(.has-children) {
  padding-left: 1.4em; /* align leaf labels with parents */
}

/* ==========================================================================
   Sidebar category menu: larger type, touch-friendly rows.

   Scoped to .widget-area rather than applied to the block globally, so the
   same woocommerce/product-categories block dropped into page content keeps
   its default scale. The sidebar is the only place the shop uses it today.

   The column is 231px wide and several category names are long, so this is
   deliberately 16px rather than 18px: at 18px eight of the eighteen top-level
   labels wrap onto a second line and the list grows past 1200px, which reads
   as untidy rather than generous.
   ========================================================================== */
.widget-area .wc-block-product-categories .wc-block-product-categories-list {
  font-size: 16px;
}
.widget-area .wc-block-product-categories {
  /* Vertical padding as longhand, not the `padding` shorthand: the accordion
     rules above indent childless items with padding-left, and a shorthand
     here would silently reset it and break their alignment. */
}
.widget-area .wc-block-product-categories .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ececec;
}
.widget-area .wc-block-product-categories .wc-block-product-categories-list--depth-0 > .wc-block-product-categories-list-item:last-child {
  border-bottom: 0; /* No trailing rule under the final item. */
}
.widget-area .wc-block-product-categories {
  /* Every nested level, not just the first: matching on "not depth-0" keeps
     this working if a third tier is ever added. Sub-items get tighter rows
     and no rules, so an expanded branch reads as one block under its parent
     rather than as more top-level entries. */
}
.widget-area .wc-block-product-categories .wc-block-product-categories-list:not(.wc-block-product-categories-list--depth-0) > .wc-block-product-categories-list-item {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.widget-area .wc-block-product-categories {
  /* Storefront underlines every widget link (`.widget-area .widget a` in the
     parent stylesheet, specificity 0-2-1 — hence the depth of the selector
     below). Across eighteen stacked categories that underline reads as noise;
     the list structure and the hover state already make it obvious these are
     links. Kept on hover and keyboard focus, where it marks the one item
     being targeted. */
}
.widget-area .wc-block-product-categories .wc-block-product-categories-list-item > a {
  text-decoration: none;
}
.widget-area .wc-block-product-categories .wc-block-product-categories-list-item > a:hover, .widget-area .wc-block-product-categories .wc-block-product-categories-list-item > a:focus-visible {
  text-decoration: underline;
}
.widget-area .wc-block-product-categories {
  /* WooCommerce prints the product count immediately after the label with no
     separation at all, so it renders as "Gitary i Basy2314". Give it room and
     step it back, so the category name is what the eye reads first. */
}
.widget-area .wc-block-product-categories .wc-block-product-categories-list-item-count {
  margin-left: 0.4em;
  color: #8a8a8a;
  font-size: 0.8em;
}

h2.wp-block-heading.highlight {
  background-color: #e3000f;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
}

/* ==========================================================================
   Phone orders on single product pages.
   Two buttons occupy the same slot — a tel: link during business hours and a
   dialog trigger outside them — and the data-phone-order-state attribute on
   the wrapper decides which one is visible. Hiding rather than removing the
   inactive one is what lets assets/js/phone-order.js correct the state on a
   cached page without re-rendering anything.
   ========================================================================== */
/* Same row as add-to-cart. Scoped with :has() to the forms that actually
   contain the button — simple and external products — so the grouped-product
   table and the variable-product variations form keep their block layout. */
.single-product form.cart:has(> .phone-order) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}
.single-product form.cart:has(> .phone-order) .quantity,
.single-product form.cart:has(> .phone-order) .button {
  margin-bottom: 0;
  float: none; /* Storefront floats the quantity box. */
}
.single-product form.cart:has(> .phone-order) {
  /* Storefront gives the quantity box ~180px, which is far more than a
     one-to-three digit number needs and is the difference between the three
     controls fitting on one line and the phone button dropping to its own.
     Narrowed only inside forms that actually carry the button. */
}
.single-product form.cart:has(> .phone-order) .quantity .qty {
  width: 4.5em;
}
.single-product form.cart:has(> .phone-order) {
  /* Shrink before wrapping, so a narrow summary column tightens the buttons
     up rather than immediately breaking the row. */
}
.single-product form.cart:has(> .phone-order) .single_add_to_cart_button,
.single-product form.cart:has(> .phone-order) .phone-order {
  flex: 0 1 auto;
}

.phone-order {
  display: inline-flex;
}
.phone-order[data-phone-order-state=open] .phone-order__button--form, .phone-order[data-phone-order-state=closed] .phone-order__button--call {
  display: none;
}

/* Fallback placement: variable, grouped and out-of-stock products, where the
   button gets its own row under the add-to-cart area. */
.phone-order--standalone {
  display: flex;
  margin-bottom: 1em;
}

/* Ghost button: the phone order is the secondary path, so it reads as an
   outline against the solid add-to-cart button next to it. Filling on hover
   keeps the affordance obvious. box-shadow rather than border draws the
   outline inside the box, so the button stays exactly the same height as
   add-to-cart and the flex row does not shift. */
.phone-order__button {
  background-color: #fff;
  box-shadow: inset 0 0 0 2px #e3000f;
  color: #e3000f;
  text-decoration: none;
  white-space: nowrap;
  /* :focus-visible rather than :focus — a mouse click leaves focus on the
     button, and with plain :focus the ghost would stay filled afterwards as
     though it were still pressed. Keyboard users still get the fill. */
}
.phone-order__button:hover, .phone-order__button:focus-visible {
  background-color: #e3000f;
  color: #fff;
}

@media (max-width: 568px) {
  .phone-order,
  .phone-order__button {
    width: 100%;
    text-align: center;
  }
}
/* --------------------------------------------------------------------------
   Callback-request dialog. Native <dialog>, so the browser handles the
   backdrop, focus trapping and Escape; only the panel needs styling.
   -------------------------------------------------------------------------- */
.phone-order-dialog {
  width: min(32rem, 100vw - 2rem);
  padding: 0;
  border: 0;
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.phone-order-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.55);
}

.phone-order-dialog__inner {
  position: relative;
  padding: 2rem;
}

.phone-order-dialog__close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  padding: 0.25rem 0.6rem;
  background: none;
  border: 0;
  color: inherit;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.phone-order-dialog__close:hover, .phone-order-dialog__close:focus {
  background: none;
  color: #e3000f;
}

.phone-order-dialog__title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.phone-order-dialog__intro {
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Homepage slider.

   The banner carousel printed below the primary navigation on the front page.
   See template-parts/homepage-slider.php and assets/js/homepage-slider.js.

   The track is a horizontal scroll-snap container rather than a translated
   strip. That is what makes touch swipe, trackpad scrolling and keyboard
   scrolling work with no JavaScript at all — the script only adds autoplay and
   the arrow/dot controls on top. Consequences worth knowing when editing this:

   - Each slide must stay exactly 100% of the track width. The script derives
     every scroll offset from `index * track.clientWidth`, so a partial-width
     or peeking slide would desynchronise the dots.
   - The scrollbar is hidden, not disabled. Overflow is still `auto`, which is
     what keeps the track scrollable; only the visible bar is suppressed.
   ========================================================================== */
.homepage-slider-wrapper {
  margin-bottom: 2.617924em; /* Storefront's vertical rhythm unit. */
}

.homepage-slider {
  position: relative; /* Positioning context for the arrows. */
}

.homepage-slider__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain; /* Don't chain a swipe into browser back. */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-radius: 15px;
  /* The radius lives on the track, not on the individual banners. No
     `overflow: hidden` is needed to make it clip: the overflow-x/y pair above
     already makes this a scroll container, and a scroll container clips to
     its own rounded padding box. The result is one fixed rounded frame with
     the artwork moving behind it. Rounding each image instead sends a pair of
     curved corners travelling across the viewport on every slide change,
     which is what this replaced. */
  scrollbar-width: none; /* Firefox. */
  -ms-overflow-style: none; /* Legacy Edge. */
}
.homepage-slider__track::-webkit-scrollbar {
  display: none;
}

.homepage-slider__slide {
  flex: 0 0 100%;
  max-width: 100%;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* One slide per swipe, never a skid past two. */
}

.homepage-slider__link {
  display: block;
  /* Purely to shape the focus ring below — an outline follows its own
     element's border-radius, and a square ring inset into the track's rounded
     frame gets its corners clipped off. Nothing is rounded visually here: the
     link's overflow is visible, so the banner inside it is untouched. */
  border-radius: 15px;
}
.homepage-slider__link:focus-visible {
  outline: 2px solid #e3000f;
  outline-offset: -4px;
}

.homepage-slider__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/1;
  -o-object-fit: cover;
     object-fit: cover;
  /* Storefront rounds every image by 3px (`img { border-radius: 3px }` in the
     parent stylesheet). Left alone, each banner would keep a small curve at
     its corners — so mid-transition a pair of them would travel across the
     frame and leave a visible notch where two slides meet. The frame's own
     15px curve above is the only rounding wanted here. */
  border-radius: 0;
  /* The registered `storefront_child_slide` size is already a 3:1 hard crop,
     so object-fit is a safety net for slides whose image predates that size
     (or is too small for WordPress to have generated it) — it keeps the
     banner the right shape instead of letting one slide change the height of
     the whole page. */
}

/* --------------------------------------------------------------------------
   Arrows.

   Storefront styles bare <button> elements globally (dark fill, generous
   padding), so these rules are overrides rather than a blank slate — hence the
   explicit padding, border-radius and background-color reset.
   -------------------------------------------------------------------------- */
.homepage-slider__arrow {
  /* The `hidden` attribute the template prints is only a UA-stylesheet
     `display: none`, and the `display: flex` below is an author rule of equal
     specificity — author wins, so without this the controls would be visible
     and clickable before (or entirely without) the script that makes them
     work. Every element here that is printed hidden needs the same guard. */
}
.homepage-slider__arrow[hidden] {
  display: none;
}
.homepage-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  color: #43454b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.homepage-slider__arrow:hover, .homepage-slider__arrow:focus {
  background-color: #e3000f;
  color: #fff;
}
.homepage-slider__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.homepage-slider__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.homepage-slider__arrow--prev {
  left: 0.75rem;
}

.homepage-slider__arrow--next {
  right: 0.75rem;
}

/* --------------------------------------------------------------------------
   Dots.

   The button is a 1.5rem square for a comfortable touch target, while
   background-clip keeps the painted dot down to the 0.75rem the design calls
   for. The active state is driven by aria-current, so the attribute the screen
   reader uses and the one the eye uses can never drift apart.
   -------------------------------------------------------------------------- */
.homepage-slider__dots[hidden] {
  display: none; /* See the note on .homepage-slider__arrow. */
}
.homepage-slider__dots {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.homepage-slider__dots-item {
  margin: 0;
}

.homepage-slider__dot {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.375rem;
  border: 0;
  border-radius: 50%;
  background-color: #ccc;
  background-clip: content-box;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.homepage-slider__dot:hover, .homepage-slider__dot:focus {
  background-color: #999;
  background-clip: content-box;
}
.homepage-slider__dot[aria-current=true] {
  background-color: #e3000f;
  background-clip: content-box;
}

@media (max-width: 568px) {
  /* On a phone the arrows sit over roughly a third of a much smaller banner.
     Swipe and the dots are the natural controls at this width, so the arrows
     shrink and tuck into the corners rather than covering the artwork. */
  .homepage-slider__arrow {
    width: 2.25rem;
    height: 2.25rem;
  }
  .homepage-slider__arrow svg {
    width: 1rem;
    height: 1rem;
  }
  .homepage-slider__arrow--prev {
    left: 0.375rem;
  }
  .homepage-slider__arrow--next {
    right: 0.375rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* The other half of the reduced-motion promise: the script already refuses
     to autoplay, and this stops a tapped arrow or dot from animating a
     full-width banner across the viewport. The slide still changes — it just
     cuts rather than glides. */
  .homepage-slider__track {
    scroll-behavior: auto;
  }
}/*# sourceMappingURL=style.css.map */