/* Dr.Med storefront additions on top of the design stylesheets (do not edit the design files).
   Real images fill the design's placeholder boxes; empty boxes keep the design look. */

.product .ph .img img,
.collection .visual > img,
.story-img > img,
.best-card .img img,
.modal-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-img > img,.collection .visual > img{z-index:1}
.citem .thumb{overflow:hidden}
.citem .thumb img{width:100%;height:100%;object-fit:cover}
.sres .th img{width:100%;height:100%;object-fit:cover}
.ai-card .th img{width:100%;height:100%;object-fit:cover}

.product-meta h4 a,.best-card a.cover{color:inherit}
.best-card a.cover{position:absolute;inset:0;z-index:2}
.product .quick button[disabled]{opacity:.45;cursor:not-allowed}
.sel-opt[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.news-form button[disabled]{opacity:.6;cursor:wait}

/* listing cards: the name links to the product page */
.pcard h3 a{color:inherit}
.pcard h3 a:hover{color:var(--c-gold)}
.aip-ctx .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* search rows: the design's spans stack as intended (category, name, description) */
.rows .row .cat,.rows .row .nm,.rows .row .d{display:block}
.rows .row .shot .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* cart / checkout: the sticky bar button is a link here */
.stickypay a.go{display:flex;align-items:center;justify-content:center;text-align:center}

/* account, tracking and returns: real images in the design's placeholder boxes */
.oitem .shot .ph img,.fcard .shot .ph img,.sub .shot .ph img,.it .shot .ph img,.pl .shot .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.fcard .shot a{position:absolute;inset:0;z-index:3}
.fcard .x{z-index:5}
/* the design's page classes also match these elements: keep them as intended */
.phd .sub{border:0}
.steps .st.done,.steps .conn.done{padding:0;text-align:left}
.field span.err{padding:0;border:0;margin:0;text-align:left;animation:none;max-width:none}
/* inline forms of the account page (address, frequency, account deletion) */
.inline-form{border-top:.5px solid var(--c-line);padding:18px 20px 20px;background:var(--c-cream)}
.inline-form[hidden]{display:none}
.inline-form .acts{display:flex;gap:8px;flex-wrap:wrap}
.chips button{font-size:9px;letter-spacing:.14em;text-transform:uppercase;border:.5px solid var(--c-line);padding:5px 9px;color:var(--c-ink-2);background:transparent;cursor:pointer}
.chips button.on{border-color:var(--c-gold);color:var(--c-ink)}
.sbtn[disabled],.btn[disabled]{opacity:.6;cursor:wait}
.side .out form{margin:0}

/* sign-in page: the design's social buttons are links here */
.social .social-btn{display:flex;align-items:center;justify-content:center;gap:11px;background:transparent;border:.5px solid var(--c-line);
  min-height:48px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-2);transition:.26s}
.social .social-btn:hover{border-color:var(--c-gold);color:var(--c-ink);background:var(--c-cream)}
.social .social-btn svg{width:16px;height:16px}

/* product page: review form in the "Deneyiminizi paylaşın" card */
.sidecard .field label{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-mute);display:block;margin-bottom:6px}
.sidecard .field input,.sidecard .field select,.sidecard .field textarea{width:100%;background:var(--c-paper);border:.5px solid var(--c-line);outline:0;
  border-radius:0;appearance:none;font-family:var(--serif);font-size:15px;color:var(--c-ink);padding:10px 12px;transition:border-color .28s}
.sidecard .field input:focus,.sidecard .field select:focus,.sidecard .field textarea:focus{border-color:var(--c-gold)}
.sidecard .field .err{display:none;font-size:10.5px;color:#b4503f;margin-top:5px}
.sidecard .field.bad .err{display:block}
.sidecard .field.bad input,.sidecard .field.bad textarea,.sidecard .field.bad .rate{border-color:#b4503f}
.rate{display:flex;gap:4px}
.rate button{background:transparent;border:0;cursor:pointer;font-size:22px;line-height:1;color:var(--c-line);padding:0 2px;transition:color .2s}
.rate button.on{color:var(--c-gold)}

/* 404 and journal: real images inside the design's placeholder boxes */
.pk .shot .ph img,.feat .ph img,.grid .card .ph img,.rel-grid .ph img,.cover .ph img,.promo .ph img,.author .pic img,.mcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.esugg a{font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:.5px solid var(--c-line);padding:8px 12px;color:var(--c-ink-2);background:transparent;transition:.25s}
.esugg a:hover{border-color:var(--c-gold);color:var(--c-ink);background:var(--c-cream)}

/* lookbook: real images and linked set pieces */
.look .vis .ph img,.mosaic .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pieces a.piece{color:inherit}
.pieces a.piece:hover .nm{color:var(--c-gold)}

/* dealer panel / application: links and labels in place of the design's buttons */
.res a.rcard{color:inherit;text-align:left}
label.drop{cursor:pointer;display:block}
.prow .shot .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.ledger .num.out:empty,.ledger .num.in:empty{color:transparent}

/* checkout: "Puanımı kullan" in the summary box */
.sbox .points-toggle{margin:4px 20px 0;padding:12px 0;border-top:.5px solid var(--c-line)}

/* checkout: Europe (Stripe) payment marks */
.altpay .paymarks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.altpay .paymarks span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-mute);border:.5px solid var(--c-line);padding:6px 10px}

