/*
Theme Name: Shop Skeleton
Theme URI:
Author: Dev
Description: Structural skeleton theme for a WooCommerce store. Defines layout regions (header / content / sidebar / footer) and a responsive grid for correct element placement. Intentionally ships with ZERO visual design — colours, typography and decoration are added per client on top of this base.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: shop-skeleton
Tags: woocommerce, custom-background, custom-menu, threaded-comments
*/

/* =========================================================================
   0. Design tokens — the ONE place to retune the skeleton.
   All structural sizing lives here so a per-client design can override it.
   ========================================================================= */
:root {
    --wrap-max:        1200px;  /* max content width */
    --gutter:          24px;    /* horizontal page padding */
    --gap:             24px;    /* generic grid gap */
    --sidebar-width:   280px;   /* sidebar column width on wide screens */
    --product-columns: 3;       /* catalog grid columns (wide screens) */
    --payment-stripe-width: 100%; /* Stripe badge width in footer (full column) */
    --payment-card-height: 28px;  /* uniform height of card brand logos */
    --map-height:      400px;   /* contact page map height */
    --banner-height:   460px;   /* home hero banner height */
    --social-icon-size: 22px;   /* footer social icon size */
    --trust-card-height: 240px; /* "We are trusted" card height */
    --region-outline:  none;    /* set to e.g. 1px dashed #ccc to visualise regions while building */
}

/* =========================================================================
   1. Minimal reset — structural only, no aesthetics.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { padding: 0; }
a { color: inherit; }

/* =========================================================================
   2. Page skeleton: header / main / footer stacked; centred wrap.
   ========================================================================= */
.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;   /* contain full-bleed sections (hero banner) — no horizontal scroll */
}
.wrap {
    width: 100%;
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-header,
.site-footer { outline: var(--region-outline); }

/* --- Header top row: promo bar (full width strip) --- */
.site-header-promo .wrap { padding-block: 8px; }
.promo-list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
    text-align: center;
}

/* --- Header main row: branding | nav | tools(cart) --- */
.site-header-main .wrap {
    display: flex;
    align-items: center;
    gap: var(--gap);
    flex-wrap: wrap;
    padding-block: var(--gap);
}
.site-branding { margin-right: auto; }
.ss-logo-img { display: block; }            /* SVG behaves with explicit width/height */
.main-navigation ul { list-style: none; margin: 0; display: flex; gap: var(--gap); flex-wrap: wrap; }
.header-tools { display: flex; align-items: center; gap: var(--gap); }

/* =========================================================================
   3. Content + sidebar grid.
   Body class .has-sidebar -> two columns; otherwise single full-width column.
   ========================================================================= */
.site-main { flex: 1 0 auto; outline: var(--region-outline); }
.site-main .wrap { padding-block: var(--gap); }

.has-sidebar .site-main .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
    gap: calc(var(--gap) * 1.5);
    align-items: start;
}
.content-area { min-width: 0; }            /* prevent grid blowout */
.widget-area { outline: var(--region-outline); }

/* =========================================================================
   4. WooCommerce product grid — the catalog "сітка".
   Override WC's default float/flex columns with a clean CSS Grid.
   ========================================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(var(--product-columns), minmax(0, 1fr));
    gap: var(--gap);
    margin: 0;
    list-style: none;
}
/* WooCommerce adds clearfix ::before/::after on ul.products. Inside a CSS grid
   these generated boxes become phantom cells (an empty column at the start),
   so remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    content: none;
    display: none;
}
/* Neutralise WooCommerce's per-item width/margins so the grid governs sizing */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}
/* Inside a sidebar layout the catalog has less room — drop a column */
.has-sidebar .woocommerce ul.products { --product-columns: 2; }

/* =========================================================================
   4b. Footer: 4-column top section + full-width centered copyright.
   ========================================================================= */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--gap) * 1.5);
    align-items: start;
    padding-block: calc(var(--gap) * 2);
}
.footer-col { min-width: 0; }
.footer-col__title { margin: 0 0 var(--gap); }

