/* Potencija — LIGHT pharmacy design system (medical red accent, no blue/green). Prefix: pt- */
:root{
  --pt-bg:#ffffff;
  --pt-soft:#f6f7f9;        /* light section */
  --pt-card:#ffffff;
  --pt-line:#e7e9ee;
  --pt-text:#1f2630;
  --pt-muted:#6b7280;
  --pt-accent:#d6283b;       /* medical red (pharmacy cross) */
  --pt-accent-dark:#b01e2f;
  --pt-ok:#1f9d57;           /* used ONLY as tiny check glyph, not as theme color */
  --pt-radius:14px;
  --pt-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06);
  --pt-font:'Mulish',system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body.potencija{margin:0;background:var(--pt-bg);color:var(--pt-text);font-family:var(--pt-font);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
.pt-wrap{max-width:1140px;margin:0 auto;padding:0 20px}
a{color:var(--pt-accent);text-decoration:none}
a:hover{color:var(--pt-accent-dark)}
h1,h2,h3,h4{color:#141a22;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin:.4em 0 .5em}
img{max-width:100%;height:auto}

/* Header — clean white, sticky, subtle shadow */
.pt-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--pt-line);box-shadow:0 1px 0 rgba(16,24,40,.03)}
.pt-header__row{display:flex;align-items:center;gap:24px;height:74px}
.pt-logo img{max-height:46px;width:auto}
.pt-nav{display:flex;gap:24px;margin-left:auto}
.pt-nav a{color:var(--pt-text);font-weight:600;font-size:15px}
.pt-nav a:hover{color:var(--pt-accent)}
.pt-burger{display:none;margin-left:auto;background:none;border:0;color:var(--pt-text);font-size:26px;cursor:pointer}

/* Trust ribbon (replaces dark hero) — pharmacy reassurance bar */
.pt-hero{background:var(--pt-soft);border-bottom:1px solid var(--pt-line)}
.pt-hero__in{padding:14px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.pt-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--pt-line);color:var(--pt-text);padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;box-shadow:var(--pt-shadow)}
.pt-pill b{color:var(--pt-accent)}

