/*!
 * Own Shop — Streetwear / Oversized-Tee UI Enhancement Layer
 * ------------------------------------------------------------
 * This file does NOT replace the theme's core stylesheets.
 * It loads AFTER bootstrap.min.css, style-main.min.css and
 * woocommerce-style.min.css and layers the brand's visual
 * identity on top of them without touching layout, markup,
 * WordPress/WooCommerce functionality or plugin compatibility.
 *
 * Brand palette (see project brief):
 *   Primary        #EA516E
 *   Primary Dark   #7A263A  (burgundy accent / hover)
 *   Heading        #18181B
 *   Dark Secondary #29272B
 *   Background     #FFF9F7
 *   Soft Background#FFF0F2
 *   Border         #E8E2E3
 *   Text Secondary #6B6568
 *   White          #FFFFFF
 *
 * Safe to delete this single file to instantly revert to the
 * original theme look — nothing else in the theme depends on it.
 */

/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */
:root {
  /* ---- canonical brand tokens (source of truth) ---- */
  --color-primary: #EA516E;
  --color-primary-dark: #7A263A;
  --color-heading: #18181B;
  --color-dark-secondary: #29272B;
  --color-background: #FFF9F7;
  --color-soft-background: #FFF0F2;
  --color-border: #E8E2E3;
  --color-text-secondary: #6B6568;
  --color-white: #FFFFFF;

  /* ---- internal aliases (kept so every rule below still reads
     naturally; all derive from the canonical tokens above, so a
     future palette change only ever happens in one place) ---- */
  --os-primary: var(--color-primary);
  --os-primary-dark: var(--color-primary-dark);
  --os-primary-tint: var(--color-soft-background);
  --os-ink: var(--color-heading);
  --os-ink-soft: var(--color-dark-secondary);
  --os-paper: var(--color-background);
  --os-white: var(--color-white);
  --os-grey-100: var(--color-soft-background);
  --os-grey-300: var(--color-border);
  --os-grey-500: var(--color-text-secondary);
  --os-grey-700: var(--color-text-secondary);

  /* fonts */
  --os-font-display: 'Archivo Black', 'Poppins', Arial, sans-serif;
  --os-font-body: 'Poppins', 'Josefin Sans', Arial, sans-serif;

  --os-radius: 2px;           /* streetwear = sharp, not rounded */
  --os-shadow: 0 10px 30px rgba(24,24,27,0.08);
  --os-shadow-hover: 0 18px 40px rgba(24,24,27,0.16);
}

/* ==========================================================
   2. GLOBAL BASE
   ========================================================== */
body {
  background-color: var(--os-paper);
  font-family: var(--os-font-body);
  color: var(--os-ink-soft);
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.site-title, .page-title h1, .section-title {
  font-family: var(--os-font-display);
  color: var(--os-ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

a { transition: all 0.25s ease-in-out; }

::selection { background: var(--os-primary); color: var(--os-white); }

/* modern browsers: tint native checkboxes/radios (filters, variation
   pickers, form fields) with the brand color instead of default blue */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--os-primary);
}

/* thin brand rule under section titles for a "label tag" feel */
.section-title,
.widget-title {
  position: relative;
  padding-bottom: 14px;
}
.section-title::after,
.widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 4px;
  background: var(--os-primary);
}
.section-title.text-center::after,
.widget-title.text-center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================================
   3. BUTTONS — primary CTAs use the brand pink by default with
   a burgundy hover, per the brand brief (Add to Cart, submit,
   checkout, price-filter etc.). Secondary/ghost actions stay
   neutral so the interface doesn't turn fully pink.
   ========================================================== */