.footer-menu,
.footer-contact {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

/* Payment methods under the logo: Stripe full-width on top, cards in a row below */
.footer-payments { margin-top: var(--gap); }
.footer-payments__primary { line-height: 0; }
.footer-payments__primary .payment-img {
    display: block;
    width: var(--payment-stripe-width);   /* full column width by default */
    height: auto;
    max-width: 100%;
}
.footer-payments__row {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* equal cells -> always one row under Stripe, never wraps */
    align-items: center;
    gap: 8px;
}
.footer-payments__row .payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;                          /* let cells shrink so all four fit */
}
.footer-payments__row .payment-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;                       /* fit the equal-width cell */
    max-height: var(--payment-card-height);/* cap height, keep each logo's aspect ratio */
}

.footer-col--brand .footer-logo { display: inline-block; }

/* Social icons under the logo (inline SVG inherits text colour via currentColor) */
.footer-social {
    list-style: none;
    margin: var(--gap) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.footer-social a {
    display: inline-flex;
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    color: inherit;
}
.footer-social svg { width: 100%; height: 100%; fill: currentColor; display: block; }

/* Bottom copyright bar — full width, centered */
.footer-bottom .wrap { padding-block: var(--gap); }
.footer-bottom .site-info { margin: 0; text-align: center; }

/* =========================================================================
   4c. Front page: Special Offer banner + featured products.
   ========================================================================= */
.home-banner {
    position: relative;
    display: flex;
    min-height: var(--banner-height);
    margin-bottom: calc(var(--gap) * 2);
    overflow: hidden;
    isolation: isolate;
    /* Full-bleed: span the whole page width even inside the centred .wrap. */
    width: 100vw;
    left: 50%;
    right: auto;
    margin-left: -50vw;
}
.home-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* cover the full banner area */
}
.home-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Transparent → black, darkest toward the bottom-right where the text sits. */
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
}
.home-banner__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding: calc(var(--gap) * 1.5) var(--gutter);
    display: flex;
    align-items: center;       /* vertical center */
    justify-content: center;   /* horizontal center */
}
.home-banner__content {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-align: center;
    color: #fff;               /* legible over the dark gradient */
}
.home-banner__title { margin: 0; }
.home-banner__text { margin: 0; }
.home-banner__btn {
    display: inline-block;
    padding: 0.7em 1.6em;
    border: 1px solid currentColor;   /* structural affordance only; colour added per design */
    text-decoration: none;
}

/* No image set: fall back to a simple in-flow content block (no hero/full-bleed). */
.home-banner--no-media {
    display: block;
    width: auto;
    min-height: 0;
    left: auto;
    margin-left: 0;
    overflow: visible;
}
.home-banner--no-media .home-banner__inner {
    padding-inline: 0;
    justify-content: flex-start;
}
.home-banner--no-media .home-banner__content {
    align-items: flex-start;
    text-align: left;
    color: inherit;
    max-width: none;
}

.home-featured { margin-top: calc(var(--gap) * 2); }
.home-featured__title { margin: 0 0 var(--gap); }
.home-featured .products { --product-columns: 4; }   /* 4 across on the home page */

/* =========================================================================
   4d. Contact page: info + form columns, full-width clickable map.
   ========================================================================= */
.contact-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--gap) * 2);
    align-items: start;
    margin-bottom: calc(var(--gap) * 2);
}
.contact-col { min-width: 0; }
.contact-col__title { margin: 0 0 var(--gap); }

.contact-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75em; }
.contact-info__label { font-weight: 700; margin-right: 0.25em; }

