/*
Theme Name: KBK
Theme URI: https://kraftsbykimmy.com
Author: Jim Winkle & Lex
Description: Custom Theme for Krafts By Kimmy
Version: 1.0
*/

/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */

:root{
    --color-background:#F5F0E6;
    --color-background-soft:#F8F3EB;
    --color-background-light:#F9F4EC;
    --color-surface:#FFFFFF;

    --color-text:#2C241D;
    --color-text-heading:#2D241D;
    --color-text-light:#6F6257;
    --color-text-muted:#75614F;

    --color-accent:#8A4E34;
    --color-accent-dark:#6F3D29;
    --color-accent-soft:#9A6545;

    --color-border:#D8D0C6;

    --font-body:'Lora',serif;
    --font-heading:'Cormorant Garamond',serif;

    --shadow-card:0 12px 32px rgba(0,0,0,.08);
    --shadow-card-hover:0 18px 40px rgba(0,0,0,.12);
    --shadow-soft:0 10px 30px rgba(0,0,0,.05);

    --radius-small:4px;
    --radius-medium:14px;
    --radius-large:18px;
    --radius-pill:999px;

    --transition:.25s ease;
}

/* ==========================================================
   2. RESET AND GLOBAL ELEMENTS
   ========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-body);
    background:var(--color-background);
    color:var(--color-text);
}

img{
    max-width:100%;
    height:auto;
}

/* ==========================================================
   3. SHARED LAYOUT
   ========================================================== */

.container{
    width:1700px;
    max-width:96%;
    margin:0 auto;
}

/* ==========================================================
   4. SHARED BUTTONS
   ========================================================== */

.btn-primary,
.btn-secondary{
    display:inline-block;
    padding:18px 36px;
    font-family:var(--font-body);
    font-size:18px;
    font-weight:600;
    text-decoration:none;
    border-radius:var(--radius-small);
    transition:var(--transition);
}

.btn-primary{
    background:var(--color-accent);
    color:#fff;
}

.btn-primary:hover{
    background:var(--color-accent-dark);
    transform:translateY(-2px);
}

.btn-secondary{
    background:var(--color-background-light);
    border:2px solid var(--color-accent);
    color:var(--color-accent);
}

.btn-secondary:hover{
    background:var(--color-accent);
    color:#fff;
    transform:translateY(-2px);
}

/* ==========================================================
   5. HEADER AND NAVIGATION
   ========================================================== */

.site-header{
    background:var(--color-background);
    padding:14px 0;
    border-bottom:1px solid rgba(125,95,65,.10);
}

.site-header .container{
    display:flex;
    align-items:center;
    justify-content:center;
}

.logo img{
    height:95px;
    display:block;
}

nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:56px;
}

nav a{
    font-family:var(--font-body);
    font-size:18px;
    font-weight:600;
    color:var(--color-accent);
    text-decoration:none;
    position:relative;
    transition:var(--transition);
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background:var(--color-accent);
    transition:var(--transition);
}

nav a:hover{
    color:#5F2B1D;
}

nav a:hover::after{
    width:100%;
}

/* ---------- Mobile nav toggle (hidden on desktop) ---------- */

.nav-toggle-checkbox{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.nav-toggle-label{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:8px;
    margin-left:auto;
    cursor:pointer;
}

.nav-toggle-label span{
    display:block;
    width:100%;
    height:2px;
    background:var(--color-accent);
    border-radius:2px;
    transition:var(--transition);
}

/* ==========================================================
   6. HOME PAGE - HERO
   ========================================================== */

.hero{
    min-height:760px;
    background:url("images/hero.png") center center / cover no-repeat;
    display:flex;
    align-items:flex-start;
    padding:20px 0 0 30px;
}

.hero-content{
    width:640px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-top:0;
}

.hero-logo{
    width:700px;
    margin-bottom:-85px;
}

.hero-logo img{
    width:100%;
    height:auto;
    display:block;
}

.hero-content h1{
    font-family:var(--font-heading);
    font-size:68px;
    font-style:italic;
    font-weight:600;
    line-height:1;
    margin:0 0 25px;
    color:var(--color-text-heading);
}

.hero-content p{
    max-width:520px;
    font-size:21px;
    line-height:1.6;
    margin-bottom:30px;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:20px;
}

/* ==========================================================
   7. HOME PAGE - COLLECTIONS
   ========================================================== */

.collections{
    padding:55px 0 90px;
    background:var(--color-background-soft);
}

.collections h2{
    text-align:center;
    font-family:var(--font-heading);
    font-size:66px;
    font-weight:700;
    margin-bottom:8px;
    color:var(--color-text-heading);
}

.collections-subtitle{
    max-width:700px;
    margin:0 auto 45px;
    text-align:center;
    font-size:18px;
    line-height:1.6;
    color:var(--color-text-muted);
}

.collection-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    margin-top:35px;
}

.collection-card{
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:var(--transition);
}

.collection-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-card-hover);
}

.collection-card img{
    width:100%;
    aspect-ratio:5 / 4;
    object-fit:cover;
    display:block;
}

.collection-content{
    padding:22px 26px 26px;
}

.collection-content h3{
    font-family:var(--font-heading);
    font-size:44px;
    margin-bottom:14px;
    color:var(--color-text-heading);
}

.collection-content p{
    font-size:18px;
    line-height:1.7;
    color:var(--color-text-light);
    margin-bottom:18px;
}