/* Buttons */
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pt-accent);color:#fff;font-weight:700;padding:14px 28px;border-radius:10px;border:0;cursor:pointer;font-size:16px;box-shadow:0 6px 16px rgba(214,40,59,.25);transition:background .15s,transform .1s}
.pt-btn:hover{background:var(--pt-accent-dark);color:#fff;transform:translateY(-1px)}
.pt-btn--ghost{background:#fff;border:1px solid var(--pt-line);color:var(--pt-text);box-shadow:none}

/* Cards / grid */
.pt-grid{display:grid;gap:18px}
@media(min-width:760px){.pt-grid--3{grid-template-columns:repeat(3,1fr)}.pt-grid--2{grid-template-columns:repeat(2,1fr)}}
.pt-card{background:var(--pt-card);border:1px solid var(--pt-line);border-radius:var(--pt-radius);overflow:hidden;box-shadow:var(--pt-shadow);transition:box-shadow .15s,transform .15s}
.pt-card:hover{box-shadow:0 8px 28px rgba(16,24,40,.10);transform:translateY(-2px)}
.pt-card__body{padding:18px}
.pt-price{font-size:22px;font-weight:800;color:var(--pt-accent)}

/* Product detail */
.pt-product{display:grid;gap:28px;padding:30px 0}
@media(min-width:900px){.pt-product{grid-template-columns:1.5fr .9fr;align-items:start}}
.pt-gallery{background:#fff;border:1px solid var(--pt-line);border-radius:var(--pt-radius);padding:18px;text-align:center;box-shadow:var(--pt-shadow)}
.pt-gallery img{border-radius:10px}
.pt-buy{position:sticky;top:96px;background:#fff;border:1px solid var(--pt-line);border-radius:var(--pt-radius);padding:22px;box-shadow:var(--pt-shadow)}
.pt-buy .pt-price{font-size:30px}
.pt-rating{color:#e8a200;font-weight:700;margin:6px 0}
/* answer-first = clinical info box */
.pt-answer{background:#fff5f6;border:1px solid #f6d2d6;border-left:4px solid var(--pt-accent);border-radius:10px;padding:14px 16px;margin:16px 0;color:#3a3f47}
.pt-section{border-top:1px solid var(--pt-line);padding:22px 0}
.pt-section:first-child{border-top:0}
/* accordion */
.pt-acc{border:1px solid var(--pt-line);border-radius:10px;margin-bottom:10px;background:#fff;box-shadow:var(--pt-shadow)}
.pt-acc summary{cursor:pointer;padding:14px 16px;font-weight:700;color:#141a22;list-style:none;display:flex;justify-content:space-between;align-items:center}
.pt-acc summary::-webkit-details-marker{display:none}
.pt-acc summary::after{content:"+";color:var(--pt-accent);font-size:20px}
.pt-acc[open] summary::after{content:"\2013"}
.pt-acc[open] summary{border-bottom:1px solid var(--pt-line)}
.pt-acc__body{padding:14px 16px;color:#4b5563}
/* trust list */
.pt-trust{display:flex;gap:18px;flex-wrap:wrap;color:var(--pt-muted);font-size:14px;margin-top:12px}
.pt-trust span{display:inline-flex;align-items:center;gap:6px}
.pt-trust span::before{content:"\2713";color:var(--pt-ok);font-weight:800}

/* Footer — light */
.pt-footer{background:var(--pt-soft);border-top:1px solid var(--pt-line);margin-top:44px;color:var(--pt-muted)}
.pt-footer__in{padding:34px 0;display:grid;gap:24px}
@media(min-width:760px){.pt-footer__in{grid-template-columns:repeat(3,1fr)}}
.pt-footer h4{color:#141a22;font-size:15px;margin:0 0 10px}
.pt-footer a{color:var(--pt-muted);display:block;padding:3px 0}
.pt-footer a:hover{color:var(--pt-accent)}
.pt-foot-bottom{border-top:1px solid var(--pt-line);text-align:center;padding:16px;font-size:13px;color:var(--pt-muted)}
.pt-disclaimer{max-width:780px;margin:8px auto 0;font-size:12px;color:#9aa1ab}

/* Sticky mobile CTA */
.pt-sticky{display:none}
@media(max-width:899px){
  .pt-nav{display:none}.pt-burger{display:block}
  .pt-nav.is-open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#fff;padding:14px 20px;border-bottom:1px solid var(--pt-line);box-shadow:var(--pt-shadow)}
  .pt-buy{position:static}
  .pt-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--pt-line);padding:10px 16px;align-items:center;gap:12px;box-shadow:0 -2px 16px rgba(16,24,40,.10)}
  .pt-sticky .pt-btn{flex:1;padding:13px}
  body.potencija{padding-bottom:74px}
}

/* graceful styling for understrap base classes (home/listing/default templates) */
body.potencija .body,body.potencija .wrapper,body.potencija #content{max-width:1140px;margin:0 auto;padding:24px 20px}
body.potencija .btn,body.potencija .btn-primary,body.potencija .btn-warning,body.potencija button[type=submit],body.potencija .wpcf7 input[type=submit]{background:var(--pt-accent)!important;background-color:var(--pt-accent)!important;color:#fff!important;border:0!important;border-color:var(--pt-accent)!important;border-radius:10px!important;padding:12px 24px!important;font-weight:700!important}
body.potencija .btn:hover,body.potencija .btn-primary:hover,body.potencija .btn-warning:hover{background:var(--pt-accent-dark)!important;background-color:var(--pt-accent-dark)!important;color:#fff!important}
body.potencija .wp-block-separator,body.potencija hr{border:0;border-top:1px solid var(--pt-line)}
body.potencija img{border-radius:10px}
body.potencija input[type=text],body.potencija input[type=email],body.potencija input[type=tel],body.potencija textarea,body.potencija select{border:1px solid var(--pt-line);border-radius:8px;padding:10px 12px;width:100%;max-width:520px}

/* ── Legacy understrap layout compat (home / listing / sidebar) ──────────── */
/* Minimal Bootstrap grid so old col-md-* templates lay out correctly */
body.potencija .row{display:flex;flex-wrap:wrap;margin:0 -12px}
body.potencija [class*="col-md-"],body.potencija [class*="col-sm-"]{padding:0 12px;width:100%}
@media(min-width:768px){
  body.potencija .col-md-12{flex:0 0 100%;max-width:100%}
  body.potencija .col-md-9{flex:0 0 75%;max-width:75%}
  body.potencija .col-md-8{flex:0 0 66.667%;max-width:66.667%}
  body.potencija .col-md-6{flex:0 0 50%;max-width:50%}
  body.potencija .col-md-4{flex:0 0 33.333%;max-width:33.333%}
  body.potencija .col-md-3{flex:0 0 25%;max-width:25%}
}
body.potencija .clear{clear:both}
body.potencija .pull-right{margin-left:auto}

/* Never upscale/stretch images → kills the blurry product photo */
body.potencija .body img,body.potencija .pt-gallery img,body.potencija .product img{width:auto;max-width:100%;height:auto}
body.potencija .pt-gallery img{margin:0 auto;display:block}

/* Contain EVERY inline SVG (cart/basket icons render giant without their
   original CSS sizing). Potencija header/footer use an <img> logo, no inline
   SVG, so a global cap is safe and definitive. */
body.potencija svg{width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;fill:var(--pt-accent)}
body.potencija .side_products .product>a:last-child svg{width:22px!important;height:22px!important}

/* Sidebar product list (partials/right.php + right_small.php) → clean cards */
body.potencija .right .list_products>strong,body.potencija .right>.box>strong{display:block;font-size:16px;color:#141a22;margin-bottom:10px}
body.potencija .side_products{display:grid;gap:10px}
body.potencija .side_products .product{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:1px solid var(--pt-line);border-radius:12px;box-shadow:var(--pt-shadow)}
body.potencija .side_products .product>a:first-child{flex:0 0 auto}
body.potencija .side_products .product>a:first-child img{width:56px;height:56px;object-fit:contain;border-radius:8px}
body.potencija .side_products .product .text{flex:1;min-width:0}
body.potencija .side_products .product .name a{color:var(--pt-text);font-weight:700;font-size:15px}
body.potencija .side_products .product .name a:hover{color:var(--pt-accent)}
body.potencija .side_products .product .price{color:var(--pt-accent);font-weight:700;font-size:13px;margin-top:2px}
body.potencija .side_products .product>a:last-child{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;border-radius:10px;background:rgba(214,40,59,.08)}
body.potencija .side_products .product>a:last-child:hover{background:rgba(214,40,59,.16)}

/* Headings/spacing for content sections on legacy pages */
body.potencija .body h2{font-size:26px;margin:18px 0 10px}
body.potencija .body h3{font-size:20px;margin:16px 0 8px}
body.potencija .body ul{padding-left:20px}
body.potencija .body li{margin:4px 0}

/* ── Contact Form 7 order form → clean stacked fields ────────────────────── */
body.potencija .wpcf7 label{display:block;margin:0 0 14px;font-weight:600;color:var(--pt-text);font-size:15px}
body.potencija .wpcf7-form-control-wrap{display:block}
body.potencija .wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),
body.potencija .wpcf7 select,
body.potencija .wpcf7 textarea{display:block;width:100%;max-width:100%;margin-top:6px;border:1px solid var(--pt-line);border-radius:8px;padding:11px 12px;font-size:15px;font-weight:400;background:#fff;color:var(--pt-text);font-family:inherit;line-height:1.4}
body.potencija .wpcf7 select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:36px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
body.potencija .wpcf7 textarea{min-height:96px;resize:vertical}
body.potencija .wpcf7 input:focus,body.potencija .wpcf7 select:focus,body.potencija .wpcf7 textarea:focus{outline:0;border-color:var(--pt-accent);box-shadow:0 0 0 3px rgba(214,40,59,.12)}
body.potencija .wpcf7 .wpcf7-list-item{margin:0 16px 0 0}
body.potencija .wpcf7-response-output{border-radius:8px;margin:14px 0 0;padding:10px 14px}

/* ── Related products (partials/products_small_random.php) ───────────────── */
body.potencija .pt-section .row .col-md-6{margin-bottom:18px}
body.potencija .pt-section .col-md-6>.row{align-items:flex-start;background:#fff;border:1px solid var(--pt-line);border-radius:12px;box-shadow:var(--pt-shadow);padding:14px;margin:0}
body.potencija .pt-section .col-md-6 img{width:100%;max-width:90px;border-radius:8px}
body.potencija .pt-section .col-md-6 h3{margin:0 0 4px}
body.potencija .pt-section .col-md-6 h3 a{color:var(--pt-accent)}
body.potencija .pt-section .col-md-6 .btn{margin-top:10px!important;padding:9px 16px!important}
