/*
Theme Name: Toystime Theme
Theme URI:
Template: storefront
Author: Toystime
Author URI:
Description: Toystime Theme is a child theme of Storefront, designed for a modern toy store.
Version: 1.0.0
*/

/* --- GOOGLE FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Be+Vietnam+Pro:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* --- DESIGN TOKENS (matches Tailwind config) --- */
:root {
  --color-primary:            #b8130a;
  --color-primary-container:  #dc3222;
  --color-on-primary:         #ffffff;
  --color-secondary:          #006d34;
  --color-on-secondary:       #ffffff;
  --color-tertiary:           #005f9e;
  --color-on-tertiary:        #ffffff;
  --color-surface:            #fcf9f8;
  --color-surface-low:        #f6f3f2;
  --color-surface-container:  #f0eded;
  --color-surface-high:       #eae7e7;
  --color-surface-highest:    #e4e2e1;
  --color-on-surface:         #1b1c1c;
  --color-on-surface-variant: #5c403b;
  --color-outline:            #906f6a;
  --color-outline-variant:    #e5bdb7;
  --color-error:              #ba1a1a;
  --color-error-container:    #ffdad6;

  --font-headline: 'Quicksand', sans-serif;
  --font-body:     'Be Vietnam Pro', sans-serif;

  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   32px;
  --radius-full: 9999px;

  --shadow-sm:    0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --shadow-md:    0 12px 24px -4px rgba(184,19,10,0.10);
  --shadow-hover: 0 20px 25px -5px rgba(184,19,10,0.15);

  --transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

/* --- GLOBAL RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline) !important;
  color: var(--color-on-surface) !important;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}
a:hover { color: var(--color-primary-container); }

/* ── ROOT FIX: colored button links must stay white on hover ─────────────
   Global a:hover above turns text to red — invisible on a red background.
   Override for every anchor that acts as a colored button. */
a.bg-primary:hover, a.bg-primary:active, a.bg-primary:focus,
a.bg-primary-container:hover,
a.bg-tertiary:hover, a.bg-tertiary:active,
a.bg-secondary:hover, a.bg-secondary:active,
a.toy-button-tactile:hover, a.toy-button-tactile:active,
a.add_to_cart_button:hover,
a.checkout-button:hover,
a.wc-forward:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* --- STOREFRONT PARENT OVERRIDES --- */
/* Reset Storefront layout so Tailwind controls everything */
.site-header               { all: unset !important; display: block !important; }
.col-full                  { max-width: 100% !important; padding: 0 !important; }
#content                   { padding-top: 0 !important; }
.storefront-full-width-content .entry-content { padding: 0 !important; }
.woocommerce-breadcrumb    { font-size: 13px; }

/* Remove Storefront's default container width constraints */
.storefront-primary-navigation .col-full,
.site-footer .col-full,
header.site-header .col-full { max-width: 100% !important; width: 100% !important; }

/* ── CRITICAL: Storefront sets .content-area to 73.9% float:left (sidebar layout).
   Force full-width on all pages — our templates manage their own max-width/padding. */
.content-area,
#primary.content-area,
.right-sidebar .content-area,
.left-sidebar .content-area {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.widget-area { display: none !important; }
.site-main {
    padding-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- WOOCOMMERCE GLOBAL RESETS --- */
/* Prevent WC default styles from fighting Tailwind */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: block !important;
  float: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.woocommerce .quantity input.qty {
  width: 4rem !important;
  height: auto !important;
}

/* --- MATERIAL SYMBOLS --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* --- TACTILE BUTTON EFFECT --- */
.toy-button-tactile {
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 4px 0 rgba(0,0,0,0.12);
  transition: var(--transition);
}
.toy-button-tactile:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 1px 0 rgba(0,0,0,0.12);
}

/* --- PRODUCT CARD HOVER --- */
.toy-card-shadow {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.toy-card-shadow:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

/* --- WOOCOMMERCE STARS --- */
.woocommerce-product-rating .star-rating span::before,
.star-rating span::before {
  color: var(--color-primary) !important;
}
.star-rating {
  color: var(--color-primary) !important;
  font-size: 1rem;
}

/* --- WOOCOMMERCE NOTICES --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-surface-low) !important;
  font-family: var(--font-body) !important;
}
.woocommerce-message::before { color: var(--color-primary) !important; }

/* --- WOOCOMMERCE FORM INPUTS --- */
.woocommerce form .input-text,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="tel"],
.woocommerce form input[type="password"],
.woocommerce form textarea,
.woocommerce form select {
  border: 2px solid var(--color-outline-variant) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  transition: border-color 0.2s ease !important;
  background: #fff !important;
  width: 100% !important;
}
.woocommerce form .input-text:focus,
.woocommerce form input[type="text"]:focus,
.woocommerce form input[type="email"]:focus,
.woocommerce form input[type="tel"]:focus,
.woocommerce form input[type="password"]:focus,
.woocommerce form textarea:focus,
.woocommerce form select:focus {
  border-color: var(--color-tertiary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,95,158,0.1) !important;
}

/* --- WOOCOMMERCE BUTTONS (override all to red) --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-full) !important;
  padding: 12px 28px !important;
  border: none !important;
  transition: var(--transition) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
  background-color: var(--color-primary-container) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* --- PAGINATION --- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--radius-full) !important;
  border: 2px solid var(--color-outline-variant) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  transition: var(--transition) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
}

/* --- CUSTOM QTY INPUT SPIN HIDE --- */
.custom-qty-input::-webkit-outer-spin-button,
.custom-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.custom-qty-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* --- SCROLLBAR HIDE UTILITY --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Single Product: force 2-column layout on desktop ─────────────────────── */
.single-product .tt-product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem;
    align-items: start;
}
@media (min-width: 1024px) {
    .single-product .tt-product-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ── WooCommerce catalog ordering select ──────────────────────────────────── */
.woocommerce-ordering,
.woocommerce-catalog-ordering-wrap { display: inline-flex; align-items: center; }
.woocommerce-ordering select,
.orderby {
    border: 2px solid var(--color-outline-variant) !important;
    border-radius: 9999px !important;
    padding: 8px 36px 8px 16px !important;
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-on-surface) !important;
    background: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='%235c403b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 18px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
    min-width: 180px !important;
}
.woocommerce-ordering select:focus,
.orderby:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(184,19,10,0.1) !important;
}
.woocommerce-result-count {
    font-family: var(--font-body) !important;
    font-size: 13px !important;
    color: var(--color-on-surface-variant) !important;
    margin: 0 !important;
}