.collection-link{
    color:var(--color-accent);
    font-weight:600;
    text-decoration:none;
}

.collection-link:hover{
    color:#5F2B1D;
}

/* ==========================================================
   8. HOME PAGE - WHY YOU'LL LOVE KBK
   ========================================================== */

.why-kbk{
    background:var(--color-surface);
    padding:55px 0;
    border-top:1px solid rgba(138,78,52,.08);
    border-bottom:1px solid rgba(138,78,52,.08);
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.why-item{
    text-align:center;
    padding:10px 12px;
}

.why-icon{
    font-size:42px;
    color:var(--color-accent);
    margin-bottom:24px;
    line-height:1;
}

.why-item h3{
    font-family:var(--font-heading);
    font-size:34px;
    font-weight:700;
    color:var(--color-text-heading);
    margin-bottom:12px;
}

.why-item p{
    max-width:270px;
    margin:0 auto;
    font-size:18px;
    line-height:1.65;
    color:var(--color-text-light);
}

/* ==========================================================
   9. HOME PAGE - MEET KIM
   ========================================================== */

.meet-kim{
    background:#FFFDF9;
    padding:110px 0;
}

.meet-grid{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:80px;
    align-items:center;
}

.meet-photo img{
    width:100%;
    display:block;
    border-radius:var(--radius-medium);
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.section-tag{
    display:inline-block;
    color:var(--color-accent-soft);
    font-size:15px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.meet-content h2{
    font-family:var(--font-heading);
    font-size:58px;
    line-height:1.05;
    color:var(--color-text-heading);
    margin-bottom:25px;
}

.meet-content p{
    font-size:22px;
    line-height:1.8;
    color:#4B4038;
    margin-bottom:24px;
}

.meet-content .btn-primary{
    margin-top:10px;
}

/* ==========================================================
   10. HOME PAGE - HOW IT WORKS
   ========================================================== */

.how-it-works{
    background:var(--color-background-light);
    padding:110px 0;
    text-align:center;
}

.how-it-works h2{
    font-family:var(--font-heading);
    font-size:58px;
    color:var(--color-text-heading);
    margin:18px 0;
}

.how-intro{
    max-width:760px;
    margin:0 auto 70px;
    font-size:22px;
    line-height:1.7;
    color:#5A4D45;
}

.steps-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-bottom:60px;
}

.step{
    background:var(--color-surface);
    padding:45px 35px;
    border-radius:var(--radius-medium);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.step-icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.step-icon img{
    width:72px;
    height:72px;
    display:block;
}

.step h3{
    font-family:var(--font-heading);
    font-size:34px;
    margin-bottom:18px;
    color:var(--color-text-heading);
}

.step p{
    font-size:20px;
    line-height:1.7;
    color:#5A4D45;
}

.how-it-works .btn-primary{
    margin-top:20px;
}

/* ==========================================================
   11. UNIVERSAL CTA
   ========================================================== */

.site-cta{
    padding:5rem 2rem;
    background:var(--color-background);
}

.site-cta .container{
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:3.25rem 2rem 2.5rem;
    text-align:center;
    background:var(--color-surface);
    border-radius:24px;
}

.site-cta h2{
    margin:0 0 1rem;
    font-family:var(--font-heading);
    font-size:2.1rem;
    font-weight:600;
    line-height:1.2;
    color:var(--color-text);
    letter-spacing:-.02em;
}

.site-cta p{
    max-width:700px;
    margin:0 auto 1.5rem;
    font-size:1.15rem;
    line-height:1.7;
    color:var(--color-text-light);
}

.site-cta .btn-primary{
    margin-top:.5rem;
}

/* ==========================================================
   12. OUR CREATIONS PAGE
   ========================================================== */

.gallery-page{
    background:#f8f4ec;
    width:min(96%,1600px);
    margin:0 auto;
    padding:80px 20px;
}

.gallery-hero{
    text-align:center;
    margin-bottom:90px;
}

.gallery-hero h1{
    font-size:3.5rem;
    margin:20px 0;
}

.gallery-hero p{
    max-width:750px;
    margin:0 auto;
    color:#6b5b4b;
    line-height:1.8;
    font-size:1.15rem;
}

.gallery-category{
    margin-bottom:110px;
}

.gallery-category h2{
    text-align:center;
    font-size:2.4rem;
    margin-bottom:12px;
}

.gallery-category p{
    text-align:center;
    max-width:700px;
    margin:0 auto 35px;
    color:#6b5b4b;
}

/* .featured-photo rules removed — gallery no longer uses a separate hero image */

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.gallery-grid .gallery-photo {
	margin: 0;
	background: var(--color-background-soft);
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-grid img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	cursor: pointer;
	transition: 0.35s;
}

.gallery-grid img:hover {
	transform: scale(1.04);
}

@media (max-width: 900px) {
	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.gallery-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================
   13. CUSTOM ORDER PAGE
   ========================================================== */

.custom-order-page{
    max-width:1100px;
    margin:0 auto;
    padding:80px 20px;
}

.custom-hero{
    text-align:center;
    margin-bottom:80px;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin:50px 0;
}

.process-card{
    background:var(--color-surface);
    padding:35px;
    border-radius:var(--radius-medium);
    box-shadow:var(--shadow-soft);
}

.faq{
    margin-top:80px;
}

.faq-item{
    margin-bottom:45px;
}

.order-contact{
    margin-top:100px;
    padding:70px;
    text-align:center;
    background:#FAF7F2;
    border-radius:var(--radius-large);
}

/* ==========================================================
   14. ABOUT PAGE
   ========================================================== */

.about-page{
    max-width:1100px;
    margin:0 auto;
    padding:80px 20px;
}

.about-hero{
    text-align:center;
    margin-bottom:80px;
}

.about-story{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    margin-bottom:100px;
}

.about-photo{
height:500px;
background:#D8D8D8;
display:flex;
align-items:center;
justify-content:center;
border-radius:var(--radius-large);
overflow:hidden;
}

.about-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.values-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
    margin-top:40px;
}

.value-card{
    padding:35px;
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    box-shadow:0 8px 25px rgba(0,0,0,.05);
}

/* ==========================================================
   15. CONTACT PAGE
   ========================================================== */

.contact-page{
    padding:80px 0;
}

.contact-hero{
    max-width:800px;
    margin:0 auto 70px;
    text-align:center;
}

.contact-grid{
    display:grid;
    grid-template-columns:42% 58%;
    gap:60px;
    align-items:start;
}

.contact-info h2{
    margin-bottom:20px;
}

.contact-details{
    margin-top:40px;
}

.detail{
    margin-bottom:30px;
}

.detail h3{
    color:var(--color-accent);
    margin-bottom:6px;
}

.contact-form-card{
    background:var(--color-surface);
    padding:48px;
    border-radius:var(--radius-large);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

/* ==========================================================
   16. WPForms
   ========================================================== */

.wpforms-container{
    margin:0 !important;
}

/* ---------- Labels ---------- */

.wpforms-form label{

    font-family:var(--font-body);
    font-size:1.05rem;
    font-weight:400;
    line-height:1.45;
    color:#2f2b28;
    margin-bottom:10px;
}

/* ---------- Inputs, Selects and Textareas ---------- */

div.wpforms-container-full input:not([type="hidden"]):not([type="submit"]),
div.wpforms-container-full select,
div.wpforms-container-full textarea{
    width:100% !important;
    padding:15px 16px !important;
    border:1px solid var(--color-border) !important;
    border-radius:8px !important;
    background:#fff !important;
    font-family:var(--font-body) !important;
    font-size:16px !important;
    color:var(--color-text) !important;
}

/* ---------- Focus State ---------- */

div.wpforms-container-full input:not([type="hidden"]):not([type="submit"]):focus,
div.wpforms-container-full select:focus,
div.wpforms-container-full textarea:focus{
    outline:none !important;
    border-color:var(--color-accent) !important;
    box-shadow:0 0 0 4px rgba(138,78,52,.15) !important;
}

/* ---------- Dropdown ---------- */

div.wpforms-container-full select{
    height:56px !important;
    min-height:56px !important;
    padding:0 42px 0 16px !important;
    line-height:1.4 !important;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* ---------- Textarea ---------- */

.wpforms-form textarea{
    min-height:220px;
    resize:none;
}

/* ---------- Field Descriptions ---------- */

.wpforms-field-description{
    color:#7B746D;
    font-size:.92rem;
    margin-top:8px;
}

/* ---------- Submit Button ---------- */

div.wpforms-container-full .wpforms-form button[type="submit"]{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    background:var(--color-accent) !important;

    color:#fff !important;

    border:none !important;

    border-radius:var(--radius-small) !important;

    padding:18px 36px !important;

    min-height:54px !important;

    font-family:var(--font-body) !important;

    font-size:18px !important;

    font-weight:600 !important;

    line-height:1 !important;

    text-decoration:none !important;

    cursor:pointer !important;

    transition:var(--transition) !important;

}

div.wpforms-container-full .wpforms-form button[type="submit"]:hover{

    background:var(--color-accent-dark) !important;

    transform:translateY(-2px);

}
/* ==========================================================
   17. FOOTER
   ========================================================== */

.site-footer{
    padding:35px 20px;
    text-align:center;
    font-size:15px;
    color:var(--color-text-light);
    background:var(--color-background);
}

/* ==========================================================
   18. RESPONSIVE - LARGE TABLETS
   ========================================================== */

@media (max-width:1200px){
    nav{
        gap:24px;
    }

    nav a{
        font-size:16px;
    }

    .hero-content{
        width:48%;
    }

    .hero-content h1{
        font-size:66px;
    }

    .collection-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/* ==========================================================
   19. RESPONSIVE - TABLETS
   ========================================================== */

@media (max-width:700px){
    .collection-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:900px){
    .why-grid{
        grid-template-columns:repeat(2,1fr);
        gap:36px;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

    .about-story,
    .meet-grid,
    .steps-grid{
        grid-template-columns:1fr;
    }

    .meet-grid{
        gap:45px;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .featured-photo img{
        height:300px;
    }
}

@media (max-width:800px){
    .site-header .container{
        position:relative;
        justify-content:flex-end;
    }

    .nav-toggle-label{
        display:flex;
    }

    .main-nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        flex-direction:column;
        align-items:center;
        gap:0;
        background:var(--color-background);
        border-bottom:1px solid rgba(125,95,65,.10);
        box-shadow:0 16px 30px rgba(0,0,0,.08);
        padding:10px 0;
        z-index:50;
    }

    .main-nav a{
        width:100%;
        padding:14px 20px;
        text-align:center;
    }

    .nav-toggle-checkbox:checked ~ .main-nav{
        display:flex;
    }

    .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(2){
        opacity:0;
    }

    .nav-toggle-checkbox:checked ~ .nav-toggle-label span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    /* A background photo with text laid over it can't win on a narrow
       screen — the text column has to get wide enough to read, and at
       that point it always sits on top of *some* busy part of the
       image. So on tablet/phone the layout switches from "text over
       photo" to a simple stack: the photo as its own band up top,
       the card below it on solid ground. Nothing ever overlaps. */
    .hero{
        display:flex;
        flex-direction:column;
        align-items:center;
        min-height:auto;
        padding:0 0 46px;
        background:var(--color-background);
    }

    .hero::before{
        content:"";
        display:block;
        width:100%;
        height:260px;
        background:url("images/hero.png") center center / cover no-repeat;
    }

    .hero-content{
        width:86%;
        max-width:420px;
        margin-top:26px;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        transform:none;
        background:var(--color-surface);
        border-radius:var(--radius-large);
        padding:28px 24px;
        box-shadow:var(--shadow-card);
    }

    .hero-logo{
        width:100%;
        margin-bottom:-24px;
    }

    .hero-content h1{
        font-size:36px;
        margin-bottom:12px;
    }

    .hero-content p{
        font-size:17px;
        line-height:1.55;
        margin-bottom:20px;
    }

    .hero-buttons{
        gap:14px;
        margin-top:6px;
    }

    .contact-form-card{
        padding:36px;
    }

    .order-contact{
        padding:50px 30px;
    }
}

/* ==========================================================
   20. RESPONSIVE - PHONES
   ========================================================== */

@media (max-width:600px){
    .why-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:520px){
    .logo img{
        height:80px;
    }

    nav{
        gap:12px 18px;
    }

    nav a{
        font-size:15px;
    }

    .hero{
        padding:0 0 36px;
    }

    .hero::before{
        height:190px;
    }

    .hero-content{
        width:90%;
        max-width:340px;
        margin-top:20px;
        padding:22px 18px;
    }

    .hero-logo{
        margin-bottom:-16px;
    }

    .hero-content h1{
        font-size:28px;
        margin-bottom:10px;
    }

    .hero-content p{
        font-size:15px;
        line-height:1.5;
        margin-bottom:16px;
    }

    .hero-buttons{
        gap:10px;
        margin-top:4px;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary{
        padding:13px 28px;
        font-size:16px;
    }

    .hero-buttons{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .btn-primary,
    .btn-secondary{
        width:100%;
        text-align:center;
    }

    .collections{
        padding:65px 0;
    }

    .collections h2{
        font-size:46px;
    }

    .collections-subtitle{
        font-size:18px;
        margin-bottom:40px;
    }

    .collection-content h3{
        font-size:34px;
        line-height:1.1;
    }

    .meet-kim,
    .how-it-works{
        padding:70px 0;
    }

    .meet-content h2,
    .how-it-works h2{
        font-size:46px;
    }

    .contact-page{
        padding:55px 0;
    }

    .contact-hero{
        margin-bottom:45px;
    }

    .contact-form-card{
        padding:28px 22px;
    }

    .site-cta{
        padding:3rem 1rem;
    }

    .site-cta .container{
        padding:2.5rem 1.25rem;
    }

    .order-contact{
        padding:40px 22px;
    }

    div.wpforms-container-full .wpforms-form button[type="submit"]{
        width:100%;
        text-align:center;
    }

    .gallery-page{
        padding:55px 16px;
    }

    .gallery-hero{
        margin-bottom:50px;
    }

    .gallery-hero h1{
        font-size:2.3rem;
    }

    .gallery-category{
        margin-bottom:60px;
    }

    .gallery-category h2{
        font-size:1.9rem;
    }

    .featured-photo img{
        height:220px;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .gallery-grid img{
        height:140px;
    }

    .custom-order-page,
    .about-page{
        padding:55px 16px;
    }

    .custom-hero,
    .about-hero{
        margin-bottom:45px;
    }

    .about-story{
        gap:35px;
    }

    .about-photo{
        height:280px;
    }

    .order-contact{
        margin-top:55px;
    }
}
/* Form placeholders */

div.wpforms-container-full input::placeholder,
div.wpforms-container-full textarea::placeholder{

    font-family:var(--font-body);

    color:#9b938a;

    opacity:1;

}

/* ---------- Contact Links ---------- */

.contact-details a{
    color: var(--color-heading);
    font-weight:500;
    text-decoration:none;
}

.contact-details a:hover{
    color:var(--color-accent);
    text-decoration:underline;
}

/* ==========================================================
   21. WOOCOMMERCE
   ========================================================== */

.shop-page{
    padding:70px 0 100px;
    background:var(--color-background-soft);
    min-height:50vh;
}

.shop-page-inner{
    width:100%;
    max-width:1500px;
}

.shop-page h1.entry-title,
.shop-page h1.page-title,
.shop-page h1.product_title{
    font-family:var(--font-heading);
    font-size:3rem;
    font-weight:700;
    color:var(--color-text-heading);
    margin-bottom:.5rem;
}

.shop-page .woocommerce-breadcrumb{
    font-size:.9rem;
    color:var(--color-text-light);
    margin-bottom:30px;
}

.shop-page .woocommerce-breadcrumb a{
    color:var(--color-accent);
    text-decoration:none;
}

.shop-page .woocommerce-notices-wrapper{
    margin-bottom:20px;
}

.shop-page .woocommerce-message,
.shop-page .woocommerce-info,
.shop-page .woocommerce-error{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-left:4px solid var(--color-accent);
    border-radius:var(--radius-small);
    padding:16px 20px;
    margin-bottom:25px;
    list-style:none;
    font-size:15px;
}

.shop-page .woocommerce-error{
    border-left-color:#b23b3b;
}

.shop-page .woocommerce-result-count,
.shop-page .woocommerce-ordering{
    font-size:15px;
    color:var(--color-text-light);
}

.shop-page form.woocommerce-ordering select{
    padding:10px 14px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-small);
    background:var(--color-surface);
    font-family:var(--font-body);
}

/* ---------- Shop / Category Grid ---------- */

.shop-page ul.products{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
    list-style:none;
    margin:35px 0 0;
    padding:0;
}

/* WooCommerce adds a clearfix ::before/::after (content:" ";
   display:table) to ul.products for its old float-based layout. Left
   alone, that pseudo-element becomes a real grid item once the list
   is switched to display:grid above, silently eating the first grid
   cell and shoving every actual product/category card sideways.
   Removing it so only real <li> cards participate in the grid. */
.shop-page ul.products::before,
.shop-page ul.products::after{
    content:none;
    display:none;
}

.shop-page ul.products li.product,
.shop-page ul.products li.product-category{
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:var(--transition);
    text-align:center;
    padding-bottom:24px;
    position:relative;
    list-style:none;
    /* WooCommerce's core stylesheet sets a percentage width on each
       card for its own float-based grid (e.g. 22%/30.75%). Since this
       theme turns ul.products into a CSS Grid instead, that leftover
       width shrinks every card to a fraction of its grid cell and
       strands it on the left, producing big empty gaps. Overriding
       back to 100% lets each card fill its grid cell as intended. */
    width:100% !important;
    margin:0 !important;
}

.shop-page ul.products li.product:hover,
.shop-page ul.products li.product-category:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-card-hover);
}

.shop-page ul.products li.product a img,
.shop-page ul.products li.product-category a img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:contain;
    background:#FBF8F2;
    display:block;
    margin-bottom:18px;
}

.shop-page ul.products li.product a{
    text-decoration:none;
    color:inherit;
    display:block;
}

.shop-page ul.products li.product .woocommerce-loop-product__title,
.shop-page ul.products li.product-category .woocommerce-loop-category__title{
    font-family:var(--font-heading);
    font-size:1.55rem;
    font-weight:700;
    color:var(--color-text-heading);
    margin:0 20px 8px;
}

.shop-page ul.products li.product-category .woocommerce-loop-category__title mark{
    background:none;
    color:var(--color-text-light);
    font-family:var(--font-body);
    font-size:.95rem;
}

.shop-page ul.products li.product .price{
    display:block;
    font-family:var(--font-body);
    font-size:1.15rem;
    font-weight:600;
    color:var(--color-accent);
    margin-bottom:16px;
}

.shop-page ul.products li.product .price del{
    color:var(--color-text-light);
    opacity:.7;
    font-weight:400;
    margin-right:8px;
}

.shop-page ul.products li.product .price ins{
    text-decoration:none;
}

.shop-page ul.products li.product .button,
.shop-page ul.products li.product-category .button{
    display:inline-block;
    padding:14px 30px;
    font-family:var(--font-body);
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    border-radius:var(--radius-small);
    background:var(--color-accent);
    color:#fff !important;
    border:none;
    transition:var(--transition);
    cursor:pointer;
}

.shop-page ul.products li.product .button:hover,
.shop-page ul.products li.product-category .button:hover{
    background:var(--color-accent-dark);
    transform:translateY(-2px);
}

.shop-page ul.products li.product .onsale{
    position:absolute;
    top:16px;
    left:16px;
    background:var(--color-accent);
    color:#fff;
    font-size:.8rem;
    font-weight:700;
    padding:5px 12px;
    border-radius:var(--radius-pill);
    z-index:2;
}

.shop-page .star-rating{
    margin:0 auto 10px;
}

/* ---------- Single Product ---------- */

.shop-page div.product{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:flex-start;
}

/* WooCommerce's own stylesheet floats the gallery at width:48% for
   its old side-by-side layout. That rule ties in specificity with
   the grid layout above, and wins the cascade, so the gallery box
   only ever fills 48% of its actual grid column instead of the full
   column - leaving products (mockup or plain) looking small with a
   big empty gap next to them. Forcing it back to 100% of its grid
   cell; this only resizes the gallery box itself, so mockup products
   keep the same design-to-shirt proportions, just bigger overall. */
.shop-page div.product .woocommerce-product-gallery,
.shop-page div.product div.images{
    width:100% !important;
    float:none !important;
}

.shop-page div.product .woocommerce-product-gallery img{
    border-radius:var(--radius-medium);
    box-shadow:var(--shadow-soft);
    background:#FBF8F2;
}

/* ---------- Live shirt color mockup ----------
   Added by js/shirt-mockup.js on products whose main image is a genuinely
   transparent design PNG. The blank shirt template becomes the visible
   image (in normal flow, so it drives the box's height); the original
   product image is repositioned on top of it as the printed design. */

.woocommerce-product-gallery.kbk-shirt-mockup{
    position:relative;
    background:#FBF8F2;
    border-radius:var(--radius-medium);
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}

.kbk-shirt-mockup .kbk-shirt-template-img{
    display:block;
    width:100%;
    height:auto;
}

.kbk-shirt-mockup .woocommerce-product-gallery__image{
    position:absolute;
    top:18%;
    left:50%;
    width:46%;
    transform:translateX(-50%);
    margin:0;
    z-index:2;
}

.kbk-shirt-mockup .woocommerce-product-gallery__image img{
    width:100%;
    height:auto;
    display:block;
    border-radius:0 !important;
    box-shadow:none !important;
    background:none !important;
}

.shop-page div.product .product_title{
    font-size:2.6rem;
    margin-bottom:10px;
}

.shop-page div.product p.price,
.shop-page div.product .price{
    font-family:var(--font-body);
    font-size:1.7rem;
    font-weight:600;
    color:var(--color-accent);
    margin-bottom:20px;
}

.shop-page div.product .woocommerce-product-details__short-description{
    font-size:17px;
    line-height:1.7;
    color:var(--color-text);
    margin-bottom:25px;
}

.shop-page div.product table.variations{
    width:100%;
    margin-bottom:20px;
}

.shop-page div.product table.variations tr{
    display:block;
    margin-bottom:16px;
}

/* WooCommerce renders each row as <tr><th class="label">...</th><td
   class="value">...</td></tr>. Overriding the row to display:block isn't
   enough on its own - browsers still try to lay out th/td as table cells,
   which is why the Size row (short label) and Shirt Color row (long label)
   ended up with their dropdowns starting at different horizontal positions.
   Forcing the cells to block stacks the label above its dropdown instead,
   so every row's select lines up at the same left edge. */
.shop-page div.product table.variations tr th,
.shop-page div.product table.variations tr td{
    display:block;
    width:100%;
    padding:0;
    text-align:left;
}

.shop-page div.product table.variations label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
    color:var(--color-text-heading);
}

.shop-page div.product table.variations select{
    width:100%;
    padding:14px 16px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-small);
    background:var(--color-surface);
    font-family:var(--font-body);
    font-size:16px;
}

.shop-page div.product .reset_variations{
    display:inline-block;
    margin-top:6px;
    font-size:14px;
    color:var(--color-accent);
}

.shop-page div.product .woocommerce-variation-price .price{
    font-size:1.4rem;
}

.shop-page div.product form.cart{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:25px;
}

.shop-page div.product .quantity input.qty{
    width:70px;
    padding:14px 10px;
    text-align:center;
    border:1px solid var(--color-border);
    border-radius:var(--radius-small);
    font-family:var(--font-body);
    font-size:16px;
}

.shop-page div.product .single_add_to_cart_button,
.shop-page div.product button.button.alt{
    display:inline-block;
    padding:18px 40px;
    font-family:var(--font-body);
    font-size:17px;
    font-weight:600;
    color:#fff !important;
    background:var(--color-accent);
    border:none;
    border-radius:var(--radius-small);
    cursor:pointer;
    transition:var(--transition);
}

.shop-page div.product .single_add_to_cart_button:hover{
    background:var(--color-accent-dark);
    transform:translateY(-2px);
}

.shop-page div.product .single_add_to_cart_button.disabled{
    opacity:.5;
    cursor:not-allowed;
}

.shop-page div.product .product_meta{
    font-size:14px;
    color:var(--color-text-light);
    padding-top:15px;
    border-top:1px solid var(--color-border);
}

.shop-page div.product .product_meta a{
    color:var(--color-accent);
    text-decoration:none;
}

.shop-page .woocommerce-tabs{
    grid-column:1 / -1;
    margin-top:50px;
}

.shop-page .woocommerce-tabs ul.tabs{
    display:flex;
    gap:10px;
    list-style:none;
    padding:0;
    margin:0 0 25px;
    border-bottom:1px solid var(--color-border);
}

.shop-page .woocommerce-tabs ul.tabs li{
    list-style:none;
}

.shop-page .woocommerce-tabs ul.tabs li a{
    display:inline-block;
    padding:12px 22px;
    font-family:var(--font-body);
    font-weight:600;
    color:var(--color-text-light);
    text-decoration:none;
}

.shop-page .woocommerce-tabs ul.tabs li.active a{
    color:var(--color-accent);
    border-bottom:2px solid var(--color-accent);
}

.shop-page .woocommerce-tabs .panel{
    font-size:16px;
    line-height:1.7;
}

.shop-page .related.products{
    grid-column:1 / -1;
    margin-top:70px;
}

.shop-page .related.products > h2{
    font-family:var(--font-heading);
    font-size:2.2rem;
    margin-bottom:30px;
}

/* ---------- Cart ---------- */

.shop-page table.shop_table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:30px;
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    overflow:hidden;
    box-shadow:var(--shadow-soft);
}

.shop-page table.shop_table th{
    text-align:left;
    padding:18px 20px;
    background:var(--color-background-light);
    font-family:var(--font-heading);
    font-weight:700;
    color:var(--color-text-heading);
}

.shop-page table.shop_table td{
    padding:18px 20px;
    border-top:1px solid var(--color-border);
    vertical-align:middle;
}

.shop-page table.shop_table td.product-thumbnail img{
    width:64px;
    height:64px;
    object-fit:contain;
    background:#FBF8F2;
    border-radius:var(--radius-small);
}

.shop-page table.shop_table td.product-name a{
    color:var(--color-text-heading);
    font-weight:600;
    text-decoration:none;
}

.shop-page table.shop_table td.product-remove a{
    color:#b23b3b;
    font-size:20px;
    text-decoration:none;
}

.shop-page table.shop_table .quantity input.qty{
    width:60px;
    padding:10px;
    text-align:center;
    border:1px solid var(--color-border);
    border-radius:var(--radius-small);
}

.shop-page .coupon{
    display:flex;
    gap:10px;
    align-items:center;
}

.shop-page .coupon input#coupon_code{
    padding:14px 16px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-small);
    font-family:var(--font-body);
}

.shop-page .cart-collaterals .cart_totals{
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    padding:30px 35px;
    box-shadow:var(--shadow-soft);
    max-width:480px;
    margin-left:auto;
}

.shop-page .cart_totals h2{
    font-family:var(--font-heading);
    font-size:1.8rem;
    margin-bottom:15px;
}

.shop-page .cart_totals table{
    width:100%;
}

.shop-page .cart_totals table th,
.shop-page .cart_totals table td{
    padding:12px 0;
    border-top:1px solid var(--color-border);
    text-align:left;
}

.shop-page .cart_totals .order-total .woocommerce-Price-amount{
    font-size:1.3rem;
    font-weight:700;
    color:var(--color-accent);
}

.shop-page .wc-proceed-to-checkout .checkout-button,
.shop-page a.checkout-button{
    display:block;
    width:100%;
    text-align:center;
    padding:18px 20px;
    background:var(--color-accent);
    color:#fff !important;
    font-family:var(--font-body);
    font-weight:600;
    font-size:17px;
    border-radius:var(--radius-small);
    text-decoration:none;
    transition:var(--transition);
    margin-top:15px;
}

.shop-page .wc-proceed-to-checkout .checkout-button:hover{
    background:var(--color-accent-dark);
    transform:translateY(-2px);
}

/* ---------- Checkout ---------- */

.shop-page form.checkout{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:50px;
    align-items:start;
}

.shop-page #customer_details{
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    padding:35px;
    box-shadow:var(--shadow-soft);
}

