/*
Theme Name: Bongoto Shop
Theme URI: https://bongoto.com/product/bongoto-shop-theme/
Author: Bongoto
Author URI: https://bongoto.com/
Description: A clean, modern WooCommerce theme for single-store shops. Includes flexible headers, Elementor integration, and widgetized footers. Built for speed, accessibility, and customization via the WordPress Customizer.
Version: 1.0.3
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bongoto-shop
Domain Path: /languages
Tags: e-commerce, custom-header, custom-background, translation-ready, blog, rtl-language-support
Copyright: © 2025 Bongoto. Licensed under GPLv2 or later.
*/

@charset "UTF-8";

/* --------------------------------------------------------------
0. CSS Variables (can be overridden by theme.json where supported)
-------------------------------------------------------------- */

:root {
  --bt-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --bt-color-bg: #ffffff;
  --bt-color-fg: #0f172a;       /* slate-900 */
  --bt-color-fg-muted: #475569; /* slate-600 */
  --bt-color-border: #e2e8f0;   /* slate-200 */
  --bt-color-primary: #2563eb;  /* blue-600 */
  --bt-color-primary-contrast: #ffffff;
  --bt-color-accent: #10b981;   /* emerald-500 */
  --bt-color-danger: #ef4444;   /* red-500 */
  --bt-color-warning: #f59e0b;  /* amber-500 */
  --bt-color-success: #16a34a;  /* green-600 */

  --bt-radius-sm: .375rem; /* 6px */
  --bt-radius-md: .5rem;   /* 8px */
  --bt-radius-lg: .75rem;  /* 12px */
  --bt-radius-xl: 1rem;    /* 16px */

  --bt-space-1: .25rem;
  --bt-space-2: .5rem;
  --bt-space-3: .75rem;
  --bt-space-4: 1rem;
  --bt-space-5: 1.25rem;
  --bt-space-6: 1.5rem;
  --bt-space-8: 2rem;
  --bt-space-10: 2.5rem;
  --bt-space-12: 3rem;

  --bt-container-max: 1220px;
  --bt-transition: 220ms cubic-bezier(.2,.6,.2,1);
}

/* --------------------------------------------------------------
1. Base / Reset
-------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--bt-font-sans);
  color: var(--bt-color-fg);
  background: var(--bt-color-bg);
  font-size: 16px;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

img { height: auto; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--bt-color-primary);
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--bt-color-border);
  margin: var(--bt-space-8) 0;
}

/* --------------------------------------------------------------
2. Typography
-------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--bt-space-3);
  font-weight: 700;
  line-height: 1.2;
}

p {
  margin: 0 0 var(--bt-space-4);
  color: var(--bt-color-fg-muted);
}

ul,
ol {
  margin: 0 0 var(--bt-space-4) 1.25rem;
}

/* --------------------------------------------------------------
3. Layout helpers
-------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--bt-container-max);
  margin-inline: auto;
  padding-inline: var(--bt-space-4);
}

.section {
  padding-block: var(--bt-space-10);
}

.card {
  border: 1px solid var(--bt-color-border);
  border-radius: var(--bt-radius-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

/* --------------------------------------------------------------
4. Buttons / Inputs
-------------------------------------------------------------- */

.button,
.wp-block-button__link,
button,
input[type="submit"],
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--bt-radius-md);
  background: var(--bt-color-primary);
  color: var(--bt-color-primary-contrast);
  cursor: pointer;
  transition: background var(--bt-transition), box-shadow var(--bt-transition), transform var(--bt-transition);
}

.button:hover,
.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
.btn:hover {
  filter: brightness(0.95);
}

.button:focus-visible,
.wp-block-button__link:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.button--secondary,
.btn--secondary {
  background: #fff;
  color: var(--bt-color-fg);
  border-color: var(--bt-color-border);
}

.button--danger { background: var(--bt-color-danger); }
.button--success { background: var(--bt-color-success); }

/* Inputs */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--bt-color-border);
  border-radius: var(--bt-radius-md);
  background: #fff;
  transition: border-color var(--bt-transition), box-shadow var(--bt-transition);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--bt-color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  outline: none;
}

/* Search form minimal */
.search-form {
  display: flex;
  gap: .5rem;
}

.search-form .search-field {
  flex: 1;
}

/* --------------------------------------------------------------
5. Header scaffolding (variants will add specifics in header.css)
-------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--bt-color-border);
  background: #ffffffc7; /* subtle translucency for sticky case */
  backdrop-filter: saturate(180%) blur(8px);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--bt-space-4);
  min-height: 64px;
}

