/*
Theme Name:   Woodmart Child
Description:  Woodmart Child Theme
Author:       XTemos
Author URI:   http://xtemos.com
Template:     woodmart
Version:      1.0.0
Text Domain:  woodmart
*/

/* ===========================
   Design Tokens
   =========================== */
:root {
--color-primary:#1e73be;
--color-error:#d32f2f;
--color-success:#2e7d32;
--color-muted:#dcdcdc;
--color-text:#111;
--color-text-secondary:#222;
--color-bg:#fff;
--color-border:#e9edf2;
--color-border-light:#eef2f7;
--color-gray-light:#f3f4f6;
--color-gray:#6b7280;
--color-warning:#dc2626;
--color-highlight:#ef4444;
--radius-sm:6px;
--radius-md:10px;
--radius-lg:12px;
--radius-xl:16px;
--fs-xs:14px;
--fs-sm:15px;
--fs-md:16px;
--fs-lg:17px;
--fs-xl:20px;
--fs-xxl:22px;
--fw-normal:400;
--fw-medium:600;
--fw-bold:700;
--lh-tight:1.25;
--lh-normal:1.428571429;
--shadow-sm:0 1px 3px #0000001a;
--shadow-md:0 2px 6px #00000008;
--shadow-lg:0 2px 10px #0000000d;
--shadow-xl:0 14px 34px #00000024;
--grid-img-h:160px;
--gallery-img-max-h:500px;
--cf7-tip-offset:40px
}

/* ===========================
   Typography
   =========================== */
h1 {
font-size:18px
}

.single-product h1.product_title.entry-title.wd-entities-title {
font-size:clamp(18px,2.4vw,var(--fs-xxl))!important;
line-height:var(--lh-tight);
margin:0 0 8px
}

/* ===========================
   Product Grid
   =========================== */
.product-grid-item :is(.product-image-link,.hover-img) img {
object-fit:contain;
height:var(--grid-img-h);
width:100%;
display:block
}

.product-grid-item.wd-product .wd-entities-title,.wd-entities-title {
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
line-clamp:2;
overflow:hidden;
word-wrap:break-word;
overflow-wrap:anywhere;
white-space:normal;
max-width:100%;
font-size:var(--fs-xs);
line-height:var(--lh-normal)
}

span.out-of-stock.product-label {
font-size:8px;
line-height:10px;
padding:3px
}

/* ===========================
   Product Gallery
   =========================== */
.single.single-product .woocommerce-product-gallery__image {
min-height:var(--gallery-img-max-h);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden
}

.single.single-product .woocommerce-product-gallery__image a img {
max-height:var(--gallery-img-max-h);
max-width:100%;
width:auto;
height:auto;
object-fit:contain
}

/* Gallery Thumbnails */
.thumbs-position-left .wd-gallery-thumb .wd-carousel-item {
padding:4px!important;
height:auto!important;
display:flex!important;
align-items:center!important;
justify-content:center!important
}

.thumbs-position-left .wd-gallery-thumb .wd-carousel-item img {
object-fit:contain!important;
border:1px solid var(--color-muted);
width:60px!important;
height:60px!important;
margin:0!important;
padding:4px!important;
box-sizing:border-box!important
}

/* ===========================
   Pricing
   =========================== */
.amount {
color:var(--color-success)
}

del .amount {
color:#000
}

.price del {
color:red;
font-size:100%;
font-weight:var(--fw-bold)
}

/* ===========================
   Product Condition Styling
   =========================== */
.product-condition {
margin:10px 0;
padding:12px 14px;
background:var(--color-bg)!important;
background-image:none!important;
border:1px solid var(--color-border);
border-radius:var(--radius-xl);
box-shadow:var(--shadow-md);
min-height:60px
}

.product-condition-flex {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap
}