/* category cards: the heart sits in the action column (favori · önizle · asistan); the older
   stand-alone ".pcard .fav" rule of the design pulled it out of the column onto the other buttons */
.pcard .pacts .fav{position:relative;inset:auto;width:34px;height:34px}
@media (max-width:720px){.pcard .pacts .fav{width:36px;height:36px}}

/* homepage hero: on media-left slides the tabs and arrows move to the copy half (right),
   otherwise they cover the picture and its caption tag */
@media (min-width:721px){
  .hero.is-rev .hero-controls{left:50%;gap:16px}
  .hero.is-rev .dot-btn{white-space:nowrap}
}
@media (min-width:721px) and (max-width:1500px){
  .hero.is-rev .dots{gap:12px}
  .hero.is-rev .dot-btn{gap:8px}
  .hero.is-rev .dot-btn .bar{width:18px}
  .hero.is-rev .dot-btn.active .bar{width:34px}
}

/* uploaded logo (Site ayarları → Marka) in place of the DR·MED text mark: sized by the mark's font size */
.brand-logo{display:inline-block;height:1.1em;width:auto;max-width:100%;vertical-align:middle}
.brand:has(.brand-logo),.foot-brand:has(.brand-logo),.mk:has(.brand-logo){letter-spacing:0;line-height:1}

/* category page: sub category links at the top of the filter panel */
.fopt.fcat .t{flex:1}
.fopt.fcat.on{color:var(--c-gold)}

/* footer: studio credit next to the copyright line */
.foot-credit{display:inline-flex;align-items:center;gap:8px;margin-left:18px;vertical-align:middle;opacity:.65;transition:opacity .2s}
.foot-credit:hover{opacity:1}
.foot-credit img{display:block;height:14px;width:auto}
@media (max-width:760px){.foot-credit{display:flex;margin:10px 0 0}}

/* header cart badge: item count in a red dot on every page (the homepage keeps its own placement) */
.cart-count{background:#c8102e;color:#fff}
.nav .icon-btn:has([data-cart-count]){position:relative}
[data-cart-count]{position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  font:600 10px/17px var(--sans,system-ui,sans-serif);letter-spacing:0;text-align:center;pointer-events:none}
[data-cart-count][hidden]{display:none}

/* product gallery with a single image: no thumbnail column, the image takes the full width */
.gal.single{grid-template-columns:minmax(0,1fr)}

/* product key facts: one shared label column so every value starts on the same line */
.keyfacts{grid-template-columns:max-content minmax(0,1fr);column-gap:28px}
.keyfacts div{grid-column:1/-1;grid-template-columns:subgrid;column-gap:28px;align-items:baseline}

/* header favorites: heart shown once something is saved, with the count in a dark dot */
.icon-btn.fav-link[hidden]{display:none}
.nav .icon-btn.fav-link{position:relative}
.fav-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--c-ink);color:var(--c-paper);font:600 9px/16px var(--sans,system-ui,sans-serif);letter-spacing:0;text-align:center;pointer-events:none}
.nav-icons:has([data-cart-count]) .fav-count{top:2px;right:0;min-width:17px;height:17px;font-size:10px;line-height:17px}

/* closed cart drawer: its shadow must not show as a grey strip on the right edge of the page */
.cart:not(.on){box-shadow:none}

/* quick view: the close button stays above the product image */
.modal-close{z-index:3}
/* phones: a near-square photo area so the product is not cut in half */
@media (max-width:720px){
  .modal-img{aspect-ratio:1/1;max-height:46vh}
}

/* phones: the product gallery is swiped; the dots get a larger tap area */
@media (max-width:720px){
  .gal-main{touch-action:pan-y}
  .gal-dots button{position:relative}
  .gal-dots button::after{content:"";position:absolute;inset:-10px -5px}
}

/* optional wide image under the journal and corporate page headers (set in the admin) */
.sf-cover{max-width:var(--maxw,1180px);margin:clamp(24px,3vw,44px) auto 0;padding:0 var(--gutter)}
.sf-cover img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;background:var(--c-cream)}
@media (max-width:720px){.sf-cover img{aspect-ratio:3/2}}