.woocommerce a.button:not(.product_type_simple):not(.product_type_grouped):not(.product_type_external):not(.product_type_variable):not(.yith-wcqv-button):not(.compare-button),
.woocommerce button.button:not(.product_type_simple),
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .button,
.single_add_to_cart_button,
a.own-shop-btn,
.btn:not(.navbar-toggle),
button[type="submit"] {
  font-family: var(--os-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 13px;
  border-radius: var(--os-radius);
  background: var(--os-primary) !important;
  color: var(--os-white) !important;
  border: 2px solid var(--os-primary) !important;
  padding: 14px 30px;
  box-shadow: none;
  transition: all 0.25s ease-in-out;
}

.woocommerce a.button:hover:not(.product_type_simple):not(.product_type_grouped):not(.product_type_external):not(.product_type_variable):not(.yith-wcqv-button):not(.compare-button),
.woocommerce button.button:hover:not(.product_type_simple),
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce div.product form.cart .button:hover,
.single_add_to_cart_button:hover,
a.own-shop-btn:hover,
.btn:hover:not(.navbar-toggle),
button[type="submit"]:hover {
  background: var(--os-primary-dark) !important;
  border-color: var(--os-primary-dark) !important;
  color: var(--os-white) !important;
  transform: translateY(-2px);
  box-shadow: var(--os-shadow-hover);
}

/* disabled state — muted, not brand-colored */
.woocommerce button.button.disabled,
.woocommerce button.button.disabled:hover,
.woocommerce a.button.disabled,
.woocommerce input.button.disabled,
button[type="submit"]:disabled,
button[disabled] {
  background: var(--os-grey-300) !important;
  border-color: var(--os-grey-300) !important;
  color: var(--os-grey-500) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* outline / ghost variant used across the theme's secondary CTAs
   (e.g. "Continue shopping", "View cart") — kept neutral so the
   primary pink stays reserved for the main call to action. */
.woocommerce a.button.alt,
.wc-forward {
  background: var(--os-white) !important;
  color: var(--os-ink) !important;
  border: 2px solid var(--os-ink) !important;
}
.woocommerce a.button.alt:hover,
.wc-forward:hover {
  background: var(--os-primary) !important;
  border-color: var(--os-primary) !important;
  color: var(--os-white) !important;
}

/* ==========================================================
   4. HEADER — one consistent dark bar (logo + menu + icons
   all live in the SAME markup wrapper in this theme, so they
   must share one background — mixing white/black zones here
   is what made text disappear).
   ========================================================== */
.theme-menu-wrapper.style1,
#header-main.header-wrapper,
.top-bar {
  background: var(--os-ink) !important;
}

/* safety net: any link/icon/text inside the header defaults to
   light — more specific rules below (hover states, dropdowns,
   buttons) naturally win over this thanks to higher specificity */
.theme-menu-wrapper.style1 a,
.theme-menu-wrapper.style1 i,
.theme-menu-wrapper.style1 span {
  color: var(--os-grey-300);
}
.theme-menu-wrapper.style1 a:hover,
.theme-menu-wrapper.style1 a:focus {
  color: var(--os-primary);
}

.top-bar-menu li a,
.menu-social li a {
  color: var(--os-grey-300) !important;
}
.top-bar-menu li a:hover,
.menu-social li a:hover {
  color: var(--os-primary) !important;
}

.header-wrapper .logo h1,
.header-wrapper .logo p.site-title,
.header-wrapper .logo p.site-title a,
.style1 h1.site-title,
.style1 p.site-title,
.style1 p.site-title a {
  font-family: var(--os-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--os-white) !important;
}

/* mobile hamburger toggle — bars were dark grey, invisible on a dark header */
.top-menu .navbar-toggle .icon-bar {
  background: var(--os-white);
}
.navbar-toggle {
  border-color: rgba(255,255,255,0.35) !important;
}

/* header cart / wishlist icons */
.site-header-cart .menu-cart a i,
.menu-header a i {
  color: var(--os-white);
}
.site-header-cart:hover .menu-cart a i,
.menu-header a:hover i {
  color: var(--os-primary);
}

/* search box (header search form) */
.top-menu input[type="search"],
.top-menu input[type="text"].search-field,
.search-form input[type="search"] {
  background: var(--os-white);
  color: var(--os-ink);
  border: 1px solid var(--os-grey-300);
  border-radius: var(--os-radius);
}

.top-menu .navigation > li > a {
  font-family: var(--os-font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--os-white);
}

.top-menu .navigation > li:hover > a,
.top-menu .navigation > li:focus > a,
.top-menu .navigation > li.current > a,
.top-menu .navigation > li.current-menu-item > a {
  color: var(--os-primary) !important;
}

.top-menu .navigation > li > a:before {
  background: var(--os-primary);
  height: 3px;
}

.dropdown-menu,
.top-menu .navigation > li > ul,
.top-menu .navigation > li > ul > li > ul {
  background: var(--os-ink) !important;
  border: none;
  border-radius: 0;
  box-shadow: var(--os-shadow-hover);
}

.top-menu .navigation > li > ul > li > a,
.top-menu .navigation > li > ul > li > ul > li > a {
  color: var(--os-grey-300) !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* Note: the theme's own built-in dynamic CSS (inline, printed late in
   <head>, after this file) sets the hover/focus BACKGROUND of submenu
   items to the brand pink — that rule always wins for `background`
   here regardless of what we do. So on hover the panel turns pink;
   text must switch to white (not pink) or it disappears into it. */
.top-menu .navigation > li > ul > li:hover > a,
.top-menu .navigation > li > ul > li:focus > a,
.top-menu .navigation > li > ul > li > ul > li:hover > a,
.top-menu .navigation > li > ul > li > ul > li > a:hover,
.top-menu .navigation > li > ul > li > a:focus {
  color: var(--os-white) !important;
}

/* cart icon badge */
.header-cart .cart-count,
.mini-cart-icon .count {
  background: var(--os-primary) !important;
}

/* breadcrumbs */
.woocommerce-breadcrumb,
.own-shop-breadcrumbs {
  color: var(--os-grey-500);
}
.woocommerce-breadcrumb a,
.own-shop-breadcrumbs a {
  color: var(--os-grey-500);
}
.woocommerce-breadcrumb a:hover,
.own-shop-breadcrumbs a:hover {
  color: var(--os-primary);
}

/* ==========================================================
   5. PRODUCT CARDS — big image focus, hover reveal, bold price
   ========================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--os-white);
  border: 1px solid var(--os-grey-300);
  border-radius: var(--os-radius);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--os-shadow-hover);
  border-color: var(--os-ink);
  transform: translateY(-4px);
}

.woocommerce ul.products li.product a img {
  transition: transform 0.5s ease;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.06);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--os-font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--os-ink);
  padding: 14px 14px 0;
}

.woocommerce ul.products li.product .price {
  padding: 4px 14px 16px;
  font-family: var(--os-font-body);
  font-weight: 700;
  color: var(--os-primary);
  font-size: 15px;
}
.woocommerce ul.products li.product .price del {
  color: var(--os-grey-500);
  opacity: 1;
}
.woocommerce ul.products li.product .price ins {
  color: var(--os-primary);
  text-decoration: none;
}

/* SALE / NEW badge — bold label tag */
.woocommerce span.onsale {
  background: var(--os-primary) !important;
  color: var(--os-white) !important;
  font-family: var(--os-font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  border-radius: var(--os-radius);
  min-height: auto;
  min-width: auto;
  padding: 6px 12px;
  line-height: 1;
  top: 12px;
  left: 12px;
}

/* Hover action icons (add to cart / quick view / wishlist) are
   circular icon-only buttons rendered via `background: url(...)`
   with the text hidden by the theme itself (font-size:0) — DO
   NOT override their background/color shorthand here or the
   icon image disappears entirely, leaving a blank circle.
   The theme's own hover state already swaps in the brand primary
   color, so we only add subtle polish below. */
.woocommerce ul.products li.product .product_type_simple,
.woocommerce ul.products li.product .product_type_grouped,
.woocommerce ul.products li.product .product_type_external,
.woocommerce ul.products li.product .product_type_variable,
.woocommerce ul.products .button.yith-wcqv-button,
.woocommerce ul.products .compare-button {
  box-shadow: 0 3px 10px rgba(24,24,27,0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.woocommerce ul.products li.product:hover .product_type_simple,
.woocommerce ul.products li.product:hover .product_type_grouped,
.woocommerce ul.products li.product:hover .product_type_external,
.woocommerce ul.products li.product:hover .product_type_variable,
.woocommerce ul.products li.product:hover .button.yith-wcqv-button {
  transform: scale(1.08);
}

.woocommerce li.product .star-rating {
  color: var(--os-primary);
}

/* ==========================================================
   6. SINGLE PRODUCT PAGE
   ========================================================== */
.woocommerce div.product .product_title {
  font-family: var(--os-font-display);
  text-transform: uppercase;
  color: var(--os-ink);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--os-primary);
  font-family: var(--os-font-body);
  font-weight: 700;
  font-size: 24px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 12px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  color: var(--os-primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  background: var(--os-primary) !important;
}

.woocommerce .quantity .qty {
  border: 2px solid var(--os-ink);
  border-radius: var(--os-radius);
  font-weight: 700;
  text-align: center;
}
.woocommerce .quantity .qty:focus {
  border-color: var(--os-primary);
  outline: none;
}

.woocommerce div.product div.images img {
  border-radius: var(--os-radius);
  border: 1px solid var(--os-grey-300);
}

/* size / variation swatches (select dropdown) styled bolder */
.woocommerce div.product form.cart .variations select {
  border: 2px solid var(--os-ink);
  border-radius: var(--os-radius);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.woocommerce div.product form.cart .variations select:focus {
  border-color: var(--os-primary);
  outline: none;
}

/* ==========================================================
   7. FORMS — checkout, my account, contact, search, comments
   ========================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select {
  background: var(--os-white);
  color: var(--os-ink);
  border: 1px solid var(--os-grey-300);
  border-radius: var(--os-radius);
  transition: border-color 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-checkout select:focus {
  border-color: var(--os-primary) !important;
  outline: none;
  box-shadow: 0 0 0 1px var(--os-primary);
}

/* validation state */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid textarea {
  border-color: var(--os-primary-dark) !important;
}

/* ==========================================================
   8. CART / CHECKOUT / NOTICES
   ========================================================== */
.woocommerce-message,
.woocommerce-info {
  background: var(--color-soft-background);
  border-top-color: var(--os-primary) !important;
  border-radius: var(--os-radius);
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--os-primary) !important;
}
.woocommerce-error {
  border-top-color: var(--os-primary-dark) !important;
}
.woocommerce-error::before {
  color: var(--os-primary-dark) !important;
}

table.shop_table {
  border-radius: var(--os-radius);
  overflow: hidden;
  border-color: var(--os-grey-300) !important;
}
table.shop_table thead th {
  background: var(--os-ink);
  color: var(--os-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}
table.shop_table td,
table.shop_table tr {
  border-color: var(--os-grey-300) !important;
}

.woocommerce-checkout-review-order-table .order-total .amount {
  color: var(--os-primary);
  font-weight: 700;
}

/* My Account nav */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  color: var(--os-primary);
}

/* ==========================================================
   9. PAGINATION / MISC
   ========================================================== */
.pagination .nav-links .current {
  background: var(--os-primary) !important;
  border-radius: var(--os-radius);
}
.pagination .nav-links a:hover {
  background: var(--os-ink) !important;
  color: var(--os-white) !important;
  border-radius: var(--os-radius);
}

/* ==========================================================
   10. FOOTER — dark, bold labels, brand accent links
   ========================================================== */
footer#footer .footer-widgets-wrapper,
.footer-widgets-wrapper {
  background: var(--os-ink);
  color: var(--os-grey-300);
}

.footer-widgets-wrapper h4,
.footer-widgets-wrapper .widget-title {
  font-family: var(--os-font-display);
  color: var(--os-white);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.footer-widgets-wrapper .widget-title::after {
  background: var(--os-primary);
}

.footer-widgets-wrapper li a,
.footer-menu ul > li > a {
  color: var(--os-grey-300);
}
.footer-widgets-wrapper li a:hover,
.footer-menu ul > li > a:hover {
  color: var(--os-primary) !important;
}

.menu-social li a,
.footer-social-icons a {
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--os-white) !important;
  border-radius: 50%;
}
.menu-social li a:hover,
.footer-social-icons a:hover {
  background: var(--os-primary) !important;
  border-color: var(--os-primary) !important;
  color: var(--os-white) !important;
}

/* ==========================================================
   11. WIDGETS / SIDEBAR
   ========================================================== */
aside .widget {
  background: var(--os-white);
  border: 1px solid var(--os-grey-300);
  border-radius: var(--os-radius);
  padding: 22px;
}
aside h4.widget-title {
  font-family: var(--os-font-display);
  text-transform: uppercase;
  color: var(--os-ink);
}

/* price filter slider + "active"/selected filter chips */
.woocommerce .widget_price_filter .price_slider_amount .button {
  background: var(--os-primary) !important;
}
.woocommerce .widget_layered_nav ul li.chosen a,
.woocommerce .widget_layered_nav_filters ul li a {
  color: var(--os-primary);
}

/* newsletter / highlighted promotional blocks (soft pink section bg) */
.widget_newsletterwidget,
.own-shop-highlight-section,
.promo-section {
  background: var(--os-grey-100);
  border-radius: var(--os-radius);
}

/* ==========================================================
   12. RESPONSIVE TWEAKS
   ========================================================== */
@media (max-width: 767px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 12px;
  }
  .woocommerce div.product p.price,
  .woocommerce div.product span.price {
    font-size: 19px;
  }
}