.product-condition-info {
display:flex;
align-items:center;
gap:10px;
color:var(--color-text-secondary);
font-size:var(--fs-md);
line-height:var(--lh-normal);
margin-bottom:0!important;
font-weight:var(--fw-normal);
font-family:"Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}

.product-condition-info strong {
font-weight:var(--fw-medium);
margin-right:2px;
color:var(--color-text-secondary);
font-family:"Open Sans",Helvetica,Arial,sans-serif
}

.product-condition-link {
margin-bottom:0!important
}

.product-condition-link a {
display:inline-flex;
align-items:center;
gap:6px;
color:var(--color-text-secondary);
background:var(--color-bg);
border:1px solid #e5e7eb;
border-radius:var(--radius-lg);
padding:8px 12px;
text-decoration:none;
font-weight:var(--fw-normal);
font-size:var(--fs-sm);
font-family:"Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transition:all .2s ease
}

.product-condition-link a:hover {
border-color:#cbd5e1;
box-shadow:0 1px 0 #00000005
}

.product-condition-link a:focus-visible {
outline:2px solid #000;
outline-offset:2px;
border-radius:4px
}

/* Alert Box Styling */
.product-condition .custom-alert-box {
margin:8px 0 0;
padding-top:8px;
border-top:1px solid var(--color-border-light);
color:#475569;
text-align:left
}

.product-condition .custom-alert-box p {
margin:0;
line-height:var(--lh-normal);
font-size:var(--fs-sm);
text-align:left;
font-weight:var(--fw-medium);
color:var(--color-text-secondary);
font-family:"Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}

.product-condition .custom-alert-box strong {
color:#16a34a;
font-weight:var(--fw-medium);
margin-right:4px
}

.product-condition .custom-alert-box .red-text {
color:var(--color-highlight);
font-weight:var(--fw-medium)
}

/* Benefits List Styling */
.product-condition + .product-condition {
margin-top:12px
}

.product-condition .wd-list {
margin:0;
padding:0;
list-style:none
}

.product-condition .wd-list li {
display:flex;
align-items:flex-start;
gap:8px;
padding:2px 0;
line-height:var(--lh-normal)
}

.product-condition .wd-icon {
display:inline-flex;
flex:0 0 auto;
align-items:center;
justify-content:center;
margin-top:2px
}

.product-condition .wd-icon svg {
display:block;
width:18px;
height:18px
}

.product-condition .wd-list-content {
color:var(--color-text-secondary);
font-size:var(--fs-sm);
line-height:var(--lh-normal);
display:inline-block;
font-weight:var(--fw-medium);
font-family:"Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
margin-bottom:5px
}

/* ===========================
   Badge Component
   =========================== */
.badge {
display:inline-flex;
align-items:center;
gap:8px;
font-weight:var(--fw-medium);
font-size:var(--fs-xs);
line-height:var(--lh-tight);
border-radius:20px;
padding:6px 12px;
box-shadow:var(--shadow-sm)
}

/* Badge hover effects removed */
.badge__dot {
width:8px;
height:8px;
border-radius:50%;
display:inline-block;
box-shadow:0 0 0 2px #ffffff4d
}

.badge--new,.badge--resigilat {
background:#f0fdf4;
color:#166534;
border:1px solid #bbf7d0
}

.badge--new .badge__dot,.badge--resigilat .badge__dot {
background:#22c55e
}

.badge--good {
background:#fffbeb;
color:#92400e;
border:1px solid #fde68a
}

.badge--good .badge__dot {
background:#f59e0b
}

/* ===========================
   Modal Styling
   =========================== */
.evaluation-modal {
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
background:#0f172a99;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
z-index:9999
}

.evaluation-modal.is-open {
display:flex
}

.evaluation-modal[aria-hidden="true"] {
display:none
}

.evaluation-modal__dialog {
width:min(92vw,720px);
max-height:85vh;
overflow:auto;
background:var(--color-bg);
border-radius:var(--radius-xl);
box-shadow:var(--shadow-xl);
transform:translateY(10px) scale(.98);
opacity:0;
transition:transform .28s ease,opacity .28s ease;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility
}

.evaluation-modal.is-open .evaluation-modal__dialog {
transform:none;
opacity:1
}

.evaluation-modal__header {
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 22px;
border-bottom:1px solid var(--color-border-light)
}

.evaluation-modal__title {
margin:0;
font-size:var(--fs-xl);
line-height:var(--lh-normal);
font-weight:var(--fw-medium);
color:var(--color-text-secondary);
font-family:"Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}

.evaluation-modal__close {
appearance:none;
border:0;
background:transparent;
color:var(--color-gray);
border-radius:8px;
width:36px;
height:36px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:var(--fs-xxl);
cursor:pointer;
transition:background .2s ease,color .2s ease
}

.evaluation-modal__close:hover {
background:var(--color-gray-light);
color:#111827
}

.evaluation-modal__body {
padding:18px 22px
}

.evaluation-items {
display:flex;
flex-direction:column;
gap:14px
}

.evaluation-item {
padding:16px 18px;
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
background:var(--color-bg)
}

.evaluation-item .evaluation-title {
display:flex;
align-items:center;
gap:10px;
margin:0 0 10px;
font-weight:var(--fw-medium);
color:var(--color-text-secondary);
font-family:"Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}

.evaluation-item small {
display:block;
margin-top:8px;
color:var(--color-text-secondary);
line-height:var(--lh-normal);
font-size:var(--fs-sm);
max-width:65ch;
text-wrap:pretty;
font-weight:var(--fw-normal);
font-family:"Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}

/* OK button removed - using only X close button for cleaner design */
html.modal-open,body.modal-open {
overflow:hidden
}

/* ===========================
   Form Controls
   =========================== */
.wpcf7-form-control-wrap {
position:relative;
display:inline-block;
width:100%
}

input.wpcf7-form-control {
padding-right:var(--cf7-tip-offset)
}

.wpcf7-not-valid-tip {
position:absolute;
top:50%;
right:10px;
transform:translateY(-50%);
font-size:12px;
color:var(--color-error);
background-color:var(--color-bg);
padding:2px 4px;
z-index:1;
pointer-events:none;
white-space:nowrap
}

.wpcf7-textarea {
min-height:45px!important;
max-height:45px!important;
resize:vertical
}

input.wpcf7-form-control.wpcf7-submit {
background-color:blue;
color:var(--color-bg);
border-radius:var(--radius-md);
position:relative;
width:85px;
border:0;
line-height:2.4;
cursor:pointer
}

.wpcf7-response-output {
display:none!important
}

/* ===========================
   Layered Navigation
   =========================== */
.woocommerce-widget-layered-nav-list__item input[type="radio"] {
appearance:none;
width:16px;
height:16px;
border:2px solid var(--color-muted);
border-radius:3px;
margin-right:8px;
vertical-align:middle;
cursor:pointer;
background:var(--color-bg);
transition:border-color .2s ease,background-color .2s ease;
position:relative
}

.woocommerce-widget-layered-nav-list__item input[type="radio"]:checked {
border-color:var(--color-primary);
background-color:var(--color-primary)
}

.woocommerce-widget-layered-nav-list__item input[type="radio"]:checked::after {
content:'';
position:absolute;
inset:3px;
background:var(--color-bg);
border-radius:1px
}

.woocommerce-widget-layered-nav-list__item input[type="radio"]:focus-visible {
outline:2px solid color-mix(in srgb,var(--color-primary),#000 20%);
outline-offset:2px
}

/* ===========================
   Utility Components
   =========================== */
.card-payment-banner {
background-color:#e6f0ff;
color:#004085;
text-align:center;
padding:10px 15px;
font-size:var(--fs-lg);
font-weight:var(--fw-medium);
border-bottom:2px solid #cce0ff;
border-radius:0 0 4px 4px;
box-shadow:0 2px 4px #0040851a;
font-family:"Segoe UI","Helvetica Neue",sans-serif;
display:flex;
justify-content:center;
align-items:center
}

.card-payment-banner .card-payment-content {
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap
}

.suggestion-content {
max-width:100%;
overflow:hidden
}

.hidden-fields-container {
display:none
}

.specs div {
padding:3px 0
}

.spacercus {
margin:16px 0;
border-top:1px solid #eee
}

.grecaptcha-badge {
opacity:.85;
filter:grayscale(.2);
transition:opacity .2s ease
}

.grecaptcha-badge:hover {
opacity:1
}

/* ===========================
   Responsive Design
   =========================== */
/* Desktop - Hide breadcrumb last items */
@media (min-width: 1025px) {
nav.wd-breadcrumbs.woocommerce-breadcrumb span.wd-last,nav.wd-breadcrumbs.woocommerce-breadcrumb span.wd-delimiter:nth-last-of-type(2) {
display:none
}
}

/* Mobile Adjustments */
@media (max-width: 768px) {
.product-condition {
text-align:left
}

.product-condition-flex {
flex-direction:column;
align-items:flex-start;
gap:8px;
text-align:left;
justify-content:flex-start
}

.product-condition-info {
display:flex!important;
flex-direction:row!important;
align-items:flex-start!important;
justify-content:flex-start!important;
text-align:left!important;
width:100%!important;
flex-wrap:wrap;
gap:5px 8px
}

.product-condition-info {
font-size:var(--fs-xs)!important
}

.product-condition-info strong {
text-align:left;
font-size:var(--fs-xs)!important
}

.badge {
align-self:flex-start;
font-size:12px!important
}

.product-condition-link {
align-self:flex-start;
text-align:left
}

.product-condition-link a {
font-size:13px!important
}

.product-condition .custom-alert-box {
margin:12px 0 0;
padding:12px 0 0;
text-align:left
}

.product-condition .custom-alert-box p {
font-size:13px!important
}

.product-condition .wd-list-content {
font-size:13px!important
}

.evaluation-item {
padding:14px
}

.evaluation-item small {
font-size:var(--fs-xs);
line-height:1.7
}
}

/* Mobile Portrait - Gallery adjustments */
@media (max-width: 480px) and (orientation: portrait) {
.thumbs-position-left .wd-gallery-thumb {
display:none!important
}

.woocommerce-product-gallery.thumbs-position-left .wd-gallery-images {
max-width:100%!important
}

.single.single-product .woocommerce-product-gallery__image {
min-height:350px!important;
max-height:350px!important;
object-fit:contain!important
}

.single.single-product .woocommerce-product-gallery__image a img {
max-height:350px!important;
min-height:350px!important;
object-fit:contain!important
}

/* Improved product condition layout on mobile portrait */
.product-condition {
padding:10px 12px;
text-align:left
}

.product-condition-flex {
align-items:flex-start;
text-align:left
}

.product-condition .custom-alert-box {
margin:16px 0 8px;
padding:12px 0 0
}
}