:root { --pp-paper: var(--theme-paper); --pp-ink: #22231f; --pp-muted: #606353; --pp-olive: var(--accent); --pp-line: var(--theme-line); --pp-gutter: clamp(22px, 4.2vw, 76px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--pp-paper); color: var(--pp-ink); font: 400 14px/1.7 var(--font-display-sans); -webkit-font-smoothing: antialiased; }
body.pp-dialog-open { overflow: hidden; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: inherit; text-decoration: none; }
button, input, a, [tabindex] { outline-offset: 5px; }
:focus-visible { outline: 2px solid var(--pp-olive); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 400; line-height: 1.15; }
picture, img { display: block; width: 100%; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pp-wrap { width: calc(100% - max(var(--pp-gutter), env(safe-area-inset-left, 0px)) - max(var(--pp-gutter), env(safe-area-inset-right, 0px))); max-width: 1392px; margin-inline: auto; }
.pp-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; height: 72px; padding-inline: max(var(--pp-gutter), env(safe-area-inset-left, 0px)) max(var(--pp-gutter), env(safe-area-inset-right, 0px)); border-bottom: 1px solid rgb(var(--theme-line-rgb) / .5); background: var(--pp-paper); }
/* Columns are assigned explicitly rather than left to auto placement: the
   navigation is hidden outright below 370px (auth-links.css) and an
   auto-placed wordmark would slide into the empty first column and stop being
   centred exactly where the header is tightest. */
.pp-wordmark { grid-column: 2; display: inline-flex; align-items: center; min-height: 44px; width: max-content; font-size: 33px; font-weight: 350; line-height: 1.15; letter-spacing: -.8px; }
.pp-header nav { grid-column: 1; justify-self: start; display: flex; gap: 36px; }
.pp-header nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 5px; margin-inline: -5px; font-size: 14px; }
.pp-header nav a[aria-current] { text-decoration: underline; text-underline-offset: 7px; text-decoration-color: var(--accent-rule); }
.pp-icon { width: 44px; height: 44px; flex: 0 0 44px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 29px; line-height: 1; }
.pp-icon:hover { background: var(--accent-soft); }
.pp-header-cart { position: relative; justify-self: end; }
.pp-header-cart svg { width: 26px; height: 28px; }
.pp-header-cart > span { position: absolute; top: 0; right: -2px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 50%; color: white; background: var(--pp-olive); font-size: 10px; }
.pp-skip { position: fixed; top: -90px; left: 20px; z-index: 50; padding: 12px 18px; color: white; background: var(--pp-olive); }
.pp-skip:focus { top: 14px; }
.pp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.pp-loading { min-height: 500px; padding-top: 70px; color: var(--pp-muted); }
.pp-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 76px; font-size: 12px; color: var(--pp-muted); }
.pp-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
.pp-breadcrumb [aria-current] { color: var(--pp-ink); }
.pp-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); align-items: start; gap: clamp(38px, 6vw, 95px); padding-bottom: 78px; }
.pp-gallery { min-width: 0; position: sticky; top: 96px; }
.pp-gallery-main { position: relative; display: block; width: 100%; aspect-ratio: 1.05; padding: 0; overflow: hidden; border-radius: calc(14px * var(--corner-scale, 1)); background: #e6ddcf; cursor: zoom-in; }
.pp-gallery-main picture, .pp-gallery-main img { width: 100%; height: 100%; }
#pp-gallery-picture { display: block; height: 100%; }
.pp-gallery-main img { object-fit: cover; }
.pp-gallery-main:focus-visible { outline-offset: -5px; }
.pp-zoom-hint { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 11px; padding: 9px 15px; min-height: 44px; border-radius: var(--button-radius, 30px); font-size: 12px; background: rgb(var(--theme-card-rgb) / .93); }
.pp-zoom-hint svg { width: 18px; height: 18px; }
.pp-gallery-foot { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-top: 13px; color: var(--pp-muted); font-size: 11px; letter-spacing: .7px; }
.pp-gallery-thumbnails { display: flex; gap: 12px; overflow-x: auto; padding: 5px; margin: 17px -5px 0; }
.pp-gallery-thumbnails button { flex: 0 0 76px; height: 76px; padding: 3px; border: 1px solid transparent; border-radius: calc(9px * var(--corner-scale, 1)); }
.pp-gallery-thumbnails button[aria-pressed='true'] { border-color: var(--pp-olive); }
.pp-gallery-thumbnails img { height: 100%; object-fit: cover; border-radius: calc(6px * var(--corner-scale, 1)); }
.pp-gallery-controls { display: flex; gap: 7px; }
.pp-gallery-controls button { border: 1px solid var(--pp-line); }
.pp-copy { padding-top: 12px; min-width: 0; }
.pp-eyebrow { font-size: 10px; line-height: 1.6; letter-spacing: 2px; font-weight: 600; color: var(--pp-muted); margin-bottom: 15px; }
.pp-product-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pp-product-heading h1 { font-size: clamp(45px, 4.5vw, 68px); letter-spacing: -2.6px; margin-bottom: 9px; overflow-wrap: anywhere; }
.pp-product-type { font-size: 16px; color: var(--pp-muted); margin-bottom: 0; }
.pp-product-heading > div:first-child, .pp-related-card > div, .pp-cart-item > div { min-width: 0; }
.pp-product-type, .pp-description, .pp-related-card h3, .pp-related-card p, .pp-cart-item h3, .pp-cart-item p { overflow-wrap: anywhere; }
.pp-price strong, .pp-mobile-product > span { white-space: nowrap; }
.pp-product-actions { display: flex; gap: 5px; padding-top: 7px; }
.pp-product-actions button { border: 1px solid var(--pp-line); }
.pp-product-heading.has-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; }
.pp-product-heading .pp-compare { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; max-width: 100%; padding: 9px 12px; border: 1px solid var(--pp-line); border-radius: calc(7px * var(--corner-scale, 1)); color: var(--pp-olive); font-size: 12px; text-align: left; }
.pp-compare svg { flex: 0 0 18px; width: 18px; height: 18px; }
.pp-compare[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--pp-olive); }
#pp-favorite[aria-pressed='true'] { color: white; background: var(--pp-olive); border-color: var(--pp-olive); }
#pp-favorite[aria-pressed='true'] svg { fill: currentColor; }
.pp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 13px; margin: 23px 0; }
.pp-price strong { font-size: 25px; font-weight: 450; letter-spacing: -.6px; }
.pp-price span { font-size: 12px; color: var(--pp-muted); }
.pp-description { margin-bottom: 25px; color: var(--pp-muted); font-size: 14px; line-height: 1.85; }
.pp-specs { margin: 0 0 25px; font-size: 14px; }
.pp-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--pp-line); }
.pp-specs dt { color: var(--pp-muted); flex: 0 0 auto; }
.pp-specs dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.pp-purchase { padding-top: 2px; }
.pp-view-cart-slot { min-height: 44px; }
.pp-quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.pp-quantity { display: flex; align-items: center; border: 1px solid var(--pp-line); border-radius: var(--button-radius, 30px); overflow: hidden; }
.pp-quantity button { flex: 0 0 44px; width: 44px; height: 44px; font-size: 22px; }
.pp-quantity input { width: 44px; min-width: 0; min-height: 44px; border: 0; padding: 4px 0; background: transparent; text-align: center; appearance: textfield; font-size: 16px; }
.pp-quantity input::-webkit-inner-spin-button { appearance: none; }
.pp-quantity :focus-visible { outline-offset: -4px; }
.pp-button { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 52px; width: 100%; padding: 13px 25px; border-radius: var(--button-radius, 30px); color: #fffef8; background: var(--pp-olive); font-weight: 500; font-size: 14px; transition: background 180ms ease; }
.pp-button:hover:not(:disabled):not([aria-disabled]) { background: var(--accent-strong); }
.pp-button > span { font-size: 23px; line-height: 1; }
.pp-button:disabled, .pp-button[aria-disabled='true'] { background: var(--accent-tint); color: var(--accent-strong); opacity: 1; }
.pp-purchase-feedback { min-height: 26px; margin: 12px 0 0; color: var(--accent-strong); font-size: 13px; }
.pp-text-button { min-height: 44px; padding: 8px 0; text-decoration: underline; text-underline-offset: 5px; color: var(--accent-strong); font-size: 13px; }
.pp-share-fallback { margin: 18px 0; padding: 15px; border-radius: calc(10px * var(--corner-scale, 1)); border: 1px solid var(--pp-line); }
.pp-share-fallback label { display: block; font-size: 13px; margin-bottom: 6px; }
.pp-share-fallback input { width: 100%; min-height: 44px; padding: 8px 10px; background: white; border: 1px solid var(--pp-line); border-radius: calc(5px * var(--corner-scale, 1)); font-size: 16px; }
.pp-share-status { font-size: 12px; color: var(--pp-muted); margin: 8px 0 0; }
.pp-related { border-top: 1px solid var(--pp-line); padding: 51px 0 65px; }
.pp-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.pp-section-heading h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -1.2px; }
.pp-section-heading a { flex: 0 0 auto; }
.pp-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pp-related-card { display: block; min-width: 0; overflow: hidden; border: 1px solid var(--pp-line); border-radius: calc(11px * var(--corner-scale, 1)); }
.pp-related-card picture { aspect-ratio: 1.4; overflow: hidden; background: #e6ddcf; }
.pp-related-card img { height: 100%; object-fit: cover; transition: transform 400ms ease; }
.pp-related-card:hover img { transform: scale(1.025); }
.pp-related-card > div { padding: 14px 18px 18px; }
.pp-related-card h3 { margin-bottom: 7px; font-size: 23px; letter-spacing: -.5px; }
.pp-related-card p { margin-bottom: 8px; color: var(--pp-muted); font-size: 13px; }
.pp-related-card strong { font-weight: 500; font-size: 14px; }

/* Technical section: sizes, options and material at the foot of the product.
   The heading pair (eyebrow + h2) is the house idiom; the reference site's
   uppercase display heading is not. Tabs are text buttons with an underline,
   44px tall on every viewport. Cards never use fixed pixel columns so the
   grid can never push the page wider than the viewport. */
.pp-tech { border-top: 1px solid var(--pp-line); padding: 51px 0 60px; }
.pp-tech-heading { display: block; margin-bottom: 26px; text-align: center; }
.pp-tech-heading .pp-eyebrow { margin-bottom: 10px; }
.pp-tech-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--pp-line); }
.pp-tech-tab { min-height: 48px; padding: 12px 4px; border: 0; background: none; color: var(--pp-muted); font: 600 12px/1.4 var(--font-display-sans); letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer; }
.pp-tech-tab:hover { color: var(--pp-ink); }
.pp-tech-tab[aria-selected="true"] { color: var(--pp-ink); box-shadow: inset 0 -2px 0 var(--pp-olive); }
.pp-tech-tab:focus-visible, .pp-tech-panel:focus-visible { outline-offset: -4px; }
.pp-tech-solo { margin: 0 0 20px; text-align: center; font: 600 12px/1.4 var(--font-display-sans); letter-spacing: 1.6px; text-transform: uppercase; }
.pp-tech-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 240px)); justify-content: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.pp-tech-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 20px; border: 1px solid var(--pp-line); border-radius: calc(11px * var(--corner-scale, 1)); background: var(--theme-band); text-align: center; }
.pp-tech-card[aria-current="true"] { border-color: var(--pp-olive); box-shadow: inset 0 0 0 1px var(--pp-olive); }
.pp-tech-card h4 { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.pp-tech-raw { margin: 0; color: var(--pp-muted); font-size: 13px; }
/* Overrides the 22px icon rule every svg on this page inherits. */
.pp-tech-drawing { width: 100%; max-width: 200px; height: auto; margin-inline: auto; stroke: var(--pp-ink); stroke-width: 1; }
.pp-tech-drawing .pp-tech-face-top { fill: var(--theme-card); }
.pp-tech-drawing .pp-tech-face-side { fill: #e6ddcf; }
.pp-tech-drawing .pp-tech-face-front { fill: var(--accent-soft); }
.pp-tech-drawing .pp-tech-dim { stroke: var(--pp-olive); stroke-dasharray: 3 3; }
/* The drawing is 200px wide at most, so 13 units render at about 11px on
   every screen — the page's smallest text size; 11 units gave 9px. */
.pp-tech-drawing text { stroke: none; fill: var(--pp-muted); font: 500 13px var(--font-display-sans); }
.pp-tech-dims { margin: 0; font-size: 13px; text-align: left; }
.pp-tech-dims > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--pp-line); }
.pp-tech-dims dt { color: var(--pp-muted); }
.pp-tech-dims dd { margin: 0; text-align: right; white-space: nowrap; }
.pp-tech-note { max-width: 560px; margin: 22px auto 0; text-align: center; color: var(--pp-muted); font-size: 13px; line-height: 1.75; }
.pp-tech-lead { margin-top: 0; margin-bottom: 18px; }
/* Options are a reflection of the choice made in the purchase panel, so they
   are rows, not cards: nothing here should look like a second control. */