.site-branding {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.site-logo {
  max-height: 40px;
  width: auto;
}

.site-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bt-color-fg);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

.header-upload {
  margin-left: auto;
}

/* Sticky toggled by JS (header.js) */
.is-sticky .site-header {
  position: sticky;
  top: 0;
}

/* --------------------------------------------------------------
6. Footer scaffold
-------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--bt-color-border);
  background: #fff;
  margin-top: var(--bt-space-10);
}

.footer-subscribe {
  padding: var(--bt-space-8) 0;
  border-bottom: 1px solid var(--bt-color-border);
}

.footer-widgets {
  padding: var(--bt-space-8) 0;
}

.footer-credits {
  border-top: 1px solid var(--bt-color-border);
  padding: var(--bt-space-4) 0;
  font-size: .925rem;
  color: var(--bt-color-fg-muted);
}

/* --------------------------------------------------------------
7. Accessibility helpers
-------------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  padding: .5rem 1rem;
  background: #000;
  color: #fff;
  border-radius: var(--bt-radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  background: #000;
  color: #fff;
  padding: .5rem .75rem;
  border-radius: var(--bt-radius-sm);
}

/* Focus ring for interactive elements (fallback) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bt-color-primary);
  outline-offset: 2px;
}

/* --------------------------------------------------------------
8. WordPress align helpers
-------------------------------------------------------------- */

.alignnone { margin: .5rem 0; }

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignleft {
  float: left;
  margin-right: 1rem;
}

.alignright {
  float: right;
  margin-left: 1rem;
}

.wp-caption { max-width: 100%; }

.wp-caption-text {
  font-size: .875rem;
  color: var(--bt-color-fg-muted);
}

.wp-block-image figcaption {
  font-size: .875rem;
  color: var(--bt-color-fg-muted);
  text-align: center;
}

.wp-block { max-width: var(--bt-container-max); }

.wp-block[data-align="wide"] {
  max-width: calc(var(--bt-container-max) + 200px);
}

.wp-block[data-align="full"] {
  max-width: none;
}

/* --------------------------------------------------------------
9. Utilities
-------------------------------------------------------------- */

.hide { display: none !important; }

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

.p-0 { padding: 0 !important; }

.text-muted { color: var(--bt-color-fg-muted) !important; }
.text-center { text-align: center !important; }

/* --------------------------------------------------------------
10. WooCommerce quick primitives
   (detailed styles live in assets/css/main.css)
-------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: var(--bt-radius-md);
}

.woocommerce .price {
  font-weight: 700;
  color: var(--bt-color-fg);
}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  border-radius: var(--bt-radius-md);
}

/* ===== Shop Page quick fixes ===== */

/* Mobile shop search */
@media (max-width: 768px) {
  .woocommerce .woocommerce-product-search,
  .bt-shop-main .woocommerce-product-search,
  .bt-shop-main .search-form {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .woocommerce .woocommerce-product-search input[type="search"],
  .bt-shop-main .search-form input[type="search"] {
    height: 38px;
    font-size: 14px;
    border-radius: 8px;
    padding: 0 .75rem;
  }

  .woocommerce .woocommerce-product-search button,
  .woocommerce .woocommerce-product-search input[type="submit"],
  .bt-shop-main .search-form button,
  .bt-shop-main .search-form .search-submit {
    height: 38px;
    min-width: 38px;
    border-radius: 8px;
    padding: 0 10px;
  }
}

/* Product card – sale/coupon badge */
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #10b981;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  min-width: 0;
}

/* Quick view */
.woocommerce ul.products li.product .quick-view,
.woocommerce ul.products li.product .yith-wcqv-button {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

/* Product title (desktop) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 20px;
  line-height: 1.3;
  margin: .4rem 0 .5rem;
}

/* Product title (mobile clamp) */
@media (max-width: 768px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
}

.woocommerce ul.products li.product {
  overflow: hidden;
}

.woocommerce ul.products li.product .button {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
}

.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button.buy-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.woocommerce ul.products li.product .bt-card-actions,
.woocommerce ul.products li.product .product-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* End of style.css */


/* Utilities */
.bt-hidden{display:none !important;}


/* --------------------------------------------------------------
Theme review recommended core classes
-------------------------------------------------------------- */

.sticky {}
.gallery-caption {}
.bypostauthor {}