/* ── Footer trust badge fix: ensure flex layout always renders ─────────────── */
.footer-trust-badges { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.footer-trust-badge  { display: flex !important; align-items: flex-start !important; gap: 12px !important; }

/* ── Hide WooCommerce "View Cart" / "Sepetim" button after AJAX add-to-cart ── */
a.added_to_cart,
a.added_to_cart.wc-forward { display: none !important; }

/* ── Logo: transparent PNG, no whitespace — display at fixed height ──────────
   height/width use !important because WooCommerce plugin CSS loads AFTER ours
   and sets `.woocommerce-page img { height: auto }` with equal specificity,
   overriding our height on product/cart/checkout pages.                  ── */
.tt-logo-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.tt-logo-wrap img {
    height: 40px !important;
    width: auto !important;
    display: block !important;
    max-width: none !important;
    transition: opacity 0.2s;
}
@media (min-width: 1024px) {
    .tt-logo-wrap img { height: 50px !important; }
}

/* ── Header nav: sabit piksel boyutu — rem tabanlı değişikliklerden korunur ── */
/* Ürün detay sayfasında rem tabanı değişse bile header nav her zaman 14px kalır. */
#site-header #cat-toggle,
#site-header #mobile-cat-toggle {
    font-size: 14px !important;
}

/* ── Add-to-cart loading spinner — any page (archive, front-page, etc.) ───── */
@keyframes tt-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
a.add_to_cart_button::before,
a.add_to_cart_button::after        { display:none !important; content:'' !important; }
a.add_to_cart_button               { color:#ffffff !important; }
a.add_to_cart_button:hover         { color:#ffffff !important; }
a.add_to_cart_button.loading       { opacity:0.80 !important; cursor:wait !important; }
a.add_to_cart_button.loading .material-symbols-outlined { animation:tt-spin 0.8s linear infinite; }
a.add_to_cart_button.added         { opacity:0.90 !important; }

/* ── Header search input: reset Tailwind forms plugin borders/rings on focus ── */
#site-search-input,
#site-search-input:focus,
#site-search-input:focus-visible {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ── Category tile icon container hover ──────────────────────────────────── */
.cat-tile-icon {
    background: rgba(184,19,10,0.08);
    transition: background-color 0.2s ease;
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cat-tile:hover .cat-tile-icon { background: rgba(255,255,255,0.25) !important; }
.cat-tile:hover .cat-tile-icon span { color: #ffffff !important; }

/* ── WooCommerce AJAX add-to-cart button: fix hover / loading / added states ── */
/* Remove WooCommerce icon-font pseudo-elements that conflict with our Material icons */
.woocommerce ul.products li.product a.add_to_cart_button::before,
.woocommerce ul.products li.product a.add_to_cart_button::after,
.woocommerce a.add_to_cart_button::before,
.woocommerce a.add_to_cart_button::after { display: none !important; content: '' !important; }
/* Keep text & icon white in every state */
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce ul.products li.product a.add_to_cart_button.loading,
.woocommerce ul.products li.product a.add_to_cart_button.added {
    color: #ffffff !important;
    background-color: #b8130a !important;
    opacity: 1 !important;
}
.woocommerce ul.products li.product a.add_to_cart_button:hover { background-color: #dc3222 !important; }
.woocommerce ul.products li.product a.add_to_cart_button.loading { cursor: wait !important; opacity: 0.80 !important; }
.woocommerce ul.products li.product a.add_to_cart_button.loading .material-symbols-outlined {
    animation: tt-spin 0.8s linear infinite;
}

/* ── Cart page: "Ödemeye Git" button ─────────────────────────────────────── */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:visited,
.woocommerce a.checkout-button,
.checkout-button {
    background-color: #b8130a !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    border: none !important;
    display: block !important;
    text-align: center !important;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background-color: #dc3222 !important; }

/* ── Checkout page: "Sipariş Ver" button ────────────────────────────────── */
#place_order,
.woocommerce-checkout #payment #place_order,
.woocommerce-pay-page #place_order,
#payment #place_order {
    background-color: #b8130a !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    width: 100% !important;
    padding: 16px 32px !important;
    font-size: 16px !important;
    border: none !important;
    margin-top: 8px !important;
}
#place_order:hover,
.woocommerce-checkout #payment #place_order:hover,
#payment #place_order:hover { background-color: #dc3222 !important; }

/* ── WooCommerce page container — classic shortcode templates ────────────────
   Applies to cart.php / form-checkout.php / my-account.php when the page uses
   the classic [woocommerce_cart] / [woocommerce_checkout] shortcode. */
.tt-wc-page {
    width: 100% !important;
    max-width: 1536px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}
@media (min-width: 768px) {
    .tt-wc-page { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (min-width: 1024px) {
    .tt-wc-page { padding-left: 64px !important; padding-right: 64px !important; }
}

/* ── WooCommerce Block Checkout / Cart side padding ──────────────────────────
   Block-based checkout/cart (WooCommerce 8+) renders .wp-block-woocommerce-*
   at width:100% with no side padding. Add padding here so content doesn't
   press against the viewport edges. */
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}
@media (min-width: 768px) {
    .wp-block-woocommerce-checkout,
    .wp-block-woocommerce-cart {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}
@media (min-width: 1024px) {
    .wp-block-woocommerce-checkout,
    .wp-block-woocommerce-cart {
        padding-left: 64px !important;
        padding-right: 64px !important;
    }
}

/* ── Order-pay page (iyzico) ─────────────────────────────────────────────── */
.woocommerce-order-pay .woocommerce {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 40px 16px !important;
}
.woocommerce-order-pay .shop_table {
    border: 2px solid #e5bdb7 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 24px !important;
}
.woocommerce-order-pay .shop_table thead th {
    background: #f6f3f2 !important;
    padding: 14px 18px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #5c403b !important;
    border-bottom: 1px solid #e5bdb7 !important;
}
.woocommerce-order-pay .shop_table tbody td,
.woocommerce-order-pay .shop_table tfoot th,
.woocommerce-order-pay .shop_table tfoot td {
    padding: 14px 18px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 14px !important;
    border-bottom: 1px solid #f0eded !important;
    color: #1b1c1c !important;
}
.woocommerce-order-pay .shop_table tfoot tr:last-child th,
.woocommerce-order-pay .shop_table tfoot tr:last-child td {
    border-bottom: none !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #b8130a !important;
}
.woocommerce-order-pay #payment {
    background: #fff !important;
    border: 2px solid #e5bdb7 !important;
    border-radius: 16px !important;
    padding: 28px !important;
    margin-top: 0 !important;
}
.woocommerce-order-pay #payment ul.payment_methods { border-bottom: 1px solid #f0eded !important; padding: 0 0 16px !important; margin: 0 0 20px !important; }
.woocommerce-order-pay #payment ul.payment_methods li { padding: 10px 0 !important; font-family: 'Be Vietnam Pro', sans-serif !important; }
.woocommerce-order-pay #payment .payment_box {
    background: #f6f3f2 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin: 8px 0 4px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 14px !important;
}
.woocommerce-order-pay #payment .payment_box::before { display: none !important; }
.woocommerce-order-pay #payment .form-row { padding: 0 !important; }
.woocommerce-order-pay #payment #place_order { margin-top: 16px !important; }