/* ADSS CAFE — theme layer (loads after style.css)
   Palette from the brand: logo ink, biscoff caramel, latte, milk foam */
:root{
  --ink:#1e1a1b; --cocoa:#5a3522; --caramel:#d08a4e; --caramel-dk:#a8622a;
  --latte:#f4e6d3; --foam:#fffaf2; --line:rgba(30,26,27,.12);
  --r-lg:28px; --r-md:18px;
}
html{scroll-padding-top:96px}
body{color:var(--ink);font-family:"Figtree",system-ui,sans-serif;font-size:18px;line-height:1.6}
h1,h2,h3,h4,h5,h6{font-family:"Young Serif",Georgia,serif;font-weight:400;color:var(--ink);letter-spacing:-.01em;line-height:1.1}
a{color:inherit}
:focus-visible{outline:3px solid var(--caramel);outline-offset:3px}

/* ---------- floating pill header ---------- */
header.header{position:sticky;top:12px;height:64px;width:calc(100% - 24px);max-width:1280px;margin:12px auto;padding:0 12px 0 10px;
  background:rgba(255,250,242,.92);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 8px 30px rgba(30,26,27,.10);gap:16px}
header.header .logo{color:var(--ink);font-family:"Young Serif",serif;font-size:20px;letter-spacing:0;gap:10px;text-decoration:none}
.brand-mark{width:44px;height:44px;border-radius:50%;display:block;flex:none}
header.header .navbar{margin:0 auto;gap:6px}
header.header .navbar a{color:var(--ink);font-size:17px;font-weight:600;letter-spacing:0;padding:8px 18px;border-radius:999px;text-transform:lowercase;transition:background .2s}
.navbar a::first-letter,.btn::first-letter,.add-cart::first-letter{text-transform:uppercase}
header.header .navbar a:hover,header.header .navbar a.active{background:var(--ink);color:var(--foam)}
header.header .header-icons{gap:8px}
header.header .header-icons button{background:var(--latte);border:0;color:var(--ink);width:42px;height:42px;font-size:18px}
header.header .header-icons button:hover{background:var(--caramel);color:var(--ink)}
header.header #cartCount{background:var(--ink);color:var(--foam);top:-4px;right:-4px}

/* ---------- inset, rounded hero panels ---------- */
.hero,.shop-hero,.about-hero,.contact-hero,.gallery-hero{position:relative;width:calc(100% - 24px);max-width:1280px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden;color:var(--foam)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,26,27,.78),rgba(30,26,27,.1) 75%);z-index:1;pointer-events:none}
.hero-content{position:relative;z-index:2}
.hero h1,.shop-hero h1,.about-hero h1,.contact-hero h1,.gallery-hero h1{color:var(--foam);font-size:clamp(42px,7vw,84px);line-height:1}
.hero h1{max-width:9ch}
.hero-description{max-width:44ch;font-size:20px}

/* ---------- small labels: sentence case, no tracking ---------- */
.small-title,.eyebrow,.contact-eyebrow,.section-eyebrow,.gallery-eyebrow,.gallery-section-eyebrow,.dashboard-label,.dashboard-eyebrow,.search-label,.product-category{text-transform:none;letter-spacing:0;font-size:17px;font-weight:600;color:var(--caramel-dk)}
.hero .small-title,.about-hero .small-title,.shop-hero .eyebrow,.contact-hero .contact-eyebrow,.gallery-hero .gallery-eyebrow{color:#f0b784}

/* ---------- buttons: pills ---------- */
.btn,.add-cart,.about-btn,.cta-btn,.place-order-button,.send-message-button,.login-btn,.light-btn,.dashboard-shop-btn,.edit-profile-btn,.checkout-button,.gallery-cta a{
  background:var(--caramel);color:var(--ink);border:0;border-radius:999px;padding:15px 28px;font:600 17px/1 "Figtree",sans-serif;letter-spacing:0;text-transform:lowercase;text-decoration:none;cursor:pointer;display:inline-block;transition:background .2s,color .2s}
.btn:hover,.add-cart:hover,.about-btn:hover,.cta-btn:hover,.place-order-button:hover,.send-message-button:hover,.login-btn:hover,.light-btn:hover,.dashboard-shop-btn:hover,.edit-profile-btn:hover,.checkout-button:hover,.gallery-cta a:hover{background:var(--ink);color:var(--foam);transform:none}
.outline-btn{border:1.5px solid var(--ink);color:var(--ink);border-radius:999px;padding:12px 24px;text-transform:lowercase;font-weight:600}
.outline-btn:hover{background:var(--ink);color:var(--foam)}

/* ---------- cards & panels ---------- */
.product,.product-card,.review-card,.mission-card,.value-card,.dashboard-card,.dashboard-stat-card,.quick-card,.cart-item,.cart-summary,.customer-form,.contact-form-box,.login-form-container,.order-item,.sidebar,.benefit,.contact-note,.empty-cart,.empty-orders{
  background:var(--foam);border:0;border-radius:var(--r-lg);box-shadow:0 1px 0 var(--line)}
.product,.product-card{padding:12px;overflow:hidden}
.product-image,.product-img,.gallery-item,.about-story-image,.farm-image,.farm-cup-image,.favorite-image,.order-product-image{border-radius:var(--r-md);overflow:hidden}
.product-image img,.product-img img{border-radius:var(--r-md)}
.tag{background:var(--ink);color:var(--foam);border-radius:999px;text-transform:none;letter-spacing:0}
.product-price,.product-card strong,.product-bottom strong{color:var(--cocoa);font-weight:700}
.stars{color:var(--caramel)}
.benefits{gap:12px;background:transparent}

/* ---------- section backdrops ---------- */
.farm,.brew-banner,.about-cta,.gallery-cta,.login-image,.favorite-section{background-color:#4a2010;color:var(--foam);border-radius:var(--r-lg);border:1px solid rgba(243,230,210,.18)}
.farm h2,.brew-banner h2,.about-cta h2,.gallery-cta h2,.login-image h1,.favorite-content h2{color:var(--foam)}
.farm,.brew-banner,.about-cta,.gallery-cta{width:calc(100% - 24px);max-width:1280px;margin-left:auto;margin-right:auto}
.farm .small-title,.about-cta .small-title,.login-image .small-title{color:#f0b784}

/* ---------- forms ---------- */
input,select,textarea{font-family:inherit;font-size:16px;background:#fff;border:1.5px solid var(--line);border-radius:14px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--caramel);box-shadow:0 0 0 4px rgba(208,138,78,.25)}
label{font-weight:600}

/* ---------- footer ---------- */
footer{width:100%;max-width:none;margin:64px 0 0;padding:64px 6% 24px;background:#0c0c0c!important;color:var(--foam)!important;border-radius:0;border-top:1px solid rgba(243,230,210,.2)}
footer h3,footer h4{color:var(--caramel);text-transform:none;letter-spacing:0;font-size:22px}
.footer-brand h3{display:flex;align-items:center;gap:10px;color:var(--foam);font-size:28px}
footer a{color:rgba(255,250,242,.72);text-decoration:none;font-size:16px}
footer a:hover{color:var(--caramel)}
footer p{color:rgba(255,250,242,.72);font-size:16px}
.footer-bottom{border-top:1px solid rgba(255,250,242,.15)}
.newsletter input{background:rgba(255,250,242,.08);border:1px solid rgba(255,250,242,.2);color:var(--foam);border-radius:999px}
.newsletter button{background:var(--caramel);color:var(--ink);border:0;border-radius:50%}

/* ---------- toast, search, dashboard status ---------- */
.toast{background:var(--ink);color:var(--foam);border-radius:999px;padding:12px 22px}
.search-box{background:var(--foam);border-radius:var(--r-lg)}
.search-result-item{border-radius:var(--r-md)}
.order-status{border-radius:999px;text-transform:none;letter-spacing:0}

/* ---------- small screens ---------- */
@media (max-width:820px){
  header.header{height:auto;flex-wrap:wrap;border-radius:28px;padding:10px 14px;row-gap:8px}
  header.header .navbar{order:3;width:100%;justify-content:space-between;gap:2px}
  header.header .navbar a{padding:6px 10px;font-size:14px}
  .hero h1{max-width:none}
  footer{padding:40px 6% 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- contact page ---------- */
.contact-page .contact-section{background:transparent}

/* ---------- fixes: benefits strip, shop sidebar, checkbox/range inputs ---------- */
input[type="checkbox"],input[type="radio"]{width:auto;padding:0;border-radius:4px;box-shadow:none;accent-color:var(--caramel-dk)}
input[type="range"]{padding:0;border:0;background:none;box-shadow:none;accent-color:var(--caramel-dk)}

.benefits{width:calc(100% - 24px);max-width:1280px;margin:12px auto;padding:0;gap:12px;background:transparent;border:0}
.benefit{align-items:center;gap:14px;padding:18px 22px;border-radius:20px}
.benefit > span{font-size:28px;line-height:1;color:var(--caramel-dk)}
.benefit h4{font-size:19px;margin-bottom:2px;text-transform:none;letter-spacing:0}
.benefit p{font-size:16px;line-height:1.4;margin-top:0;color:#5b4a40}

.shop-container{gap:28px;align-items:start}
.sidebar{padding:26px 24px;border-right:0;border-radius:24px;position:sticky;top:96px}
.sidebar h3{font-size:24px;margin-bottom:22px;text-transform:lowercase}
.sidebar h3::first-letter{text-transform:uppercase}
.filter{margin-bottom:26px}
.filter h4{font-size:17px;margin-bottom:12px}
.filter label{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:17px;font-weight:500;color:var(--ink)}
.filter input{margin:0}
.price-values{color:#5b4a40;font-size:14px}

footer a,footer p{font-size:16px}
.footer-bottom p{font-size:14px}
@media (max-width:1000px){
  .benefits{grid-template-columns:repeat(2,1fr)}
  .shop-container{grid-template-columns:1fr}
  .sidebar{position:static}
}
@media (max-width:520px){.benefits{grid-template-columns:1fr}}

/* ---------- full-width heroes that extend up behind the header ---------- */
.hero,.shop-hero,.about-hero,.contact-hero,.gallery-hero{width:100%;max-width:none;margin:-88px 0 0;border-radius:0}
.hero{height:auto;min-height:740px}
.shop-hero{min-height:520px}
.about-hero{min-height:560px}
.contact-hero{min-height:520px}
.gallery-hero{min-height:600px}
.hero-content{padding-top:130px}
@media (max-width:820px){
  .hero{min-height:640px}
  .shop-hero,.about-hero,.contact-hero,.gallery-hero{min-height:460px}
  .hero,.shop-hero,.about-hero,.contact-hero,.gallery-hero{margin-top:-150px}
}
@media (max-width:820px){
  .shop-hero,.about-hero,.contact-hero,.gallery-hero{padding-top:190px}
  .hero-content{padding-top:190px}
}

/* ---------- compact sizing: heroes + footer ---------- */
.hero{min-height:560px}
.shop-hero{min-height:380px;padding-bottom:50px}
.about-hero{min-height:420px;padding-bottom:60px}
.contact-hero{min-height:380px;padding-bottom:50px}
.gallery-hero{min-height:440px;padding-bottom:50px}
.hero-content{padding-top:110px;padding-bottom:40px}
.hero h1,.shop-hero h1,.about-hero h1,.contact-hero h1,.gallery-hero h1{font-size:clamp(36px,5.5vw,62px)}
.hero-description{font-size:16px}
footer{margin-top:40px;padding:36px 6% 14px}
.footer-content{gap:24px}
.footer-brand h3{font-size:21px}
.footer-bottom{margin-top:24px;padding-top:14px}
footer a,footer p{font-size:14px}
.footer-content a{margin-bottom:6px}
@media (max-width:820px){
  .hero{min-height:500px}
  .shop-hero,.about-hero,.contact-hero,.gallery-hero{min-height:360px}
}

/* ---------- tighter: shorter heroes, slim footer ---------- */
.hero{min-height:440px}
.shop-hero,.contact-hero{min-height:300px;padding-top:110px;padding-bottom:36px}
.about-hero{min-height:340px;padding-top:110px;padding-bottom:40px}
.gallery-hero{min-height:360px;padding-top:110px;padding-bottom:40px}
.hero-content{padding-top:104px;padding-bottom:32px}
.hero h1{max-width:none;font-size:clamp(34px,4.6vw,54px)}
.shop-hero h1,.about-hero h1,.contact-hero h1,.gallery-hero h1{font-size:clamp(32px,4.2vw,50px)}
.hero-description{margin:12px 0 18px}

footer{margin-top:32px;padding:24px 6% 10px}
.footer-content{padding:0;gap:20px}
.footer-content h4{margin-bottom:8px}
.footer-bottom{margin-top:16px;padding:10px 0 0}
.footer-bottom p{font-size:12px}
@media (max-width:820px){
  .hero{min-height:420px}
  .shop-hero,.about-hero,.contact-hero,.gallery-hero{min-height:300px;padding-top:180px}
  .hero-content{padding-top:180px}
}
/* ---------- cart order summary ---------- */

.cart-summary {
    background: var(--ink);
    color: var(--foam);
}

.cart-summary .summary-heading {
    display: block;
    margin-bottom: 26px;
}

.cart-summary .summary-heading p {
    margin: 0 0 8px;
    color: #f0b784;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.cart-summary .summary-heading h2 {
    margin: 0;
    color: var(--foam);
    font-family: "Young Serif", Georgia, serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.15;
}

.cart-summary .summary-line {
    color: rgba(255, 250, 242, .75);
}

.cart-summary .summary-line strong {
    color: var(--foam);
}

.cart-summary .summary-total {
    color: var(--foam);
}

.cart-summary .summary-total strong {
    color: var(--caramel);
}


/* ABOUT PAGE - spacing before Find Your Perfect Coffee */
.about-cta {
    margin-top: 25px;
}
/* =========================================================
   SHOP PAGE: richer background + bigger text
========================================================= */
/* sidebar + headings: bigger text on the site background */
body.shop-page .sidebar h3{font-size:30px}
body.shop-page .filter h4{font-size:21px}
body.shop-page .filter label{font-size:17px}
body.shop-page .shop-top h2{font-size:46px}
body.shop-page .product-count{font-size:17px}
body.shop-page .sort-select{font-size:16px;border-radius:999px}
body.shop-page .breadcrumb,body.shop-page .breadcrumb a{font-size:16px}


body.shop-page .pagination button{display:flex;align-items:center;justify-content:center;padding:0;line-height:1;font-size:16px}


/* =========================================================
   SITE BACKGROUND: coffee palette
   A7795E chamoisee / 6E3C19 kobicha / 34170D black bean / 230F08 licorice / 110703 smoky black
========================================================= */
:root{--chamoisee:#A7795E;--kobicha:#6E3C19;--bean:#34170D;--licorice:#230F08;--smoky:#110703}
html{background:#34170D}
body,
body.dashboard-page{
    color:#f3e6d2;
    background-color:#34170D;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23f3e6d2' fill-opacity='.06'%3E%3Cg transform='rotate(30 30 30)'%3E%3Cellipse cx='30' cy='30' rx='11' ry='7'/%3E%3C/g%3E%3Cg transform='rotate(-35 110 70)'%3E%3Cellipse cx='110' cy='70' rx='11' ry='7'/%3E%3C/g%3E%3Cg transform='rotate(70 60 125)'%3E%3Cellipse cx='60' cy='125' rx='11' ry='7'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%2334170D' stroke-opacity='.7' stroke-width='1.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M20 34 q10 -8 20 -8' transform='rotate(30 30 30)'/%3E%3Cpath d='M100 74 q10 -8 20 -8' transform='rotate(-35 110 70)'/%3E%3Cpath d='M50 129 q10 -8 20 -8' transform='rotate(70 60 125)'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(circle at 8% 4%, rgba(167,121,94,.55), transparent 45%),
        radial-gradient(circle at 95% 28%, rgba(110,60,25,.55), transparent 42%),
        radial-gradient(circle at 10% 72%, rgba(110,60,25,.35), transparent 45%),
        linear-gradient(180deg,#A7795E 0%,#6E3C19 22%,#34170D 55%,#34170D 82%,#4a2010 100%);
}

/* let the site background show through flat cream sections */
.mission-section,.contact-section,.gallery-section,.cart-page,.login-page,.dashboard-page,.quick-section{background:transparent}


/* ---------- text on the dark coffee background ---------- */
.section-title h2,.reviews-title h2,.shop-top h2,.about-story-content h2,.mission-title h2,.why-content h2,
.gallery-heading h2,.contact-info h2,.cart-title h1,.farm-cup-content h2,.process-item h4{color:#fff6e8}
.about-story-content p,.why-content p,.about-cta p,.contact-info .contact-description,.cart-title span,
.gallery-heading p,.shop-top .product-count,.mission-title p,.reviews-title p,.section-title p{color:#ead9c0}
.contact-detail a,.contact-detail p{color:#f3e6d2}
.contact-detail span{color:#e0b684}
.breadcrumb,.breadcrumb a{color:#e0b684}
.breadcrumb span{color:#cdb591}
.outline-btn,.gate-btn{color:#f3e6d2;border-color:#e0b684}
.outline-btn:hover,.gate-btn:hover{background:#f3e6d2;color:#230F08}
.gate-btn-main{background:#d8b27a;border-color:#d8b27a;color:#1e1208}
.gate-btn-main:hover{background:#f3e6d2;border-color:#f3e6d2;color:#1e1208}
.small-title,.eyebrow,.section-eyebrow,.gallery-eyebrow,.gallery-section-eyebrow,.contact-eyebrow{color:#e0b684}

/* cards stay cream with dark text */
.review-card,.mission-card,.value-card,.quick-card,.benefit,.contact-form-box,.login-form-container,.customer-form,.cart-item,.empty-cart,.empty-orders,.sidebar,.order-item,.my-order,.order-receipt,.login-gate,.dashboard-card,.dashboard-stat-card,.feature,.features-item,.trust-item{color:var(--ink)}
.review-card .small-title,.review-card .eyebrow,.review-card .section-eyebrow,.mission-card .small-title,.mission-card .eyebrow,.mission-card .section-eyebrow,.value-card .small-title,.value-card .eyebrow,.value-card .section-eyebrow,.quick-card .small-title,.quick-card .eyebrow,.quick-card .section-eyebrow,.benefit .small-title,.benefit .eyebrow,.benefit .section-eyebrow,.contact-form-box .small-title,.contact-form-box .eyebrow,.contact-form-box .section-eyebrow,.login-form-container .small-title,.login-form-container .eyebrow,.login-form-container .section-eyebrow,.customer-form .small-title,.customer-form .eyebrow,.customer-form .section-eyebrow,.cart-item .small-title,.cart-item .eyebrow,.cart-item .section-eyebrow,.empty-cart .small-title,.empty-cart .eyebrow,.empty-cart .section-eyebrow,.empty-orders .small-title,.empty-orders .eyebrow,.empty-orders .section-eyebrow,.sidebar .small-title,.sidebar .eyebrow,.sidebar .section-eyebrow,.order-item .small-title,.order-item .eyebrow,.order-item .section-eyebrow,.my-order .small-title,.my-order .eyebrow,.my-order .section-eyebrow,.order-receipt .small-title,.order-receipt .eyebrow,.order-receipt .section-eyebrow,.login-gate .small-title,.login-gate .eyebrow,.login-gate .section-eyebrow,.dashboard-card .small-title,.dashboard-card .eyebrow,.dashboard-card .section-eyebrow,.dashboard-stat-card .small-title,.dashboard-stat-card .eyebrow,.dashboard-stat-card .section-eyebrow,.feature .small-title,.feature .eyebrow,.feature .section-eyebrow,.features-item .small-title,.features-item .eyebrow,.features-item .section-eyebrow,.trust-item .small-title,.trust-item .eyebrow,.trust-item .section-eyebrow{color:var(--caramel-dk)}
.login-gate .gate-btn,.order-receipt .gate-btn,.empty-cart .gate-btn,.orders-empty .gate-btn{color:#1e1a1b;border-color:#1e1a1b}
.login-gate .gate-btn:hover,.order-receipt .gate-btn:hover{background:#1e1a1b;color:#fffaf2}
.login-gate .gate-btn-main,.order-receipt .gate-btn-main{background:#d08a4e;border-color:#d08a4e;color:#1e1a1b}
.orders-empty{color:#ead9c0}
.orders-empty .gate-btn{color:#f3e6d2;border-color:#e0b684}
.orders-empty .gate-btn-main{color:#1e1208;border-color:#d8b27a}
body .about-story-content p,body .why-content p,body .about-cta p,body .about-story p,body .why-section p{color:#ead9c0}
body .about-story-content p,body .why-content p,body .about-cta p{color:#ead9c0!important}
body .value-card p,body .mission-card p,body .review-card p,body .benefit p{color:#6f6258!important}
body .farm-content h2,body .farm h2,body .farm-cup-content h2{color:#fff6e8!important}
body .farm-content p,body .farm-cup-content p{color:#ead9c0}

/* ---------- dashboard (admin) on dark background ---------- */
.admin-product-card,.admin-product-card *{--keep:1}
.admin-product-card{color:var(--ink)}
.dashboard-header h1,.dashboard-welcome h1,.dashboard-container > h1,.dashboard-title,.manage-products-header h2,.dashboard-header h2{color:#fff6e8}
.dashboard-header p,.dashboard-welcome p,.manage-products-header p,.manage-products-section > p{color:#ead9c0}
.dashboard-label,.dashboard-eyebrow,.manage-products-header .section-eyebrow,.manage-products-header span{color:#e0b684}
.dashboard-card .dashboard-label,.dashboard-card .dashboard-eyebrow,.dashboard-stat-card .dashboard-label{color:var(--caramel-dk)}
body .dashboard-welcome p{color:#ead9c0!important}
body .manage-products-section > p,body .manage-products-header p{color:#ead9c0!important}

/* =========================================================
   SAME BACKGROUND ON EVERY PAGE (matches homepage)
   Gradient is pinned to the screen so short pages (login,
   register, orders...) don't repeat/cut it, and every page
   looks the same as the homepage.
========================================================= */
html{min-height:100%}
body{
    min-height:100vh;
    background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
    background-size:160px 160px,100% 100%,100% 100%,100% 100%,100% 100%;
    background-attachment:scroll,fixed,fixed,fixed,fixed;
}
.orders-page,.user-dashboard-page,.shop-container,.cart-wrapper,.contact-container,.gallery-section,.login-page,.cart-page,.contact-section,.dashboard-page,main{background:transparent}

/* =========================================================
   LOGIN | REGISTER box beside the search button
========================================================= */
header.header .header-auth{
    display:flex;align-items:center;gap:2px;height:42px;padding:0 6px;
    background:var(--latte);border-radius:999px;border:1px solid var(--line);
    white-space:nowrap;
}
header.header .header-auth a{
    color:var(--ink);font-size:14px;font-weight:700;letter-spacing:.5px;text-decoration:none;
    padding:6px 14px;border-radius:999px;text-transform:uppercase;transition:background .2s,color .2s;
}
header.header .header-auth a:hover{background:var(--caramel);color:var(--ink)}
header.header .header-auth a.active{background:var(--ink);color:var(--foam)}
header.header .header-auth-sep{width:1px;height:18px;background:var(--line)}
@media(max-width:700px){
    header.header .header-auth a{font-size:12px;padding:5px 9px}
}

/* =========================================================
   RECENT ORDERS: status buttons (PENDING / PROCESSING / VERIFICATION / DONE / DELETE)
========================================================= */
.order-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-left:10px;flex-shrink:0;align-self:center;min-width:220px}
.order-actions button{margin:0;border:0;border-radius:8px;padding:9px 10px;font-size:11px;font-weight:700;letter-spacing:.5px;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.status-set-btn{background:#f1e7d8;color:var(--ink)}
.status-set-btn.st-pending:hover,.status-set-btn.st-pending.active{background:#c98a1b;color:#fff}
.status-set-btn.st-processing:hover,.status-set-btn.st-processing.active{background:#a8622a;color:#fff}
.status-set-btn.st-verification:hover,.status-set-btn.st-verification.active{background:#27508a;color:#fff}
.status-set-btn.st-done:hover,.status-set-btn.st-done.active{background:#3d6b2c;color:#fff}
.order-actions .delete-order-btn{grid-column:span 2}
.order-status.pending{color:#c98a1b}
.order-status.verification{color:#27508a}
.order-status.done{color:#3d6b2c}
@media(max-width:550px){
    .order-item{flex-wrap:wrap}
    .order-actions{width:100%;margin-left:0;min-width:0}
}

/* =========================================================
   MY ACCOUNT / PROFILE BOXES (admin dashboard) - restored
========================================================= */
.dashboard-grid{align-items:start}
.dashboard-profile{display:flex;align-items:center;gap:14px;background:var(--foam);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 22px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.dashboard-profile .profile-icon{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--foam);display:flex;align-items:center;justify-content:center;font-size:23px;flex-shrink:0}
.dashboard-profile strong{display:block;color:var(--ink);font-size:15px}
.dashboard-profile span{display:block;color:#7a6a5c;font-size:13px;margin-top:3px}

.account-card{background:var(--foam);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:0 8px 30px rgba(0,0,0,.18);color:var(--ink);position:static;align-self:start}
.account-card .account-profile{text-align:center;padding:4px 0 22px;border-bottom:1px solid var(--line)}
.account-card .big-profile-icon{width:76px;height:76px;margin:0 auto 14px;border-radius:50%;background:var(--ink);color:var(--foam);display:flex;align-items:center;justify-content:center;font-size:32px}
.account-card .account-profile h3{margin:0 0 6px;color:var(--ink);font-size:20px}
.account-card .account-profile p{margin:0;color:#7a6a5c;font-size:14px;word-break:break-all}
.account-card .account-info{padding:16px 0 20px}
.account-card .account-info div{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:11px 0;border-bottom:1px dashed var(--line)}
.account-card .account-info div:last-child{border-bottom:0}
.account-card .account-info span{font-size:12px;letter-spacing:1px;color:#8a7a6c;font-weight:700}
.account-card .account-info strong{font-size:14px;color:var(--ink);text-align:right;word-break:break-all}
.account-card .edit-profile-btn{display:block;width:100%;text-align:center}


/* =========================================================
   RESPONSIVE NAVBAR (fixes cut-off sides when the window is
   narrow or DevTools is open)
========================================================= */
html, body { overflow-x: clip; }

header.header{
    box-sizing: border-box;
    max-width: calc(100% - 24px);
}
header.header .logo{ flex: none; }
header.header .logo span{ white-space: nowrap; }
header.header .header-icons{ flex: none; }

@media (max-width: 1100px){
    header.header{ gap: 8px; padding: 0 10px; }
    header.header .navbar{ gap: 2px; }
    header.header .navbar a{ font-size: 15px; padding: 8px 11px; }
    header.header .header-auth a{ font-size: 12px; padding: 6px 10px; }
}

@media (max-width: 900px){
    header.header{
        height: auto;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 6px;
        padding: 8px 12px;
        border-radius: 28px;
    }
    header.header .navbar{
        display: flex;            /* stay visible on phones too */
        order: 3;
        width: 100%;
        margin: 0;
        justify-content: center;
        flex-wrap: wrap;
    }
    header.header .navbar a{ font-size: 14px; padding: 6px 12px; }
}

@media (max-width: 480px){
    header.header .logo span{ font-size: 17px; }
    header.header .header-icons{ gap: 5px; }
    header.header .header-icons button{ width: 36px; height: 36px; font-size: 16px; }
    header.header .header-auth{ height: 36px; padding: 0 3px; }
    header.header .header-auth a{ font-size: 11px; padding: 5px 7px; }
}

/* =========================================================
   FIX: brown strip above the floating header
   The header's top margin collapsed through <body>, pushing the
   body down and exposing the solid html background. flow-root
   keeps the margin inside the body so the gradient covers it.
========================================================= */
body, body.dashboard-page{ display:flow-root; }


/* =========================================================
   ADMIN DASHBOARD: dark text / dark badges on dark background
========================================================= */
body .contact-messages-header h2,
body .quick-section .dashboard-card-header h2,
body .quick-section h2,
body .manage-products-header h2,
body .contact-messages-section h2{ color:#fff6e8 !important; }

body .contact-messages-header p,
body .contact-messages-section > p{ color:#ead9c0; }
body .contact-messages-header .dashboard-label,
body .quick-section .dashboard-label{ color:#e0b684 !important; }

/* count badges (Contact Messages / Registered Customers) */
body .messages-count{
    background:#fff6e8 !important;
    color:#2f1b12 !important;
    border:2px solid #e0b684;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
}


/* =========================================================
   HOME PAGE: hero fills the full screen (only the height changes)
   The hero already starts behind the floating header (-88px), so
   100vh = exactly one full screen from the very top.
========================================================= */
.hero{ min-height:100vh; min-height:100svh; height:auto; }


/* =========================================================
   HOME HERO: bigger, fluid text (scales for phone / laptop / PC)
   clamp(min, fluid, max): min = phones, max = large monitors.
   vh is also used so the text never overflows short laptop screens.
========================================================= */
body .hero .small-title{
    font-size:clamp(14px, 1.1vw + 9px, 24px);
    letter-spacing:.12em;
    margin-bottom:clamp(10px, 1.6vh, 20px);
}
body .hero h1{
    font-size:clamp(46px, min(9.5vw, 17vh), 128px);
    line-height:.98;
    max-width:none;
    margin-bottom:clamp(14px, 2.4vh, 30px);
}
body .hero .hero-description{
    font-size:clamp(17px, 1vw + 11px, 30px);
    line-height:1.6;
    max-width:min(34ch, 100%);
    margin:0 0 clamp(20px, 3.4vh, 40px);
}
body .hero .btn{
    font-size:clamp(14px, .5vw + 11px, 21px);
    letter-spacing:.08em;
    padding:clamp(14px, 1.6vh + 6px, 22px) clamp(26px, 2.6vw + 8px, 48px);
    border-radius:999px;
}
/* keep text comfortably inside the screen on small phones */
@media (max-width:520px){
    body .hero .hero-content{ padding-left:6%; padding-right:6%; }
    body .hero h1{ font-size:clamp(44px, 13vw, 64px); }
}


/* =========================================================
   GALLERY: slightly smaller photos
   (was 420px tall cards in a 1200px wide grid)
========================================================= */
.gallery-grid{
    max-width:1080px;
    grid-auto-rows:320px;
    gap:18px;
}
.gallery-item,
.gallery-large,
.gallery-wide{ height:320px; }

@media (max-width:900px){
    .gallery-grid{ max-width:720px; grid-auto-rows:280px; }
    .gallery-item,.gallery-large,.gallery-wide{ height:280px; }
}
@media (max-width:600px){
    .gallery-grid{ max-width:420px; grid-auto-rows:280px; }
    .gallery-item,.gallery-large,.gallery-wide{ height:280px; }
}
/* =========================================================
   BIGGER HEADER TEXT + HEADER NEVER GETS CUT OFF
   (same fonts; wraps to 2 rows when the screen is narrow)
========================================================= */
header.header{ height:72px; box-sizing:border-box; }
header.header .logo, header.header .logo span{ font-size:26px; }
header.header .brand-mark{ width:48px; height:48px; }
header.header .navbar a{ font-size:20px; font-weight:600; padding:10px 20px; white-space:nowrap; }
header.header .header-icons{ flex:none; align-items:center; }
header.header .header-auth{ height:46px; flex:none; }
header.header .header-auth a{ font-size:16px; padding:8px 16px; }
header.header .header-icons button{ width:46px; height:46px; font-size:21px; flex:none; }

/* not enough room for one row -> logo + icons on top, menu below */
@media (max-width:1280px){
    header.header{
        height:auto; flex-wrap:wrap; justify-content:space-between;
        row-gap:8px; padding:10px 16px; border-radius:36px;
    }
    header.header .navbar{
        order:3; width:100%; margin:0; gap:6px;
        justify-content:center; flex-wrap:wrap;
    }
    header.header .navbar a{ font-size:19px; padding:8px 16px; }
    header.header .logo, header.header .logo span{ font-size:24px; }
    header.header .header-icons{ margin-left:auto; }
}
@media (max-width:640px){
    header.header{ padding:8px 12px; border-radius:28px; }
    header.header .logo, header.header .logo span{ font-size:21px; }
    header.header .brand-mark{ width:40px; height:40px; }
    header.header .navbar a{ font-size:17px; padding:7px 12px; }
    header.header .header-icons{ gap:6px; flex-wrap:wrap; justify-content:flex-end; }
    header.header .header-auth{ height:40px; }
    header.header .header-auth a{ font-size:13px; padding:6px 10px; }
    header.header .header-icons button{ width:40px; height:40px; font-size:18px; }
}
@media (max-width:420px){
    header.header .logo, header.header .logo span{ font-size:18px; }
    header.header .navbar a{ font-size:15px; padding:6px 9px; }
    header.header .header-auth a{ font-size:12px; padding:5px 8px; }
    header.header .header-icons button{ width:36px; height:36px; font-size:16px; }
}
/* ===== SHOP PRODUCT CARDS (smaller + full cup visible) ===== */
.shop-grid{grid-template-columns:repeat(3,minmax(0,265px));justify-content:space-between;gap:22px}
.shop-grid .product{padding:10px}
.shop-grid .product-image{height:auto;aspect-ratio:1/1;background:#f3e9dc}
.shop-grid .product-image img{width:100%;height:100%;object-fit:contain;display:block}
.shop-grid .product:hover .product-image img{transform:scale(1.03)}
.shop-grid .product-info{padding:14px 6px 6px}
.shop-grid .product-info h3{font-size:19px;margin-bottom:5px}
.shop-grid .product-info p{font-size:12.5px;line-height:1.5;margin-bottom:12px}
.shop-grid .tag{top:10px;left:10px;padding:5px 10px;font-size:10px}
.shop-grid .add-cart{padding:8px 14px;font-size:12px}
/* FIX: product image sa shop (4:3, buong picture) */
.shop-grid .product-image {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    background: #f3e9dc;
}
.shop-grid .product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* FIX: product image sa home (4:3, buong picture) */
.product-card .product-img {
    aspect-ratio: 4 / 3 !important;
}
.product-card .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================
   MOBILE HEADER FIX
   1) nav stays on ONE line (Home Shop About Gallery Contact)
   2) hero starts at the very top, so no brown strip shows
      above the header (--header-offset is set in script.js)
========================================================= */
@media (max-width:1280px){
    .hero,.shop-hero,.about-hero,.contact-hero,.gallery-hero{
        margin-top:calc(-1 * var(--header-offset, 150px)) !important;
    }
}

@media (max-width:640px){
    header.header .navbar{
        flex-wrap:nowrap;
        justify-content:space-between;
        gap:0;
    }
    header.header .navbar a{
        white-space:nowrap;
        font-size:clamp(12px, 3.6vw, 15px);
        padding:6px clamp(5px, 2vw, 10px);
    }
}

/* give the hero text breathing room below the header on phones */
@media (max-width:820px){
    .shop-hero,.about-hero,.contact-hero,.gallery-hero{
        padding-top:calc(var(--header-offset, 150px) + 28px) !important;
    }
}


/* =========================================================
   FOOTER - slightly bigger
========================================================= */
footer{margin-top:48px;padding:48px 6% 20px}
.footer-content{gap:30px}
.footer-brand h3{font-size:27px}
.footer-brand .brand-mark{width:54px;height:54px}
.footer-content h4{font-size:19px;margin-bottom:14px}
footer a,footer p{font-size:16px}
.footer-content a{margin-bottom:10px}
.footer-content input{font-size:15px;padding:13px 16px}
.footer-bottom{margin-top:30px;padding-top:18px}
.footer-bottom p{font-size:14px}

@media (max-width:820px){
    footer{padding:36px 6% 16px}
    .footer-brand h3{font-size:23px}
    .footer-brand .brand-mark{width:46px;height:46px}
    .footer-content h4{font-size:17px}
    footer a,footer p{font-size:15px}
    .footer-bottom p{font-size:13px}
}