.shop-page .woocommerce-billing-fields h3,
.shop-page #order_review_heading{
    font-family:var(--font-heading);
    font-size:1.7rem;
    margin-bottom:20px;
    color:var(--color-text-heading);
}

.shop-page .form-row{
    margin-bottom:18px;
}

.shop-page .form-row label{
    display:block;
    font-weight:600;
    margin-bottom:6px;
    color:var(--color-text-heading);
}

.shop-page .form-row .required{
    color:var(--color-accent);
}

.shop-page .form-row input.input-text,
.shop-page .form-row select,
.shop-page .form-row textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid var(--color-border);
    border-radius:var(--radius-small);
    background:var(--color-surface);
    font-family:var(--font-body);
    font-size:16px;
}

.shop-page .form-row input.input-text:focus,
.shop-page .form-row select:focus,
.shop-page .form-row textarea:focus{
    outline:none;
    border-color:var(--color-accent);
    box-shadow:0 0 0 4px rgba(138,78,52,.15);
}

.shop-page #order_review{
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    padding:35px;
    box-shadow:var(--shadow-soft);
}

.shop-page #order_review table.shop_table{
    box-shadow:none;
    margin-bottom:0;
}

.shop-page .payment_methods{
    list-style:none;
    padding:0;
    margin:20px 0;
    border-top:1px solid var(--color-border);
}

.shop-page .payment_methods li{
    padding:15px 0;
    border-bottom:1px solid var(--color-border);
}

.shop-page #place_order{
    width:100%;
    padding:18px 20px;
    background:var(--color-accent);
    color:#fff;
    font-family:var(--font-body);
    font-weight:600;
    font-size:18px;
    border:none;
    border-radius:var(--radius-small);
    cursor:pointer;
    transition:var(--transition);
}

.shop-page #place_order:hover{
    background:var(--color-accent-dark);
    transform:translateY(-2px);
}

/* ---------- Specificity overrides ----------
   WooCommerce's own core stylesheet ships selectors like
   ".woocommerce a.button.alt" which outrank the rules above (three
   classes vs. two), so purple/default WC buttons can leak through.
   These !important rules pin every WC button to the site's accent
   color regardless of stylesheet load order. */

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.checkout-button,
.woocommerce .wc-proceed-to-checkout a,
.woocommerce button.single_add_to_cart_button,
.woocommerce #place_order{
    background-color:var(--color-accent) !important;
    color:#fff !important;
    border-color:var(--color-accent) !important;
    font-family:var(--font-body) !important;
    border-radius:var(--radius-small) !important;
    box-shadow:none !important;
    text-shadow:none !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.checkout-button:hover,
.woocommerce .wc-proceed-to-checkout a:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce #place_order:hover{
    background-color:var(--color-accent-dark) !important;
    border-color:var(--color-accent-dark) !important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce ul.products li.product .button{
    background-color:var(--color-accent) !important;
    color:#fff !important;
    border-color:var(--color-accent) !important;
    font-family:var(--font-body) !important;
    border-radius:var(--radius-small) !important;
    box-shadow:none !important;
    text-shadow:none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce ul.products li.product .button:hover{
    background-color:var(--color-accent-dark) !important;
    border-color:var(--color-accent-dark) !important;
}

/* ---------- My Account ---------- */

.shop-page.woocommerce-account .woocommerce{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:50px;
}

.shop-page .woocommerce-MyAccount-navigation ul{
    list-style:none;
    padding:0;
    margin:0;
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}

.shop-page .woocommerce-MyAccount-navigation li{
    border-bottom:1px solid var(--color-border);
}

.shop-page .woocommerce-MyAccount-navigation li a{
    display:block;
    padding:16px 22px;
    color:var(--color-text);
    text-decoration:none;
    font-weight:600;
}

.shop-page .woocommerce-MyAccount-navigation li.is-active a{
    color:var(--color-accent);
    background:var(--color-background-light);
}

.shop-page .woocommerce-MyAccount-content{
    background:var(--color-surface);
    border-radius:var(--radius-medium);
    padding:35px;
    box-shadow:var(--shadow-soft);
}

/* ---------- Responsive ---------- */

@media (max-width:1000px){
    .shop-page ul.products{
        grid-template-columns:repeat(2,1fr);
    }

    .shop-page div.product,
    .shop-page form.checkout{
        grid-template-columns:1fr;
    }

    .shop-page.woocommerce-account .woocommerce{
        grid-template-columns:1fr;
    }
}

@media (max-width:600px){
    .shop-page ul.products{
        grid-template-columns:1fr;
    }

    .shop-page{
        padding:50px 0 70px;
    }

    .shop-page h1.entry-title,
    .shop-page h1.page-title,
    .shop-page h1.product_title{
        font-size:2.2rem;
    }

    /* Data tables (cart, order review) can't reflow their columns on a
       phone-width screen, so let them scroll horizontally inside their
       own box rather than squeezing cells or breaking the page layout. */
    .shop-page table.shop_table{
        display:block;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .shop-page table.shop_table th,
    .shop-page table.shop_table td{
        white-space:nowrap;
    }

    .shop-page table.shop_table td.product-name{
        white-space:normal;
        min-width:160px;
    }

    .shop-page .cart-collaterals .cart_totals{
        max-width:100%;
        margin-left:0;
        padding:24px 22px;
    }

    .shop-page #customer_details,
    .shop-page #order_review{
        padding:22px;
    }

    .shop-page div.product form.cart{
        gap:12px;
    }
}


/* ==========================================================
   OUR CREATIONS – LIGHTBOX
   ========================================================== */

.kbk-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(44, 36, 29, 0.92);
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.kbk-lightbox.is-open {
	display: flex;
}

.kbk-lightbox img {
	max-width: 90vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: var(--radius-medium);
	box-shadow: var(--shadow-card-hover);
}

.kbk-lightbox-close,
.kbk-lightbox-prev,
.kbk-lightbox-next {
	position: absolute;
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	transition: opacity 0.25s;
}

.kbk-lightbox-close:hover,
.kbk-lightbox-prev:hover,
.kbk-lightbox-next:hover {
	opacity: 0.65;
}

.kbk-lightbox-close {
	top: 24px;
	right: 30px;
	font-size: 36px;
}

.kbk-lightbox-prev,
.kbk-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	font-size: 48px;
	padding: 10px 16px;
}

.kbk-lightbox-prev { left: 10px; }
.kbk-lightbox-next { right: 10px; }

@media (max-width: 600px) {
	.kbk-lightbox { padding: 16px; }
	.kbk-lightbox-prev, .kbk-lightbox-next { font-size: 32px; padding: 6px 10px; }
	.kbk-lightbox-close { font-size: 28px; top: 14px; right: 16px; }
}


/* ==========================================================
   22. LEGAL / POLICY PAGES
   ========================================================== */

.legal-page{
    max-width:900px;
    margin:0 auto;
}

.legal-hero{
    text-align:center;
    margin-bottom:50px;
}

.legal-content h2{
    margin-top:45px;
    margin-bottom:14px;
}

.legal-content h2:first-child{
    margin-top:0;
}

.legal-content p,
.legal-content li{
    line-height:1.75;
    margin-bottom:16px;
    color:var(--color-text);
}

.legal-content ul{
    padding-left:22px;
    margin-bottom:16px;
}

.legal-content a{
    color:var(--color-accent);
}

/* ==========================================================
   23. FOOTER POLICY LINKS
   ========================================================== */

.footer-links{
    margin-top:12px;
    font-size:14px;
}

.footer-links a{
    color:var(--color-text-light);
    text-decoration:none;
    margin:0 8px;
}

.footer-links a:hover{
    color:var(--color-accent);
    text-decoration:underline;
}

.footer-links .sep{
    color:var(--color-border);
}


/* ==========================================================
   24. SHOP PAGE INTRO
   ========================================================== */

.shop-intro{
    text-align:center;
    max-width:700px;
    margin:0 auto 55px;
}

.shop-intro h2{
    font-family:var(--font-heading);
    font-size:2.4rem;
    font-weight:700;
    color:var(--color-text-heading);
    margin-bottom:18px;
}

.shop-intro p{
    font-size:1.05rem;
    line-height:1.8;
    color:var(--color-text-light);
    margin-bottom:16px;
}

.shop-intro .btn-primary{
    margin-top:10px;
}

@media (max-width:600px){
    .shop-intro{
        margin-bottom:35px;
    }

    .shop-intro h2{
        font-size:1.9rem;
    }
}