/* =========================================================
   Silky Strands — WooCommerce Overrides
   ========================================================= */

/* ── Product Loop ── */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products { gap: 14px 12px; }
}

/* ── Product Card ── */
li.product { position: relative; }
li.product a img {
    aspect-ratio: 4/5;
    object-fit: cover;
    width: 100%;
    margin: 0;
    display: block;
    transition: transform .8s var(--ease);
}
li.product:hover a img { transform: scale(1.04); }
li.product .woocommerce-loop-product__title {
    font-family: var(--product-font);
    font-weight: 500;
    font-size: 15px;
    padding: 14px 0 4px;
    margin: 0;
}
li.product .price {
    font-family: var(--product-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
li.product .price del { color: var(--muted); margin-right: 6px; }
li.product .price ins { text-decoration: none; }
li.product .price .woocommerce-Price-amount { color: var(--ink); }

/* ── Buttons ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    transition: all .35s var(--ease);
    background: var(--ink);
    color: var(--ivory);
    border: 1px solid var(--ink);
    cursor: pointer;
    font-family: var(--sans);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover { opacity: 0.88; }
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
    background: var(--vermilion);
    border-color: var(--vermilion);
    color: var(--ivory);
}
.woocommerce a.button.alt:hover { background: var(--vermilion-deep); border-color: var(--vermilion-deep); }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: var(--vermilion);
    border-color: var(--vermilion);
    color: var(--ivory);
    width: 100%;
    justify-content: center;
    font-size: 13px;
    padding: 16px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* ── Quantity ── */
.woocommerce .quantity .qty {
    width: 50px;
    text-align: center;
    border: 1px solid var(--line-strong);
    padding: 10px;
    font-family: var(--sans);
    font-size: 14px;
    background: transparent;
    border-radius: 0;
    -moz-appearance: textfield;
}
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.woocommerce div.product form.cart .button {
    background: var(--ink);
    color: var(--ivory);
    border-radius: 999px;
    padding: 14px 28px;
    flex: 1;
}

/* ── Single Product ── */
.woocommerce div.product div.images { margin: 0; }
.woocommerce div.product div.summary { padding: 0; }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: 14px; }
.woocommerce div.product .woocommerce-review-link { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.star-rating { color: var(--gold); font-size: 13px; }

/* ── Product Tabs ── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--line);
    padding: 0;
    margin: 0 0 28px;
    list-style: none;
    background: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 14px 20px 12px;
    display: block;
    transition: color .2s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); }
.woocommerce div.product .woocommerce-tabs .panel {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink);
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    float: none;
}

/* ── Reviews ── */
#reviews #comments ol.commentlist { padding: 0; margin: 0; list-style: none; }
#reviews #comments ol.commentlist li { padding: 28px 0; border-bottom: 1px solid var(--line); }
#reviews #comments ol.commentlist li .comment-text { margin: 0; border: 0; padding: 0; background: none; }
#reviews #comments ol.commentlist li img.avatar { border-radius: 50%; width: 44px; height: 44px; }
#reviews #comments ol.commentlist li .meta { font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }

/* ── Checkout ── */
.woocommerce form .form-row { margin-bottom: 20px; }
.woocommerce form .form-row label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    display: block;
    margin-bottom: 6px;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    padding: 10px 0;
    font-size: 14px;
    font-family: var(--sans);
    color: var(--ink);
    width: 100%;
    outline: none;
    transition: border-color .3s;
    -webkit-appearance: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-bottom-color: var(--ink); }
.woocommerce #order_review_heading,
.woocommerce h3#order_review_heading {
    font-family: var(--display);
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 20px;
}
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods { padding: 0; margin: 0 0 20px; list-style: none; }
.woocommerce-checkout #payment ul.payment_methods li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.woocommerce-checkout #payment div.place-order { padding: 0; }
.woocommerce-checkout #payment #place_order {
    background: var(--vermilion);
    border-color: var(--vermilion);
    width: 100%;
    justify-content: center;
    padding: 16px;
    font-size: 13px;
}

/* ── Order Details ── */
.woocommerce-order-details .woocommerce-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; }
.woocommerce-order-details .woocommerce-table th,
.woocommerce-order-details .woocommerce-table td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; }

/* ── My Account ── */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 200px 1fr; gap: 60px; align-items: start; }
@media (max-width: 768px) {
    .woocommerce-account .woocommerce { grid-template-columns: 1fr; gap: 32px; }
}
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 0;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .2s;
}
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li.is-active a { color: var(--ink); }

/* ── Notices ── */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 0.06em;
    border-top: 3px solid var(--ink);
    background: rgba(26,22,18,0.04);
    padding: 14px 18px;
    margin-bottom: 24px;
    list-style: none;
}
.woocommerce-error { border-color: var(--vermilion); background: rgba(196,40,46,0.04); }

/* ── PDP Variation Swatches ── */
.woocommerce-variation-add-to-cart { margin-top: 0; }
.variations { width: 100%; border: 0; margin-bottom: 20px; }
.variations td, .variations th { padding: 0 0 16px; vertical-align: top; border: 0; }
.variations th.label { padding-right: 16px; }
.variations th.label label {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.variations td.value select {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    padding: 8px 0;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
    min-width: 200px;
}
.reset_variations {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 8px;
    display: inline-block;
}

/* ── Cart ── */
.woocommerce-cart-form table { width: 100%; border-collapse: collapse; }
.woocommerce-cart-form table th {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.woocommerce-cart-form table tr { border-bottom: 1px solid var(--line); }
.woocommerce-cart-form table td { padding: 20px 8px; vertical-align: middle; }
.woocommerce-cart-form table td.product-thumbnail img { width: 72px; height: 90px; object-fit: cover; }

/* ── YITH Wishlist heart ── */
.yith-wcwl-add-to-wishlist { position: absolute; top: 12px; right: 12px; z-index: 2; }
.yith-wcwl-add-to-wishlist a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.88);
    color: var(--ink);
    border: 0;
    transition: background .25s, color .25s;
}
.yith-wcwl-add-to-wishlist a:hover,
.yith-wcwl-add-to-wishlist a.added { background: var(--ivory); color: var(--vermilion); }

/* ── Search overlay ── */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-overlay-inner { width: 100%; max-width: 680px; padding: 0 24px; }
.search-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink);
}
.search-input {
    width: 100%;
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 44px);
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    padding: 14px 0;
    outline: none;
    background: transparent;
    color: var(--ink);
}
.search-results { margin-top: 24px; }
.search-result-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: padding-left .2s;
}
.search-result-item:hover { padding-left: 8px; }
.search-result-item img { width: 64px; height: 80px; object-fit: cover; }
.search-result-name { font-family: var(--sans); font-size: 14px; font-weight: 500; }
.search-result-price { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ── PDT Tab active state ── */
.pdp-tab-btn.active {
    color: var(--ink) !important;
    border-bottom-color: var(--ink) !important;
}
.pdp-thumb.active { border-color: var(--ink) !important; }

/* ── Quiz option selected ── */
.quiz-option-card.selected {
    border-color: var(--ink) !important;
    background: rgba(26,22,18,0.04);
}
.quiz-option-card:hover { border-color: var(--ink); }