.pp-tech-options { max-width: 560px; margin: 0 auto; padding: 0; list-style: none; font-size: 14px; }
.pp-tech-options > li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--pp-line); text-align: left; }
.pp-tech-options > li:last-child { border-bottom: 1px solid var(--pp-line); }
.pp-tech-options > li[aria-current="true"] { color: var(--pp-ink); }
.pp-tech-option-name { flex: 0 1 auto; }
.pp-tech-option-size { flex: 1 1 auto; color: var(--pp-muted); overflow-wrap: anywhere; }
.pp-tech-option-price { display: inline-flex; align-items: baseline; gap: 10px; margin-left: auto; }
.pp-tech-options strong { font-weight: 500; white-space: nowrap; }
.pp-tech-stock, .pp-tech-current { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-strong); white-space: nowrap; }
/* Every row carries the slot, filled on the chosen row only, so the price
   column keeps one edge whether or not a row is marked. */
.pp-tech-current { min-width: 46px; text-align: right; }
.pp-tech-dot { flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid #0002; border-radius: 50%; background: var(--swatch, var(--pp-line)); }
.pp-tech-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 22px; padding: 10px 18px; border: 1px solid var(--pp-line); border-radius: var(--button-radius, 30px); color: var(--accent-strong); font-size: 13px; text-decoration: none; }
.pp-tech-cta:hover { background: var(--accent-soft); }
#pp-tech-panel-secenek { text-align: center; }
.pp-tech-rows { max-width: 520px; margin: 0 auto; font-size: 14px; }
.pp-tech-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--pp-line); }
.pp-tech-rows dt { color: var(--pp-muted); flex: 0 0 auto; }
.pp-tech-rows dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.pp-tech-swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.pp-tech-swatch { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 96px; font-size: 12px; color: var(--pp-muted); overflow-wrap: anywhere; text-align: center; }
.pp-tech-swatch > span { width: 56px; height: 56px; border: 1px solid #0002; border-radius: 50%; background: var(--swatch, var(--pp-line)); }
.pp-tech-swatch[aria-current="true"] { color: var(--pp-ink); }
.pp-tech-swatch[aria-current="true"] > span { box-shadow: 0 0 0 2px var(--pp-paper), 0 0 0 3px var(--pp-olive); }
.pp-footer { border-top: 1px solid var(--pp-line); display: grid; grid-template-columns: 1fr auto; gap: 30px; padding-block: 36px 25px; }
.pp-footer .pp-wordmark { font-size: 29px; }
.pp-footer p { margin: 16px 0 0; color: var(--pp-muted); font-size: 12px; }
.pp-footer nav { display: flex; gap: 25px; align-items: flex-start; }
.pp-footer nav a { min-height: 44px; padding-top: 7px; font-size: 13px; }
.pp-footer .pp-disclosure { grid-column: 1/-1; margin: 0; padding-top: 23px; border-top: 1px solid var(--pp-line); font-size: 11px; }
dialog { border: 1px solid var(--pp-line); padding: 0; color: var(--pp-ink); background: var(--pp-paper); }
dialog::backdrop { background: #292c24b8; backdrop-filter: blur(5px); }
.pp-cart { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: calc(14px * var(--corner-scale, 1)) 0 0 calc(14px * var(--corner-scale, 1)); overflow: hidden; }
.pp-cart[open] { display: flex; flex-direction: column; }
.pp-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 0 0 auto; padding: 27px; border-bottom: 1px solid var(--pp-line); }
.pp-drawer-header .pp-eyebrow { margin-bottom: 8px; }
.pp-drawer-header h2 { font-size: 32px; margin: 0; letter-spacing: -1px; }
.pp-cart-items { flex: 1; min-height: 0; overflow-y: auto; padding-inline: 27px; }
.pp-cart-item { position: relative; display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 18px; padding-block: 24px; border-bottom: 1px solid var(--pp-line); }
.pp-cart-item > picture, .pp-cart-item > picture img { width: 80px; height: 108px; border-radius: calc(7px * var(--corner-scale, 1)); object-fit: cover; }
.pp-cart-item h3 { font-size: 23px; letter-spacing: -.5px; padding-right: 35px; margin-bottom: 6px; }
.pp-cart-item p { margin-bottom: 8px; font-size: 12px; color: var(--pp-muted); }
.pp-cart-item strong { font-size: 14px; font-weight: 500; }
.pp-cart-quantity { display: flex; align-items: center; gap: 13px; margin-top: 11px; }
.pp-cart-quantity button { width: 44px; height: 44px; border: 1px solid var(--pp-line); border-radius: 50%; font-size: 20px; }
.pp-cart-quantity > span { min-width: 12px; text-align: center; }
.pp-cart-remove { position: absolute; top: 17px; right: -7px; }
.pp-cart-summary { flex: 0 0 auto; padding: 22px 27px max(18px, env(safe-area-inset-bottom, 0px)); background: var(--theme-band); border-top: 1px solid var(--pp-line); }
.pp-cart-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.pp-cart-summary strong { font-size: 24px; font-weight: 450; }
.pp-cart-summary p { font-size: 12px; color: var(--pp-muted); margin: 10px 0 17px; }
.pp-cart-summary > button { display: block; margin: 4px auto 0; }
.pp-cart-empty { padding-block: 55px; text-align: center; }
.pp-cart-empty h3 { font-size: 29px; letter-spacing: -1px; }
.pp-cart-empty p { color: var(--pp-muted); }
.pp-cart-empty > span { display: block; font-size: 48px; color: var(--accent-rule); margin-bottom: 20px; }
.pp-undo { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 27px; padding: 5px 10px 5px 15px; border-radius: calc(8px * var(--corner-scale, 1)); background: var(--accent-soft); font-size: 12px; }
.pp-undo button { min-height: 44px; min-width: 55px; padding: 8px; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 4px; }
.pp-zoom { width: min(1300px, calc(100% - 40px)); max-width: 100%; height: min(900px, 94dvh); max-height: 94dvh; border-radius: calc(12px * var(--corner-scale, 1)); overflow: hidden; }
.pp-zoom[open] { display: flex; flex-direction: column; }
.pp-zoom header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 20px; flex: 0 0 auto; }
.pp-zoom h2 { margin: 0; font-size: 20px; letter-spacing: -.5px; }
.pp-zoom-stage { flex: 1; min-height: 0; overflow: auto; background: #e9e3d8; }
.pp-zoom-stage img { width: 100%; height: 100%; object-fit: contain; }
.pp-zoom > p { flex: 0 0 auto; font-size: 12px; margin: 0; padding: 10px 20px; color: var(--pp-muted); }
.pp-unavailable { max-width: 660px; margin-inline: auto; padding: 90px 0 120px; text-align: center; }
.pp-unavailable > span { display: block; font-size: 70px; color: var(--accent-rule); margin-bottom: 26px; }
.pp-unavailable h1 { font-size: clamp(37px, 6vw, 54px); letter-spacing: -1.6px; }
.pp-unavailable p { color: var(--pp-muted); }
.pp-unavailable .pp-button { max-width: 300px; margin: 29px auto 0; }
.pp-storage-note { position: fixed; bottom: 0; left: 0; right: 0; z-index: 25; padding: 12px 22px; margin: 0; color: var(--accent-strong); background: var(--accent-tint); font-size: 12px; text-align: center; }
.pp-mobile-purchase { display: none; }
#pp-page-end { height: 1px; }
@media (max-width: 900px) {
  .pp-footer { padding-bottom: calc(115px + env(safe-area-inset-bottom, 0px)); }
  .pp-mobile-purchase { position: fixed; inset: auto 0 0; z-index: 22; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px max(var(--pp-gutter), env(safe-area-inset-right, 0px)) max(13px, env(safe-area-inset-bottom, 0px)) max(var(--pp-gutter), env(safe-area-inset-left, 0px)); border-top: 1px solid var(--accent-line); background: rgb(var(--theme-paper-rgb) / .97); box-shadow: 0 -9px 32px #3138230a; backdrop-filter: blur(12px); animation: pp-purchase-enter 180ms ease-out; }
  .pp-mobile-product { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
  .pp-mobile-product strong { font-size: 16px; font-weight: 500; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pp-mobile-product > span { font-size: 13px; line-height: 1.6; color: var(--pp-muted); }
  .pp-mobile-purchase .pp-button { flex: 0 0 auto; width: auto; min-height: 48px; padding: 12px 20px; gap: 20px; }
  #pp-mobile-action-label { font-size: 14px; line-height: 1.5; }
  body.pp-dialog-open .pp-mobile-purchase { display: none; }
  .pp-storage-note { position: static; }
}
@keyframes pp-purchase-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1000px) {
  .pp-header { gap: 20px; }
  .pp-header nav { gap: 23px; }
  .pp-wordmark { font-size: 29px; }
  .pp-layout { gap: 32px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .pp-product-heading { flex-wrap: wrap; gap: 10px; }
  .pp-product-actions { padding-top: 0; }
  .pp-gallery-main { aspect-ratio: .85; }
  .pp-related-grid { gap: 16px; }
  .pp-tech-cards { gap: 16px; }
}
@media (max-width: 760px) {
  /* Equal side columns keep the wordmark centred; "1fr auto auto" pushed it right. */
  /* Side columns never narrower than what they hold. With plain 1fr the right
     column stayed at 74px at 320px while the sign-in link and the cart button
     need 91px, so the actions overflowed leftward under the last letter of the
     wordmark. max-content as the minimum keeps the two sides equal wherever
     they fit and lets only the crowded side grow when they do not; at 320px
     that leaves the wordmark 17px off centre, which is the same trade
     bilgi.html and karsilastir.html already make. */
  .pp-header { height: 68px; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); gap: 13px; }
  .pp-wordmark { font-size: 24px; letter-spacing: -1px; }
  .pp-header nav a { font-size: 12px; }
  .pp-header nav a:not(:first-child) { display: none; }
  .pp-breadcrumb { min-height: 64px; gap: 8px; font-size: 11px; }
  .pp-layout { grid-template-columns: minmax(0,1fr); gap: 27px; padding-bottom: 45px; }
  .pp-gallery { position: static; }
  .pp-gallery-main { aspect-ratio: 1.06; border-radius: calc(11px * var(--corner-scale, 1)); }
  .pp-gallery-foot { font-size: 10px; }
  .pp-copy { padding-top: 0; }
  .pp-product-heading { flex-wrap: nowrap; gap: 16px; }
  .pp-product-heading h1 { font-size: 49px; letter-spacing: -2px; }
  .pp-product-actions { gap: 4px; padding-top: 5px; }
  .pp-price { margin-block: 20px; }
  .pp-description { line-height: 1.8; }
  .pp-specs > div { gap: 18px; }
  .pp-related { padding-block: 34px 40px; }
  .pp-tech { padding-block: 34px 40px; }
  .pp-tech-heading { margin-bottom: 18px; }
  /* The shared section-heading rule caps h2 at 310px for the related grid,
     which would leave this centred heading sitting left of centre. */
  .pp-tech .pp-tech-heading h2 { max-width: none; }
  .pp-tech-tabs { gap: 0 18px; margin-bottom: 22px; }
  .pp-tech-tab { min-height: 44px; padding-inline: 2px; font-size: 11px; letter-spacing: 1.3px; }
  /* Two columns when two cards fit, one column for a lone card or a narrow
     screen: a fixed two-column grid parked a single card on the left half. */
  .pp-tech-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
  .pp-tech-card { gap: 14px; padding: 14px 12px; }
  .pp-tech-card h4 { font-size: 14px; }
  .pp-tech-dims { font-size: 12px; }
  .pp-tech-dims dd { white-space: normal; }
  .pp-tech-options { font-size: 13px; }
  .pp-tech-options > li { flex-wrap: wrap; gap: 8px 12px; }
  .pp-tech-swatch { min-width: 80px; }
  .pp-section-heading { display: block; margin-bottom: 18px; }
  .pp-section-heading h2 { font-size: 30px; max-width: 310px; }
  .pp-section-heading > a { display: inline-flex; align-items: center; margin-top: 10px; }
  .pp-related-grid { display: flex; overflow-x: auto; gap: 14px; padding: 2px 0 7px; scroll-snap-type: x mandatory; }
  .pp-related-card { flex: 0 0 77%; scroll-snap-align: start; }
  .pp-related-card picture { aspect-ratio: 1.3; }
  .pp-related-card:focus-visible { outline-offset: -4px; }
  .pp-footer { grid-template-columns: 1fr; gap: 20px; padding-top: 30px; }
  .pp-footer nav { flex-wrap: wrap; gap: 20px; }
  .pp-footer .pp-disclosure { font-size: 11px; }
  .pp-cart { border-radius: 0; }
  .pp-drawer-header, .pp-cart-summary { padding-inline: 22px; }
  .pp-cart-items { padding-inline: 22px; }
  .pp-cart-item { gap: 15px; }
  .pp-undo { margin-inline: 22px; }
  .pp-zoom { width: calc(100% - 20px); }
  .pp-zoom header { padding-inline: 14px; }
}
@media (max-width: 370px) {
  /* Tighter tracking keeps the three tab labels on one line at 320px; on a
     second line the selected underline would float above the list's rule. */
  .pp-tech-tabs { gap: 0 12px; }
  .pp-tech-tab { letter-spacing: 1px; padding-inline: 0; }
  :root { --pp-gutter: 18px; }
  .pp-header { gap: 8px; }
  .pp-wordmark { font-size: 22px; }
  .pp-product-heading { gap: 10px; }
  .pp-product-heading h1 { font-size: 44px; }
  .pp-product-type { font-size: 14px; }
  .pp-product-actions { flex-direction: column; padding-top: 0; }
  .pp-cart-item { grid-template-columns: 67px minmax(0,1fr); gap: 13px; }
  .pp-cart-item > picture, .pp-cart-item > picture img { width: 67px; height: 97px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .pp-header { height: 60px; }
  .pp-breadcrumb { min-height: 54px; }
  .pp-gallery { top: 76px; }
  .pp-gallery-main { aspect-ratio: 1.45; }
  .pp-drawer-header { padding-block: 12px; }
  .pp-drawer-header .pp-eyebrow { display: none; }
  .pp-cart-summary { padding-block: 11px; }
  .pp-cart-summary p { margin-block: 4px 8px; font-size: 11px; }
  .pp-cart-summary > button { display: none; }
  .pp-zoom header { padding-block: 5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }