/*
Theme Name: Solidyn Store
Theme URI: https://example.com
Author: Custom
Author URI: https://example.com
Description: A clean, fast-loading storefront theme for small shops that take manual payment (UPI / bank transfer / QR). No page builders, no bundled sliders — just a considered layout that pairs with the Mini Shop plugin.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: solidyn-store
*/

/* -----------------------------------------------------------
   Design tokens
----------------------------------------------------------- */
:root{
    --ss-bg:#FAFAF9;
    --ss-surface:#FFFFFF;
    --ss-ink:#1B1F23;
    --ss-sub:#5B6169;
    --ss-line:#E5E1D8;
    --ss-action:#153B4F;
    --ss-action-dark:#0F2C3B;
    --ss-gold:#B8863F;
    --ss-max:1080px;
    --ss-serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
    --ss-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

    /* Header: dark blue background, white text (replaces previous red) */
    --ss-header-bg:#0B2545;
    --ss-header-bg-dark:#081A33;
    --ss-header-ink:#FFFFFF;

    /* Footer: black background, white text */
    --ss-footer-bg:#000000;
    --ss-footer-ink:#FFFFFF;

    /* Product/meter image tiles: plain white, not pale yellow */
    --ss-product-bg:#FFFFFF;
}

/* -----------------------------------------------------------
   Reset / base
----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
    margin:0;
    background:var(--ss-bg);
    color:var(--ss-ink);
    font-family:var(--ss-sans);
    font-size:16px;
    line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ss-action);text-decoration:none;}
a:hover{color:var(--ss-action-dark);text-decoration:underline;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
    outline:2px solid var(--ss-gold);outline-offset:2px;
}
h1,h2,h3,h4{
    font-family:var(--ss-serif);
    font-weight:600;
    line-height:1.25;
    margin:0 0 .5em;
    color:var(--ss-ink);
}
h1{font-size:clamp(28px,4vw,40px);}
h2{font-size:26px;}
h3{font-size:20px;}
p{margin:0 0 1em;max-width:70ch;}
ul,ol{padding-left:1.2em;}

/* -----------------------------------------------------------
   Layout
----------------------------------------------------------- */
.ss-container{max-width:var(--ss-max);margin:0 auto;padding:0 24px;}
.ss-skip-link{
    position:absolute;left:-999px;top:auto;
    background:var(--ss-action);color:#fff;padding:10px 16px;border-radius:3px;z-index:1000;
}
.ss-skip-link:focus{left:16px;top:16px;}

/* -----------------------------------------------------------
   Header
----------------------------------------------------------- */
.ss-header{
    background:var(--ss-header-bg);
    border-bottom:1px solid var(--ss-header-bg-dark);
}
.ss-header-inner{
    display:flex;align-items:center;justify-content:space-between;
    gap:20px;padding:20px 24px;max-width:var(--ss-max);margin:0 auto;
}
.ss-brand{display:flex;align-items:center;gap:12px;}
.ss-brand img{max-height:44px;width:auto;}
.ss-brand-name{
    font-family:var(--ss-serif);font-size:22px;font-weight:600;
    color:var(--ss-header-ink);letter-spacing:.2px;
}
.ss-brand-name a{color:inherit;text-decoration:none;}
.ss-tagline{font-size:13px;color:var(--ss-header-ink);opacity:.85;margin:2px 0 0;}

.ss-nav{display:flex;}
.ss-nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
.ss-nav a{
    color:var(--ss-header-ink);font-size:14.5px;font-weight:600;text-decoration:none;
    padding:6px 0;border-bottom:2px solid transparent;
}
.ss-nav a:hover{color:var(--ss-header-ink);border-bottom-color:var(--ss-gold);}

.ss-nav-toggle{
    display:none;background:none;border:1px solid var(--ss-header-ink);color:var(--ss-header-ink);border-radius:3px;
    padding:8px 10px;cursor:pointer;font-size:14px;
}
@media (max-width:760px){
    .ss-nav{display:none;width:100%;order:3;}
    .ss-nav.is-open{display:block;}
    .ss-nav ul{flex-direction:column;gap:2px;padding:12px 0 0;border-top:1px solid var(--ss-header-bg-dark);margin-top:12px;}
    .ss-header-inner{flex-wrap:wrap;}
    .ss-nav-toggle{display:block;}
}

/* -----------------------------------------------------------
   Hero (front page)
----------------------------------------------------------- */
.ss-hero{padding:56px 24px 48px;border-bottom:1px solid var(--ss-line);}
.ss-hero-inner{max-width:var(--ss-max);margin:0 auto;}
.ss-hero h1{margin-bottom:.35em;}
.ss-hero p{color:var(--ss-sub);font-size:16.5px;max-width:56ch;}
.ss-hero .ss-trust{
    display:inline-flex;align-items:center;gap:8px;margin-top:14px;
    font-size:13.5px;color:var(--ss-sub);
}
.ss-hero .ss-trust::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ss-gold);}

