/*
Theme Name: Cipelice Hodalice
Theme URI: https://cipelice.hr/
Description: Elegantan, lagan i brz dizajn za web shop udobne ženske kožne obuće. Child tema za Storefront — uređivačka tipografija (Cormorant Garamond + Lora), koža-tonovi, obrubljeni gumbi i mirne hairline linije.
Author: Cipelice hodalice
Template: storefront
Version: 1.0.0
Text Domain: cipelice-hodalice
*/

/* ============================================================
   1. TOKENI — Classical design system
   ============================================================ */
:root{
  --color-bg:#f3f2f2;
  --color-surface:#f7f6f5;
  --color-neutral-100:#eceae8;
  --color-neutral-200:#e3e0dd;
  --color-neutral-300:#d3cfca;
  --color-text:#201f1d;
  --color-muted:#6b6862;
  --color-divider:#d8d4cf;
  --color-accent:#b68235;
  --color-accent-100:#f3e9d7;
  --color-accent-600:#9c6d29;
  --color-accent-700:#835a21;
  --font-heading:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:"Lora", Georgia, serif;
  --radius:4px;
  --shadow-sm:0 1px 2px rgba(32,31,29,.05);
  --shadow-md:0 4px 14px rgba(32,31,29,.07);
}

/* ============================================================
   2. TEMELJ
   ============================================================ */
body,
.site,
button, input, select, textarea,
.woocommerce-page{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{ font-size:17px; line-height:1.75; }

h1,h2,h3,h4,h5,h6,
.entry-title,.product_title,.page-title,
.site-title,.widget-title,.cart_totals h2,.cross-sells h2,.related h2,.upsells h2{
  font-family:var(--font-heading);
  font-weight:400;
  letter-spacing:-.01em;
  color:var(--color-text);
  line-height:1.1;
}
h1,.entry-title,.product_title{ font-size:2.6rem; }
h2{ font-size:2rem; }

a{ color:var(--color-accent-700); text-underline-offset:3px; }
a:hover{ color:var(--color-accent); }

/* tabularni brojevi za cijene */
.price,.amount,.woocommerce-Price-amount,.quantity input{
  font-family:var(--font-heading);
  font-feature-settings:"tnum" 1;
}
hr,.hr{ border:0; border-top:1px solid var(--color-divider); }

/* ============================================================
   3. HEADER / NAV
   ============================================================ */
.site-header{
  background:color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-bottom:1px solid var(--color-divider);
  padding:1.1em 0;
}
.site-branding .site-title,
.site-header .site-title a{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:1.7rem;
  color:var(--color-text);
}
.main-navigation ul li a{
  font-family:var(--font-body);
  color:var(--color-text);
  font-size:.98rem;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{ color:var(--color-accent-700); }
.site-header-cart .cart-contents{ color:var(--color-accent-700); }
.site-header-cart .count{ background:transparent; color:var(--color-accent-700); }

/* ============================================================
   4. GUMBI — obrubljeni, nikada puni accent
   ============================================================ */
button, input[type="button"], input[type="submit"],
.button, a.button, .added_to_cart,
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce .widget_shopping_cart a.button,
.wc-block-components-button{
  font-family:var(--font-body) !important;
  background:transparent !important;
  color:var(--color-accent-700) !important;
  border:1px solid var(--color-accent) !important;
  border-radius:var(--radius) !important;
  padding:.7em 1.4em !important;
  font-weight:400 !important;
  letter-spacing:.01em;
  text-transform:none !important;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  min-height:44px;
}
button:hover, .button:hover, a.button:hover, .added_to_cart:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover{
  background:var(--color-accent-100) !important;
  color:var(--color-accent-700) !important;
  border-color:var(--color-accent) !important;
}
button:active, .button:active, .woocommerce button.button:active{
  background:color-mix(in srgb, var(--color-accent-100) 70%, #fff) !important;
  border-color:var(--color-accent-600) !important;
}
/* glavni CTA (add to cart / checkout) malo istaknutiji */
.single_add_to_cart_button,
.wc-proceed-to-checkout .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{
  border-width:1.5px !important;
  font-size:1.05rem !important;
  padding:.85em 1.6em !important;
  min-height:52px;
}
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }

/* ============================================================
   5. PROIZVODI — mreža (shop / arhiva)
   ============================================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:transparent;
  text-align:left;
  margin-bottom:3em;
}
.woocommerce ul.products li.product a img{
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  border-radius:var(--radius);
  padding:8px;
  box-shadow:var(--shadow-sm);
  margin-bottom:1em;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-heading);
  font-weight:400;
  font-size:1.4rem;
  padding:0;
}
.woocommerce ul.products li.product .price{
  color:var(--color-text);
  font-size:1.3rem;
}
.woocommerce ul.products li.product .price del{ color:var(--color-muted); }
.woocommerce span.onsale{
  background:transparent;
  color:var(--color-accent-700);
  border:1px solid var(--color-accent);
  border-radius:var(--radius);
  font-family:var(--font-body);
  min-height:auto;
  min-width:auto;
  line-height:1.6;
  padding:.15em .7em;
}
.star-rating span::before,.star-rating::before{ color:var(--color-accent); }

/* ============================================================
   6. STRANICA PROIZVODA (single)
   ============================================================ */
.single-product div.product .woocommerce-product-gallery{
  border:1px solid var(--color-divider);
  border-radius:var(--radius);
  background:var(--color-surface);
  padding:14px;
}
.single-product div.product .product_title{ margin-bottom:.3em; }
.single-product div.product p.price,
.single-product div.product span.price{
  color:var(--color-text);
  font-size:1.9rem;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:transparent;
  border:1px solid var(--color-divider);
  border-radius:var(--radius) var(--radius) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  border-bottom-color:var(--color-bg);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--color-text); }
.quantity input.qty{
  border:1px solid var(--color-divider);
  border-radius:var(--radius);
  background:var(--color-surface);
  min-height:52px;
}

/* ============================================================
   7. KOŠARICA I NAPLATA
   ============================================================ */
.woocommerce table.shop_table{
  border:1px solid var(--color-divider);
  border-radius:var(--radius);
  background:var(--color-surface);
}
.woocommerce table.shop_table th{
  font-family:var(--font-heading);
  font-weight:500;
}
.woocommerce table.shop_table td,
.woocommerce table.shop_table th{ border-top:1px solid var(--color-divider); }
.cart_totals,.woocommerce-checkout #payment{
  background:var(--color-surface) !important;
  border:1px solid var(--color-divider);
  border-radius:var(--radius);
}
.woocommerce-info,.woocommerce-message,.woocommerce-error{
  border-top-color:var(--color-accent);
  background:var(--color-surface);
}
.woocommerce-info::before,.woocommerce-message::before{ color:var(--color-accent); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container .select2-selection{
  border:1px solid var(--color-divider) !important;
  border-radius:var(--radius) !important;
  background:var(--color-surface) !important;
  min-height:48px;
}

/* ============================================================
   8. FOOTER
   ============================================================ */
.site-footer{
  background:var(--color-neutral-100);
  border-top:1px solid var(--color-divider);
  color:var(--color-muted);
}
.site-footer a{ color:var(--color-accent-700); }

::selection{ background:var(--color-accent-100); }