/* Form fields (works with Contact Form 7 markup) */
.contact-col--form .contact-form__row { margin: 0 0 var(--gap); }
.contact-col--form label { display: block; }
.contact-col--form input[type="text"],
.contact-col--form input[type="email"],
.contact-col--form textarea {
    width: 100%;
    padding: 0.6em 0.8em;
    border: 1px solid currentColor;
    background: transparent;
    font: inherit;
}
.contact-col--form textarea { min-height: 140px; resize: vertical; }
.contact-col--form .contact-form__actions { margin-bottom: 0; }
.contact-col--form input[type="submit"] {
    display: inline-block;
    padding: 0.7em 1.6em;
    border: 1px solid currentColor;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* Full-width Google map; overlay link makes the whole map open Google Maps */
.contact-map { position: relative; width: 100%; margin-top: var(--gap); }
.contact-map__frame { display: block; width: 100%; height: var(--map-height); border: 0; }
.contact-map__link { position: absolute; inset: 0; z-index: 2; display: block; }

/* =========================================================================
   4e. About page: founder (photo + text) + Our Team (full-content photo + text).
   ========================================================================= */
.about-intro {
    display: grid;
    grid-template-columns: 2fr 3fr;   /* founder photo | text block */
    gap: calc(var(--gap) * 2);
    align-items: start;
    margin-bottom: calc(var(--gap) * 2.5);
}
.about-intro__media { min-width: 0; }
.about-intro__media img { display: block; width: 100%; height: auto; }
.about-intro__content { min-width: 0; }
.about-intro__title { margin-top: 0; }

.about-team { margin-top: calc(var(--gap) * 2); }
.about-team__title { margin: 0 0 var(--gap); text-align: center; }
.about-team__media img { display: block; width: 100%; height: auto; }   /* full content width, not full page */
.about-team__text {
    max-width: 800px;
    margin: calc(var(--gap) * 1.5) auto 0;
    text-align: center;
}

/* =========================================================================
   4f. "We are trusted" section (above footer): two darkened-photo card links.
   ========================================================================= */
.trust { margin-block: calc(var(--gap) * 2); }
.trust__title { margin: 0 0 var(--gap); text-align: center; }
.trust__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}
.trust-card {
    position: relative;
    display: flex;
    align-items: center;       /* vertical center */
    justify-content: center;   /* horizontal center */
    min-height: var(--trust-card-height);
    padding: var(--gap);
    overflow: hidden;
    isolation: isolate;
    text-align: center;
    text-decoration: none;
    color: #fff;               /* title sits on the darkened photo */
}
.trust-card__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.trust-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);   /* darken the photo for legibility */
}
.trust-card__title { position: relative; z-index: 2; font-size: 1.5em; }

/* =========================================================================
   4g. FAQ accordion (native <details>; answers collapsed until clicked).
   ========================================================================= */
.faq { margin-top: calc(var(--gap) * 2); }
.faq__title { text-align: center; margin: 0 0 var(--gap); }
.faq__list { max-width: 820px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid currentColor; }
.faq__question {
    cursor: pointer;
    list-style: none;          /* hide default disclosure triangle */
    padding: var(--gap) 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after { content: "+"; flex: none; font-weight: 400; }
.faq__item[open] .faq__question::after { content: "\2212"; } /* minus sign */
.faq__answer { padding: 0 0 var(--gap); }
.faq__answer > :first-child { margin-top: 0; }
.faq__answer > :last-child { margin-bottom: 0; }

/* =========================================================================
   5. Responsive: collapse to predictable breakpoints.
   ========================================================================= */
@media (max-width: 960px) {
    .has-sidebar .site-main .wrap { grid-template-columns: 1fr; }
    :root { --product-columns: 3; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-featured .products { --product-columns: 3; }
}
@media (max-width: 720px) {
    :root { --product-columns: 2; }
    .site-header-main .wrap { flex-direction: column; align-items: stretch; }
    .site-branding { margin-right: 0; }
    :root { --banner-height: 340px; }
    .home-banner__content { max-width: 100%; }
    .home-featured .products { --product-columns: 2; }
    .contact-top { grid-template-columns: 1fr; gap: calc(var(--gap) * 1.5); }
    .about-intro { grid-template-columns: 1fr; gap: calc(var(--gap) * 1.5); }
    .trust__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    :root { --product-columns: 1; }
    .home-featured .products { --product-columns: 1; }
}

/* Accessibility helper kept (structural, not visual) */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 0; }

/* =========================================================================
   6. Overlays: keep the Complianz cookie-consent UI on top of every floating
   widget (Tidio chat button, reCAPTCHA badge). 2147483647 = max z-index, so
   the consent banner and the "Manage consent" button are never covered.
   ========================================================================= */
#cmplz-cookiebanner-container,
.cmplz-cookiebanner-container,
.cmplz-cookiebanner,
#cmplz-manage-consent,
.cmplz-manage-consent {
    z-index: 2147483647 !important;
}