/* -----------------------------------------------------------
   Content area
----------------------------------------------------------- */
.ss-content{padding:44px 24px 64px;}
.ss-content-inner{max-width:var(--ss-max);margin:0 auto;}

article.ss-post{margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid var(--ss-line);}
article.ss-post:last-child{border-bottom:none;}
.ss-post-meta{font-size:13px;color:var(--ss-sub);margin-bottom:10px;}
.ss-post-thumb{margin-bottom:18px;border-radius:4px;overflow:hidden;border:1px solid var(--ss-line);}

.ss-page-title{margin-bottom:.3em;}

/* buttons (matches Mini Shop plugin) */
.ss-btn, button.ss-btn, input[type="submit"]{
    display:inline-block;background:var(--ss-action);color:#fff;border:none;
    padding:11px 20px;border-radius:3px;font-size:14.5px;font-weight:600;cursor:pointer;
    transition:background-color .15s ease;text-decoration:none;
}
.ss-btn:hover, button.ss-btn:hover, input[type="submit"]:hover{background:var(--ss-action-dark);color:#fff;}

/* forms & comments, kept plain and legible */
input,textarea,select{
    font-family:inherit;font-size:14px;padding:9px 10px;
    border:1px solid #D3CFC5;border-radius:3px;background:#fff;color:var(--ss-ink);
}

/* WordPress core alignment / gallery classes */
.alignwide{max-width:calc(var(--ss-max) + 120px);margin-left:auto;margin-right:auto;}
.alignfull{width:100%;max-width:none;}
.aligncenter{margin-left:auto;margin-right:auto;display:block;}
.alignleft{float:left;margin:0 20px 16px 0;}
.alignright{float:right;margin:0 0 16px 20px;}
.wp-caption{max-width:100%;}
.wp-caption-text{font-size:12.5px;color:var(--ss-sub);margin-top:6px;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}

/* -----------------------------------------------------------
   Shop / product image tiles (Mini Shop plugin output)
   The plugin renders its own markup, so these rules cover the
   common class names it's likely to use. If a tile still shows
   the old pale background after this, send over the Mini Shop
   plugin file so the exact class can be targeted.
----------------------------------------------------------- */
.ss-content-inner .product,
.ss-content-inner .products,
.ss-content-inner .mini-shop,
.ss-content-inner .mini-shop-product,
.ss-content-inner .mini-shop-item,
.ss-content-inner .ms-product,
.ss-content-inner .ms-item,
.ss-content-inner .shop-item,
.ss-content-inner .product-card,
.ss-content-inner .product-thumb,
.ss-content-inner .product-thumbnail,
.ss-content-inner .product-image,
.ss-content-inner .product-image-wrap,
.ss-content-inner .woocommerce-product-gallery,
.ss-content-inner .attachment-woocommerce_thumbnail{
    background:var(--ss-product-bg) !important;
}

/* -----------------------------------------------------------
   Widgets / sidebar (optional, only shown if a widget exists)
----------------------------------------------------------- */
.ss-sidebar{margin-top:40px;}
.ss-sidebar .widget{margin-bottom:28px;}
.ss-sidebar .widget-title{font-family:var(--ss-serif);font-size:16px;margin-bottom:10px;}

/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */
.ss-footer{
    background:var(--ss-footer-bg);
    border-top:1px solid #222;
    padding:28px 24px;margin-top:20px;
}
.ss-footer-inner{
    max-width:var(--ss-max);margin:0 auto;
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.ss-footer-note{font-size:13px;color:var(--ss-footer-ink);opacity:.9;}
.ss-footer a{color:var(--ss-footer-ink);}
.ss-footer a:hover{color:var(--ss-gold);}

/* Footer text grid: 3 columns x 4 rows (12 cells) */
.ss-footer-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid #222;
}
.ss-footer-grid .ss-footer-cell{
    color:var(--ss-footer-ink);
    font-size:13.5px;
    text-align:center;
}
.ss-footer-grid .ss-footer-cell p{margin:0;}
@media (max-width:640px){
    .ss-footer-grid{grid-template-columns:1fr;}
}

/* -----------------------------------------------------------
   4x3 info grid (12 editable text cells) — use on any page/template
   Markup lives in page-templates/template-shop.php; edit the text there.
----------------------------------------------------------- */
.ss-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:40px 0;
}
.ss-info-grid .ss-info-cell{
    background:var(--ss-surface);
    border:1px solid var(--ss-line);
    border-radius:4px;
    padding:18px 16px;
    font-size:14.5px;
    color:var(--ss-ink);
    text-align:center;
}
@media (max-width:640px){
    .ss-info-grid{grid-template-columns:1fr;}
}

/* -----------------------------------------------------------
   Accessibility: reduced motion
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
    *{transition:none !important;}
}